Thu, 2009-07-16 11:25
Hi Guys,
I'm new hear but been messing around with CSS for the past year, spent a long time doing things in flash before deciding it was time to go back to basics with the developments in CSS.
I always seem to run into difficulty initiall, just setting up my layout, headers, footers, navigation, content, wrappers etc!! Floats seems to be the thing that gets me, when do I clear them, when do I not!
Anyway, my latest site I have tried to create clean, valid code, so far I think i am achiveing that, however there are now 2 things I want to achieve:
1) I want my wrapper to be 100% height in any browser window, I want the content within the wrapper to scroll depending on the content.
2}I want the left side bar, to be static when scolling the content.
An exact example of this can be seen here:
http://www.schuhstore.co.uk/home_normal.asp
I can see a problem in this that the content within the side bar will need to be designed to a min-height, but its what the client wants.
This is really doing my head in, I can't figue it out. I often find myself having difficulties with heights of divs and also things floating!
Anyway, heres my code...help me Obi-wan...your my olny hope!!
HTML
<!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> <meta name="verify-v1" content="qQ+jvRUIMfZqnfDpby4SwpGFEEuECcxnyL8A4tBAMnw=" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=" Shoes for crews, leather shoes, genuine" /> <title>Welcome to Shoes4Crews</title> <link rel="stylesheet" type="text/css" href="shoes4crews.css" /> <link rel="stylesheet" href="https://checkout.google.com/seller/accept/s.css" type="text/css" media="screen" /> </head> <body id="home"> <div id="wrap"> <div id="content"> <div id="side_bar"> <div id="number"> <p class="small_text">call now...</p> <p class="number_text">0845 474 1927</p> </div> <div id="logo"></div> <div id="details"><em>First class shoes...</em></div> <div id="second_nav"> <ul id="sexypanels"> <li id="one"><a href="index.html">Home |</a></li> <li id="two"><a href="about.html">About Us </a></li> <li id="three"><a href="contact.html">Contact </a></li> <li id="four"><a href="termsandconditions.html">T and C's </a></li> <li id="five"><a href="privacypolicy.html">Privacy Policy </a></li> <li id="six"><a href="exchanges.html">Exchange/Refunds </a></li> </ul> </div> <div id="news"> <div id="news_content"> <p class="news_title">Latest News</p> <p>AVAILABLE NOW!</p> <p class="bold_text">Only £19.95*</p> <p>Next Day Delivery</p> <p>AVAILABLE NOW!</p> <p class="small_text">(*plus p+p)</p> </div> </div> </div> <div id="nav"> <ul> <li id="t1"><a href="home.html">Home</a></li> <li id="t2"><a href="products.html">Products</a></li> <li id="t3"><a href="accommodation.html">Bulk Buy</a></li> <li id="t4"><a href="booking.html">Affiliates</a></li> <li id="t5"><a href="activities.html">Contact</a></li> <li id="t6"><a href="findus.html">FAQs</a></li> </ul> </div> <div id="banner"></div> <div id="product_images"> <div id="heels" title="Genuine Leather Heels"><a href="product1.html"><em>Heels</em></a></div> <div id="flats" title="Genuine Leather Flats"><a href="product2.html"><em>Flats</em></a></div> </div> <div id="home_content"> <p class="style85"><em>Ideal for Professionals and people on their feet.</em></p> <p><strong>Genuine Leather</strong>, custom designed shoes.</p> <p><strong>HEELS</strong> or <strong>FLAT</strong> styles available in <strong>NAVY</strong> or <strong>Black</strong> in ladies UK sizes 3 - 8</p> <p class="style77">(click <strong><u><a href="faqs.html" target="content" class="two">here</a></u></strong> for Euro & US shoe size conversion table)</p> <p class="style80">Only £19.95 per pair</p> <p class="style77">(approx €22:00 or $30:00)</p> <p class="style81">Next Day Delivery*</p> <p class="style83">Worldwide Delivery Also Available</p> <p class="style84">*(click <strong><u><a href="faqs.html" target="content" class="two">here</a></u></strong> for shipping information)</p> <p>These superb shoes are already worn by the employees of: Thomsonfly, RBS, BA, Going Places, Globespan, Easyjet, Ryanair, BMI, Qantas, Aviance, and many more.</p> <div id="google"> <script type="text/javascript" src="https://checkout.google.com/seller/accept/j-en_GB.js"></script> <script type="text/javascript">showMark(2);</script> <noscript> <img src="https://checkout.google.com/seller/accept/images/ht-en_GB.gif" width="182" height="44" alt="Google Checkout Acceptance Mark" /> </noscript></div> </div> </div> <div class="clear"></div> </div> </body> </html>
CSS - Just not sure if I should be defining the body, html and body the way I am!!
@charset utf-8; /* CSS Document */ html,body { overflow:scroll; } body { width:100%; height:100%; padding:0; margin:0; background-image: url(images/logo_transparent_2.png); overflow:hidden; } #wrap { width:950px; height:100%; padding:0; margin-left:auto; margin-right:auto; background: url(images/right_shadow.png) top right repeat-y #FFFFFF; } #side_bar { float:left; width:180px; background:url(images/left_shadow.png) top left repeat-y; background: #980065; border-right:#980065 thin solid; } #content { float:left; width:100%; margin:0; } /*#left_shadow { float:left; background: url(images/left_shadow.png) top left repeat-y #8bb6e8; height:1000px; width:32px; } #header { width:100%; height:168px; background: url(images/header.jpg) no-repeat; }*/ #number { margin: auto auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#FFFFFF; text-align:center; margin: 5px 0 0 0; } #number p{ margin: 0px; padding: 2px; } .number_text{ margin: 0px; padding:0px; } #logo { margin: auto auto; margin-top: 7px; padding: 15px 0 15px 0; background:url(images/logo_2.png) center no-repeat; width:170px; height:123px; border-bottom: #FFFFFF 2px dotted; border-top: #FFFFFF 2px dotted; } #details { margin: -45px 0 0 15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#980065; text-align:center; } #google{ width:182px; height:44px; margin-left: auto; margin-right: auto; } #test{ float:left; width:200px; height:200px; margin-top: 20px; margin-left:auto; margin-right:auto; } /* CSS for the tabs starts here */ #nav { float:left; margin: 40px 0 0 30px; width:600px; font-size:0.75em; color:#980065; line-height:1em; } #nav ul { margin:0; padding:0 0 0 0; list-style:none; } #nav li { float:left; margin:0 0 0 0; padding:0 0 0 0; } #nav a { float:left; display:block; color:#980065; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding:5px 14px 12px 8px; text-decoration:none; } #nav li:hover a { } /* Hide from IE5-Mac \*/ #nav a {float:none;} /* End IE5-Mac hack */ #nav a:hover { color:#666666; text-decoration:none; } /* CSS for the tabs ends here */ #banner { float:left; width: 700px; height: 100px; border: #980065 1px solid; margin: 10px 0 10px 30px; } #product_images{ float:left; width: 700px; margin:10px 10px 10px 30px; border-bottom: #980065 dotted 2px; border-top: #980065 dotted 2px; } #home_content { float:left; width:700px; margin: 20px 0 0 30px; } #home_content p { text-align:center; margin:10px 10px 10px 10px; padding: 0 0 10px 0; font-family: Verdana, Arial, Helvetica, sans-serif; color: #980065; } h1 { margin-left:30px; margin-bottom:30px; padding-bottom:2px; font-size:1.5em; color: #FF00FF; text-align:left; border: none; font-weight:normal; font-family: Verdana, Arial, Helvetica, sans-serif; } .clear { clear:both; } a.main:link{ color:#003366; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; border-bottom:dotted 1px #003366; text-decoration:none; } a.main:visited{ color:#003366; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; border-bottom:dotted 1px #003366; text-decoration:none; } a.main:hover{ color:#666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; border-bottom:dotted 1px #666666; text-decoration:none; } #footer_info{ padding:0px; margin:10px; color:#003366; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; line-height:1.5em; font-size:1em; } a.footer_link:link{ padding:0px; margin:0px; color:#003366; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; line-height:1.5em; font-size:1em; text-decoration:none; } a.footer_link:visited{ padding:0px; margin:0px; color:#003366; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; line-height:1.5em; font-size:1em; text-decoration:none; } a.footer_link:hover{ padding:0px; margin:0px; color:#666666; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; line-height:1.5em; font-size:1em; text-decoration:none; } /** Home Page styles**/ .style77 {font-size: 12px} .style80 { font-size: 20px; font-weight: bold; } .style81 { font-size: 18px; font-style: italic; } .style83 { font-size: 12px; font-weight: bold; } .style84 {font-size: 14px} .style85 { font-size: 18px; } a.two:link { color: #FF00FF; text-decoration: none; } a.two:visited { color: #FF00FF; text-decoration: none; } a.two:hover { color: #666666; text-decoration: none; } /** End of Home page styles**/ #heels em{ display:block; padding:30px 0 0 160px; } #heels a{ float:left; display:block; margin: 30px 0 30px 30px; padding: 0; width: 290px; height: 194px; background-image:url(images/heels_new_full.png); color: #FFFFFF; font-weight: normal; font-size: 34px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; } #heels a:hover{ background-position: -290px; } #flats em{ display:block; padding:30px 0 0 30px; } #flats a:link{ float:right; display:block; margin: 30px 30px 30px 0; padding:0; width: 294px; height: 198px; background-image:url(images/flats_new_full.png); color: #FFFFFF; font-weight: normal; font-size: 34px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; } #flats a:hover{ background-position: -294px; } /** Second Navigation**/ /*Credits: Dynamic Drive CSS Library */ /*URL: <a href="http://www.dynamicdrive.com/style/" rel="nofollow">http://www.dynamicdrive.com/style/</a> */ /*Navigation Menu */ #second_nav{ width:170px; margin-top: 75px; margin-left: auto; margin-right:auto; } #sexypanels{ list-style-type: none; width: 150px; /* width of menu */ font: normal 13px Verdana, Arial, Helvetica, sans-serif; color: #FFF; font-weight:normal; text-align:right; margin:0 0 0 0; padding:0 0 0 0; } #sexypanels li a{ display: block; color: #FFF; width: 150px; height:29px; padding: 6px 0x 0 0 0; margin: 0 0 0 0; text-decoration: none; } #sexypanels #one a{ /*background: url(../images/home_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #one a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #home #sexypanels #one a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #999999; text-indent:50px; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #sexypanels #two a{ /*background: url(../images/about_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #two a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #about #sexypanels #two a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: red text-indent:60px; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #sexypanels #three a{ /*background: url(../images/projects_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #three a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #contact #sexypanels #three a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: red; text-indent:60px; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #sexypanels #four a{ /*background: url(../images/consultancy_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #four a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #tandc #sexypanels #four a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: red; text-indent:60px; } #sexypanels #five a{ /*background: url(../images/consultancy_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #five a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #privacy #sexypanels #five a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: red; text-indent:60px; } #sexypanels #six a{ /*background: url(../images/consultancy_btn.gif) #FFF no-repeat; /*color of menu by default*/ } #sexypanels #six a:hover{ /*background: url(../images/hover_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: #cccccc; /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } #exchange #sexypanels #six a{ /*background: url(../images/current_btn.gif) #FFF no-repeat; /*color of menu onMouseover*/ color: red; text-indent:60px; } #news { width: 170px; height:200px; margin-left:auto; margin-right:auto; margin-top:40px; font: normal 13px Verdana, Arial, Helvetica, sans-serif; color: #FFF; font-weight:normal; text-align: center; border-top: #FFFFFF 2px dotted; } #news_content{ margin: 20px 0 0 0; } #news p{ margin:0px; padding:0 0 5px 0; } .small_text{ font-size:10px; padding: 0px; } .bold_text{ font-weight:bold; } .news_title{ font-weight:bold; text-decoration:underline; margin: 0px; padding: 20px 0 0 0; } /*border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ /*.sexypanels li a:visited, .sexypanels li a:active{ color: white;*\ } /*.sexypanels li a:hover{ background: url(../images/button_back_roll.gif) #FFF no-repeat; color of menu onMouseover color: white; border-bottom: 1px solid black; bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor }*/ /*End of navigation*/
Thanks guys in advance. I have searched the net and found loads on div heights but just cant make sense of it.
Regards,
Ryan
