CSS Forum

**pricecd** · 02-11-2008, 12:11 AM

I need to recreate a flash page for someone and I'm wonder what the best way to do this would be.

the layout is pretty much done, but how should i go about doing the gray on both sides. The page will be centered and the gray in the middle will expand with your resolution. However, the dark gray on the right is throwing a wrench in my plans. I figure I need to use a background image in some way, but I can't get anything to work properly

**Mooofasa** · 02-11-2008, 11:53 AM

Use em for relative sizing. Use margin: 0 auto on an element to get it centered. Doesn't seem as though you know CSS and HTML, I suggest you look them up.

**pricecd** · 02-11-2008, 01:36 PM

i got it to work in firefox by creating a large bg, but its messed up in IE.

I thought maybe the margins and padding were interfering, but thats not it. Anyone have an idea.

**jim.thornton** · 02-11-2008, 01:47 PM

Looks to me that you have assigned padding to the container that the image is in pushing it down. You really can't tell unless you show the code.

**pricecd** · 02:28 PM

I've always been a designer and I just started trying to get better at web design. this seems like something that shouldn't too hard to resolve, but I guess its learning how to remedy mistakes like this that will make me better.

Code:

<body>

<div id="container">
    <div id="header">
           <img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" height="90" width="120" />
  <ul id="nav">
            <li class="thinkOrange">think <strong>orange </strong></li>
            <li> | capabilities | </li>
            <li>clients |</li>
            <li>creatives | </li>
            <li>portfolio | </li>
            <li>network | </li>
            <li>apparel</li>
            <li id="classInfo"> | contact info</li>            
      </ul>
    </div>    
<div id="content">        
        <div id="leftcontent">          
                 <h5>Think different.  Think Orange</h5>            
            <p>
                <strong>What is thinking orange</strong><br />
                It’s thinking out there, not in here — by design • It’s Packaging • It’s going out and then back • It’s Marketing • It’s Advertising • It’s communicating consciously • It’s 
                seeing things from a new perspective • It’s Photography • It’s imagining possibilities • It’s Graphic • It’s seizing potential. It’s Branding. It’s opening doors. It’s 
                Promotion. It’s opening minds. It’s Websites. It’s understanding the center. It’s Logos. It’s dancing with ideas. It’s Creative. It’s saying what needs to be said. It’s Audio.
                It’s reading the signs. It’s Print. It’s knowing what your client’s drink. It’s Pittsburgh. It’s Hot. Brilliant. Bold. Bright. Beautifully un-cage-able thinking. And it’s 
                here.        
             </p>                      
        </div>        
        <div id="rightcontent">
            <img src="http://www.webmaster-talk.com/images/portfo.png" alt="portfolio" height="502" width="631" />       
        </div>        
        <div id="footer">
            <p>          
                       ©2008 ocreations llc "all right reserved" | 412.481.9478 ext. 502-505
              </p>
        </div>
  </div>
</div>

</body>

Code:

@charset "utf-8";
/* CSS Document */
body{ background: url(images/graybg.gif) 50% 0 #f0f0f2; margin:0; padding:0;}

#bg{background:url(images/graybg.gif) 50% 50% repeat-y; height:501px; width:100%;}

#container{ margin:0; padding:0; width:925px; font-size:small; color:#999999; margin:0 auto; font-family: Tahoma,"Lucida Grande", "Trebuchet MS"}

#header img{ float:left; position: relative; left: 60px;}

/* CSS for horizontal navigation */

#nav{ position:relative; top: 45px; left: 174px; padding:0; width:630px; list-style:none; font-size:90%;}
#nav li{ float:left; margin:0; padding:0;}
.thinkOrange{ color:#f38321;}
#classInfo{ position:relative; left:159px;}

/* CSS for content */

#content{ width:925px; height:502px; clear:both;}
#leftcontent{ float:left; width:264px; height:502px;}
#leftcontent h5{ font-size:105%; padding:0 20px; color:#f38321;}
#leftcontent p {margin:0; padding:0 20px; line-height:1.43em; font-size: 95%;}

#rightcontent{ float:right; width: 631px;}
#rightcontent img{ margin:0; padding:0;}
/* CSS for footer */

#footer {margin: 60px 0 0 0 0;}
#footer p{font-size:80%; clear:both; text-align: center; }

**LadynRed** · 02-11-2008, 02:57 PM

#1 IMPORTANT THING - add a valid DOCTYPE to every page, that will help sort out a lot of oddball things.

#2 - validate your code

Put the position:relative on #container, and I would bet you don't then need the positioning on the other things. If you do, it will position relative to #container rather than the body.

Read up on IE's busted box model -and it's other many bugs:
http://www.positioniseverything.net

**pricecd** · 02-11-2008, 03:10 PM

thanks for the info! I have a doctype and everything, I just copied the body.

**LadynRed** · 02-11-2008, 03:11 PM

Ok

Too many people leave off the doctype.