SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    having some BG trouble. Need some advice

    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

  2. #2
    SitePoint Enthusiast ncmw's Avatar
    Join Date
    Jan 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you cant match the bg with a bg color?

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will it would be easy if it was the same gray on both sides, but since its not I'm not sure which way to approach it.

  4. #4
    SitePoint Member
    Join Date
    May 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Here is the code:

    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>          
                           &#169;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&#37; 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; }
    Last edited by pricecd; Feb 11, 2008 at 12:22.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •