[HTML & CSS] Footer navigatie naast elkaar

[specops0i0]

Hallo,

Ik heb een footer met twee navigatie menu's, en daarnaast nog een div met drie plaatjes die onder elkaar moeten verschijnen. Hier onder komt nog een div verspreid over de hele breedte.

Mijn eerste vraag is; hoe zorg ik ervoor dat de eerste drie contentblokken automatisch over de hele breedte van de pagina worden verdeeld. Zoals je kunt zien in de css staan ze allemaal op 33%. Maar als ik eentje 34% geef, dan moet je in totaal uitkomen op 100% gaat alles weer fout.

Mijn tweede vraag is; in de derde div, waar drie plaatjes instaan, Hoe krijg ik deze onder elkaar.

Alvast hartelijk bedankt!

HTML

code:

<footer>
    <nav id="navfooter" class="links">
            <ul>
                <li>
                    <a href="">Groningen</a>
                </li>
                <li>
                    <a href="#">Assen</a>
                </li>
                <li>
                    <a href="#">Haren</a>
                </li>
                <li>
                    <a href="#">Stadskanaal</a>
               </li>
                 <li>
                    <a href="#">Meppel</a>
               </li>
                 <li>
                    <a href="#">Emmen</a>
               </li>
                 <li>
                    <a href="#">Hoogezand</a>
               </li>
        </ul>
    </nav>

    <nav id="navfooter" class="midden">
            <ul>
                <li>
                    <a href="">Contact</a>
                </li>
                <li>
                    <a href="#">Tip een garage</a>
                </li>
                <li>
                    <a href="#">Algemene voorwaarden</a>
                </li>
                <li>
                    <a href="#">Veel gestelde vragen</a>
               </li>
               <li>
                    <a href="#">Garage zoeken</a>
               </li>
               <li>
                    <a href="#">Klantenservice</a>
               </li>
        </ul>
    </nav>

    <div id="navfooter" class="rechts">
            <a href="#"><img src="./images/fb.png"></a>
            <a href="#"><img src="./images/twitter.png"></a>
            <a href="#"><img src="./images/googleplus.png"></a>
    </div>

</footer>

CSS

code:

footer{
    height: 300px;
    width: 100%;
    background-color: #FFC16F;
}

#navfooter{
    
    height: 200px;
    float: left;
}

#navfooter ul {
    list-style: none;  
}

#navfooter ul li a {
    font-size: 20px;
    color: #000;
    text-decoration: none;
}

.midden{
    border: 2px solid red;
    width: 33%;
}

.links{
    border: 2px solid yellow;
    width: 33%;
}

.rechts {
    border: 2px solid green;
    width: 33%;
}
}

[TERW_DAN]

specops0i0 schreef op vrijdag 15 mei 2015 @ 16:50:
Mijn eerste vraag is; hoe zorg ik ervoor dat de eerste drie contentblokken automatisch over de hele breedte van de pagina worden verdeeld. Zoals je kunt zien in de css staan ze allemaal op 33%. Maar als ik eentje 34% geef, dan moet je in totaal uitkomen op 100% gaat alles weer fout.

dan kom je in totaal niet uit op 100%, dan kom je op 100% + 12pixels uit.
Als je nog niet bekend bent met het box-model, dan kan het je een boel hersengekraak besparen door die eens door te nemen: http://www.w3.org/TR/CSS2/box.html

[specops0i0]

TERW_DAN schreef op vrijdag 15 mei 2015 @ 16:53:
[...]

dan kom je in totaal niet uit op 100%, dan kom je op 100% + 12pixels uit.
Als je nog niet bekend bent met het box-model, dan kan het je een boel hersengekraak besparen door die eens door te nemen: http://www.w3.org/TR/CSS2/box.html

Ah bedankt! Het kwam dus door die borders die er omheen zaten

[BramVroy]

Handig "truukje":

Cascading Stylesheet:

*, *:before, *:after {box-sizing: border-box;}

[_Thanatos_]

Je mag ID's ook niet hergebruiken. Een ID is ter identificatie, en moet dus uniek zijn per pagina. Dus wat een browser hiermee doet, is nu ondefiniëerbaar. Als ik jou was, zou ik ze omzetten in classes, of selecteren op de elementen.

[JaPPa03]

_Thanatos_ schreef op maandag 18 mei 2015 @ 15:47:
Je mag ID's ook niet hergebruiken. Een ID is ter identificatie, en moet dus uniek zijn per pagina. Dus wat een browser hiermee doet, is nu ondefiniëerbaar. Als ik jou was, zou ik ze omzetten in classes, of selecteren op de elementen.

Inderdaad de ID's omzetten nar classes. Dan zou de browser het wel goed moeten doen. Zie deze video voor meer info over ID's in je HTML document.

[Wary87]

Je kan de blokken ook een width van 33.333% meegeven of wanneer je LES/SASS gebruikt de totale breedte door 3 te laten delen. Dan krijg je 3 blokken die even groot zijn. En zoals andere users al aangaven box-sizing: border-box gebruiken wanneer je borders gebruikt.

Ook zou ik de classes zoveel mogelijk generiek houden. links/midden/rechts hebben precies dezelfde css. Gebruik een class die je op 3 plaatsen gebruikt. Dat houd je code netter en zorgt voor minder werk/frustratie wanneer je later aanpassingen wilt doen aan je project.