SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make the layout "robust"

    Hello.
    My question, is how to make a web page that, when you shrink it, wont just bundle all of the images or materials.
    Mainly, if you shrink the page, how can you make sure everything stays where it is, while the "window" for your browser shrinks?
    I am currently having problems doing this using any type of positioning with CSS.
    Thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,215
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    The trick is not to use positioning (e.g. position: absolute). You can stop things bunching up in a number of ways, Indeed, elements naturally flow around each other and don't bunch up until you start applying CSS (usually wrongly).

    But to be more specific, it would help to see what you are actually working on. Do you have a link or some sample code?

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /*
    CSS for A
    */
    body {
    margin: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #e2edff;
    line-height: 125%; }

    #tagline {
    background-color: #e2edff;
    text-align: center;
    border-bottom: 4px solid black; }


    #header {
    font-size: 130%;
    font-weight: bold; }

    #navigation {
    position: absolute;
    top: 7em;
    left: 0;
    height: 12em;
    width: 10em;
    background-color: #e2edee;
    border: 4px solid black; }

    #bodycontent {
    position: absolute;
    left: 11em;
    top: 9.5em;
    width: 50em;}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,215
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Yes, position: absolute is not the right technique for page layout, as it's terribly inflexible. We'd also need to see the HTML to understand your page. Or, if you prefer, you could post a screen shot of your desired layout, and we could knock up a basic template to show a better way of going about this.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As Ralph briefly mentioned, it's not really suitable for layouts.

    Reasons being:
    1) The big cheese, other elements can't interact with it. Clashing can occur/overlap
    2) It really tries for a pixel perfect design, which will never be perfect cross browser
    3) It's just a crappy way of doing it. There are more than 1 ways to do something in CSS, but only one RIGHT way
    4) More headaches really .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Vale - Home</title>
    <meta charset="utf-8"/>
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id = "tagline">
    <div id = "header">
    <h1>Value</h1>
    </div> <!-- end of header -->
    <p>Value</p>
    </div> <!-- end of tagline -->
    <div id="navigation">
    <ul>
    <li><a href = "background.html"> Background </a></li>
    <li><a href = "contact.html"> Contact </a></li>
    <li><a href = "experience.html"> Experience </a></li>
    <li><a href = "education.html"> Education </a></li>
    <li><a href = "interest.html"> Interest </a></li>
    <li><a href = "main.html"> Home </a></li>
    </ul>
    </div> <!-- end of navigation -->
    <div id="bodycontent">
    <h2>Welcome!</h2>
    <p>Thanks for helping me out, ralph.m and ryan! <a href="value@value.com">value</a>. </p>
    <p><img src="main.jpg" alt="Value"/><p>
    </div> <!-- end of bodycontent -->
    </body>
    </html>

    However, I just need to know, what then, I should use instead of absolute positioning?
    What other methods are there that work better?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Floating instead . Check out this example below. I use floating to position the elements.

    I only am posting the CSS because that's all I changed about it. The only thing different from your original example, is text placement. Margins/paddings can move it now where you want it to go. Play with it .

    FLoats have a good bit of bugs with it (well, for IE6/7 anyway) but IE6 is basically dead and IE7 is on its' way out the door. If you have any questions feel free to ask .

    Code:
    #navigation {float:left;
    height: 12em;
    width: 10em;
    background-color: #e2edee;
    border: 4px solid black; }
    
    
    #bodycontent { 
    float:left;
    width: 50em;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

    And, since I have your attention, I have a quick question.
    My header/tagline do the same thing.
    How can I position the text, in the center of the page, without the resize problem?

    Again, much thanks.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To get text in the center, all you need to do is add text-align:center . That way, with resize, it will automatically adjust to keep in the center.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But if I wanted it to stay where it was? Just have it in the middle while it is "full screen" sort of speak.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh, well you could set a width, such as 500px, and then margin:0 auto; to center .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ryan.
    This has been very helpful.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,215
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mudroot View Post
    But if I wanted it to stay where it was? Just have it in the middle while it is "full screen" sort of speak.
    Do you mean that you don't want the edges of the layout to touch the side of the browser, but rather that you want things centered in the middle of the screen?

  14. #14
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would want the text centered, but only when the page was full. So, if someone made the window smaller, the centered text wouldn't continue being centered.
    Apologies if this sounds confusing.
    I guess I could try illustrating it:
    Full page : XXXX-centered text-XXXX
    If they mad the window shorter from the right side in: XXX-cent
    Hope that helps

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In that case, I'd just set a left margin, that way the right side still has space, however, if the screen gets lower resolution, then the right side will go away. However, that seems strange to do, and won't appear centered in most resolutions...

    However if you have xxxxCONTENTxxxx, and you want it to be like...xxCONTENTxx, then use the auto margin.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,215
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    O, I see what you mean. If that's what you want, I'd say it's best not to have any margin on the left. Otherwise, on some very small screens, people will see nothing but the blank space on the left, and think there's nothing on your site at all.

    Many sites choose to have their layout stuck to the left side, which is perfectly fine. A List Apart is an example that springs to mind.

  17. #17
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph.

  18. #18
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, another question(sorry).
    I am trying to have two div's, each of them at the top of the page, one of the left, one of the right.
    Code:
    <!DOCTYPE HTML>
    <html lang = "en">
    </head>
    <meta charset = "utf-8"/>
    <link href = "style1.css" rel = "stylesheet" type = "text/css"/>
    <title>Test</title>
    </head>
    </body>
    <div id = "tagline">
    <div id = "header">
    <h1 class = "tagline">Test</h1>
    <p class = "tagshort">Test!</p>
    </div>
    <div id = "login">
    <h1>Login</h1>
    <p id = "hr">User Name - XXXXXXX</p>
    <p>Password - XXXXXXX</p>
    <p><a href = "register.html">Want to Register?</a></p>
    </div>
    </div>
    </body>
    </html>
    What would I need to do in order to have both of these at the top? Illustration: ValueXXXXXXXXXXXXXValue.
    Last edited by DaveMaxwell; Mar 9, 2012 at 08:12. Reason: closing code tag...

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well do this
    Code:
    #tagline{overflow:hidden;/*contain the floated children*/}
    #header{float:left;width:300px;/*random  value*/}
    #login{float:right;width:300px;/*random value*/}
    Floating! . Untested. Too lazy to check, but there's no reason that shouldn't work.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome.
    Didn't know about overflow. Thanks again man, your more of a help than you could imagine.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,627
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Anytime buddy . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Many sites choose to have their layout stuck to the left side, which is perfectly fine.
    I agree that's probably perfectly fine for most folk. However, I have weird perceptual problems, and need what I'm reading to be centered in front of me. Sites that are stuck to the left of the screen either make me lean to one side, or I have to resize my browser window and centre it on the screen. Either way, it's a pain. I know I'm not the only one with this problem, although it's probably a pretty tiny minority. Just thought I'd mention it.


Tags for this Thread

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
  •