No replies
gibry21
Offline
newbie
Last seen: 10 years 17 weeks ago
Joined: 2009-07-16
Posts: 1
Points: 0

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&nbsp;|</a></li>
 
                                                                <li id="two"><a href="about.html">About Us&nbsp;&nbsp;</a></li>
 
                                                                <li id="three"><a href="contact.html">Contact&nbsp;&nbsp;</a></li>
 
                                                                <li id="four"><a href="termsandconditions.html">T and C's&nbsp;&nbsp;</a></li>
 
                <li id="five"><a href="privacypolicy.html">Privacy Policy&nbsp;&nbsp;</a></li>              
 
                 <li id="six"><a href="exchanges.html">Exchange/Refunds&nbsp;&nbsp;</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 &amp; US shoe  size conversion table)</p>
 
        <p class="style80">Only &pound;19.95 per pair</p>
 
        <p class="style77">(approx &euro;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