Morjesnta!
Taas vaihteeksi mulla tuli ongelmia CSS:n kanssa. Yritän vääntää navigointi palkkia ja ongelmana on se, että kaikki elementit, jotka noudattavat määrettä display: inline, eivät ilmeisesti noudata samalla tavoin määritteitä width ja height, mitä lohkotason elementit, vaan ovat sen kokoisia, mitä heidän sisältönsäkkin ja vain paddinggilla voi levittää niiden kokoa.
Mikä olisi varmin ratkaisu tehdä seuraavanlainen nagigointi palkki:
Sivun asettelu.
(sivun yläreuna on alla oleva viiva)
__________________________________________________
|
//tyhjää tilaa tässä näin |
|
__________________________________________________|
Laa- | | | |
tikko1 | navi1 | navi2 | |
| | | |
__________________________________________________|
//navi laatikot ovat keskitetty |
|
|Ongelma on se, että riippuen selaimista navilaatikon ylä ja alareunat eivät oikein tahdo osua samalle tasolle mitä laatikko1:sen kehykset.
no eikö yksinkertaisin ratkaisu olisi antaa laatikko1:n korkeuden määräytyä automaagisesti sisällön mukaan?
Yksi ratkaisu on ottaa inline pois, asettaa laatikko1:lle vakiokorkeus ja määrätä navit sen korkuisiksi.
#laatikko1 {
position: relative;
height: 10em;
}
#navi1, #navi2 {
margin: 0;
position: absolute;
height: 100%;
}
#navi1 {
right: 50%;
}
#navi2 {
left: 50%;
}Oke, kiitti selvistä vastauksista taas. Molempien ehdotus on hyvä, enkä olis millään osannut itse keksiä pitkään aikaan vastaavaa.
Tosiaan eihän mun ole edes pakko määrittää laatikko1:sen korkeutta.
EDIT:
Vielä yks kysymys aiheeseen liittyen:
En meinaan millään saada tekstejä keskitettyä pystysuunassa laatikoihin. Miksi tämä vertical-align: middle; ei toimi?
Aihe on jo aika vanha, joten et voi enää vastata siihen.