Menu
I'm making a template for a website and I'm getting some issues with some very basic CSS.
Basically, I'm trying to divide the site up into sections using div elements, and I want each section to contain a semi-transparent black background with a completely transparent border around it.
The idea is that there is a background image and there would be news-items sectioned off into black blocks that don't actually touch or overlap each other (that is to say, they have margins around them). The black blocks are slightly see-through and the areas between them (which will be a few pixels in size) are empty of content and you can just see the background.
What I have so far is as follows:
The site:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mainPage.css" />
<title>Some site</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="images/SomeImage.bmp" alt="ImageName"/>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft1 </p>
</div>
</div>
<div class="randomBlockRight">
<h1> Heading test</h1>
<p> randomBlockRight </p>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft2 </p>
</div>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft3 </p>
</div>
</div>
<div class="menuStrip">
<p> menuStrip </p>
</div>
<div class="sectionedNews">
<p> sectionedNews </p>
</div>
<div class="disclaimer">
<p> disclaimer </p>
</div>
</div>
</body>
The relevant CSS code:
html, body {padding: 0px; margin: 0px; height: 100%;}
body
{
background-color:white;
font-size:100%;
background-image:url('images/Famicom cartridges.jpg');
background-attachment:fixed;
}
h1
{
background-color:transparent;
color:#8B0000;
}
/* Link style */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* Classes */
.container
{
background-color:beige;
width: 1020px;
margin: 0 auto;
}
.transDiv
{
position:relative;
float:left;
color:white;
width:100%;
height:100%;
background-color: black;
opacity: 0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
.header
{
height: 120px;
width: 100%;
background-color: black;
margin: 0 auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.latestBlockLeft
{
/* padding-top:3px;
padding-right:3px; */
height: 170px;
width: 70%;
/* background-color: yellow;*/
float: left;
}
.randomBlockRight ........... and so on
What keeps happening if I try and use margins is that the margin goes around the div division and pushed my other elements all over the place on the page. I could make this using exact pixel sizes for each element, but I want to be able to say that a div block takes up 70% of my main container div width and has Xpix empty see through margins inside that box. I don't want my transparent background appearing in these places. How does one do this? Am I even taking the correct design approach altogether?
Thanks!
470
Solutions with CSS Here, we add the width of the parent container and specify its background-color and margin as well. In the parent container, we also have another <div> with a class “wrap”, for which we use the “relative” value of the position property. For the child element, we set the position to “absolute”.
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
<div id="parent"><div id="child"></div></div>
1) The parent div must have "position: absolute" or "position: relative". Then you can do this:
#parent {
display: block;
position: relative;
}
#child {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: -10px; // HERE IS THE TRICK!
left: 0;
}
With this solution, the size of the parent will set the size of the child!
If you want the child to have a relative height to the parent, you can give him height:, etc params just so as here.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
