|
CSS - Help! 3 Nested Div Boxes, If 1 Gets Longer Others Should Follow.
As box1 is filled with content I need box 2 & 3 to stretch to the same height, and so on for box 2 & 3.
view page: http://www.franklandmedia.com/test <html> <head> <title>nothin</title> <style type="text/css"> <!-- body { text-align: center; margin: 0px; padding: 0px; min-width:780px; /* stop mozilla sliding off the edge */ } .central { margin-right: auto; margin-left: auto; position: relative; width: 780px; text-align: left; } #container { float: none; margin: 0 auto; width: 780px; text-align: left; } #top { float: left; width: 780px; background-color: #DDD; } #navbar { float: left; width: 780px; background-color: #EEE; } #middle { float: left; width: 780px; } #footerblock { float: left; width: 780px; background-color: #666; } #box1, #box2, #box3 { float: left; width: 260px; } #box1 { background-color: #AAA; } #box2 { background-color: #BBB; } #box3 { background-color: #CCC; } --> </style> </head> <body><div class="central"> <!--*******page content start*******--> <div id="container"> <div id="top">top</div> <div id="navbar">navbar</div> <div id="middle"> <div id="box1">box1<br>box1<br>box1</div> <div id="box2">box2</div> <div id="box3">box3</div> </div> <div id="footerblock">footer</div> </div> <!--*******page content end*******--> </div></body></html> Similar Tutorialshey all, i have a very wierd problem! Im no CSS guru but i thought i could get this right i have two divs that should both be 100% so i have set them to width:100% BUT....in both Moz FF and IE there is a difference... it is less noticable in IE than in FF but still, not great and kinda wierd!! can anyone adise me please? here is the code Code:
#TitleBar {
position:absolute;
top: 0px;
left: 0px;
/*margin: 0px 0px 10px 0px;*/
padding: 0px 0px 0px 0px;
padding-left:10px;
width:100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:170px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color: #A4AA54;
border-top: 1px #A4AA54 solid;
border-bottom: 1px #A4AA54 solid;
border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
background-color:#A4AA54;
background-image:url(../images/logo/gglogo.JPG);
background-position: 1% 2px;
background-repeat:no-repeat;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:170px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}
#MenuBar {
position:absolute;
top: 137px;
left:0px;
width:100%;
padding:15px;
background-color:#667138;
border-bottom:1px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%;}
thanks in advanced RF Hi, I'm pretty new to this so not 100% sure what I'm talking about. I'm trying to complete a university project, in order to do so I have to move images using a style sheet and have done so successfully so far but today when trying to move my rollovers the stylesheet didnt move my images. Previous images I moved worked but the new ones dont. Any help would be greatly appreciated! Thanks! My site can be seen he pioneer.nic.edu/~mdmoffet/index.html The CSS is located at pioneer.nic.edu/~mdmoffet/church.css The problem is pretty apparent if you look at the page - the text flows down and beyond the div it is in, and the background/border of the div just randomly stops. I've put height:100% and min-height:100% in all parent elements for it, but that doesn't seem to be working as I expected it to. I'm honestly not sure what to do at this point - if the text is less than the viewport, the div will cover the full length like it is supposed to, it just seems to break at a certain length. Both my html and my css validate. Any ideas? Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser). Anyone any ideas what could be causing this, or a solution to this problem? Many thanks Please let me know if i've posted in the wrong forum... and I apologize in advance in case I have. I've built a site using Apache and PHP. On my local laptop, (which is windows xp professional) everything looks great and my styles are being picked up. When i copy my code over to our unix server, none of the styles are being picked up. I know that Unix is case sensitive but the part thats "failing" is the proper case. I'm not sure what else I can check for.... here's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>test.ca</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF" text="#404040" link="#0000FF" vlink="#990099" MARGINWIDTH="1" MARGINHEIGHT="1" TOPMARGIN="1" LEFTMARGIN="1" RIGHTMARGIN="1"> <link type="text/css" href="style/menu.css" rel="stylesheet"> <link type="text/css" href="style/gencontent.css" rel="stylesheet"> And in my gencontent.css, i have the following entry for the BODY tag: Code: body{
list-style: none inside;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #D2E2F0;
}
ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx well if i dont put any css firefox does this with nested link: Code:
link1
link2
sublink1
IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself Hi All, I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd
{
border: 1px solid #fff;
width: 125px;
height: 125px;
margin-top: 35px;
margin-right: 28px;
float: left;
}
The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! I am trying to figure out how to use the clear functionality nested within divs. I am already using floats to position 3 columns for the layout, but would like to use the clear functionality to help with form placement in the second column. The problem is, even though it is nested with a div dedicated to the center column, it still uses the right and left column to judge clears...thus its all pushed below the right and left column. Any ideas? I have a div: .gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;} and inside I have: .galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;} .spacer{clear:both;} Used to give height to the container div. The idea is to create and even sized box for varying jpgs. How do I get the inside divs to space themselves out evenly across the space? AND the get the jpg to align itself in the middle of its containing div? Thanks. Hi All, I have the following html: Code: <div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=3" alt="My Biz" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=3">
My Biz
</a>
<p>
my biz
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
<div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=4" alt="My Second Business" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=4">
My Second Business
</a>
<p>
My second business
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
And the following CSS that applies: Code: div.businessItem
{
background-color: #66cc66;
margin-bottom: 10px;
width: 100%;
padding: 10px 10px 10px 10px;
}
div.bizIcon
{
float: left;
width: 64px;
margin: 0px 10px 0px 0px;
}
div.bizInfo
{
float: left;
width: 256px;
}
div.bizContact
{
float: left;
width: 256px;
}
now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning). Is it psosible to have IF statements with CSS? Example: IF table.length = 500px then bg.image = xx else if table.length < 500px bg.image = xx Thanks I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css |
|||||||