List met social buttons

[Verwijderd]

Ha Tweakers,

Ik ben bezig met een website waarbij ik in de footer een list heb met een divider zodat er ruimte zit tussen de li's. Nu probeer ik social buttons toe te voegen alleen drukt deze de gehele list naar beneden.

Tevens is het zo dat ik probeer om ook een deel van de li rechts uit te lijnen van de footer alleen wordt deze in IE7 niet goed weergegeven (horizontaal klopt het niet).

HTML:

code:

                <footer id="footer">
                
                <nav id="footernav">
                    <ul class="footernav">
                        <li>
                        &copy;2012 Van der Ley
                        </li>
                        <li class="divider"></li>
                        <li>
                        <a href="#" title="#">Algemene voorwaarden</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                        <a href="#" title="#">Sitemap</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                        Volg ons:
                        <img src="images/facebook.png"/>
                        </li>
                        <li class="footeralignright">
                        Webdesign: <a href="#" title="#" target="_blank">#</a>
                        </li>    
                    </ul> 
                </nav>
                
                </footer>

CSS:

code:

#footer {   
    background:url(../images/footer-bg.png) repeat-x;
    width:1100px;
    height:175px;
    float:left;
    clear:both;
    margin:20px 0 0 0;
    padding:0;
}

#footer a { 
    color:#fff;
    text-decoration:none;
    position:relative;
    z-index:1000;
}

.divider{
    padding:0 40px; 
}

.footeralignright{
    float:right;
}

#footernav{
    color:#fff;
    float:left;
    list-style:none;
    margin:75px 0 0 0;
    padding:0;
    width:1100px;
}

#footernav ul li{   
    display:inline;
    position:relative;
}

#footernav ul li a{
    text-decoration:none;
}

Hier een screenshot in Chrome:
http://i46.tinypic.com/nlvght.jpg

IE7
http://i47.tinypic.com/6tl853.jpg

De list moet horizontaal zijn. En de social icons moeten gecentreerd zijn ten opzichte van de list. Wat moet ik toevoegen aan de CSS? Hopelijk iemand met een antwoord. Alvast bedankt

[Zoefff]

Om te beginnen strooi je te pas en te onpas met floats, stop daar mee. Als ik de afbeeldingen bekijk kan ik me niet voorstellen dat je op #footer en #footernav een float nodig hebt.

Daarnaast misbruik je de float property op .footeralignright. Verderop maak je alle li's namelijk inline elementen. Dat is prima, maar floats mogen alleen gebruikt worden op blokelementen. Het lijkt meestal wel te werken, maar kan ook resulteren in ongewenste resultaten.

Zonder alles voor te kauwen zou ik twee dingen doen:
[list=1]• Overbodige floats weggooien (hint, overflow: hidden;) en de list-items danwel allemaal inline, danwel allemaal als floatend blockelement tonen.
• Spelen met vertical-align op de social icons om de uitlijning ten opzichte van de tekst goed te krijgen. Eventueel zou je daarvoor de line-height nog kunnen mis- of gebruiken.

[Verwijderd]

Bedankt voor je reactie, ja ik had wat floats extra toegevoegd om te kijken of dat werkte. Ik heb inmiddels alle overbodige floats weer verwijderd uit mijn CSS. De vertical-align werkt

Wat bedoel je met overflow:hidden; ? @ float weggooien.

BTW met een span op het webdesign gedeelte dat ik rechts wil uitlijnen mag toch wel een float?

[ Voor 20% gewijzigd door Verwijderd op 10-07-2012 11:47 ]

[Zoefff]

Verwijderd schreef op dinsdag 10 juli 2012 @ 11:44:
Wat bedoel je met overflow:hidden; ? @ float weggooien.

Floats worden "vaak" misbruikt om blokelementen zich zo te laten gedragen dat ze worden opgerekt door de inhoud. In jouw geval bijvoorbeeld de ul. Die krijgt een bepaalde hoogte aan de hand van de li's die je er in stopt. Zodra je de li's float, heeft de ul geen hoogte meer. Float je deze óók, dan wordt de ul weer netjes opgerekt door de elementen er in. Het floaten is daarbij mijns inziens alleen de verkeerde oplossing. Met het definieren van de overflow kan je de ul ook in het gareel krijgen, waarbij de childs het element netjes oprekken.

BTW met een span op het webdesign gedeelte dat ik rechts wil uitlijnen mag toch wel een float?

Het hangt er van af wat je doet. Als je de elementen naast elkaar positioneert d.m.v. display:inline dan is het merkwaardig om er eentje te floaten omdat het dan geen blokelementen meer zijn. Doe je de positionering van de li's met een float:left, dan kan je de laatste uiteraard wel netjes floaten

[Verwijderd]

Ok bedankt voor de duidelijke uitleg Zoefff! het is me gelukt

[OkkE]

Waarom de extra .divider's als je die ruimte ook kunt maken met de padding op de elementen met inhoud?

Post a.u.b. ook even je oplossing; zo hebben mensen die later via de search hier komen er ook wat aan.

[R4gnax]

Zoefff schreef op dinsdag 10 juli 2012 @ 12:03:
[...]

Floats worden "vaak" misbruikt om blokelementen zich zo te laten gedragen dat ze worden opgerekt door de inhoud. In jouw geval bijvoorbeeld de ul. Die krijgt een bepaalde hoogte aan de hand van de li's die je er in stopt. Zodra je de li's float, heeft de ul geen hoogte meer. Float je deze óók, dan wordt de ul weer netjes opgerekt door de elementen er in. Het floaten is daarbij mijns inziens alleen de verkeerde oplossing. Met het definieren van de overflow kan je de ul ook in het gareel krijgen, waarbij de childs het element netjes oprekken.

Je haalt een paar zaken door elkaar. Blok elementen worden normaliter altijd verticaal opgerekt door hun inhoud, zolang ze geen max-height of height gedefinieerd hebben gekregen. Float boxes gelden echter niet als normale inhoud en mogen buiten een block element door vloeien. (Dit is ergens ook logisch als je na gaat dat floats origineel bedoeld zijn voor plaatjes waar meerdere tekst paragrafen langs moeten kunnen lopen.) Hier is echter weer een kleine uitzondering op; alle element boxes (incl. float boxes) aangemaakt binnen een zgn. 'block formatting context' mogen nooit buiten het element vloeien wat deze context aan heeft gemaakt (ook wel het 'containing element' genoemd). Toevalligerwijs is het zo dat zowel float: left|right als overflow: hidden|auto|scroll een nieuwe block formatting context aanmaken.

Block formatting contexts hebben nog wel meer eigenaardige eigenschappen. Zo voorkomen ze ook het collapsen van aanliggende margins. Er wordt nog wel eens gezegd 'floats contain margins', maar dat klopt dus niet. Floated elementen maken nieuwe block formatting contexts aan en deze contexts voorkomen het samenvallen van marges, maar de floated elementen zullen de marges niet 'bevatten'. (Render bijv. maar eens een border; de marges zullen er nog steeds buiten liggen.

(En voor de ingewijden die het zich nog herinneren en/of er dagelijks nog mee vechten: het concept 'block formatting context' is eigenlijk niets anders dan een evolutie van Microsoft's oude 'layout' concept. Maar dat wisten jullie waarschijnlijk al wel. )

Zoefff schreef op dinsdag 10 juli 2012 @ 12:03:
[...]
Het hangt er van af wat je doet. Als je de elementen naast elkaar positioneert d.m.v. display:inline dan is het merkwaardig om er eentje te floaten omdat het dan geen blokelementen meer zijn. Doe je de positionering van de li's met een float:left, dan kan je de laatste uiteraard wel netjes floaten

Floated elementen hebben altijd block semantics. Het is zelfs zo dat het combineren van display:inline met float:left|right een standards compliant manier is om de 'double float margin'-bug in IE6 te voorkomen.

Zelfs zou ik een oplossing hiervoor heel anders in elkaar steken. Ik zou gebruik maken van inline-blocks en text justification. Afgezien van de ietwat vieze last-line hack is dit een zeer elegante oplossing die ook met line wrapping om kan gaan bij smallere breedtes.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
    <style>
        #footernav {
            border    : 1px solid #000;
            padding   : 0.35em .7em;
            min-width : 400px;  
        }
        
        .nav-justified {
            line-height  : 4em;
            list-style   : none outside;            
            margin       : 0 0 -4em 0; /* -4em hides fake last text line */
            padding      : 0;
            text-align   : justify;         
            width        : 100%;        
        }

        /* Force a fake last text line by using a 100% width,
         * which makes all -real- text lines justify. */
        .nav-justified:after {
            content        : "";
            display        : inline-block;
            visibility     : hidden;
            width          : 100%;      
        }

        .nav-justified > li {
            display        : inline-block;
            margin         : 0;
            overflow       : hidden;
            padding        : 0;
            text-align     : left;
            vertical-align : middle;
        }
        
        
        /* For IE7, which supports neither :after nor inline-block, but does
         * have finer control over justification and can emulate inline-block
         * by using 'layout'. */
        .nav-justified {
            *text-justify  : distribute-all-lines;          
            *margin-bottom : 0;
            *zoom          : 1; /* needs 'layout' for text-justify to work */
        }
        
        .nav-justified > li {
            *display : inline;
            *zoom    : 1;
        }
    
    </style>
</head>
<body>
<nav id="footernav">
        <ul class="nav-justified">
                <li>&copy;2012 Van der Ley</li>
                <li><a href="#" title="#">Algemene voorwaarden</a></li>
                <li><a href="#" title="#">Sitemap</a></li>
                <li>Volg ons: <img src="images/facebook.png"/></li>
                <li>Webdesign: <a href="#" title="#" target="_blank">#</a></li>    
        </ul> 
</nav>
</body>
</html>

[Zoefff]

Dat is ook precies wat ik bedoel, alleen sla ik in de uitleg de oorzaak van het gedrag van floats over en probeer ik alleen aan te geven dat de float-properties vaak ten onrechte gebruikt worden om block formatting context te "triggeren".

Naast het gebruiken van de float property zijn er ook andere trucs om dit te triggeren, bijvoorbeeld de content truc die je hierboven beschrijft. Punt blijft dat je properties misbruikt om iets voor elkaar te krijgen. Ook in het geval van mijn voorgestelde overflow: hidden, wat eigenlijk een ander doel heeft. Het is dan een kwestie van properties gebruiken die zo weinig mogelijk bijwerkingen hebben maar toch nog elegant zijn in het gebruik. Mijn persoonlijke voorkeur is het gebruiken van overflow omdat dit wat beter leesbaar (en te debuggen) is, in tegenstelling tot de content-truc die bovendien niet in oude(re) browsers werkt.

Het is interessant om te zien hoe iedereen een eigen visie heeft op de juiste oplossing. Persoonlijk vind ik dat je in jouw oplossing veel te veel 'trucjes' gebruikt en ook nodig hebt voor b.v. IE vanwege de opzet die je gebruikt. Het kan allemaal veel eenvoudiger en als je een beetje rekening houdt met IE ook nog zonder malle hacks:

HTML:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
    <head>
        <title>Float testcase</title>

        <style type="text/css">
            nav {
                background: #af0011;
                color: #fff;
            }

            nav ul {
                list-style-type: none;
                overflow: hidden;
                margin: 0;
                padding: 0.5em 0;
                line-height: 40px;
            }

            nav ul li {
                float: left;
                margin: 0 2em;
            }

            nav ul li.last-child {
                float: right;
            }

            nav img {
                width: 40px;
                height: 40px;
                vertical-align: middle;
            }
        </style>
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <nav>
            <ul>
                <li>&copy;2012 Van der Ley</li>
                <li><a href="#" title="#">Algemene voorwaarden</a></li>
                <li><a href="#" title="#">Sitemap</a></li>
                <li>Volg ons: <img src="images/facebook.png"/></li>
                <li class="last-child">Webdesign: <a href="#" title="#" target="_blank">#</a></li>
            </ul>
        </nav>
    </body>
</html>

Kortom:

• UL met line-height gelijk aan de hoogte van de nukkige afbeelding
• Vertical-align gedefinieerd op de afbeelding (!)
• .last-child i.p.v. :last-child om IE te ondersteunen
• Als je rekening houdt met wat nukken van IE (b.v. padding op de ul i.p.v. margin op de li) werkt het zonder malle hacks ook prima. In tegenstelling tot jouw testcase waarbij de uitlijning in IE7 ook nog niet helemaal correct is?

[CH4OS]

Eigenlijk offtopic, maar aangezien je HTML5 gebruikt, denk ik dat dit ook wel iets is:

HTML:

<html dir="ltr" lang="en-US">

zou ik echter aanpassen naar

HTML:

<html dir="ltr" lang="nl-NL">

.
Je gebruikt immers geen engelse taal op de pagina, maar Nederlands.

Daarnaast zou ik ook verder even kijken naar semantiek an sich, als je toch al HTML5 wil gaan gebruiken, zou ik ook zeker daar wat tijd in steken; een <nav> in de <footer> lijkt mij althans niet logisch, <nav> is naar mijn weten voor het (hoofd)menu bedoeld (is althans de enige logische plek die ik me kan bedenken), het lijkt me daarom wat onlogisch als dat in de footer komt te staan. Ik zou dan dus je ongesorteerde lijst direct in de footer plaatsen.

[Zoefff]

Het is m'n standaard copy-paste testcase pagina. Dat de taal niet correct is boeit me bijzonder weinig

[CH4OS]

Dan zou ik het in de uiteindelijke pagina óf weglaten óf de juiste waarde meegeven, als het jou toch niet zo boeit. Kan me voorstellen dat het wel boeit voor slechtzienden.

[Voutloos]

Anders let je even alleen maar op de relevante regels. Of schrijf een perfecte testcase inc. compleet boek van minstens 499 pagina's hoe jij tot die perfecte testcase gekomen bent, inclusief alle hier compleet offtopic kennis die je daarvoor gebruikt hebt.

[geert1]

De door Zoefff aangedragen oplossing is prima. Hiermee ben je ook af van de niet gewenste extra li-elementen die alleen dienden als scheidingsruimte. Zoiets is namelijk not done; elk element hoort semantische waarde te hebben tenzij dat absoluut niet mogelijk is (en uitzonderingen doen zich tegenwoordig alleen nog voor in behoorlijk complexe interfaces of onmogelijke grafische ontwerpen).

Nog één tip, ook voor Zoefff blijkbaar: Voor het clearen van floats is "Overflow: hidden" niet altijd ideaal. Deze methode heeft twee voorname nadelen, namelijk dat het printen van deze elementen niet altijd werkt wanneer het overflow-element over meerdere pagina's valt, en daarnaast maakt de overflow-methode het onmogelijk om iets buiten je element te plaatsen. Zou je dus bijvoorbeeld een elementje absoluut willen positioneren buiten het overflow-blok, dan gaat dat niet.

In plaats van overflow zou ik dus kijken naar clearen via :after. Daarvoor staan hier de al lang gebruikte versie, en onderin een nieuwe die in bepaalde gevallen nog iets beter schijnt te werken, en nog ietsje simpeler is. Succes verder!

[Zoefff]

Bedankt voor de tip, maar ik had in mijn reactie al aangegeven dat het inderdaad geen ideale oplossing is omdat je hoe dan ook properties misbruikt om iets te bereiken waar ze eigenlijk niet voor bedoeld zijn. Maar zoals aangegeven vind ik de :after truc nog slechter daarvoor. Lastig(er) te debuggen en minder breed ondersteund, waardoor je weer in bochten moet wringen om alles in IE werkend te krijgen.

Het printen zou geen probleem moeten zijn omdat je daarvoor een aparte stylesheet zou moeten ontwikkelen. Het is echter wel iets om rekening mee te houden als je dat niet doet, goede tip

Wat betreft het absoluut positioneren, dat is ook niet geheel correct. Elementen worden gepositioneerd ten opzichte van de eerste parent waarvoor je ook een positie hebt opgegeven. De overflow wordt ook zodanig gerespecteerd, dus:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Float testcase</title>

        <style type="text/css">
            nav {
                position: relative;
            }

            ul {
                overflow: hidden;
            }

            ul li {
                float: left;
            }

            ul li:last-child {
                position: absolute;
                right: 0;
                bottom: 0;
            }
        </style>
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <nav>
            <ul>
                <li>Waa?</li>
                <li>Meukee!</li>
            </ul>
        </nav>
    </body>
</html>

Levert geen enkel probleem op. De position: relative; op nav kan je zelfs achterwege laten, het wordt hoogstens een probleem als je de ul ook actief gaat positioneren.

Disclaimer: het codevoorbeeld betreft een testcase die niet representatief voor de echte wereld is. Semantisch niet correct. Inhetverledenbehaalderesultatenbiedengeengarantievoordetoekomst.

[BtM909]

CptChaos schreef op woensdag 11 juli 2012 @ 13:23:
Dan zou ik het in de uiteindelijke pagina óf weglaten óf de juiste waarde meegeven, als het jou toch niet zo boeit. Kan me voorstellen dat het wel boeit voor slechtzienden.

Volgens mij is de reactie bedoeld alszijnde: het boeit niet voor de testcase hier

We zijn sowieso geen afhaalchinees, dus code letterlijk kopiëren is het laatste wat je zou moeten doen als topicstarter

[R4gnax]

Zoefff schreef op donderdag 12 juli 2012 @ 13:01:
Bedankt voor de tip, maar ik had in mijn reactie al aangegeven dat het inderdaad geen ideale oplossing is omdat je hoe dan ook properties misbruikt om iets te bereiken waar ze eigenlijk niet voor bedoeld zijn. Maar zoals aangegeven vind ik de :after truc nog slechter daarvoor. Lastig(er) te debuggen en minder breed ondersteund, waardoor je weer in bochten moet wringen om alles in IE werkend te krijgen.

que?

Cascading Stylesheet:

.bfc { zoom: 1; }
.bfc:before, .bfc:after { clear:both; content:""; display:table }

Klaar! Alles wat je nodig hebt om een element zichzelf als block formatting context (BFC) te laten gedragen m.b.t. margin collapse en float containment, zonder dat je de nadelen van overflow misbruik hoeft te ondervinden. Met een individuele class als 'mixin' maak je het ook nog eens lekker expliciet en makkelijk terug te lezen in je HTML. Wat wil je nog meer om het debuggen te vergemakkelijken?

Overigens ondersteunen Firebug, de Chrome developer tools en (als ik me goed herinner) ook Opera Dragonfly gewoon het werken met pseudo elementen in hun CSS inspectors. Alleen de IE tools doen er nog wat vreemd mee, maar dat onding loopt in het algemeen toch al minstens 3 jaar achter. (Vraag me af of we bij IE10 eindelijk een live updated DOM paneel krijgen. Zou eens tijd worden...)

Zoefff schreef op donderdag 12 juli 2012 @ 13:01:
Wat betreft het absoluut positioneren, dat is ook niet geheel correct. Elementen worden gepositioneerd ten opzichte van de eerste parent waarvoor je ook een positie hebt opgegeven. De overflow wordt ook zodanig gerespecteerd

[... code sample ...]

Levert geen enkel probleem op. De position: relative; op nav kan je zelfs achterwege laten, het wordt hoogstens een probleem als je de ul ook actief gaat positioneren.

In IE7 en lager werkt het alleen allemaal weer net wat anders; daar wordt niet gepositioneerd tegen het eerste containing block, maar tegen het eerste element wat 'layout' heeft.

Toevalligerwijs zorgen de position waardes relative, absolute en fixed er allemaal voor dat een element deze layout eigenschap krijgt. Ook een overflow:hidden is voldoende om een element layout te geven, waardoor overflow clipping zich dus ook anders gedraagt i.c.m. positionering.

Zelfs iets triviaals zoals een gedefinieerde breedte of hoogte is al voldoende om een element layout te geven. In de praktijk betekent dit dat het heel moeilijk is om comatible te blijven met IE7 wanneer je werkt met containing blocks die niet de directe parent zijn van het te positioneren element zijn.

In IE6 is het zelfs een tikkie erger: de relative waarde geeft in IE6 een element geen layout, waardoor je expliciet iets zoals zoom:1 moet toevoegen om het element als containing block dienst te laten doen.

Godzijdank is IE6 al zo goed als overleden en staat IE7 inmiddels al met één been in het graf.