Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

horizontale menubalk met "div"-jes ipv een tabel

MartienComp
17 antwoorden
  • Ik heb al verschillende keren gelezen dat het verstandig is om bij pure opmaak/positionering tabellen te omzeilen en zoveel mogelijk met divs e.d. te werken. Bij een horizontale menubalk werd zelfs de tip gegeven om met <ul><li> e.d. te werken en dan aan te geven dat de elementen van die lijst niet onder maar naast elkaar moeten staan en dat er geen bullets voor moeten komen. Op zich een logische redenering maar het gaat bij mij af en toe nog wel eens mis. Voorbeeld zie je hier http://www.ms-financieel.nl/test/
    Op verschillende computers/beeldschermen en met verschillende browsers ging dat goed maar tot mijn verbazing zag ik ergens op een beeldscherm (toch een tamelijk hoge resolutie) dat de items van het menu onder in plaats van naast elkaar stonden. Iemand enig idee hoe dat komt?
    Gebruikte code voor de css
    li.menu{
    padding:10px;
    margin:10px;
    display:inline-block;
    border-style:outset;
    border-width:1px;
    idth:200px;
    /* code voor kleuren e.d. heb ik even weggelaten *?

    }
    Ik heb het probleem wel vaker met positioneringskwesties en dan vooral dat het in de ene browser anders uitvalt dan de andere, moet eerlijk zeggen dat ik steeds meer geneigd ben maar weer tabellen te gebruiken…
  • Tabellen gebruiken is nergens voor nodig, tenzij je allerlei data wilt weergeven. Dus even doorbijten.

    Wat mij opvalt is dat je veel inline style gebruikt. CSS binnen de html-tags dus. Probeer dat eens te verwijderen door alles in je style sheet te zetten. Dat maakt het enorm overzichtelijker.

    Je menu zou je daarna in een nieuwe div kunnen zetten. Bijvoorbeeld:
    [code:1:182f4652c7]<div id="menu">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">sector</a></li>
    <li><a href="#">tips</a></li>
    </ul>
    </div>[/code:1:182f4652c7]

    Ga daar eens mee aan de slag. :)

    [size=9:182f4652c7]edit: code aangepast.[/size:182f4652c7]
  • Ik neem aan dat het gaat om de knoppen Home, Sector en Ondernemingstips.
    die staan bij mij keurig naast elkaar.
    In de broncode zie ik wel overal het attribuut style="…" terugkomen,
    die informatie hoort in de css te staan. het is niet per se fout, maar het is netter om de opmaak allemaal bij elkaar te hebben in de css. Ik neem aan, dat het ook een appart css-bestand wordt als alles goed werkt?

    dus op het scherm ziet alles er goed uit, maar in de broncode is nog wel wat ruimte voor verbetering.
  • [quote:453caaf41b="PepijnG"]Ik neem aan dat het gaat om de knoppen Home, Sector en Ondernemingstips.
    die staan bij mij keurig naast elkaar.
    ( knip…) dus op het scherm ziet alles er goed uit, maar in de broncode is nog wel wat ruimte voor verbetering.[/quote:453caaf41b]
    Ja ik heb het op verschillende pc's goed zien gaan maar gisteren kwam ik bij een mogelijke nieuwe klant en ik liet dat als voorbeeldje zien en vreemd genoeg ging het daar nou net mis! En idd in de broncode is zeker ruimte voor verbetering, ik had het misschien beter even op kunnen schonen voor ik mijn vraag plaatste. Als het helemaal klaar is wordt het bij mij altijd een apart bestand! Bedankt voor het meekijken en meedenken!
  • [quote:65a2129655="vuurtoren"]Tabellen gebruiken is nergens voor nodig, tenzij je allerlei data wilt weergeven. Dus even doorbijten.

    [/quote:65a2129655]
    Ja ik vind het qua achterliggende gedachte ook veel fraaier: tabellen zijn nou eenmaal bedoeld om bijvoorbeeld een adressenlijst of iets dergelijks te publiceren. Het vervelende is alleen dat het bij mij gewoon té vaak misgaat, vooral een blok dat in Firefox op een heel andere plaats terechtkomt dan in IE7 of IE8 en dat "doorbijten" wordt helaas nogal eens "mijn tanden stukbijten". :D En ik vind het dan wel frustrerend om te moeten constateren dat het met tabellen veel sneller gaat en het resultaat veel stabieler is terwijl ik van de andere kant ook best graag wat meer met css wil gaan werken.
    Ik vind het in elk geval wel prettig dat er op dit forum zo snel gereageerd wordt, ik zal er denk ik vrij frequent gebruik van maken, bedankt voor de snelle reactie!
  • Oh, ik zie dat ik vergeten ben de links af te sluiten in mijn voorbeeldcode.
  • [quote:f460faf820="vuurtoren"]Oh, ik zie dat ik vergeten ben de links af te sluiten in mijn voorbeeldcode.[/quote:f460faf820]
    Was me duidelijk hoor geen probleem :D
  • Een goede manier om css menu's te leren is om het stap voor stap te doen zodat je ook snapt wat er gebeurt.

    Eerst enkel de <ul><li></li></ul> constructie en dan stap voor stap de opmaak toevoegen. Denk ook aan de hover functie van css voor het verkleuren tijdens een mouse-over.
  • kijk ook eens hier. op deze pagina staat keurig stap voor stap uitgelegd hoe je met <ul><li></li></ul> en css een horizontaal menu kunt maken. eventueel kun je ook nog submenu's toevoegen.
  • Bedankt voor al jullie zeer nuttige reacties.
    Alleen het blijft voor mij een raadsel waarom dit nou net op [u:54f701a31e][b:54f701a31e]een [/b:54f701a31e][/u:54f701a31e]enkele computer misging terwijl ik kennelijk toch geen al te grove inhoudelijke fouten in de code gemaakt heb. Ik ga in elk geval met jullie tips nog eens stevig aan de slag!
  • Staat op die computer misschien IE7, of IE8 met compatibilliteitsmodus? Als ik hier in IE8 (met CM) kijk, dan gaat het ook mis.
  • [quote:d66b77411c="Ger"]Staat op die computer misschien IE7, of IE8 met compatibilliteitsmodus? Als ik hier in IE8 (met CM) kijk, dan gaat het ook mis.[/quote:d66b77411c]
    Heb helaas helemaal vergeten dat te noteren maar dit is wel een goede hint natuurlijk. Ik zal zelf nog even zoeken op de combinatie css / compatibiliteitsmodus om te kijken of ik dit kan omzeilen. (maar tips zijn natuurlijk ook welkom :) )
  • Vaak ontkom ik bij zulke problemen met oudere IE versies niet aan conditional comments waar ik dan aanvullende/overschrijvende CSS in zet. Vroeger probeerde ik vaak krampachtig om het met 1 stylesheet voor elkaar te boksen, maar dat betekent uiteindelijk vaak dat je inlevert aan design (of zelfs functionaliteit) bij compliant browsers.

    Wat ik nu dus vaak doe is uitgaan van een compliant browser (bij mij Fx) en vervolgens het resultaat checken in andere compliant browsers. Daarna start ik IE op en geef ik daarvoor specifieke CSS eigenschappen in.

    >> Quirksmode over conditional comments
  • Tjonge er komt wel veel bij kijken zeg! Ik vind het wel razend interessant en wil me er ook zeker in verdiepen, ik denk dat ik voorlopig maar bij wijze van tussenoplossing zoveel mogelijk in css doe en toch nog even "stiekem" een tabelletje gebruik als ik het anders echt niet voor elkaar krijg. Probleem is een beetje dat ik - hoewel ik me zeker niet als een doorgewinterde webdesigner wil presenteren - best een aantal leuke opdrachtjes krijg en ook tevreden klanten heb (vooral heel kleine, startende bedrijfjes). Het dilemma is dat ik een aantal jaren mijn hele layout met tabellen gedaan heb en het zou nu een beetje raar zijn om een relatief eenvoudige klus te lang te laten wachten of zelfs te weigeren omdat ik een nieuwere techniek nog niet helemaal door heb.
    Maar ja dit was niet zozeer een vraag maar eerder iets wat me van het hart moest :) allemaal super bedankt voor al het meedenken!
  • Mijn advies: probeer echt zoveel mogelijk op de juiste manier te doen. Het is namelijk niet echt fair om een betalende klant met een kwalitatief minder product af te schepen. Nu zal het veel klanten wegens onwetendheid niets schelen, maar toch.
    Het is de taak van jou als leverancier om op de hoogte te blijven van moderne technieken, en heel eerlijk: een tabellen-opmaak is al een kleine 10 jaar uit de gratie.

    Nog een tip voor de 'bijscholing': ;) Lees de sticky's hier eens door, ook die voor aspirant-webdesigners. Er staan best handige tips en links in.
  • Ik doe inderdaad alles bij voorkeur op de juiste manier en zoals gezegd, ik kom er ook tegenover mijn klanten eerlijk vooruit dat ik niet alle kneepjes van het vak ken! (Het is overigens iets wat ik alleen als bijverdienste doe en in veel gevallen zelf vrijwillig voor non-profit-organisaties)
  • Nog even als reactie op Ger, die sticky's zijn inderdaad erg verhelderend en leerzaam!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.