1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

CSS Layout Problem

Discussion in 'Software Development' started by lora_3677, Sep 17, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    Ok, I have played with CSS enough to be dangerous. I got the styles down, I'm tackling layouts now. I ripped both of the pieces from tutorial sites and I'm trying to combine them to work for what I want.

    I have a basic page with a header, nav, footer (which isn't exactly working, but may once I get the other problem fixed), and main content divs. Inside the main content I have 4 content boxes so I can control some stuff. The first content box i have set leftmargin 20% and then 100 px wide. It is begining at the left side of the page, instead of skipping to the 20% point of the page. WHY?? I have changed the % to px, I've played with the the numbers and it just is not changing. It insists to start at the left side of the page. In the HTML page I have the header div, then the navigation div, then i have the 4 content boxes. Tried it within and outside the Inhalt div (main region) to make the .leftcontent move to where it needs to be and it won't move.... :mad: :confused

    Here is the CSS:

    .box {
    background: #FFFFFF; /*this is a box where the bottom-navigation and the copyright will be placed*/
    border-color: #48D1CC;
    border-style: groove;
    border-width: 2px;
    color: #000099;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    margin: 2px;
    padding: 2px;
    }

    .Inhalt p {
    max-width: 650px;
    }

    .Header {
    margin-left: 160px;
    margin-top: 10px;
    }

    .Inhalt {
    background: #FFFFFF;
    color: #003366;
    font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
    margin-left: 160px; /*to position the content area to the right of the navigation*/
    margin-right: 20px; /*breathing space for the text*/
    margin-top: 60px;
    max-width: 770px; /*readbility even on big screens*/
    padding: 5px; /*space to separate navigation and content*/
    width: auto;
    }

    .navbox {
    background-color: #003366;
    border-color: #FF6633;
    border-style: groove;
    border-width: 2px;
    color: #FFFFFF;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 15px; /*some button-like boxes for the left-side navigation*/
    margin: 2px;
    padding: 2px;
    }

    .Navigation {
    font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
    height: auto;
    left: 3px;
    line-height: 110%; /*line-height set to 110% in order to have the navigation elements better separated*/
    position: absolute; /*The navigation on the left side, positioned absolutely*/
    top: 105px;
    width: 135px;
    }

    .oldbrowser {
    display: none;
    }

    .leftcontent {
    position: absolute;
    left:20%;
    width:20%;
    top:50px;
    background:#fff;
    }

    .centerleftcontent {
    position: absolute;
    left:42%;
    width:20%;
    top:50px;
    background:#fff;
    }

    .centerrightcontent {
    position: absolute;
    left:64%;
    width:20%;
    top:50px;
    background:#fff;
    }

    .rightcontent {
    position: absolute;
    left:86%;
    width:20%;
    top:50px;
    background:#fff;
    }
    .rightcontent, .centerrightcontent, .centerleftcontent, .leftcontent {
    border:1px solid #000;
    }
    :confused:
     
  2. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    Paste your HTML too please :D
     
  3. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    <html>

    <head>
    <link rel="stylesheet" href="example.css" type="text/css">

    <title>New Page 1</title>
    </head>

    <body>
    <div class="Header"><!--HEADER with image-->
    <img src="images/CSS-2.gif" width="277" height="38" alt="CSS Issues">
    </div>

    <div class="Navigation"><!--NAVIGATION-->
    <div class="navbox"><a class="nav" href="Link1.htm">Link 1</a></div>
    <div class="navbox"><a class="nav" href="Link2.htm">Link 2</a></div>
    <div class="navbox"><a class="nav" href="Link3.htm">Link 3</a></div>
    </div>

    <div class="leftcontent"><!--CONTENT, with the nested FOOTER box-->
    Some text here, like:blah blah blah blah blah. the quick brown fox ran over the dead dog. hee hee.
    my own version of the story. much more interesting i think.
    <br>
    <h3>CONTENT, with the nested FOOTER box</h3>
    <p>Now you have the full stylesheet in the heading section of this page.<br>
    <br>
    </div>
    <div class="centerleftcontent">
    Do i have to do this a million times before it makes sense? or do i have to grab the right book and hope for the best?
    </div>
    <div class="centerrightcontent">
    To do that you can use the fact that NN 4.xx does not accept the @import.
    Therefore you link two style sheets:<br>
    &lt;link rel=&quot;stylesheet&quot; href=&quot;StyleNN.css&quot;
    type=&quot;text/css&quot;&gt;<br>
    &lt;style type=&quot;text/css&quot;&gt;<br>
    @import url(Style.css); /*IE and NN6x styles*/<br>
    &lt;/style&gt;<br>
    <br>
    </div>
    <div class="rightcontent">
    Explanation: NN&lt;6 does not recognize the @import, so it uses the
    &lt;link&gt; style sheet. IE and NN6 accept the @import, and by placing it
    below the &lt;link&gt; style, you give it more importance, therefore IE and
    NN6 will give you the styles in the @import sheet.<br>
    <br>

    You have to remember to use the same selectors and properties in both style
    sheets. If you declare a value in the linked stylesheet and omit this in the
    imported sheet, IE will take the value from the linked sheet.</p>
    </div>
    <div class="box">FOOTER BOX
    This will be the secondary navigation
    </div><!--closing div for the footer-->


    </body>

    </html>
     
  4. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    the html is what came off te tutorial site... for the most part.. i edited some of it to see if it was a size problem. ha ha.
     
  5. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    i may have found the problem.... i took out my comment above the leftcontent and now it moves and works...... is that the wrong comment style????
     
  6. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    Gibs...ok, so now all i need is the stupid footer to be a certain percentage or pixels below the longest of the content boxes... how do i make that happen?? can i use a negative percentage from the bottom or something??
     
  7. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    Sorry, didn't get a chance to look at it...seems you got alot figured out :)

    Hmm...about the footer...let me check and see
     
  8. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    To be quite honest I always have problems getting footers to display properly in multi column css layouts...

    ...you can set it's top to 95% but that may not always work as you want.
     
  9. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    what do you think about using a style sheet like this... i found it on a web design company's site... found a link via google....but it's not linked anywhere
    http://webctr.com/css-footer.html

    does the relative positioning thing really work very well????
     
  10. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    .box {
    position: whatever;
    bottom: 0px;
    left: 0px;
    }
    Might work
     
  11. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    I think the problem is that the four content boxes can expand... they don't have a set bottom... so they are inside the content div.. and the footer is below the beginning of the content div, however the content boxes still overlap it because they have grown to compensate for the text... did that make sense at all???

    maybe i should just stick this on my website on a test link so it would be easier to see... i'll do that.
    uploading to
    http://www.preciousgemscattery.netfirms.com/example.html

    give me a few minutes.
     
  12. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    That is exactly the problem :)
     
  13. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    ok, so the only way to fix THAT... is to give the boxes a set size?? maybe i'll just say FORGET THE FOOTER!!! lol...
     
  14. lora_3677

    lora_3677 Thread Starter

    Joined:
    Aug 4, 2003
    Messages:
    1,228
    scary that i'm totally understanding this stuff.... that tutorial i came across ROCKS!
     
  15. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    CSS is quite simple once you get the hang of it, and yes, scrap the footer ;)
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Layout Problem
  1. mohittomar13
    Replies:
    7
    Views:
    389
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/165409

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice