|
| |
|
|
Atlantis
Posts: 13
Joined: 10/28/2004
Status: offline
 |
Clearing div? - 10/28/2004 8:13:18
Hi all, if someone here could help out I'd be eternally grateful. :)
I'm having some problems getting my head around clearing divs – well, I actually think I understand how they work, but it's knowing exactly where to implement them that eludes me.
So here is an example of the site I'm working on: http://atlantis.plastiqueweb.com/2005-4/
All of the container divs have a coloured border to make it easier for me to follow what's going on.
Before I added a clearing div just before the main content-container div closed, the red line didn't go all the way down around the content text. I believe this is because both the left column and the right column had a float: left; statement in the CSS, and so I had to clear these so that the content-container would close around them. That seemed to have worked.
But I want the left column to go all the way down to the bottom of where the right column text ends as well. I'm using another div to hold the navigation links so do I need another clearing div at some point in the left column too?
Once I have an answer to that first part, the next part would be whether or not I need a clearing div after the right column at all? Because I'm going to be adding a footer underneath as well in line with this screenshot, and according to a tutorial I'm following I should just put a clear; both; statement in the CSS of the #footer property and all will be well. Or have I done things right the way I've done it so far?
Please, any help or advice would be appreciated. :)
My code is as follows:
<!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>Atlantean Records .: extant music beyond existence</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="author" content="Atlantis" />
<meta name="description" content="Welcome to the website of Atlantean Records, home of mixing engineer/music producer Atlantis. Here you can find up-to-date info on remix and production progress, track listings and audio clips to download, and tutorials devoted to all aspects of production." />
<meta name="keywords" content="atlantean,Atlantean Records,Atlantis,artist,artists,audio,audio clips,audio production,community,computer music,deep house,deep trance,download,downloads,electronic,electronica,extant music beyond existence,house,instrumental,internet label,label,mastering,mastering tutorials,mixing,mixing tutorials,mp3,music,music community,music producing,music production,music tutorials,net label,new age,online label,online record label,ogg,Peter van der Linde,producer,producers,producing,production,production tutorials,progressive,progressive house,Rachel Symons,Rachel Symons-Ross,record label,remix,remixes,Renoise,studio,Ta-Neteru,techno,tech-house,tek-house,The Awakening,The Land of the Gods,tracking,tracking tutorials,tutorials,trance,vocal,white label,whitelabel" />
<meta name="revisit" content="14 days" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" media="all" title="Default" href="css/default.css" />
</head>
<body>
<div id="container">
<img src="images/layout/navigation_button-rollover.png" width="0" height="0" alt="Navigation button" />
<h1>Atlantean Records</h1>
<div id="menu-container"></div>
<div id="status_overlay"></div>
<div id="image"></div>
<div id="left_column">
<div id="navigation-container">
<ul>
<li><a href="#">Announcements</a></li>
<li><a href="#">Tracking</a></li>
<li><a href="#">Mixing</a></li>
<li><a href="#">Mastering</a></li>
</ul>
</div>
</div>
<div id="right_column">
<h2>Atlantean Records</h2>
<p>
<img width="300" height="84" src="images/photos/sunrise.png" class="image-right" alt="Sunday. Sunrise. Looking out across the bay." />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a pede. Quisque elementum ipsum eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque faucibus congue turpis. Sed rhoncus, quam in varius condimentum, turpis ante ullamcorper orci, eu cursus risus turpis ut lacus. Maecenas eget mauris. Pellentesque molestie iaculis ligula. Duis mauris. In suscipit. Nulla facilisi. Nunc feugiat. Maecenas sagittis dolor in nisl. Quisque consectetuer metus a mauris. Cras dictum, leo a iaculis vulputate, sapien neque porttitor sem, at volutpat purus elit a enim. Sed congue velit et magna. Phasellus enim augue, vulputate euismod, ultrices eget, adipiscing ut, turpis. Donec adipiscing commodo nulla. Suspendisse potenti. Etiam posuere metus eget purus. Nunc nisl.
</p>
<p>
Nam dignissim urna eu arcu. Nullam facilisis, orci a lacinia dictum, justo magna facilisis libero, in pretium eros erat et urna. Sed eu ipsum eget mauris iaculis cursus. Aenean dapibus quam a dolor. In placerat enim ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla cursus vulputate nulla. Etiam hendrerit. Curabitur lectus mi, cursus non, condimentum sit amet, malesuada at, nibh. In venenatis leo sit amet neque luctus facilisis. Vivamus enim nisl, porttitor eu, ultrices eget, tempus ac, erat. Nunc est. Morbi ullamcorper luctus tortor. In non pede ac tellus vulputate tristique. Donec dignissim fermentum enim. Nullam id nibh ut eros vehicula auctor. Sed lobortis sapien quis lacus. Phasellus eu lorem sed pede nonummy vehicula. Sed sodales erat nec mi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam metus, venenatis vel, hendrerit vitae, commodo vel, libero. Vivamus eget odio et dolor malesuada luctus. Ut rhoncus ullamcorper sapien. Proin id leo. Praesent ultrices, nibh sit amet blandit commodo, leo dolor posuere est, in elementum diam enim nec tellus. Etiam felis nibh, accumsan commodo, feugiat consectetuer, scelerisque in, ligula. Etiam facilisis rutrum sapien. Morbi et nulla vel est tincidunt viverra. Fusce vel eros ac est mollis fringilla. Donec placerat condimentum ligula. Proin vel augue. Aenean tristique, felis ut consectetuer scelerisque, tortor wisi nonummy tortor, eget euismod felis nisl sed metus. In non felis sit amet mauris viverra rutrum. Maecenas ornare nisl ut wisi. Phasellus elementum sem convallis purus.
</p>
</div>
<div class="clear"> </div>
</div>
</body>
</html>
body {
background: #E3E1DE url(../images/layout/background.png) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
font: 11px Tahoma, sans-serif;
color: #1C1C1C;
}
a:link, a:visited {
color: #8F8C89;
text-decoration: underline;
}
a:hover, a:active {
color: #8F8C89;
background-color: #F7F6F5;
text-decoration: underline;
}
#container {
width: 762px;
margin: 0px auto;
border: 1px solid #FF0000;
}
h1 {
height: 36px;
text-indent: -9999px;
background: #1C1C1C url(../images/layout/title.png) no-repeat;
margin: 0;
padding: 0;
}
#menu-container {
width: 762px;
height: 33px;
background: #EDEDED url(../images/layout/menu-background.png) no-repeat;
border: 1px solid #0000FF;
}
#status_overlay {
height: 21px;
background: #FFFFFF url(../images/layout/status_overlay.png) no-repeat;
}
#image {
width: 762px;
height: 156px;
background: #FFFFFF url(../images/layout/atlantis.png) no-repeat;
}
#left_column {
width: 170px;
background: #F7F6F5 url(../images/layout/left_column-background.png) repeat-y;
}
#navigation-container {
width: 170px;
float: left;
border: 1px solid #00FF00;
}
#navigation-container ul {
margin: 0;
padding: 0;
list-style-type: none;
text-indent: 24px;
font-weight: bold;
}
#navigation-container a {
width: 170px;
height: 23px;
display: block;
}
#navigation-container a:link, #navigation-container a:visited {
background: #EBEAE8 url(../images/layout/navigation_button.png) no-repeat;
color: #303030;
text-decoration: none;
}
#navigation-container a:hover, #navigation-container a:active {
background: #EBEAE8 url(../images/layout/navigation_button-rollover.png) no-repeat;
color: #303030;
text-decoration: none;
}
#right_column {
width: 500px;
padding: 7px 6px 0 10px;
float: left;
}
#right_column h2 {
margin: 0;
font: bold 11px Tahoma, sans-serif;
text-decoration: underline;
}
.image-right {
padding: 3px;
margin-left: 11px;
border: 1px solid #C7C7C7;
float: right;
}
.clear {
clear: both;
}
Also if you notice I've done anything else wrong, please let me know.
|
|
|
|
Atlantis
Posts: 13
Joined: 10/28/2004
Status: offline
|
RE: Clearing div? - 10/28/2004 9:41:01
I have an update now: http://atlantis.plastiqueweb.com/2005-5/
I think I managed to get the clearing div after the content text sorted now, and the footer is working properly as well.
So that leaves the problem with the left column: how do I get this to go all the way down to the footer as well? I also have a left_column-bottom div that should be displaying a 9px high blue region underneath the navigation buttons, but why isn't this showing? Where do I need to put a clearing div if that's the case? Wherever I put it, the content text then moves to the left of the page, undernearth the left column, but the left column still doesn't go all the way down.
Lastly, and maybe related, how can I centre the text on the navigation buttons vertically without the buttons being spaced apart as well?
Here is the updated code if anyone can help:
<body>
<div id="container">
<img src="images/layout/navigation_button-rollover.png" width="0" height="0" alt="Navigation button" />
<h1>Atlantean Records</h1>
<div id="menu-container"></div>
<div id="status_overlay"></div>
<div id="image"></div>
<div id="left_column">
<div id="left_column-top"></div>
<div id="navigation-container">
<ul>
<li><a href="#">Announcements</a></li>
<li><a href="#">Tracking</a></li>
<li><a href="#">Mixing</a></li>
<li><a href="#">Mastering</a></li>
</ul>
</div>
<div id="left_column-bottom"></div>
</div>
<div id="right_column">
<h2>Atlantean Records</h2>
<p>
<img width="300" height="84" src="images/photos/sunrise.png" class="image-right" alt="Sunday. Sunrise. Looking out across the bay." />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ultricies nibh. Nam interdum leo non urna. Nullam varius, felis ut auctor consectetuer, tortor ligula consequat magna, vitae dictum purus turpis at lectus. In bibendum imperdiet elit. Suspendisse justo massa, rutrum at, adipiscing sit amet, malesuada sed, turpis. Integer et sapien quis wisi ornare convallis. Integer at neque. Integer a pede. Integer mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sed nunc. Mauris iaculis turpis imperdiet metus. Sed velit metus, aliquam vitae, egestas vitae, condimentum eu, justo.
</p>
<p>
Morbi dui felis, porta in, pellentesque id, dictum id, ante. Cras tincidunt, magna vel tempor ultricies, arcu ante placerat tortor, eu consequat ipsum nulla ac augue. Aenean pulvinar facilisis libero. Vestibulum vehicula elit sed turpis. Integer lorem est, lacinia eget, pretium sit amet, varius sed, sapien. Nam vestibulum. Duis euismod justo sit amet urna. Fusce in urna ut ante porttitor vulputate. Nullam pulvinar hendrerit neque. Vivamus egestas consequat odio. Cras sagittis adipiscing leo. Integer elit massa, aliquam eget, tincidunt nec, venenatis nec, dolor. Aliquam vestibulum sem nec massa. Proin nec tellus. Proin justo. Sed dolor. Phasellus rhoncus sem iaculis lectus. Proin quis orci nec velit egestas posuere.
</p>
<p>
Etiam vel lacus. In fringilla felis vel nunc. Quisque quam tellus, accumsan eget, convallis sit amet, mattis vitae, tortor. Suspendisse potenti. Nullam pellentesque semper erat. Sed ornare lacus eget tellus. Aliquam in velit sit amet eros lacinia suscipit. Praesent leo. Ut eros justo, egestas vel, viverra id, facilisis eget, mi. Curabitur neque. Sed sapien. Praesent aliquam ligula sed dui. Donec libero erat, tincidunt quis, pharetra id, mattis eu, turpis. Sed nulla mi, hendrerit quis, semper non, malesuada quis, mauris. In feugiat, leo eu facilisis dictum, libero nulla lacinia orci, non sagittis lorem massa vel lacus. Nullam nonummy est sit amet enim. Etiam rutrum faucibus diam. Fusce a sapien ut nibh consequat consectetuer. Fusce euismod tellus a nulla.
</p>
<p>
Curabitur fermentum fringilla ipsum. Nam ultricies, arcu in laoreet accumsan, dui leo vulputate arcu, at pellentesque elit mauris a nisl. Curabitur sodales consectetuer turpis. Nam scelerisque diam vitae metus. Suspendisse lobortis malesuada turpis. Mauris ac erat. Integer massa leo, vehicula in, mollis molestie, malesuada vitae, nibh. Etiam libero orci, condimentum eu, rutrum eu, convallis et, lorem. Ut iaculis, justo vitae ultrices placerat, sapien magna rutrum risus, a iaculis dolor massa a odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas urna. Nulla quis nulla. Aliquam erat volutpat. Integer ultricies sagittis turpis. Fusce ut lorem vel arcu faucibus dignissim.
</p>
<p>
Nulla ultricies accumsan massa. Nulla facilisi. Maecenas sed urna. Donec ultricies urna et est lobortis convallis. Duis sem turpis, malesuada eu, elementum nec, gravida quis, tellus. Nullam tempus, odio ac mattis varius, mi nulla vulputate massa, ultrices vulputate nibh est ac lorem. Nunc purus mauris, sagittis nec, sagittis sed, vestibulum vel, nibh. Praesent vulputate feugiat felis. Fusce a nibh. Morbi ut felis. Cras sit amet lectus accumsan massa scelerisque rutrum. Proin sapien magna, accumsan id, euismod a, pellentesque et, nulla. Ut mi lacus, egestas a, malesuada eu, ornare sit amet, mi. Aliquam diam ipsum, pulvinar id, condimentum ac, luctus non, purus. Ut ipsum neque, volutpat in, facilisis sed, rutrum eget, nulla. Quisque risus turpis, rhoncus sed, tempor at, interdum at, arcu. Cras adipiscing ante ut sapien. Maecenas rhoncus.
</p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<h5>Copyright ©2004-2005 | Atlantean Records | Hosting by PlastiqueWeb | <a href="http://www.plastiqueweb.com/">www.plastiqueweb.com</a> | <a href="http://validator.w3.org/check/referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></h5>
</div>
</body>
body {
background: #E3E1DE url(../images/layout/background.png) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
font: 11px Tahoma, sans-serif;
color: #1C1C1C;
}
a:link, a:visited {
color: #8F8C89;
text-decoration: underline;
}
a:hover, a:active {
color: #8F8C89;
background-color: #F7F6F5;
text-decoration: underline;
}
#container {
width: 762px;
margin: 0px auto;
border: 1px solid #FF0000;
}
h1 {
height: 36px;
text-indent: -9999px;
background: #1C1C1C url(../images/layout/title.png) no-repeat;
margin: 0;
padding: 0;
}
#menu-container {
height: 33px;
background: #EDEDED url(../images/layout/menu-background.png) no-repeat;
border: 1px solid #0000FF;
}
#status_overlay {
height: 21px;
background: #FFFFFF url(../images/layout/status_overlay.png) no-repeat;
}
#image {
width: 762px;
height: 156px;
background: #FFFFFF url(../images/layout/atlantis.png) no-repeat;
}
#left_column {
width: 170px;
background: #F7F6F5 url(../images/layout/left_column-background.png) repeat-y;
}
#left_column-top {
height: 7px;
background: #FF0000 url(../images/layout/left_column-background-top.png) no-repeat;
}
#left_column-bottom {
height: 9px;
background: #0000FF url(../images/layout/left_column-background-bottom.png) no-repeat;
}
#navigation-container {
width: 170px;
float: left;
border: 1px solid #00FF00;
}
#navigation-container ul {
margin: 0;
padding: 0;
list-style-type: none;
text-indent: 24px;
font-weight: bold;
}
#navigation-container a {
width: 170px;
height: 23px;
display: block;
}
#navigation-container a:link, #navigation-container a:visited {
background: #EBEAE8 url(../images/layout/navigation_button.png) no-repeat;
color: #303030;
text-decoration: none;
}
#navigation-container a:hover, #navigation-container a:active {
background: #EBEAE8 url(../images/layout/navigation_button-rollover.png) no-repeat;
color: #303030;
text-decoration: none;
}
#right_column {
width: 500px;
padding: 7px 6px 0 10px;
float: left;
}
#right_column h2 {
margin: 0;
font: bold 11px Tahoma, sans-serif;
text-decoration: underline;
}
.image-right {
padding: 3px;
margin-left: 11px;
border: 1px solid #C7C7C7;
float: right;
}
.clear {
clear: both;
}
#footer {
width: 762px;
height: 50px;
margin: 0px auto;
position: relative;
background: #EDEDED url('../images/layout/footer.png') no-repeat;
text-align: center;
clear: both;
border: 1px solid #0000FF;
}
#footer h5 {
margin-top: 9px;
font: 10px Tahoma, sans-serif;
color: #1C1C1C;
}
#footer h5 a:link, #footer h5 a:visited {
color: #1C1C1C;
}
#footer h5 a:hover, #footer h5 a:active {
color: #1C1C1C;
background-color: transparent;
}
Thanks in advance.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
