All geek questions in one place

CSS: creating the height and width of a child-div element. X pixels are smaller than the parent element.

I am creating a template for a website and I am having some problems with some very simple CSS.

Basically, I am trying to divide a site into sections using div elements, and I want each section to contain a translucent black background with a completely transparent border around it.

The idea is that there is a background image, and in blocks that do not actually touch each other or overlap with each other (that is, they have fields around them), news items will be highlighted. The black blocks are a bit transparent, and the areas between them (a few pixels in size) are empty of the content, and you can just see the background.

So far, I have been as follows:

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>

Corresponding 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 happens if I try to use margins is that the margin extends to div division and pushes my other elements throughout the page. I could do this using exact pixel sizes for each element, but I want to say that the div block occupies 70% of my main container width and has Xpix empty, looking at the fields inside this field. I do not want my transparent background to appear in these places. How to do it? Can I even take the right approach to development?

Thanks!

+4
source share
1 answer
 <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 the relative height of the parent, you can tell him height :, etc params, as here.

+2
source

Source: https://habr.com/ru/post/1381211/

More articles:


All Articles