[CSS]Faux-collums toch niet werkend.

[Ramasha]

Beste Tweakers,

Na succesvol Faux-collums werkend te hebben op een website van mij, ben ik momenteel bezig met een nieuwe website. In plaats van een balk rechts (en de content erboven in de HTML) is het de bedoeling dat deze nu links komt.
Tot zover geen probleem, hier een daar left & right veranderen. Maar toen ik de pagina opende in FF (IE komt later) zag ik tot mijn schrik dat het menu pas begon nadat de tekst in het content vlak was afgelopen. Nu dacht ik misschien komt het door de Lijst (ul & li). Dus de tekst vervangen door een alinea lipsum. Ook dit had niet het beoogde resultaat.

Heb heel wat tutorials gelezen, zelfde broncode etc. Alleen wil ik mijn content boven me menu hebben, ivm met google).

De CSS (belangrijkste deel:)

Cascading Stylesheet:

#content {
    width:817px;
    height:588px;

    margin: 0px auto;

    background-color: #b3814e;
}
    #contentText {
        width:623px;
        
        float:right;
    
        margin:0px 0px 0px 194px;   
    }
    #subMenu {
        width:191px;

        margin:0px;
        padding:0px;
            
        text-align:center;
    }

De HTML

HTML:

    <!-- CONTENT -->
    <div id="content">
        <!-- CONTENT TEXT-->
        <div id="contentText">
            <h2>Welcome at Egypt at War</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean risus orci, bibendum nec, sodales eget, placerat vel, est. Donec vulputate ante id erat. Mauris lorem. Sed non enim. Duis porta aliquam lorem. Aenean eu purus ac nunc varius porta. Sed eu ipsum id tellus aliquet ornare. Proin libero orci, pretium at, ullamcorper ac, faucibus ac, est. Quisque neque nisl, sodales vitae, aliquam id, tempus vitae, enim. Integer rutrum. Integer neque. Curabitur massa pede, fringilla eu, vulputate at, elementum ut, metus.
</p>
        </div>
        <!-- /CONTENT TEXT-->
        <!-- CONTENT SIDE -->
        <div id="subMenu">
            <p>
 Praesent sed dui. Vivamus eu felis. Aliquam eu mi luctus est blandit facilisis. Nulla dui. Maecenas gravida gravida augue. Praesent convallis risus ut turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus suscipit. Praesent condimentum, neque nec interdum elementum, nisi urna nonummy nulla, ac malesuada risus mauris sit amet justo. Mauris odio. Suspendisse risus arcu, eleifend id, ullamcorper at, ultricies sit amet, justo. Sed gravida purus at turpis. Nulla facilisi. Nulla lacus. Fusce dictum iaculis tortor. Sed euismod. Ut augue nisl, mollis eu, pellentesque ut, aliquam in, quam.
</p>
        </div>
                
        <!-- /CONTENT SIDE -->
    </div>
    <!-- /CONTENT -->

Nu is mijn vraag of mensen weten welke blunder ik al 7dagen niet kan vinden. Voor de geintresseerde is er ook een 'test-case' beschikbaar. Deze bevat de volledige HTML & CSS.

Met vriendelijke groeten,

Ramasha

[IntToStr]

Draai het eens om. Zet submenu voor content. Of doe een float: left op het submenu en zet een margin-left: 194px op de contentText.

[Ramasha]

IntToStr schreef op donderdag 15 maart 2007 @ 16:44:
Draai het eens om. Zet submenu voor content. Of doe een float: left op het submenu en zet een margin-left: 194px op de contentText.

Submenu voor de content zal helaas geen optie zijn. Heb het eerder gehad dat dit door o.a. google wordt aangemerkt als content van mijn website (wat dus niet zo is).

Margin-left staat er al op. Heb wel de float toegepast zie hiervoor de test-case.

[IntToStr]

position: absolute; op de subMenu deed het bij mij.
In dit geval nodig omdat je de volgorde in de flow omdraait denk ik. (Niet 100% zeker)

[Ramasha]

IntToStr schreef op donderdag 15 maart 2007 @ 17:00:
position: absolute; op de subMenu deed het bij mij.
In dit geval nodig omdat je de volgorde in de flow omdraait denk ik. (Niet 100% zeker)

Bedankt , is inderdaad de oplossing. Ik denk inderdaad dat je de flow omdraait. Misschien kan iemand anders hier duidelijkheid over geven?

[Spockz]

Zoiets?

http://testserver2.spockz.nl/ramasha/

zonder position: absolute;

[ Voor 29% gewijzigd door Spockz op 15-03-2007 17:13 ]

[moozzuzz]

Ramasha schreef op donderdag 15 maart 2007 @ 16:38:
Alleen wil ik mijn content boven me menu hebben, ivm met google).

- Ook als je een suckerfish-menu wil, is dat belangrijk :^)
- Als je het submenu absolute zet, is het niet meer nodig om te floaten...