SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fix in center yet move when browser resizes.

    Hi All,

    As of recently been getting stuck into html/css so bear with me. Bought quite a few books here on SP and spend a few weeks studying and now finally getting stuck into things so to speak.

    I run a decent sized gaming community at theoldergamers.com and so far have always been outsourcing my design to paid designers. I want to do things myself a bit more now and I thought that reverse engineering (building it in plain html/css) my site would be a good way to understand what is going on. At the same time I'm also wanting to make some changes and have hit my first CSS issue where I just can't get something to work.

    Getting to the point:

    This is my reverse engineered site so far:

    http://pixella.com.au/togrev/index.html

    What I am trying to achieve is to wider my top banner to be full width in a browser but have the "content/images" to remain centered but when resizing the browser window I want both left/right side of the browser to close in to the central image rather then have the image slide to the left.

    A good example of this can be seen at: au.ign.com where the ign logo stays central even when resizing.

    I tried floats, absolute positioning, I tried so many things I kinda lost track now so any tips on how to achieve this would be appreciated.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    If you want the inner content of the header centred then place it in an inner element with a width and use auto margins. That's what the other site is doing.

    Code:
    .inner{width:1060px;margin:auto}
    Then add that inner element inside the header to hold the inner content.

    On another matter you can't use a height for your wrapper as that would be very bad as content should dictate the height because you never know how much content you will have. Also you can't add padding to 100% wide element which is why you have a horizontal scrollbar. Remove the padding or remove the width.

    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for, I'll definitely try it out. I better start from the original setup as well as I have lost track of all my own changes now.

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid I'm stuck again.

    I managed to get the logo to move now using the auto margin, it's currently centering which I assume will fix itself if I can get the sponsor logos to move to the rhs.

    Problem is that they are dropping below the logo.

    Both log and sponsor div have a margin: 0 auto; applied.

    So why aren't they on the same line, I could understand it if the width is too small but the wrapper has a width of 100% applied to it so when I max my browser window I would expect them to line up.

    What am I missing?

    http://pixella.com.au/togrev/index.html

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why did you remove the floats?

    I gave you the answer above. Just use an inner element to hold the header content at the width needed (which looked to be about 1060px but you can tweak that to suit).

    Then just float the header and sponsor elements as before but inside the inner element.

    It also looks as though you are trying to make the anchor inside the logo bigger than the parent! The parent id 496px but you want the nested anchor at 507px. How is that going to fit?

  6. #6
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, finally got back to this.

    I managed to get it working but still a few questions.

    I have setup a wrapper, I would think that if I want to go full screen I would have to set it's width to 100%?
    This doesn't seem to have any affect/benefit though, why/why not?

    Thank you

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by stefaandk View Post

    I have setup a wrapper, I would think that if I want to go full screen I would have to set it's width to 100%?


    Thank you
    Hi,

    A static element is width:auto by default which means it will be as wide as it's parent container and that effectively means it will stretch the full 100% width by default. Adding 100% width to it will make no change unless the element had padding or borders and then it would be too big.

    However, if the element is a wrapper and holds more than simple content then IE6 and IE7 would like that element to have haslayout and the easiest way to do this would be with a dimension such as width:100%.

  8. #8
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, moved to the next step. I equally created an inner-nav to fit the first row of navigation items.

    I commented my CSS file http://pixella.com.au/togrev/css/tog.css as why things are setup this way.

    Basically I created that inner-nav, then floated the menu items to the left within it to make sure they are central to the page but bordering proper left on the nav.

    I also found that I need to clear the float otherwise it kept trying to squeeze against the other floating elements on top.

    One point of confusion though as I now have both an inner-header and inner-nav.

    I understand that floats are removed from document flow, when I don't clear the inner-nav ul selector and only float it it attaches itself to the rhs of the inner-header element.
    I understand that multiple left floated elements would behave like this and all go on the same horizontal line if space allows them to fit.

    But the #nav ul is floating within #inner-nav, both innner-header and inner-nav have a width of 1004px so how can the nav ul still get moved to the right of the inner-header if I make my browser wide enough? I would not expect this to be possible given the width of each element?

    I hope I am making sense here.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Your #inner-nav and #inner-header are holding only floated children and therefore have no height because they don't contain their floated children.

    Therefore the floats will rise up alongside other floats and ignore the parent because it has no height.

    You need to clear the floats and clear each block.
    #inner-nav,#inner-header {
    clear:both;/* clear floats above */
    overflow:hidden;/* clear floated children*/
    }

    [/code]

  10. #10
    SitePoint Member
    Join Date
    Jul 2010
    Location
    Melbourne Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally got there, I removed the "nav" all together and created an inner nav for both main and primary, was ending up with more Divs then I needed (I think).

    But if you have a minute to have a quick look at the end result:

    http://pixella.com.au/togrev/index.html

    Just be curious to hear your feedback on whether there still are any errors/bad practices in there.

    Cheers

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's looking ok to me now

    You have closed the inputs but they should be self closing as they are empty elements.
    Code:
     <input type="hidden" name="domains" value="www.theoldergamers.com" />
    The only problem I notice is that on text resize (not zoom) will result in the items breaking to the next line. If the width were defined in ems the page would have stretched to accommodate.

    There are a couple of places where things could be reduced but probably not really worth the effort. I'd use a different method for hiding the text in the h1 rather than text-indent (google glider/levin image replacement).

    Apart from that it looks pretty good.


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
  •