Extra ruimte tussen tekst in navigatie met Div.

[Verwijderd]

Hallo allemaal,

Een paar maanden geleden ben ik begonnen aan een cursus tot webdesigner. Nu kwam ik erachter dat er niet echt diep ingegaan wordt op het gebruik van div. Nu maak ik een website (en ik gebruik voor het eerst divjes) en kom een probleem tegen. Ik heb al wat afgegoogled, maar ik heb nog geen oplossing gevonden.

Ik wil graag de navigatie van de website horizontaal plaatsen. Met photoshop heb ik een achtergrond gemaakt met blokken waarin de verschillende paginatitels moeten komen (home, foto's, contact enz.) Nu wil ik graag wat extra ruimte tussen de kopjes zodat ze netjes in de blokken komen te staan. Hoe kan ik dit het beste doen met div.? Zodat het in elke browser en schermresolutie klopt.

Ik had het geprobeerd met:

code:

.navigatie {
    margin-left: 4%;
    display: inline;
}

In Firefox werkt dit wel, maar in IE en Safari word het helemaal verkeerd weergegeven.

Ik hoop dat mijn uitleg voldoende is! Kan iemand mij hiermee helpen?

Alvast heel erg bedankt!
Groet, Stinkzwam

[WeeJeWel]

float:left; ipv display:inline!

[sjukke]

Hoe is de daadwerkelijke navigatie opgebouwd? Ik hoop met list-items? Plaats die code ook eens.

[Bosmonster]

tipje daarbij, schrijf

div.navigatie

ipv

.navigatie

Makkelijker leesbaar voor anderen (je ziet tenminste om wat voor element het gaat, wat nogal belangrijk is), maar ook voor jezelf in een later stadium als je niet meer precies weet hoe de site in elkaar zat.

En zo weten wij ook gelijk om wat voor element het gaat

[ Voor 9% gewijzigd door Bosmonster op 22-09-2010 17:31 ]

[Verwijderd]

Ik heb geen gebruik gemaakt van list items, omdat ik eigenlijk ook dacht dat daarbij de kopjes altijd onder elkaar komen en niet naast elkaar kunnen staan.

Misschien is het volgende wel helemaal verkeerd. Ik heb alleen al vanalles geprobeerd en nadat dit ook niet lukte heb ik het maar even opgegeven.

code:

<p class="navigatie">
<a href="index.html"><div class="navigatie">Home</div></a>
<a href="hetbedrijf.html"><div class="navigatie">Het bedrijf</div></a>
<a href="werkzaamheden.html"><div class="navigatie">Werkzaamheden</div></a>
<a href="impressie.html"><div class="navigatie">Impressie</div></a>
<a href="contact.html"><div class="navigatie">Contact</div></a></p>
</div>

Bedankt voor de tip over hoe je het beter kan schrijven, dit maakt het inderdaad een stuk overzichtelijker!

[MueR]

Hoe post je code? / Hoe gebruik je de code tag?

Verder:
Block elements (div) mogen niet binnen inline elements (a) worden geplaatst

[Caelorum]

Verwijderd schreef op woensdag 22 september 2010 @ 17:35:
Ik heb geen gebruik gemaakt van list items, omdat ik eigenlijk ook dacht dat daarbij de kopjes altijd onder elkaar komen en niet naast elkaar kunnen staan.

Het "mooiste" is als je een unordered list gebruikt met wat list-items met daarin je linkjes.
Dan kan je daarna een float:left doen op je list-items en via css ook de bullets uitzetten.

Zoiets als dit dus in html

HTML:

<div>
    <ul>
        <li><a href="...">....</a></li>
        <li><a href="...">....</a></li>
    </ul>
</div>

[ Voor 14% gewijzigd door Caelorum op 23-09-2010 00:15 ]

[pieturp]

@Caelorum:

Die omsluitende <div> heb je dan zeer waarschijnlijk niet eens meer nodig

[Verwijderd]

Caelorum schreef op donderdag 23 september 2010 @ 00:13:
[...]

Het "mooiste" is als je een unordered list gebruikt met wat list-items met daarin je linkjes.
Dan kan je daarna een float:left doen op je list-items en via css ook de bullets uitzetten.

Als ik list items gebruik kan ik ze toch niet naast elkaar plaatsen? Ik heb geprobeerd wat je zei alleen bij mij komen ze onder elkaar. En dan loop ik nog steeds tegen het probleem aan dat ik er geen extra ruimte tussen krijg.

Dit is het plaatje waarin het moet komen te staan:

http://img696.imageshack.us/img696/1998/navigatie.gif

(nogmaals ik ben net begonnen met het gebruik van div, dus excuus als ik iets verkeerd begrijp of het verkeerd toepas)

[zwittrooper]

Dat kan wel als je display gebruikt in de css code van de list.

code:

display: inline;

Deze css code zorgt ervoor dat ze naast elkaar komen ipv. onder elkaar.

[ Voor 4% gewijzigd door zwittrooper op 23-09-2010 17:09 ]

[Verwijderd]

Ja super, dankje, ik heb ze nu in ieder geval al naast elkaar gekregen!

[ Voor 55% gewijzigd door Verwijderd op 23-09-2010 17:15 ]

[Caelorum]

code:

<html>
<body>
<div>
    <ul>
        <li style="list-style:none; float:left;"><a href="...">....</a></li>
        <li style="list-style:none; float:left;"><a href="...">....</a></li>
        <li style="list-style:none; float:left;"><a href="...">....</a></li>
    </ul>
</div>
</body>

Zat zelf meer te denken aan bovenstaande. Eventueel met een margin-left om wat ruimte over te laten. MAar display:inline werkt ook.

@pieturp: jup, maar ik deed zomaar een aanname dat hij het menu in een div wilde hebben

Overigens zou ik die plaatjes of als background meegeven aan de li zodat je de ruimte tussen de menu items nog kan veranderen en door de gebruiker met text zoom kan worden gewerkt in de browser, zonder dat het de layout aanpast.

[ Voor 18% gewijzigd door Caelorum op 23-09-2010 18:26 ]

[Verwijderd]

Oke, en kan ik dan beter bij margin pixels neerzetten in plaats van procenten? Omdat ik eerder met procenten deed en het dus niet werkte in IE en Safari.

[Caelorum]

Procenten, pixels of em, het precise verschil tussen die drie mag je zelf uitzoeken

[ Voor 15% gewijzigd door Caelorum op 23-09-2010 20:58 ]

[pieturp]

Slightly offtopic, maar even voor de volledigheid:

In het voorbeeld van Caelorum staan inline styles. Voor zijn voorbeeld heel duidelijk, maar wel bad practice in productie code; gebruik gewoon altijd classes
In jouw eerdere post gebruikte je trouwens ook teveel class attributes: als je parent al een class heeft, kun je in de CSS gewoon de childs specificeren en opmaken:

Cascading Stylesheet:

p.navigatie a { color: pink; } /* geef alle a tags binnen een p met als class navigatie, de kleur roze */

[peterkuli]

Kijk anders hier eens, compleet uitgewerkt voorbeeld van een horizontale navigatiebar.

[Verwijderd]

Het heeft even geduurd maar het is gelukt! Bedankt allemaal voor de uitleg en tips, daar heb ik wel wat aan.