|
CSS - Inner Div Not Shrinking With Outer Div
I'm testing this page in FF 3.6, so at the moment, I don't really care what doesn't work in IE.
As you can see in the code below, my page consists of a couple wrapper divs around a menu and info area. I did solid color backgrounds in the code below rather than the images I've been using to make this simpler to look at. Essentially, the outer wrappers allow part of the background image of the inner wrapper to disappear when the window is too small. In addition to that functionality, I also want the info area to shrink when the window gets even smaller than that. As it is currently, that almost works--the two wrappers shrink when I get below their max-width, but the info area does not shrink until the window is well within its max-width. Here's the code: Code: <html>
<head>
<style type="text/css">
body{
text-align: center;
}
#container {
background-color: red;
max-width:990px;
min-width:760px;
position: relative;
margin: 0 auto;
}
#content{
background-color: lightblue;
max-width:990px;
min-width:760px;
margin: 0 auto;
margin-left: -200px;
padding-left: 200px; /**allows 200px of background to disappear when window too small**/
text-align: left;
}
#menu{
background-color: #ffffcc;
width: 200px;
position: absolute;
left: -20px; /**allows hangover into disappearing background--no padding necessary since will be using img links**/
}
#info{
border: #000 1px solid;
max-width: 790px;
min-width:560px;
/**doesn't shrink when window below the max, even though container and content do**/
position: relative;
left: 180px; /**width of menu plus menu left **/
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="menu">
<img height="50" width="200" alt="link" /><br />
<img height="50" width="200" alt="link" /><br />
</div>
<div id="info">
<img height="500" width="400" alt="picture" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Edit: I've found that if I make the menu relative positioned and position info absolute (and add top: 0px;) that I can get info to shrink properly. However, then the background from content is only as tall as the menu--which may or may not be shorter than the content in info. If I make the height of content 100% it looks ok, but not the way I'd like it to look. I can live with the extra background under the words in the case where there isn't enough to fill the whole height of the window, but if the window isn't tall enough for all the stuff in info, the background doesn't extend down far enough. Thanks for any ideas! Similar Tutorialsi need to shrink a div to the width of the text inside of it, i have no clue how to do this, i know i can display:inline, but then the form that it in the div gets left out, and i know i can float: it, but i want it to be centered. how can i do this Hi, I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website. Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site. I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma. I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot? Any ideas? pe123 I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE .. Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background .. Here the html and css <body> <div id="logoheader"> <img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" /> <img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" /> </div> </body> </html> ------------------------ the css ------------------------ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color : #FFFFFF ; } #logoheader { background: url(../images/stlaware_03.png) repeat; height: 90px; width: 100%; } How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width? Thanks .. Bill Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! Hi, I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks HI, Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go). The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet. (URL address blocked: See forum rules) The CSS is embedded in the head of the page. Any help is much appreciated, Regards Fiona Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. |
|||||||