Help... layout problem.
Posted: Wed Mar 01, 2006 4:06 pm
This is sorta hard to explain so click the link to see what I'm talking about. I would like a site with a centered div that contains the website, but on the left and right of that div, I'd like flames coming up the sides. Any ideas on how this could be accomplished (without tables of course).
http://www.sierratech.us/images/test.jpg
OK, I've got a sorta solution, but as you will see... it freaks out if the window is too small...
http://www.sierratech.us/images/michaelcharvel
If I can't get this figured out by about 4 I gotta use tables cuz I dont have time to mess with it.
CSS:
http://www.sierratech.us/images/test.jpg
OK, I've got a sorta solution, but as you will see... it freaks out if the window is too small...
http://www.sierratech.us/images/michaelcharvel
If I can't get this figured out by about 4 I gotta use tables cuz I dont have time to mess with it.
Code: Select all
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="DEAN FENDER" />
<meta name="Copyright" content="SIERRA TECH COMPUTERS" />
<meta name="Distribution" content="Global" />
<meta name="Rating" content="General" />
<meta name="Robots" content="All" />
<title>Custom Guitar Repair, Paint and Something else by Michael Charvel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer_container">
<div id="left_flame"> </div>
<div id="container">
<img src="images/title.gif" alt="Michael Charvel" />
<div id="left_section">
<!-- Menu /-->
<ul id="menu">
<li><a href="links.php" id="links"> </a></li>
<li><a href="contact_us.php" id="contact_us"> </a></li>
<li><a href="testimonials.php" id="testimonials"> </a></li>
<li><a href="guitar_gallery.php" id="guitar_gallery"> </a></li>
<li><a href="video_shop_tour.php" id="video_shop_tour"> </a></li>
</ul>
<!-- End Menu /-->
</div>
<div id="welcome">
<img src="images/michael_charvel.jpg" alt="Michael Charvel" class="float_left" style="border: 1px solid white" />
<h1>Welcome To MichaelCharvel.com</h1>
<p>Praesent ligula. Aenean eget enim. Nam nec erat et mi aliquam sodales. Integer purus orci, varius ac, bibendum in, auctor a, tellus. Nulla mauris. Vestibulum dolor tellus, fermentum eget, luctus nec, ornare eu, dui. Donec id massa. Duis quis turpis. Aliquam erat volutpat. Nunc ut nibh sit amet lorem dapibus vehicula. Sed commodo, sem sit amet sodales consequat, diam arcu tempus nulla, at dictum nibh libero imperdiet pede. Aliquam mauris. Aliquam lobortis libero viverra purus. Curabitur mauris.</p>
</div>
</div>
<div id="right_flame"> </div>
</div>
</body>
</html>Code: Select all
body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: white;
margin: 0;
padding: 0;
background: black;
}
h1{
margin: 0;
padding: 0;
font-size: 15px;
font-weight: bold;
}
h2{
}
#container{
text-align: left;
width: 775px;
border-left: 1px solid #666;
border-right: 1px solid #666;
margin: 0;
padding: 0;
float: left;
}
#outer_container{
}
#left_flame{
float: left;
height: 700px;
width: 119px;
background: black url(images/flame_left.jpg) no-repeat;
}
#right_flame{
float: left;
height: 700px;
width: 119px;
background: black url(images/flame_right.jpg) no-repeat;
}
#left_section{
height: 100%;
width: 185px;
float: left;
}
#menu{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li{
margin: 3px 0;
padding: 0;
}
#menu a{
display: block;
width: 181px;
height: 47px;
}
#links{
background: transparent url(images/links1.gif) no-repeat;
}
#links:hover{
background: transparent url(images/links2.gif) no-repeat;
}
#contact_us{
background: transparent url(images/contact_us1.gif) no-repeat;
}
#contact_us:hover{
background: transparent url(images/contact_us2.gif) no-repeat;
}
#testimonials{
background: transparent url(images/testimonials1.gif) no-repeat;
}
#testimonials:hover{
background: transparent url(images/testimonials2.gif) no-repeat;
}
#guitar_gallery{
background: transparent url(images/guitar_gallery1.gif) no-repeat;
}
#guitar_gallery:hover{
background: transparent url(images/guitar_gallery2.gif) no-repeat;
}
#video_shop_tour{
background: transparent url(images/video_shop_tour1.gif) no-repeat;
}
#video_shop_tour:hover{
background: transparent url(images/video_shop_tour2.gif) no-repeat;
}
#welcome{
width: 100%;
height: 190px;
}
#welcome h1{
padding-top: 15px;
}
.float_left{
float: left;
margin: 10px;
}
.float_right{
float: right;
margin: 10px;
}