SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    How would you handle this?

    Have created a header for a site, which seemed simple but is proving to be a bit tricky (see the attached pic).

    I am trying to create a header div ( as the rest of the page will have different areas of color). I want the bluish gradient at the top to extend fully across the view screen, however the page needs to have a margin to center the content. The on the tab will contain a list-menu. I can't say how hide it will end up being at any given point;what I need it for that area tho grow from right to left the more menu items that are added.
    The the problem occurs because of the tab on the right, in which the blue area is deeper then on its left.

    I did try floating the the tab to the right , but then I could not align it so that the page looks centered.

    The other problem that that causes is when I AP the UL that contains the menu, the width of the tab collapses to that of of the longest menu item. I know this happens because AP takes things out of the normal flow and I dod consider just using padding-top or margin-top to position the menu list, the problem i see with using that, however is that if the user enlarges the text, me menu list will expand downwards outside the header area ( whereas with AP, I can place the menu list x-pixels from the bottom , and the expansion will be UPWARDS).

    I trying to make two options of this idea , one fluid ( 60% with 20%"margin" on each side.) and another where the content is 960px and the side space should act as if i had done margin:auto to center the 960px of content.


    I would post some code.. but to be honest am somewhat of a loss
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well could you post a link to your current attempt? If you don't kow what code to post (which normally isn't enough), we need a link

    Plus we hae to get the attachment approved-I'll contact a moderator.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://raym31.home.comcast.net/~raym...untitled3.html

    That is a good attempt so far. Now just create a footer with the image of the colors at the bottom, se the location to the top part and don't repeat it-leave the rest of the footer space to that brownish color.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks Ryan. The code just seemed a lil clumsy to me.

    And I have no idea how to make it work if I wanted the site to be a fixed width!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What do you mean, fixed width...why would fixing the widths matter?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I mean , how would I set it if I wanted the page to be 960px wide.. and the rest to extend off ( as in "margin")

    As i have done it you CANNOT fix the width. the method relies heavily on matching %, and margins combinations of margins and paddings. This is why I feel it is a rather clumsy way to achieve this effect. :/

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)


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
  •