[CSS] Totaal van rechts floatende elementen links floaten

[Verwijderd]

De titel is wellicht wat omslachtig, maar ik zal het proberen uit te leggen:

Ik heb een unordered list die gebruikt wordt als horizontaal navigatiemenu. Omdat het menu visueel uit elkaar overlappende tabs bestaat waarbij de meest linker tab de bovenste is, float ik alle list items rechts met een negatieve linkermarge. Hierdoor zet de browser dus de eerste tab helemaal rechts neer, de tweede links ervan met wat overlap, etc. Als ik ze links zou floaten, dan is de stapelvolgorde verkeerd

Nu het probleem: de ul heeft geen vaste breedte, omdat het om een liquid design gaat en het aantal en de breedte van de tabs variabel is. De tabs worden daarom dus allemaal uiterst rechts gefloat in die ul, wat natuurlijk volkomen logisch is aangezien ze daar floaten.

Wat ik echter wil is dat er links van de tabs geen witruimte is, zodat de floatende tabs helemaal links in de ul staan. Ik heb alle mogelijke combinaties van float e.d. geprobeerd, maar ik vraag me af of het uberhaupt kan. Voorwaarde is dat de ul in de flow blijft, aangezien het element waar de ul in staat mee moet rekken met de hoogte van de ul.

Wie heeft er een idee hoe dit op te lossen, of wellicht een andere manier om de tabs vanaf rechts te laten overlappen (alle tabs een andere z-index geven is geen optie, aangezien ze dynamisch gegenereerd worden)?

[Rekcor]

Wil je een voorbeeld + wat relevante code posten? Dit is een beetje lastig oplossen zo (jij kunt je menu waarschijnlijk dromen, wij niet )

[ Voor 24% gewijzigd door Rekcor op 20-03-2007 09:16 ]

[Verwijderd]

Zal ik zo even doen. Het leek mij niet zo relevant, aangezien het meer om het concept gaat van het links uitlijnen van een groep rechts floatende elementen. Een ul kan iedereen ook wel dromen lijkt me Maar ik zal zo even wat posten.

De relevante code:

HTML:

<ul id="mainmenu">
    <li><a href="#">Nieuwe tab</a></li>
    <li><a href="#">Weblogs</a></li>
    <li><a href="#">Internet</a></li>
    <li><a href="#">Sport</a></li>
    <li><a href="#">Economie</a></li>
    <li><a href="#">Algemeen</a></li>
</ul>

Cascading Stylesheet:

#mainmenu {
    margin: 43px 0 0 174px;
}

#mainmenu li {
    height: 26px;
    margin-left: -8px;
    padding-left: 6px;
    float: right;
    position: relative;
    background: url(../images/bg_tab_left.gif) no-repeat top left;
}

#mainmenu li a {
    height: 19px;
    display: block;
    float: left;
    padding: 7px 27px 0 9px;
    background: url(../images/bg_tab_right.gif) no-repeat top right;
}

Zowel een background op de li als op de a, aangezien het om een meeschalende tab gaat.

[ Voor 64% gewijzigd door Verwijderd op 20-03-2007 10:27 ]

[moozzuzz]

Ik vrees dat je het met JS zal moeten oplossen (ik krijg alvast geen gewenst resultaat: m'n div wordt 100%) Ik wou eerst de UL links uitlijnen, doch die is ook te groot.

[ Voor 22% gewijzigd door moozzuzz op 20-03-2007 23:58 ]

[Verwijderd]

Ik heb het inmiddels anders opgelost (op een vrij slimme manier al zeg ik het zelf), waardoor alle tabs links gefloat worden maar ze visueel toch lijken te overlappen. Ik heb daartoe het te overlappen deel in de achtergrondplaatjes transparant gemaakt, zodat de onderliggende tab in feite er overheen lijkt te liggen. Om bij de eerste tab een gat te voorkomen (daar ligt geen tab achter immers), heb ik daarvoor een 'opvulafbeelding' als achtergrondafbeelding voor de ul gebruikt. Snappie?

[CH4OS]

Verwijderd schreef op woensdag 21 maart 2007 @ 09:28:
Ik heb het inmiddels anders opgelost (op een vrij slimme manier al zeg ik het zelf), waardoor alle tabs links gefloat worden maar ze visueel toch lijken te overlappen. Ik heb daartoe het te overlappen deel in de achtergrondplaatjes transparant gemaakt, zodat de onderliggende tab in feite er overheen lijkt te liggen. Om bij de eerste tab een gat te voorkomen (daar ligt geen tab achter immers), heb ik daarvoor een 'opvulafbeelding' als achtergrondafbeelding voor de ul gebruikt. Snappie?

Hoe heb je dit opgelost dan (post eens wat code)?
Mochten er meer mensen zijn of komen met dit probleem, dan kunnen ze jouw code als voorbeeld gebruiken.

Tevens ben ik eigenlijk ook benieuwd naar het eindresultaat.
Is er een mogelijkheid om het te kunnen / mogen zien?

[P.O. Box]

Ik weet niet echt of dit hetzelfde probleem is... maar ik heb het volgende en heb al vanalles zitten prutsen met marges en paddings en widths, maar kom er niet uit zonder tables te gebruiken...

ik heb ook tabbladen boven een div... deze tabbladen bevatten namen van landen... in dit voorbeeld: Australia, India, The Netherlands, United Kingdom, Spain

Deze staan in een ul... nu wil ik dat de tabs verdeeld worden over de complete breedte van de div. Op zich is dat dan op te lossen met iedere tab een width van (in dit geval) 20% te geven... echter: India past veels te ruim in zo'n tab, terwijl "The Netherlands" daar niet in past... ik wil dus eigenlijk dat de browser zelf een mooie verdeling uitrekent.... de enige oplossing die ik zelf kan bedenken is om met tables te werken... maar dat wil ik eigenlijk het liefst voorkomen...

ik ben overigens pas net bekend met deze manier van werken (inhoud en opmaak scheiden) n.a.v. een topic hier op tweakers... probeer mijn site nu om te zetten in deze benadering...

HTML:

        <div id="tabs">
            <ul>
                <li>United Kingdom</li>
                <li>India</li>
                <li>The Netherlands</li>
                <li>Spain</li>
                <li>Australia</li>
            </ul>
        </div>

        <div id="content">
                                     <p>bladibla</p>
        </div>

Cascading Stylesheet:

#tabs {
    display: inline;
    float: left;
    width: 480px;
    margin: 0px;
}

#tabs ul {
    display: block;
    float: left;
    width: 100%;
    margin: 0px;
}

#tabs ul li {
    display: inline;
    float: left;
    list-style-type: none;
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
}

#content {
    display: inline;
    text-align: center;
    overflow: hidden;
    padding-top: 15px;
    float: left;
    width: 480px;
    background-color: #E7E7D6;
    border: 1px solid #949C9C;
}

[Verwijderd]

GJ-tje schreef op woensdag 21 maart 2007 @ 10:45:

Hoe heb je dit opgelost dan (post eens wat code)?
Mochten er meer mensen zijn of komen met dit probleem, dan kunnen ze jouw code als voorbeeld gebruiken.

Ik zal vandaag of morgen even een testcase online zetten. Het gaat om code voor een klant die ik niet 1-op-1 kan gebruiken voor een demo, vandaar.

[ Voor 47% gewijzigd door Verwijderd op 21-03-2007 11:01 ]

[Verwijderd]

Edwardvb schreef op woensdag 21 maart 2007 @ 10:58:

ik wil dus eigenlijk dat de browser zelf een mooie verdeling uitrekent....

1: Wat de uitkomst ook is: ga hier geen tabellen voor gebruiken

2: Volgens mij kan dit niet. Wel zou je per li een padding links en rechts kunnen gebruiken, waardoor alle tabs evenveel lege ruimte hebben naast de teksten. Hiermee heb je ze echter niet uitgevuld over de volledige breedte. Is dit laatste een absolute vereiste?

[P.O. Box]

helaas is dat wel een absolute vereiste ja... omdat er daarboven ook weer lagen tabs komen en het er anders niet uitziet...

ik had idd al uit andere topics begrepen dat tables eigenlijk regelrechte no-go's zijn... maar ja, moet toch wat he

[edit]
ik kan natuurlijk ook zelf de mooiste widths voor ieder tabblad uitrekenen en iedere tabblad een eigen klasse geven met zijn bijbehorende width... maar dat vind ik nou niet echt een mooie oplossing...

[ Voor 29% gewijzigd door P.O. Box op 21-03-2007 11:09 ]

[TeeDee]

Ik vond je eerste stuk code al een interessante oplossing.
Mocht je een testcase in elkaar kunnen zetten: graag!

[Verwijderd]

Verwijderd schreef op woensdag 21 maart 2007 @ 11:03:
1: Wat de uitkomst ook is: ga hier geen tabellen voor gebruiken

Tussenoplossing: ik zou in mijn html de UL laten staan en die dan d.m.v. een script vervangen door een table. André heeft ook zoiets bedacht, waarmee je UL's kunt omzetten in SELECT's.

Je menu blijft spiderbaar en leesbaar (maar minder mooi) voor gebruikers zonder javascript en toch heb je het effect dat je wil.

[P.O. Box]

hmmm... ik wil juist zoveel mogelijk voorkomen javascript te gebruiken...

maar slaan spiders tabellen echt helemaal over ofzo? of heeft de inhoud van een tabel een lagere prioriteit in hun indexering?

[Verwijderd]

Edwardvb schreef op woensdag 21 maart 2007 @ 13:59:slaan spiders tabellen echt helemaal over ofzo? of heeft de inhoud van een tabel een lagere prioriteit in hun indexering?

Daar zijn volgens mij duizenden meningen over (iemand?), maar tables zijn niet bedoeld voor layout en je hebt relatief veel html nodig voor weinig inhoud. In die zin is het geen goed idee om tables voor layout te gebruiken. Een UL met links is gemakkelijker herkenbaar als datgene wat het eigenlijk is en dat is dus goed.

Edwardvb schreef op woensdag 21 maart 2007 @ 13:59:
hmmm... ik wil juist zoveel mogelijk voorkomen javascript te gebruiken...

Als je site/pagina niet werkt zonder javascript ben je niet goed bezig. Maar ik zie geen reden om het te laten als alles ook werkt zonder javascript. Het moet ahw zorgen voor iets "extra's". Zo gebruik ik javascript althans.

Ik gebruik bijvoorbeeld javascript in een formulier om ervoor te zorgen dat er alleen maar cijfers worden ingevoerd in een veld waar ik een getal wil hebben. Dit is ALLEEN bedoeld om typefouten te voorkomen en is dus niet de echte check. Er komen dan ook geen foutmeldingen uit javascript.

Er vindt altijd een check op de ingevoerde gegevens plaats door php na het submitten van het formulier. Is de invoer geen getal, dan gaan we terug naar het formulier met een foutmelding.

[Verwijderd]

Dit kan vast 1000 x netter, maar onderstaande werkt bij mij:

Cascading Stylesheet:

#deTable {
    width:100%;
}
#deTable td {
    text-align:center;
}

JavaScript:

function makeTable(){
    var deDiv = document.getElementById("tabs"); // de div
    var deUL = document.getElementById("deUL"); // en de ul
    var landen = new Array(); // hier komt de html van de LI's in
    var teller = 0;
    while (deUL.firstChild){ // Haalt html uit de LI's
        if (deUL.firstChild.tagName=="LI") { //ivm textnodes
            landen[teller]=deUL.firstChild.innerHTML;
            teller++;
        }
            deUL.removeChild(deUL.firstChild); // en gooi LI weg
    }
    deDiv.removeChild(deUL); // UL weggooien

    var deTable = document.createElement("table"); // maak een table
    deTable.id = "deTable"; // geef 'm een id voor css
    deDiv.appendChild(deTable); // zet table neer
    
    var deRij = deTable.insertRow(0); // maak een TR
    for (inhoud in landen){
        deCel=deRij.insertCell(-1); // maak een nieuwe TD na de vorige
        deCel.innerHTML=landen[inhoud]; // en vul 'm met de html
    }
}

HTML:

<div id="tabs">
   <ul id="deUL">
    <li>United Kingdom</li>
    <li>India</li>
    <li>The Netherlands</li>
    <li>Spain</li>
    <li>Australia</li>
  </ul>
</div>

Je moet de functie ook nog aanroepen natuurlijk.

edit:
JS-comment aangepast.

[P.O. Box]

dank je wel... ik ga me er op storten...

[moozzuzz]

Edwardvb schreef op woensdag 21 maart 2007 @ 10:58:
Ik weet niet echt of dit hetzelfde probleem is...

- Is een ander probleem in dezelfde categorie ;^)
- lukt het ook niet met padding auto? (even geen tijd om het zelf te testen)