[xHTML / CSS] positionerings probleem - Softwareontwikkeling

maandag 8 maart 2004 12:05

Acties:

Topicstarter

Ik ben bezig met het opbouwen van een website met behulp van xhtml en css. Dit lukt tot nu toe aardig, alleen heb ik een groot probleem met de menubalk. De tekst hiervan moet vertikaal in het midden komen te staan. Ik heb de search gebruikt en alle topics die over een soortgelijk probleem gaan doorgenomen, maar geen van de oplossingen werkt bij mij

Wat doe ik verkeerd en is hier een oplossing / workaround voor

De website:
http://www.newskin.nl/Bodyline/index.html

code:

<div id="menubar" align="center">
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Info</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Lidmaatschap</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Training</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Diensten</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Lessen</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <div id="menu">Extra</div>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img] 
  </div>

Style Sheet:
http://www.newskin.nl/Bodyline/skin/bodyline/bodyline.css

code:

#menubar
{
    background: url("menubar.gif");
    border-bottom: 1px solid #919191;
    border-left: 1px solid #919191;
    border-right: 1px solid #919191;
    height: 23px;
    width: 748px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0px;
}

#menu
{
    font-family: Arial, Verdana, Helvetica, sans serif;
    font-size: 11pt;
    font-weight: bold;
    height: 23px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0px;
    display: inline;
    line-height: 23px;
    vertical-align: middle;
    border: 1px solid #919191;
}

(border om tekst is voor de duidelijkheid)

Dit maakt ie ervan:
http://www.newskin.nl/meuk/ie.jpg

Dit maakt mozilla ervan:
http://www.newskin.nl/meuk/moz.jpg

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

maandag 8 maart 2004 12:18

Acties:

X-Lars

Just GoT it.

Als je even anchors om je menu items zet moet zoiets wel werken:

Cascading Stylesheet:

#menu a {
    display:block;
    width:100%;
    height:100%;
    line-height:23px;
    text-align:center;
}
#menu>a{
    width:auto;
    height:auto;
    }

maandag 8 maart 2004 12:20

Acties:

Verwijderd

vertical-align: middle; werkt alleen zoals jij denkt dat het zou moeten werken als de container een tabelcel is of als die dislay:table-cell heeft (maar dat werkt weer niet in ie).

Voor de rest lijkt het heel erg op de situatie zoals die bij een veel geciteerd artikel in ALA voorkomt. Daar werken ze met floats en zo geloof ik.
Misschien dat je daar eens je licht kan opsteken?

maandag 8 maart 2004 13:05

Acties:

equationunequal

Topicstarter

X-Lars schreef op 08 maart 2004 @ 12:18:
Als je even anchors om je menu items zet moet zoiets wel werken:
code

* equationunequal gaat dit even proberen

Helaas, met anchors wil display:inline niet meer werken en laat hij alle divjes leuk onder elkaar zien

vertical-align: middle; werkt alleen zoals jij denkt dat het zou moeten werken als de container een tabelcel is of als die dislay:table-cell heeft (maar dat werkt weer niet in ie).

Voor de rest lijkt het heel erg op de situatie zoals die bij een veel geciteerd artikel in ALA voorkomt. Daar werken ze met floats en zo geloof ik.
Misschien dat je daar eens je licht kan opsteken?

Hmmmkay, helaas maakt ongeveer 90% van de doelgroep gebruik van ie, dus is display: table-cell geen oplossing...

Heb je toevallig het URL van dat artikel

[ Voor 8% gewijzigd door equationunequal op 08-03-2004 13:17 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

maandag 8 maart 2004 13:12

Acties:

Verwijderd

Kom op...

http://validator.w3.org/c...in.nl/Bodyline/index.html
http://jigsaw.w3.org/css-...in.nl/Bodyline/index.html

maandag 8 maart 2004 13:21

Acties:

equationunequal

Topicstarter

Verwijderd schreef op 08 maart 2004 @ 13:12:
Kom op...

http://validator.w3.org/c...in.nl/Bodyline/index.html
http://jigsaw.w3.org/css-...in.nl/Bodyline/index.html

Ik moet idd ffies mn tags goed afsluiten

Ik ben nogal n00b met css en heb tot nu toe alles met tables gedaan...

* equationunequal gaat snel zn code netjes maken...

De validator geeft de foutmelding dat een bepaald id al gebruikt is... Hoe moet ik dit oplossen

Met classes

* edit: woei, alles is gevalideerd

Helaas is mijn probleem daar niet mee opgelost

*

[ Voor 54% gewijzigd door equationunequal op 08-03-2004 13:55 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

dinsdag 9 maart 2004 12:56

Acties:

equationunequal

Topicstarter

*kick*

Heeft iemand enig idee of dit probleem op te lossen is

...

...of zal ik mn layout maar weer gewoon in tabellen gooien...

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

dinsdag 9 maart 2004 12:58

Acties:

X-Lars

Just GoT it.

Wat heb je verder geprobeerd dan?
Hoe ziet mijn oplossing er bij jou uit?

dinsdag 9 maart 2004 13:03

Acties:

equationunequal

Topicstarter

X-Lars schreef op 09 maart 2004 @ 12:58:
Wat heb je verder geprobeerd dan?
Hoe ziet mijn oplossing er bij jou uit?

Ik zal em ff erbij pakken...

* equationunequal zit nu op andere pc...

Wat ik tot nu toe geprobeerd heb:

display:table cell, vertical align:middle -> werkt niet in ie
div met menu vervangen door een table -> werkt vreemt genoeg ook niet goed
anchors -> divs worden niet meer inline geplaatst (ik doe vast iets fout)

http://www.newskin.nl/Bodyline/index_a.html
http://www.newskin.nl/Bodyline/skin/bodyline/bodyline_a.css

[ Voor 44% gewijzigd door equationunequal op 09-03-2004 13:14 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 15:24

Acties:

equationunequal

Topicstarter

Woei, eindelijk opgelost $_/-\o_$

Met behulp van een tip uit dit topic: absoluut centraal?

In mozilla staat de tekst 1 pixel lager dan in ie, maar daar kan ik mee leven

nog even voor degende die willen weten hoe het werkt:

XHTML:

code:

<div id="menubar" align="center">
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Info</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Lidmaatschap</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Training</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Diensten</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Lessen</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img]
    [img]"skin/bodyline/menubutton.gif"[/img] 
    <span class="menu">Extra</span>
    [img]"skin/bodyline/menubutton2.gif"[/img]
    [img]"skin/bodyline/menustaff.gif"[/img] 
  </div>

CSS:

code:

#menubar
{
    background: url("menubar.gif");
    border-bottom: 1px solid #919191;
    border-left: 1px solid #919191;
    border-right: 1px solid #919191;
    height: 23px;
    overflow: hidden;
    width: 748px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0px;
}

span.menu
{
    font-size: 11pt;
    font-weight: bold;
    position: relative;
    top: -7px;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0px;
}

Postition: relative en top: -7px dus

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 15:27

Acties:

X-Lars

Just GoT it.

Ik hoop voor je dat je oplossing niet op http://www.newskin.nl/Bodyline/index_a.html staat

Firefox maakt er iets weirds van. IE6 trouwens ook, maar dan anders

woensdag 10 maart 2004 15:28

Acties:

equationunequal

Topicstarter

X-Lars schreef op 10 maart 2004 @ 15:27:
Ik hoop voor je dat je oplossing niet op http://www.newskin.nl/Bodyline/index_a.html staat
Firefox maakt er iets weirds van. IE6 trouwens ook, maar dan anders

Nope, de oplossing staat op http://www.newskin.nl/Bodyline/index.html

CSS: http://www.newskin.nl/Bodyline/skin/bodyline/bodyline.css

Die met _a was mijn probeersel met anchors (net gelijk van server gehaald

)

[ Voor 10% gewijzigd door equationunequal op 10-03-2004 15:30 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 15:33

Acties:

X-Lars

Just GoT it.

Cascading Stylesheet:

    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
}

Kan ook wel kortweg:

Cascading Stylesheet:

1
2
3

    margin: 0;
    padding: 0;
}

Toch wel raar dat je vertical-align nu ook echt werkt

Good for you.

woensdag 10 maart 2004 15:38

Acties:

drm

f0pc0dert

Waarom zet je die images niet als achtergrondplaatjes van de links?

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 10 maart 2004 15:42

Acties:

X-Lars

Just GoT it.

drm schreef op 10 maart 2004 @ 15:38:
Waarom zet je die images niet als achtergrondplaatjes van de links?

Dat scheelt heel wat regels overbodige code en je kunt trouwens ook makkelijk die "chrome" 1x over de volle breedte gebruiken ipv onder elke "button".

woensdag 10 maart 2004 15:43

Acties:

equationunequal

Topicstarter

X-Lars schreef op 10 maart 2004 @ 15:33:
Cascading Stylesheet:
1
2
3
4
5
6
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
}
Kan ook wel kortweg:
Cascading Stylesheet:
1
2
3
    margin: 0;
    padding: 0;
}
Toch wel raar dat je vertical-align nu ook echt werkt Good for you.

Daar had ik ffies overheen gekeken, maar dat is idd wel wat simpele ja, zo ff veranderen...

Waarom zet je die images niet als achtergrondplaatjes van de links?

De links bestaan uit tekst en moeten straks uit de database komen (cms). De images kan ik dus niet als achtergrond zetten, omdat ze dan niet "meerekken"...

Of maak ik nu een denkfout

*edit: die buttons zijn geen buttons, maar slechts onderdelen van buttons:

Afbeeldingslocatie: http://www.newskin.nl/Bodyline/skin/bodyline/menustaff.gif

Afbeeldingslocatie: http://www.newskin.nl/Bodyline/skin/bodyline/menustaff.gif

staafje (begin, tussen de buttons en aan het eind)

Afbeeldingslocatie: http://www.newskin.nl/Bodyline/skin/bodyline/menubutton.gif

driehoekje

Afbeeldingslocatie: http://www.newskin.nl/Bodyline/skin/bodyline/menubutton2.gif

spacertje (even breed als driehoekje)

[ Voor 25% gewijzigd door equationunequal op 10-03-2004 15:47 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 15:47

Acties:

X-Lars

Just GoT it.

Waarschijnlijk wel

Als je geen mouseOver of iets dergelijks wilt gaan gebruiken, kun je sowieso beter 1 image voor de volle breedte gebruiken. Dit minuscule driehoekjes moet wel in elke span apart.

Images voor mouseOvers kun je eventueel aan je <a> plakken door a:hover in je CSS. Vandaar mijn eerdere oplossing

Maar zonder mouseOver is het dus heel simpel.

Edit: zet dan alleen dat driehoekje als background (die kun je links in je <span> positioneren en zet er een margin-right in voor de andere kant een margin-left en margin-right in

.

[ Voor 29% gewijzigd door X-Lars op 10-03-2004 15:50 ]

woensdag 10 maart 2004 15:52

Acties:

equationunequal

Topicstarter

X-Lars schreef op 10 maart 2004 @ 15:47:
Edit: zet dan alleen dat driehoekje als background (die kun je links in je <span> positioneren en zet er een margin-right in voor de andere kant.

Goed idee

thnx voor de tips, * equationunequal gaat dit ff uitproberen

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 15:52

Acties:

X-Lars

Just GoT it.

geen margin-left en -right maar padding trouwens

woensdag 10 maart 2004 16:06

Acties:

equationunequal

Topicstarter

X-Lars schreef op 10 maart 2004 @ 15:52:
geen margin-left en -right maar padding trouwens

lol

Maarja, als ik die afbeelding als achtergrond in mn span gooi offset ie mee naar boven met de text (dankzij top:-7px), dus dat werkt ook niet echt...

Maarja, ik ben al blij dat het nu goed werkt.

_{Dat 2 pixel hoogte verschil tussen ie en mozilla ligt zeker aan het box-model dat gebruikt wordt Ik zal daar ff wat info over gaan zoeken...}

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

woensdag 10 maart 2004 16:13

Acties:

X-Lars

Just GoT it.

Hankey schreef op 10 maart 2004 @ 16:06:
[...]
Maarja, als ik die afbeelding als achtergrond in mn span gooi offset ie mee naar boven met de text (dankzij top:-7px), dus dat werkt ook niet echt...

Je kunt ook je bg image offsetten

_{Dat 2 pixel hoogte verschil tussen ie en mozilla ligt zeker aan het box-model dat gebruikt wordt Ik zal daar ff wat info over gaan zoeken...}

Leuk he, CSS

Tip: [search=moz box sizing]

woensdag 10 maart 2004 16:43

Acties:

drm

f0pc0dert

Je kunt beter niet aan het boxmodel tornen maar IE in w3 box model laten renderen door hem in standards compliance mode te laten renderen. Dan leer je meteen goed werken met 't box model zoals W3 het voorgeschreven heeft.

Vuistregel: gebruik alleen margin en padding voor de zaken waar je niet al een width en/of height voor opgegeven hebt.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz