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:
- 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: http://www.dynamicdrive.com/style/ */
/*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