SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 58
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A Few Stylize Question about Page Construction

    How can I get the page to hug the right side of the browser ?
    How should I stylize #wrapper ?
    How come my #footer div is not appearing ?

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. how can the page hug the right side. all divs have width: 950px.

    2. ?

    3. your #footer is missing ; on background declaration:

    #footer {
    background: #AAAAAA
    width: 950px;

    also, AAAAAA can be shorted to AAA and 666666 to 666.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For question 1, how do I make it so it adjusts with the browser window, since I can't make it a liquid layout since the graphics will be fixed width, unless I'm wrong ?

    As for question 2 I have a wrapper div to wrap the page within, does that have to have a style ?

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. to make the divs stretch the entire width of the viewport, just don't put a width on them, or use width: 100%.

    if you have fixed width divs as a requirement, you need to make sure the min width of the viewport is the max width of the divs and center the divs when the viewport is wider.


    2. you have to have a style if you want a style. it's a bit confusing what you're trying for, so responses can only be less specific than you might wish.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Usually the #wrapper div contains the rest of the content

    Code:
    <div id="wrapper">
    
        <div id="masthead">Header Image</div>
    
        <div id="pagecontent">Page content</div>
    
        <div id="footer">Footer</div>
    </div>
    That way you can control the position on all the div's inside the wrapper.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you have fixed width divs as a requirement, you need to make sure the min width of the viewport is the max width of the divs and center the divs when the viewport is wider.


    2. you have to have a style if you want a style. it's a bit confusing what you're trying for, so responses can only be less specific than you might wish.
    I don't understand what you mean !

    SpikeZ - How do you stylize a Wrapper ?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    A wrapper is an interchangable word. Container, holder, whatever

    You style a "wrapper" the same as everythign else, assuming the HTML has <div id="wrapper">..

    Code:
    #wrapper{}
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what a wrapper does. How should I stylize my wrapper just with some basic styles if I should so happen want to do something with it upon development ?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I figured you did, and I found your post quite weird what you were asking because I know you know

    Upon development, what exactly do you have in mind? Obviously if you're going to do, for example, a fluid layout, then that stuff won't change, heights shouldn't be set..honestly the only changes I can think of that you might do is backgrounds and colors, which should be very easy to update.

    I might just be having a blonde moment, could you elaborate?
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  10. #10
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Projects you've previously sought help with have ended to progress more rewardingly when you've provided a mockup illustrating what you are aiming for.

    "How should I stylize my wrapper?" is the web equivalent of "How long is a piece of string?"

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "How should I stylize my wrapper?" is the web equivalent of "How long is a piece of string?"
    I know
    What I mean is having a empty #wrapper doesn't make sense, so there is some sort of stylizing that has to be done

    This page has gone completely wrong. I want to place navigate class within the header and the footer has a red div that I have no idea where it comes from, now it's a little early in the day here and I know some sort of mock-up would definitely help. If you could help with this question then I will post the mock-up design, because I want to know what I'm doing wrong.

  12. #12
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The styles you apply to a wrapper depend entirely upon the intended purpose of the wrapper, of which we remain unaware. Hence it is impossible to make suggestions for markup and CSS, hence the request for a mockup.

    As far as I can tell, everything in your page is displaying as expected. The .navigate ul is showing up in the #header div. The #footer div has a red background because that's what you have specified: #FF3300.

    Code CSS:
    #footer {
      background: #FF3300;
      width: 425px;
      height: 50px;
      margin: 0px 0px 0px 0px;
    }

    As noonope pointed out, you can use shorthand values for properties such as margin. In the above all you need to declare is margin: 0;

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want my footer to look identical to my header, that is the problem that I can't fix

    Also my ul I'm unable to position as I want it to be at the base of the footer.

    This is going to sound silly, but I know that a wrapper, wraps the entire page but how should I stylize it ? I really don't know (head down in shame)

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. you should make a drawing for us to understand what you really want it to look like

    if you wanted them to look identical, instead of

    Code CSS:
    #header {
      background: #AAAAAA;
      width: 100&#37;;
      height: 200px;
    }
     
    #footer {
      background: #FF3300;
      width: 425px;
      height: 50px;
      margin: 0px 0px 0px 0px;
    }

    you would've opted for

    Code CSS:
    #header, #footer {
      background: #AAA;
      width: 100%;
      height: 200px;
    }


    2. your ul is in the header div, how can it be at the base of the footer?

    3. it's like sex for a virgin: if you dare to you'll do it i'm sure you'll find out how to do it if you need to!

    joke aside, how do you stylize the cipher one? it's a concept. you don't put an apple, or a train, you just use the symbol: 1.

    as a general rule, you don't put rules in the #wrapper just so it's not empty. you put rules when you need to have #wrapper look some way specific. you don't have any specific requirements for it, so, at the moment, #wrapper is better left alone.

    think of #wrapper as a blank paper sheet. it could be a wedding invitation. you then stylize it to look like one. it could be a flyer. you stylize it accordingly. but until you make up your mind about it, it's just a plain sheet. so make up your mind already, or leave it be

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I updated the link, the footer continues not to look like the header

    your ul is in the header div, how can it be at the base of the footer?
    Sorry, I meant I want it at the base of the header

    as a general rule, you don't put rules in the #wrapper just so it's not empty. you put rules when you need to have #wrapper look some way specific. if you don't have any specific requirements for it, so, at the moment, #wrapper is better left alone.
    That answers the question about the wrapper

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm puzzled that you style the header like this
    Code CSS:
    #header {
      background: #AAAAAA;
      width: 100&#37;;
      height: 200px;
    }
    and you style the footer like this
    Code CSS:
    #footer {
      background: #FF3300;
      width: 425px;
      height: 50px;
      margin: 0px 0px 0px 0px;
    }
    and since it's obvious you apply different styles to them, box model and appearance, you complain about them looking different

    a drawing would really help us understand, since you have no bogus content at least in your elements that will shed some light on your goal

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    (Sorry about the image being dark, I didn't change my color setup)

    A question regarding the top and base graphic since the graphics will be PNG should it be two divs with a sliced horizontal graphic for the header & footer?

    As well about the navigational area which I can't get to position at the base of the header.

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    For question 1, how do I make it so it adjusts with the browser window, since I can't make it a liquid layout since the graphics will be fixed width, unless I'm wrong ?

    As for question 2 I have a wrapper div to wrap the page within, does that have to have a style ?
    Hi,
    You really need to have a plan for the site before you start building it. Like the others I am confused but I will try to wade through it with you.

    It sounds like you are wanting a semi-fluid layout, you will probably need a min-width to keep your nav list items from wrapping down to a new line. If you don't set a min-width on the wrapper you would have BG colors/images stopping short when large images in the html created a scrollbar at reduced viewport widths.

    As well about the navigational area which I can't get to position at the base of the header.
    Well it really depends on what is going to be above it in the header. As it is now you have nothing to push it down and you don't want to put a top margin on it since that would conflict with future header content.

    I would absolute position the nav for now and add bottom padding to the header (and adjust height) to protect the AP nav. Now if you had an inner div in the header above the nav you could just use it to push the nav into place. Dunno what your plans are so I will AP it for now.

    Generally you do not want to use fixed heights where there is fluid content, we can use min-height on your middle div but leave the fixed heights on header & footer.

    I have made several general comments in the CSS and this is by no means a finished piece of code but rather it can serve as a starting point for you.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    font:100%/1.3 arial,helvetica,sans-serif;
    }
     
    /*=== General Typography and Resets ===*/
    h1,h2 {
    margin:.25em 1em;
    font:bold 1.6em/1.3 arial;
    text-align:center;
    }
    h2 {
    font-size:1.3em;
    }
    p {
    margin:1em;
    font:1em/1.3 arial;
    }
    img {
    border:none;
    }
     
    /*=== Begin Layout Styles ===*/
    #wrapper {
    width:100%; /*set haslayout for IE*/
    min-width:900px;
    }
    #header {
    position:relative;/*establish containing block for AP children (#nav)*/
    height:174px;/*200px total w/ padding*/
    padding:1px 0 25px;/*preserve space for AP #nav and uncollapse child margins*/
    background:#AAA;
    }
    #nav {
    position:absolute; /*poition to bottom of header*/
    left:0; bottom:0; /*set coordinates*/
    margin:0; padding:0; /*remove the defaults*/
    list-style:none;
    }
        #nav li {
        float:left;
        margin-right:10px;
        }
        #nav a {
        float:left;
        height:25px;
        padding:0 15px;
        color:#FFF;
        font:16px/25px arial;
        text-decoration:none;
        background:#000;
        }
        #nav a:focus,
        #nav a:hover {
        color:#BDF;
        background:#333;
        }    
    #content {
    min-height:600px;
    overflow:hidden;/*contain floats and uncollapse child margins*/
    background:#666;
    }
    * html #content {height:600px; overflow:visible;}/*IE6 min-height and overflow reset*/
     
    #fakeimage {
    width:600px;
    height:300px;
    margin:0 auto;
    background:lime;
    }
    #footer {
    height:200px;
    padding-top:1px;/*uncollapse child margins*/
    background:#AAA;
    }
    #footer p {
    margin:2em 1em; /*override from p styles if needed*/
    font-weight:bold;
    text-align:center;
    }
    </style>
    </head>
     
    <body>
     
    <div id="wrapper">
        <div id="header">
            <h1>H1 Page Title</h1>
            <ul id="nav">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>Main content will go here</p>
            <p>Main content will go here</p>
            <p>Main content will go here</p>
            <p>Main content will go here</p>
            <div id="fakeimage">Image Example</div>  
        </div>
        <div id="footer">
            <p>Footer Stuff Here</p>
        </div>
    </div>
     
    </body>
    </html>

  19. #19
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, but that layout is too far off

    I want the UL to be within the header but at the base of the header DIV. The header will be one graphic so will the footer. My question is should I have two slim DIV contained within one div for the graphic and the same goes for the footer for the graphics since they will be PNG ?

    Can you please tell me what to stylize, don't layout the entire page just tell me what rule to add to the style to fix it and in return I will explain if that is what I want or not Don't take that the wrong way

  20. #20
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Rayzurs example appears to be exactly what you're aiming at given the information you've supplied, but with a few extra elements added to flesh it out, namely sample headings, paragraphs and an image. Just remove the elements you don't need.

    If you'd upload your complete design mockup (which I'm guessing may resemble that which you PM'd me recently) rather than a skeleton, things may start to progress more swiftly.

    Firstly, you could clarify whether you want a fluid or fixed width layout. Rayzur has understandably assumed fluid because your image seems to indicate a layout extending from one side of the viewport to the other. As you previously stated "...the graphics will be fixed width..." it seems likely you really want a fixed width layout.

    For this, give #wrapper a width in px, and to centre it add margin: 0 auto;

    Code CSS:
    #wrapper {
    width:960px; /*set haslayout for IE*/
    margin: 0 auto;
    }

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Thank you, but that layout is too far off

    I want the UL to be within the header but at the base of the header DIV.
    Sorry but that is exactly where I placed the UL.

    I had also noted that it was just intended to serve as a starting point for you, not the final layout.

    The header will be one graphic so will the footer. My question is should I have two slim DIV contained within one div for the graphic and the same goes for the footer for the graphics since they will be PNG ?
    They just need to be background images if they are for presentation/decoration.
    Can you please tell me what to stylize, don't layout the entire page just tell me what rule to add to the style to fix it and in return I will explain if that is what I want or not Don't take that the wrong way
    I am unsure what your goal is so I can't advise on fixing anything. You need to explain what the layout needs to do first. Specifically how you want it to behave at various viewport widths.

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #wrapper {
    width:960px; /*set haslayout for IE*/
    margin: 0 auto;

    In FireFox that style is not the full width of the layout ? I see what that particular rule does in the style, but it only helps IE excluding Firefox.

    Here is my complete final design mock-up. The UL is contained within the footer column and at the base of it, that is what I meant in a earlier post



    The header and footer graphics can be background PNG, as mentioned .

    Could they, or should they be split into, two horizontal slices for the header and two horizontal slices for the footer, that would make two graphic slices for the footer to make up the entire graphic and two graphic slices (horizontal) for the header to make up the entire graphic ?

  23. #23
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should've started with this

    first question: do you want the layout to be fixed as width? (and centered for bigger wieports?)

    second question: do you want the layout to be fixed in height?

    third question: the footer is fixed? (always present at the bottom of the viewport?)

  24. #24
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first question: do you want the layout to be fixed as width? (and centered for bigger wieports?)
    No I don't want it to be fixed as width but the graphic will be a fixed width so I'm not sure how to solve this?
    second question: do you want the layout to be fixed in height?
    Yes, I do want the layout fixed in height if it's not I assume I"ll just get white spaces on the top and the bottom.
    third question: the footer is fixed? (always present at the bottom of the viewport?)
    Correct.

  25. #25
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Code CSS:
    #wrapper {
    width:960px; /*set haslayout for IE*/
    margin: 0 auto;

    In FireFox that style is not the full width of the layout ? I see what that particular rule does in the style, but it only helps IE excluding Firefox.
    No, that width was not only for IE. Victorinox forgot to remove my IE comment from when I had the width set to 100&#37;. Divs default to 100% width so the only reason for the 100% was to give IE6 haslayout.

    You are going to need a fixed width wrapper if you plan on using a fixed width BG image on the header/footer. If you want it to appear to be 100% width then you will need to rework the images where it can blend in with a repeating image on the body.

    Basically you are telling us you want a fluid width site that uses a fixed width image. It's not going to work like that.

    Here is my complete final design mock-up. The UL is contained within the footer column and at the base of it, that is what I meant in a earlier post
    Your UL is shown at the bottom of your header div in that image just like I placed it in my code above.

    third question: the footer is fixed? (always present at the bottom of the viewport?)
    Correct
    I would not use a 200px tall position:fixed footer either, that is too tall. I think that you may be confusing fixed height with fixed position.


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
  •