SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: Fluid with CSS

  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fluid with CSS

    Forgive me if I have the wrong forum but figured since I'm new to CSS this is the right forum to post this in.

    Ok I am currently building a style for vBulletin using CSS which is based on the World of Warcraft: Wrath of the Lich King fan site kit. I have ran into a few problems with the CSS I can't quite figure out. I have searched and searched and still no luck. I'm still new to CSS, learning all the code I can is something I enjoy.

    Let me show you what I have.

    1280x768 Resolution:
    First pic attached.

    1024x768 Resolution:
    Second pic attached.

    As you can tell its not doing an auto resize for anything on the page. I currently have margin for the middle set to '0px 8%' for ev_bg class and '0px 2.75%' for everything class.

    I tried setting margin to auto on both and it really moved everything. If you need to see screenshots of that I can do that.

    EDIT: I have attached the main CSS that gives it the colors and such, if you need the HTML portion I can post that.

    Thanks
    BFC
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,024
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    I will try to have a look at it tomorrow, since your attachment are still pending for approval

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL, I didn't even realize attachments were pending approval. Guess I will just have a read around the forums and such, see what I can come up with. If you want I can PM you links to the images online and the css file.

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,024
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    It doesn't take long. I'll ask for the links if I still don't have enough with this.

  5. #5
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok np

    Trying to make a name for myself and my site, this one little problem has me held up. Hope I can get some good suggestions for a fix.

  6. #6
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w00t, looks like my stuff got approved.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,024
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    First impression is that you are really running out space (horizontally) which is what is giving you the problem. Setting the margins as you did is OK.

    On the other hand, you haven't accounted for the padding of the div or whatever you are using. Remember the box model: left margin + left padding + content + right padding + right margin.

    That's why before we start writing our code we reset all the margins and paddings to 0 (using either Eric Meyer's resetting code which is very complete or other, or something you do. It could be as simple as

    Code:
    {margin:0; padding:0}
    although this one works more slowly than other methods, funny enough)

    I would probably need to look at the HTML, but it looks like the div or table or whatever you are using takes more space than the one it gets when it resizes, and therefore it overrides whatever margin you are setting and then takes some more. After all, content takes precedence

  8. #8
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL, wow, I understood about half of that. Makes sense to me though, the resetting of padding and margin I had in there but help with my issue.

    Ok since I can't put the templates in html or code wrap I'll attach them as files.

    See if maybe I missed a closing div tag or maybe I did something wrong.

    EDIT: Ok I made the CSS an external file and included it in the template for headinclude but it reset the margin and padding which kinda messed things up, still when I resize my browser that pesky black area continues to pursue my efforts.
    Attached Files Attached Files
    Last edited by BFC; Mar 25, 2009 at 13:37.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Do you have a link to the page so we can see first hand (just omit the www and http parts).

    You should also post just html and not php. take the code from View source and post that here as that's all that is important to us along with the full css.

    A link to the site would me much easier.

    Looking quickly at your css you have some basic addition errors in there.

    e.g.

    Code:
    .ev_bg {
        background:url(/images/wotlk/ev_bg2.gif) repeat-y;
        width:93%;
        margin:0 8%;
    }
    93% + 8% + 8% = 109% wide.

    How can that fit inside anything? 100% is the maximum.

    Here also:
    Code:
    #navigation a {
        background:url(/images/wotlk/button_bg2.gif) no-repeat;
        width:100%;
        height:25px;
        display:block;
        padding-left:25px;
        margin:5px 0;
        font-size:13px;
        color:white;
        text-decoration:none;
        line-height:25px;
    }
    100% + 25px = too big for any container.

    You must make sure that what you are telling the browser to do makes sense at the most fundamental level

  10. #10
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, here is the info but keep in mind that it is password protected so I have created a temp guest account to use for getting CSS issues fixed.

    Well I just tried posting with the link without http and www still wouldn't go so I'll PM the info to you.

    EDIT: Lets try this: bluefirecreation.com
    Username: Guest
    Password: guest

    Thats for popup login and forum login.
    Last edited by BFC; Mar 25, 2009 at 16:50.

  11. #11
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to get the black bar on the right shrunk down some. Still playing with a few things. I've converted all padding, margin, and width to % now to play with the numbers a bit and see what happens. I welcome the help still on getting rid of the black bar. By the time I figure it out, I'm sure someone else can point it out in a few mins. lol

    EDIT: Ok I've narrowed down the problem, the right side of the background image is the problem, I'm assuming because its one image it continues to hold that when resizing instead of moving the image with the resize. I might have to cut the image into 2 parts but I hope not. Lets see if someone here at SP can figure it out.
    Last edited by BFC; Mar 25, 2009 at 17:51.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I just looked at the link you sent but it just seems to be the forum section and doesn't look like your image.

    If the problem is a large image holding the page wide then all you can do is place the image inside an element that has overflow:hidden applied so that when the image exceeds the space available the overflow should be hidden.

  13. #13
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Resize your browser and you'll see the problem.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by BFC View Post
    Resize your browser and you'll see the problem.
    Is this in a specific browser or all of them?

    All Im seeing is a forum that resizes all the way down to about 449px before it can't get any smaller. Is this what you mean?

    Obviously it can't get any smaller than the sum of its fixed content so I'm not sure what you expect to happen unless I'm misunderstanding the problem.

  15. #15
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,024
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Do you have a link to the page so we can see first hand (just omit the www and http parts).

    You should also post just html and not php. take the code from View source and post that here as that's all that is important to us along with the full css.

    A link to the site would me much easier.

    Looking quickly at your css you have some basic addition errors in there.

    e.g.

    Code:
    .ev_bg {
        background:url(/images/wotlk/ev_bg2.gif) repeat-y;
        width:93%;
        margin:0 8%;
    }
    93% + 8% + 8% = 109% wide.[/code]

    That's what I meant when I commented about the box model in my first post. I guess I should have been more detailed

    I know I didn't explain myself properly so I apologize. My week has been quite hectic and I am exhausted.

    Although I think that Paul has been clear enough, I will give it another try. What I meant is that every element has a default value for the margin, border and padding (unless we set it to other value)

    When you calculate the room that element will take, you need to take into consideration those values, because they affect the total space it needs. When you set the width of an element, you are simply setting the width of the content and nothing else.

    As an example (I'll use fixed units for clarity purposes):

    Code:
    div {margin: 2px; padding: 2px; border: 1px solid black; width: 300px; height: 150px;}
    [/div]
    With these values, it means that there is a margin of 2px all around the div, and that inside the div, there is a padding of 2px in every sigle side, same with the border.

    You would think that the div will only need 300px (horizontally) because that's the value of the width. But that's not true. From left to right, this div will need:

    2px left margin + 1px left border + 2px left padding + 300px content + 2px right padding +1px right border +2px right margin = 310 px

    If we calculate the vertical space:

    2px top margin + 1px top border + 2px top padding + 150px + 2px bottom padding + 1px bottom border + 2px bottom margin = 160px

    But to fit the window and avoid scrolling, the number of px can't be more than the visible area - scroll bars and others.

    In your case, using percentages, the visible area is 100% (you are leaving the browser to calculate how many pxs there are) but 93%+ 8% + 8% = 109%. No matter what you do, that means that you are already exceeding the visible part.

  16. #16
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't want to sound rude but are you guys even looking at what I said? I said the image on the right, the border, not the forum, the forum is acting fine and how it should.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by BFC View Post
    Don't want to sound rude but are you guys even looking at what I said? I said the image on the right, the border, not the forum, the forum is acting fine and how it should.
    Well you are beginning to sound a little rude

    I have attached an image of what I'm seeing and it will be clear why I have no idea what you are talking about.

    All I need is a link to a site that looks like your original attachment.

    Edit:


    Ahh - ok you didn't tell me I had to select a default style from a dropdown list. I'll have another look now.
    Attached Images Attached Images

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok, I can see the page now and the fist thing I notice is that the borders of the layout are a fixed width image. You can't have a fixed width image with left and right borders on a fluid layout.

    You need to place the left border image in one div and the right border image in another nested div. It seems that you already have this set up anyway but not used it!.

    Use this code.

    Code:
    .ev_bg {
        /*background:url(http://www.bluefirecreation.com/images/wotlk/ev_bg2.gif) repeat-y; can't use this */
        width:84%;
        margin: auto;
    }
    .ev_bg_left {
        background:url(http://www.bluefirecreation.com/images/wotlk/ev_bg_left.gif) repeat-y 0 0;
        width:100%;
    }
    .ev_bg_right {
        background:url(http://www.bluefirecreation.com/images/wotlk/ev_bg_right.gif) repeat-y 100% 0;
        width:100%;
    }
    .everything {
    /*width removed*/
        background:url(http://www.bluefirecreation.com/images/wotlk/wood-weathered.jpg);
        border:1px solid black;
        border-width:0px 1px;
        margin:0 30px;/* MARGIN TO PROTECT THE LEFT AND RIGHT BORDERS FROM BEING RUBBED OUT*/
        min-height:0;
    }
    * html .everything {
        height:1%
    }
    
    Code:
    <div class="ev_bg">
        <div class="ev_bg_right">
            <div class="ev_bg_left">
                <div class="everything">
    
    .... etc...
    
    
    </script>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    That will at least allow the borders on the layout to remain in view.

    The only other issue I notice is that in the navigation you are again using a fixed width image for the nav items which means the nav shrinks but the image will not and the content will overlap it.

    You would need to do make the image scalable. See the sliding doors technique.

    Hope that's a start - time for sleep now

  19. #19
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL, I can never tell when I'm sounding rude or not.

    My bad, go to the bottom and change the style or add ?styleid=2 in the address. The drop down style chooser is the WoW - Wrath of the Lich King style you should be looking at. My bad, I forgot about that.

    EDIT: Just saw your second post Paul. Yeah thats what I was trying to do, I'll try how you suggested and hope it doesn't break on me like before.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'll try how you suggested and hope it doesn't break on me like before.
    Hopefully it should be ok as I copied your page and tested it locally Any problems just shout (nicely ) .

  21. #21
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL, of course nicely if its possible to shout that way.

  22. #22
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that fixed it, I was putting the separated div elements in the wrong place. Thanks alot.


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
  •