Archief - CSS probleem!

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
E

Eversite

Legacy Member
Dit is wat ik wil realiseren, maar zit er al een tijdje mee en vind maar geen oplossing.

Een horizontaal menu in deze vorm:

- item | - item | - item

Waar:
"-" = aan een icoon (image)
"|" = de divider en is 35px hoog (image)

Zie: image -> http://www.eversite.com/layouts/menubar_test.gif

De html opbouw zou er zo moeten uitzien:

Code: 
<div><img style="margin-right:10px;" src="images/icons_menubar_ball.gif"><a href="#">Registreer</a></div>
<div><img src="images/icons_menubar_divider.gif"></div>

Ik krijg dit maar niet goed zoals op de afbeeldingen en ben verplicht om over te schakelen op een tabel.
C

Cakeman

Legacy Member
Volgens mij is het mogelijk dit op te lossen door je menu items in een <ul> te zetten en vervolgens de <li>-items op te maken.
Je kan het rondje incoontje instellen als opsommingsteken en de divider als rechtsgepositioneerde achtergrond van de <li>.
Dit is mijn eerste gedacht.

Resources:
http://www.alistapart.com/articles/taminglists/
D

Dece

Legacy Member
maak gebruik van een horizontale lijst (zie http://www.alistapart.com/articles/taminglists/ )
maak gewoon een div aan waar je de achtergrond laat herhalen rond de x-as. plaats daar een div(zoals beschreven in het artikel) aan met z-index = 2
als ge wat van css kent is dit probleem vrij eenvoudig op te lossen aan de hand van dit artikel!

succes

EDIT: hehe cakeman is ook een alistapart fan zo te zien :)
E

Eversite

Legacy Member
Ok, thx, zal ik even uitproberen. En ik denk dat iedereen wel die sites kent hoor ;-)
`

`SeriOUs

Legacy Member
peng zei:
schandalig!
Klik om te vergroten...
het is mss een groot gemis, maar op alistapart wordt ook veel rommel verteld.

EDIT: http://users.pandora.be/briers/_web/werkjes/eigen/menu/
voila, dat is al een begin. Tekst kan zorgeloos vergroot en verkleind worden.
Er waren toch wat problemen, aangezien IE en Firefox anders reageerde (boxmodelhack moeten gebruiken)
Als css2.0 wordt ingevoerd zal er geen enkel probleem meer zijn, en de mogelijkheden nog veel verder reiken...
E

Eversite

Legacy Member
Allemaal bedankt voor jullie hulp :)

Maar ik WIST dat er een makkelijkere manier moest bestaan. Na een aantal uur zoeken heb ik ze gevonden, dit is ze:

Code: 
<div style="margin:0px 10px 0px 10px;"><a class="menu_white" href="#"><img style="margin-right:5px;" src="images/icons_menubar_ball.gif">Faq</a></div>
<div><img style="vertical-align:middle" src="images/icons_menubar_divider.gif"></div>

Geen display:inline stuff of andere dingen met marges. De key was blijkbaar de image zelf een vertical align geven. Waarom moeilijk doen als het makkelijk kan ;)
`

`SeriOUs

Legacy Member
Eversite zei:
Waarom moeilijk doen als het makkelijk kan ;)
Klik om te vergroten...
  1. omdat een menu wordt opgemaakt uit een unorderd list (tags gebruiken waarvoor ze bedoeld zijn)
  2. omdat je alle opmaak en inhoud gescheiden moet houden.
  3. omdat je best zo weinig mogelijk images gebruikt
  4. ...
E

Eversite

Legacy Member
Dece zei:
imo is serious zn methode de properste van de 2...
Klik om te vergroten...

Serious z'n methode is goed, maar niet echt van toepassing op wat ik wil. De laatste <li> geeft nog een divider image weer. Dus na 'item 3' staat nogmaals die divider, en dat is niet de bedoeling.
C

Cakeman

Legacy Member
De oplossing van Serious wordt hier volledig verkeerd weergegeven in Opera.
`

`SeriOUs

Legacy Member
Cakeman zei:
De oplossing van Serious wordt hier volledig verkeerd weergegeven in Opera.
Klik om te vergroten...
kan goed zijn, ik heb nu al browserhacks moeten gebruiken.
Maar mijn methode is normaal wel hoe het zou moeten. Het spijtige is dat de browsers alles misinterpreteren zodat er zoveel bijgevoegd moet worden om het te laten bollen.
Dus samengevat: het is een bitch dat geen enkele browser goed is afgestemd op de nieuwe richtlijnen van w3c

#eversite: kwestie van andere background te nemen en ze links te plaatsen ipv rechts
E

Eversite

Legacy Member
`SeriOUs zei:
#eversite: kwestie van andere background te nemen en ze links te plaatsen ipv rechts
Klik om te vergroten...


Kan maar dan heb je links een extra divider image... :p
E

Eversite

Legacy Member
`SeriOUs zei:
lol, idd.
Neutzak :)
zou je wel kunnen oplossen met first-element ofzo...
Klik om te vergroten...

First-element / first-child is een CSS2 proporty en wordt nog praktisch niet ondersteund, dus dat valt ook al weg :p
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan