Ik ben met een site bezig en nu heb ik het volgende. De menubalk aan de rechterkant is een balk die zou moeten doorlopen maar ik weet niet hoe dat moet: http://www.wijmetaarts.nl/preview/. Ik hoop dat er iemand mij hierbij kan helpen.
Balk doorlopen aan de rechter kant
- Onderwerp starter bhofkens
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi bhofkens,
Bij een tegenspartelende pagina is het altijd raadzaam om eerst eens te kijken wat de html-validator en de css-validator ervan vinden.
Nu weet ik niet precies wat je bedoelt met "menubalk aan de rechterkant is een balk die zou moeten doorlopen", maar in elk geval is het voor de opmaak van een <ul><li> lijstje zonder bullets nodig om alle margins en paddings expliciet te benoemen, zowel bij de <ul> als bij de <li>'s, ook als ze nul zijn (dat voorkomt browserverschillen).
Dan wordt het:
Is het probleem daarmee opgelost?
Met vriendelijke groet,
CSShunter
___________
PS:
Iets anders: de menu-items gaan een beetje schuiven bij hoveren. Dat komt omdat de cursieve letters net iets breder zijn dan gewone. Dit is op te vangen door de <li>'s per stuk een breedte in em te geven (dwz afgestemd op de hoeveelheid letters van een bepaald item; even proefondervindelijk vaststellen) en een {text-align:center;}. Daarmee komen de items in het midden van de <li>'s, en de padding L/R van de <li>'s kan er dan uit.
Bij een tegenspartelende pagina is het altijd raadzaam om eerst eens te kijken wat de html-validator en de css-validator ervan vinden.
- De html-validator vindt maar één ontbrekend alt'je.
- De css-validator signaleert een paar foutjes in de #navbar van de menu.css! (en een spatie te veel in de a.footerurl: hover van de style.css)
Nu weet ik niet precies wat je bedoelt met "menubalk aan de rechterkant is een balk die zou moeten doorlopen", maar in elk geval is het voor de opmaak van een <ul><li> lijstje zonder bullets nodig om alle margins en paddings expliciet te benoemen, zowel bij de <ul> als bij de <li>'s, ook als ze nul zijn (dat voorkomt browserverschillen).
Dan wordt het:
Code:
#navbar {
...
margin: 17px 0 0 65px;
padding: 0;
}
#navbar li {
...
margin: 0;
padding: 0 4px;
}Is het probleem daarmee opgelost?
Met vriendelijke groet,
CSShunter
___________
PS:
Iets anders: de menu-items gaan een beetje schuiven bij hoveren. Dat komt omdat de cursieve letters net iets breder zijn dan gewone. Dit is op te vangen door de <li>'s per stuk een breedte in em te geven (dwz afgestemd op de hoeveelheid letters van een bepaald item; even proefondervindelijk vaststellen) en een {text-align:center;}. Daarmee komen de items in het midden van de <li>'s, en de padding L/R van de <li>'s kan er dan uit.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi bhofkens,
Hoe? Door de toeschouwer en jezelf te bedotten!
Het lijkt hierboven alsof het verlengde van de menubalk over alles heen geplakt zit. Maar hij is onder alles door ingeplakt.
Daarmee wordt de css:
De overige afbeeldingen staan allemaal binnen de <body>, dus 1 of meer lagen hoger, en worden er automatisch overheen geplakt.
Waar de strook niet nodig is, is er dan niets van te zien.
Met vriendelijke groet,
CSShunter
__________
PS: Het background image van de .site is niet nodig, en kan er uit gefietst worden.
Hoe? Door de toeschouwer en jezelf te bedotten!
Het lijkt hierboven alsof het verlengde van de menubalk over alles heen geplakt zit. Maar hij is onder alles door ingeplakt.
- Daartoe maak je een prettig lange strook, afgestemd op de breedste monitor.
- Met een breedte van 3000px kan je voorlopig wel voort (en anders zijn er makkelijk verlengstukjes aan te breien).
- De rechterhelft van 1500px bestaat uit het wit van de balk en de verlooptinten naar de donkere background-kleur.
- De linkerhelft van ook 1500px wordt opgevuld met alleen de background-kleur:
- Dan wordt het deze: wma-background-balk.png
- Het image kan nu ingemonteerd worden als background-image van de <body>:
- Horizontaal is de positie altijd 50%: dan komt het midden van de strook altijd in het midden van de schermbreedte (= ook in het midden van de pagina), hoe breed het scherm ook is. - Aan de linkerkant/rechterkant wordt een deel niet gebruikt, als de schermbreedte smaller is dan 3000px.
- Omdat het een background-image is, komt dit niet buiten de viewport (= oppervlak) van de <body>, zie bv. hier, en komt er geen horizontale scrollbar.
- Verticaal blijkt de afstand tot de bovenrand van de browser 118px te zijn.
- De strook is éénmalig, en moet niet horizontaal of verticaal herhaald worden.
Daarmee wordt de css:
Code:
body {
...
background: #6D6967 url(images/wma-background-balk.png) no-repeat 50% 118px;
}Waar de strook niet nodig is, is er dan niets van te zien.
Met vriendelijke groet,
CSShunter
__________
PS: Het background image van de .site is niet nodig, en kan er uit gefietst worden.
- Status
