Page 1 of 1

Help... layout problem.

Posted: Wed Mar 01, 2006 4:06 pm
by Luke
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.

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">&nbsp;</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">&nbsp;</a></li>
      <li><a href="contact_us.php" id="contact_us">&nbsp;</a></li>
      <li><a href="testimonials.php" id="testimonials">&nbsp;</a></li>
      <li><a href="guitar_gallery.php" id="guitar_gallery">&nbsp;</a></li>
      <li><a href="video_shop_tour.php" id="video_shop_tour">&nbsp;</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">&nbsp;</div>
    
   </div>
 </body>
</html>
CSS:

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;
}

Posted: Thu Mar 02, 2006 6:47 pm
by darryladie
You need to add a container around your main div.

Take a look at this site I have built, check out the CSS in that.

Basically you need your central <div> to have margins set to:

div#container { /* this goes around all the divs you want centered */
text-align: center;
}

div#main { /*or whatever it's called */
margin: 2px auto;
}

that should work in essense, check out: for an example.http://www.asrevision.co.uk/

Posted: Thu Mar 02, 2006 6:54 pm
by Luke
Is that your site? I like that effect on the title where it's the same color as the lower background color until you hover... very kewl.

Posted: Thu Mar 02, 2006 9:11 pm
by Benjamin

Code: Select all

<body style="text-align: center">
<div style="margin: 0px auto 0px auto; width: 768px; text-align: left;">

centered content.

</div>
</body>
Thats the concept. Only reason for center text align is for IE. Put that in your style sheet and you'll be good to go.

Posted: Thu Mar 02, 2006 9:17 pm
by Benjamin
darryladie wrote:check out: for an example.http://www.asrevision.co.uk/
I noticed that your container div is ending before your floating content. (on firefox at least) This will fix it. If your container is set as an ID then you can add the class="clearfix" to it to fix that.

Code: Select all

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Posted: Fri Mar 03, 2006 7:49 am
by darryladie
Yes it is my site and the hidden title is just done by changing the bottom margin to a minus value and having the color the same as the background until you hover over it and then it's grey. It's not hidden there's just no contrast but yeh I like it as well :lol:

About the container, thanks for that I hadn't noticed because it was working, I will look into it :lol:

Darryl

Posted: Sat Mar 04, 2006 5:27 am
by Luke
agtlewis wrote:

Code: Select all

<body style="text-align: center">
<div style="margin: 0px auto 0px auto; width: 768px; text-align: left;">

centered content.

</div>
</body>
Thats the concept. Only reason for center text align is for IE. Put that in your style sheet and you'll be good to go.
Thank you... I never knew how to do that... AWESOME! :D