Help... layout problem.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Help... layout problem.

Post 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;
}
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post 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/
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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 */
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
Post Reply