[OPGELOST] menu (xhtml en css)

[Gast]

Hallo iedereen

ik ben bezig met een sitetje te maken in kladblok, met xhtml en css.

Nu twijfel ik eigenlijk wat hoe ik het menu moet doen.

Ik denk aan 2 mogelijkheden: met een UL (list) of met een table.

Dat is dus al de eerste vraag, wat zijn de verschillen, wat gemakkelijker, ...

De 2de vraag is dan de possitionering. Daar heb ik vorige keer ook problemen met gehad (tijdens een klas opdracht, en de leerkracht kon me er niet met helpen :') )

Standaard staat dit dus in het midden van de kolom en versprinkt deze naar gelang de hoogte van de pagina. Ik wil het dus vast possitioneren van boven gezien en links met een kleine 'margin'.

Ik had eerst een UL, dan ben ik beginnen aanpassen en mommenteel heb ik een Table in de layout Table. (dus table in table). Maar de 'align' en 'valign' lijkt niet veel te doen.

[StijnS]

Tables dienen niet om een layout te maken. Een table is om gegevens ordelijk weer te geven.

Ik stel voor dat je je layout knutselt met DIV's.

[Gast zero]

in table is enkel voor tabulaire data

hier is een tutorial voor het gebruik van div

Div element | CSS Tutorials | Sitemasters.be

[Gast]

ok usefull, ik heb ook NIETS aan die leerkrachten van tegenwoordig hé xD

Ik ken div's wel, maar ik heb geleerd dat je zowel div's als tables mag gebruiken voor de layout.

Maar ok, niet erg, zal wel alles aanpassen.

dus menu met ul en li dan?

en dat in een div en positie aanpassen

[XiroN]

ik maak mijn menu's meestal met ul, ik zal strax een voorbeeldje voor je maken/zoeken

#nav {
   width: 230px;
   height: 354px;
}
ul {
   list-style: none;
}
ul li {
   border: solid 1px #983234;
   width: 150px;
   text-align: center;
}
ul .leeg {
   width: 30px;
}
ul a {
   display: block;
   padding: 7px 0;
   text-decoration: none;
   color: #000000;
   font-weight: bold;
}
ul a:hover {
   background: url(../images/background.jpg);
   color: #fe5100;
   font-weight: bolder;
}

<!-- Navigatie -->
<div id="nav">
<!-- Deel 1 -->
<ul>
   <li class="leeg"></li>
   <li class="leeg"></li>
   <li><a href="?p=gastenboek" title="Gastenboek">Gastenboek</a></li>
   <li class="leeg"></li>
   <li><a href="bestellen/" title="Bestellen" onclick="return popup(this, '')">Bestellen</a></li>
</ul>
<!-- Deel 2 -->
<ul>
   <li class="leeg"></li>
   <li class="leeg"></li>
   <li><a href="?p=over" title="Over het boek">Over het boek</a></li>
   <li class="leeg"></li>
   <li><a href="?p=reis" title="De reis">De reis</a></li>
   <li class="leeg"></li>
   <li><a href="?p=biografie" title="Biografie">Biografie</a></li>
   <li class="leeg"></li>
   <li><a href="?p=gallerij" title="Foto's">Foto's</a></li>
   <li class="leeg"></li>
   <li><a href="?p=promotie" title="Promotie">Promotie</a></li>
   <li class="leeg"></li>
   <li><a href="?p=links" title="Links">Links</a></li>
   <li class="leeg"></li>
   <li><a href="?p=auteur" title="Over de auteur">Over de auteur</a></li>
</ul>
</div>

dit is een voorbeeld van een menu dat ik heb gemaakt voor een website, die ik voor iemand moest maken

[Gast]

Ok, erg bedankt

Ik heb daarnet eventjes verder gedaan, tables verwijderd en divs ingevoegd, en de css aangepast.

In bijlage zie je het voorlopige resultaat

maar nu zit ik dus terug ongeveer met hetzelfde probleem... dat is het menu.

link link link

link link link

ziet er niet echt een leuk menu uit xD

Hoe krijg ik die links nu onder elkaar?

[XiroN]

post je menu eens, want hoe heb je dit nu opgebouwd?

met een lijst of met div's?

[Gast]

oepsy :s mijn fout, was vergeten er terug een list van te maken nadat ik die tables heb weggedaan.

Nu staan ze wel onder elkaar

edit: heb toch nog een vraag: heb space naast men menu items??

[XiroN]

hmm snap niet precies wat je bedoeld met de space ernaast..

kan je voorbeeldje posten?

[Gast]

ja, ik moest snel editten, anders ging je dat niet meer lezen xD

heb hem even online gegooid: Title

Dan zie je dat die rode kader niet opzij staat.

Ik kan men margin wel in min zetten, maar dat is niet echt de oplossing denk ik.