Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Hi!

    I have the following problem. I am working on a template and my background is a little wider than it should be at the bottom.
    Here you can see how it looks

    http://proba45.free.bg/dobra.htm

    And here is my source:

    <style type="text/css">
    html,body
    {
    margin:0.5% 0.5% 0.5% 0.5%;
    padding:0;
    display:inline-block;
    }

    body
    {
    font: 76% arial,sans-serif;
    }

    div#header h1
    {
    height:80px;
    line-height:80px;
    margin-bottom:0.5%;
    padding-left:10px;
    background-color:#ff9999;
    }

    div#container
    {
    width:100%;
    }

    div#content
    {
    float:left;
    margin-bottom:0.5%;
    background-color:#00ccff;
    }

    div#news
    {
    float:left;
    width:25%;
    margin-left:-25%;
    background:#0099cc;
    }

    div#footer
    {
    clear:left;
    margin-top:0.5%;
    background-color:#ba3f3f;
    }
    </style>
    </head>
    <body onload="Caller();">
    <div id="container">
    <div id="header"><h1>Header</h1></div>
    <div id="content">
    <img src="images/1.jpg" alt="" id="image_1" />
    </div>
    <div id="news">
    <p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
    </div>
    <div id="footer"><p>Here it goes the footer</p></div>
    </div>
    </body>
    </html>

    I've tried placing the view:inline-block or only view:inline in all possible divs, but it didn't work. I also don't want to use the max-heigth selector because I need this to work in both Firefox and IE.
    Does anyone have a suggestion?

    Regards,
    Valentin

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I am confused because I don't see anything wrong with the background. It's just as wide on the bottom as it is on top.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Sorry, I'm being stupid here :cross-eyed:.
    What I meant is that the background is a little higher than the picture, and I don't want it to sneak out at the bottom.
    Any ideas how I should fix this?

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay... I see the little stripe at the bottom...

    My first inclination, is it's in the [minicode]#content[/minicode] div, since there is a background-color attribute there, and that color is different from the [minicode]#news[/minicode].

    A general suggestion: Use container divs. Below would be your stripped down html.

    HTML Code:
    <body>
    <div id="container_whole">
      <div id="header">header info</div><!--header-->
      <div id="content">
         <div id="left_content">
             For example the obnoxiously large picture your client has requested
         </div><!--left_content-->
         <div id="right_content">
             This is the news section.
         </div><!--right_content-->
      </div><!--content-->
      <div id="footer">Footer info</div><!--footer-->
    </div><!--container_whole-->
    </body>
    </html>
    When I code a div, I type out the opening tag, press enter a few times and put the closing tag. I always comment the end of the div so I keep everything straight, obviously that's not necessary.

    I'm giving you this post as more advice for the future. The site you're currently working on is okay, but as you add more things and want to group things together... containers are the answer.

    With the layout you're currently using, if your news content ever got to be longer than your photo, that column would get longer, and push down the footer, but the image wouldn't change, thereby creating a big white space. Any ways, as I said, containers may not be necessary for this project.

    P.S. A cool thing about WDF... if you want cool colored and offset blocks in your posts (highly suggested) put the word "code" (for CSS) or "html" in square brackets [] at the beginning of your code, and at the end the slash inside the square brackets with the same code... it's WDF's special mark up language.
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com