gibry21
July 16th, 2009, 07:28 AM
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: 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
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: 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