Guys,
This is driving me crazy, been up half the night trying to create what should be a simple layout…still never got my head round floats and think thats whats causing me probs!!
I have created the layout and it works fine, eventually!! However its not fluid enough, I’m looking to try and get the heights fluid, so that all the colums are the height of which ever one in the longest…understand?
I search online and found quite a lot but could not get my head round it.#
I have got it working by assigning a height of 1000px to me nav_bar div, this forces everything else down…but its not right…without the height specified its a mess!!
Please, please help…these floats and divs are driving me crazy! I just want to creat my first almost perfect css layout!!
Thanks in advance:
<!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" />
</head>
<body id="home">
<div id="wrap">
<div id="content">
<div id="side_bar">
<div id="logo"></div>
<div id="details"><em>First class shoes...<br>
...For first class crews.</em></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="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">Specifically Designed for Airline Cabin Crew....</p>
<p class="style84"><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"><link rel="stylesheet" href="https://checkout.google.com/seller/accept/s.css" type="text/css" media="screen" />
<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>
@charset utf-8;
/* CSS Document */
html,body {
margin:0;
padding:0;
color:#000;
overflow:scroll;
}
body {
width:100%;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:0 0 10px 0;
/*background-image: url(images/logo_transparent.jpg);*/
background:#FFFFFF;
overflow:hidden;
}
#wrap {
width:950px;
margin:0 auto;
padding:0;
background: url(images/right_shadow.png) top right repeat-y #FFFFFF;
}
#left_shadow {
float:left;
background: url(images/left_shadow.png) top left repeat-y #8bb6e8;
height:1000px;
width:32px;
}
#content {
width:950px;
}
#side_bar {
float:left;
width:180px;
height:1000px;
background:url(images/left_shadow.png) top left repeat-y;
background: #8bb6e8;
border-right:#980065 thin solid;
}
#header {
width:100%;
height:168px;
background: url(images/header.jpg) no-repeat;
}
#logo {
margin: auto auto;
margin-top: 10px;
background:url(images/logo.png);
width:170px;
height:90px;
}
#details {
margin: 5px 0 0 15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
#google{
width:182px;
height:44px;
margin-left: auto;
margin-right: auto;
}
/* CSS for the tabs starts here */
#nav {
float:left;
margin: 40px 0 0 20px;
width:650px;
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 li:hover {
}
#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;
}
#home #nav #t1,
#products #nav #t2,
#gallery #nav #t3,
#booking #nav #t4,
#activities #nav #t5,
#findus #nav #t6,
{
}
#home #nav #t1 a,
#products #nav #t2 a,
#gallery #nav #t3 a,
#booking #nav #t4 a,
#activities #nav #t5 a,
#findus #nav #t6 a {
}
#nav #t1,
#home #nav #t1 {
}
#nav #t6,
#findus #nav #t6 {
}
/* CSS for the tabs ends here */
#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: 294px;
height: 198px;
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: -294px;
}
#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;
}
Please help!!
Ryan