Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS help required

Viewing 12 replies - 1 through 12 (of 12 total)
  • This is a request for help with CSS for a custom theme and not to do with the theme that comes with BP. Therefore I have renamed the topic as “CSS Errors” suggests there is an error with the BuddyPress.

    Also, these forums are for BuddyPress support and not the best place to ask for CSS help but I’m sure someone will help :)

    Avatar of lsddesign
    lsddesign
    Participant

    @lsddesign

    Aight can’t wait, thanks bro ;)

    peace.

    Looking at the page quickly (without having viewed any code) it looks like you just haven’t cleared a float. When you float an element (like a div) it’s parent elements collapse unless you clear the float. CSS 101.

    Do some googling, use w3schools.com as a reference site, keep on banging away at it and maybe pick up Eric Meyer’s book on CSS.

    I just realized that of course Eric Meyer has written a lot of books on CSS. LOL. This is the one I’d recommend for a beginner.

    http://bit.ly/1qdGkA

    Avatar of lsddesign
    lsddesign
    Participant

    @lsddesign

    hmm ok…

    still, anyone have a direct answer for me :$?

    cheers,

    aron

    Avatar of lsddesign
    lsddesign
    Participant

    @lsddesign

    looking at the source, this is my main content div:

    #main {

    margin-left: 276px;

    background: #fff;

    min-width: 680px;

    min-height: 540px;

    }

    no float involved :(

    cheers,

    aron

    Like I said, it’s a float issue. You have your entire page wrapped in the #header div (with it’s white background) and there are a number of floated children.

    Avatar of lsddesign
    lsddesign
    Participant

    @lsddesign

    Hey David,

    Srry, but i deleted my header div ( since it was empty anyways ) and i still have the problem :(

    Aron.

    Avatar of Mariusooms
    Mariusooms
    Participant

    @mariusooms

    This is an easy fix. You are indeed floating the .inner-tube to the right on line 60 of your base.css. The best way (imo) is to set the overflow to auto or hidden for the parent element. This method is the best and most cross-browser solution.

    So just add the following to your base.css:

    .main-column {

    overflow: hidden;

    }

    That should do it.

    Avatar of lsddesign
    lsddesign
    Participant

    @lsddesign

    THANK YOU SO MUCH!

    Your awesome :D

    cheers,

    aron

    That’ll work but can result in scrollbars or cutoff images in some cases. This is not a CSS forum… there are better places to learn this stuff… but briefly… I know of four methods to clear floats:

    1. Use extra HTML markup to clear your floats (<br style=”clear:both;” />). Ugly but it works every time.

    2. Use :after (the positioniseverything.net method) to do the same without the added presentational markup. But it doesn’t always work.

    3. Float everything. But you may unleash a positioning nightmare.

    4. Use overflow hidden or auto on the parent. But you may get scrollbars or cut off content in some cases.

Viewing 12 replies - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.