Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy floating troubles...

    i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

    i've got a page that basically follows this order:
    -header (h1)
    -4 main menu blocks (div-ul-li-a)
    -firefox plug (h3)
    -main content container (div)
    ----... (small bit of irrelevant content)
    ----google adsense block (p)
    ----entry container (div)
    -------entries (div-h4-ul-li)
    ----end entry container (/div)
    -end main content container (/div)
    -4 less-relevant menu blocks (div-ul-li-a)
    -footer (hr-p)

    if that's confusing to you, check out the source code here: http://www.gogogadgetearl.com/working/

    anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

    problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: http://www.stopdesign.com/articles/css/replace-text/ -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

    problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

    basically, i want my xhtml 1.1 'working page' (http://www.gogogadgetearl.com/working/) to look and act like my current page: http://www.gogogadgetearl.com/

    ==stipulations==
    -i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
    -i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

    ==source code==
    working xhtml (veiw source) - http://www.gogogadgetearl.com/working/
    working css - http://www.gogogadgetearl.com/workin...sic_common.css
    current xhtml (veiw source) - http://www.gogogadgetearl.com/
    current css - http://www.gogogadgetearl.com/css/default_common.css
    if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)


    a HUGE thank-you to anybody willing to help me!!

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    this diesnt fix yr problems, but for a star, i think your right column should be in a div#right, not a bunch of divs that are by themselves floating right symantically above your content. ... also is the desired effect to get your ADS like here?

    Code:
    #adsense
    {
    position:relative;
    top:-300px;
    margin-bottom: 16px;
    	margin-left: 0px;
    	float: right;
    }
    
    #content_entries {
    ...
    margin-right:200px;
    }
    just trying to clarify.

    O!!... btw, ad's suck.. imho... but thats just me



    i think the problem might become more appearent if you think in columns, but im nt sure yet,..... lookin at it though.... ill let ya kno...
    Last edited by zro@rtv; 07-16-2005 at 12:37 PM. Reason: columns?
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, ads suck, but google ads aren't too bad and they make a killer over other ads. i get enough to pay for my web hosting! ;-)

    well, that didn't really solve my problem. setting the margin of the entries container to 200px makes the width of the entries really short all down the page. also, putting the menu blocks into one container div would require me to put the less-relevant menus above my main content in the xhtml, forcing those viewing my page without a stylesheet (e.g. viewing my site with lynx from a linux console) to have to scroll past a bunch of junk just to get to the content. i know there's a way, i just haven't found it yet.

    if anybody has, i'd love to see it! ;-)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •