[xHTML / CSS] positionerings probleem

Pagina: 1
Acties:

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

Als je even anchors om je menu items zet moet zoiets wel werken:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
#menu a {
    display:block;
    width:100%;
    height:100%;
    line-height:23px;
    text-align:center;
}
#menu>a{
    width:auto;
    height:auto;
    }

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?

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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 ]


  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
Ik moet idd ffies mn tags goed afsluiten :o 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 :P 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 ]


  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
*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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

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

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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 ]


  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

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 :?

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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 :P)

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

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


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

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.

  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

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


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

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".

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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 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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

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 ]


  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

8)7 geen margin-left en -right maar padding trouwens 8)7

  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 25-05 12:35
X-Lars schreef op 10 maart 2004 @ 15:52:
8)7 geen margin-left en -right maar padding trouwens 8)7
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 ]


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

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]

  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

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

Pagina: 1