Olen yrittänyt vääntää vaakasuuntaista valikkoa css:n avulla, ja jotain olen saanut aikaan katsomalla mallia muista sivuista ja editoimalla koodia. En saa millään valikkoani keskelle, vaan se menee vasempaan reunaan. Osaako joku antaa vinkkiä kuinka tämä onnistuu? Koodia on alla. Siinä saattaa olla aika paljon turhia juttuja, koska olen kokeillut kaikenlaisia virityksiä tietämättä mitä niistä seuraa.
Otsikko
#kaikki {
margin-left: auto;
margin-right: auto;
border: 4px black solid;
background-color: #FEF3CD;
padding: 0px;
width: 800px;
}
#navi_etu {
height:40px;
position: relative;
margin-left: auto;
margin-right: auto;
clear: both;
}
#navi_etu ul {
margin-top: 0px;
padding-left: 0px;
margin-left: 0px;
background: #000000;
color: #efbd29;
float: left;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size:14px;
font-weight: bold;
}
#navi_etu ul li { display: inline; }
#navi_etu ul li a
{
font-size:12px;
padding-top:5px;
padding-bottom:5px;
padding-left:25px;
padding-right:25px;
background: #000000;
color: #efbd29;
text-decoration: none;
float: left;
border-right: 1px solid #efbd29;
}
#navi_etu ul li a:hover
{
background: #008040;
color: #FFFFFF;
}
Etusivu
Galleria
Päivitykset
Tiedotteet
Vieraskirja
Muuta
Linkit
Tähän tulee sisältöä.
Otsikko
#kaikki {
margin-left: auto;
margin-right: auto;
border: 4px black solid;
background-color: #FEF3CD;
padding: 0px;
width: 800px;
}
#navi_etu {
height:40px;
position: relative;
margin-left: auto;
margin-right: auto;
clear: both;
}
#navi_etu ul {
margin-top: 0px;
padding-left: 0px;
margin-left: 0px;
background: #000000;
color: #efbd29;
float: left;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size:14px;
font-weight: bold;
}
#navi_etu ul li { display: inline; }
#navi_etu ul li a
{
font-size:12px;
padding-top:5px;
padding-bottom:5px;
padding-left:25px;
padding-right:25px;
background: #000000;
color: #efbd29;
text-decoration: none;
float: left;
border-right: 1px solid #efbd29;
}
#navi_etu ul li a:hover
{
background: #008040;
color: #FFFFFF;
}
Etusivu
Galleria
Päivitykset
Tiedotteet
Vieraskirja
Muuta
Linkit
Tähän tulee sisältöä.
Vastaukset 5
Vanhimmat
Tämä ainakin keskittää:
#navi_etu {
height:40px;
width:750px;
margin:auto;
}
#navi_etu ul li #eirajaa{
border: none;
}
Linkit
Copypastasin koodisi ja kyllä nyt ainakin Opera9.01, Firefox1.5.0.7 ja IE6.0 näyttää navigoinnin keskitettynä.
Ensin ajattelin että vika olisi tuolla Transitional -määrityksessä, koska silloin IE:llä ei ole tapana hyväksyä margin:auto -määritystä. Kumma kyllä tällä kertaa se toimii. Yleensä kuitenkin kannattaa käyttää Strict -määritystä (tosin silloin koodinkin pitäisi olla sen määrityksen mukaista).
P.S.
margin-left: auto;
margin-right: auto;
on tietenkin lyhyemmin:
margin: auto;
Nyt en kyllä ymmärrä... Minulla itselläni on nuo samat selaimet ja niin vain se navigaatio on vasemmassa reunassa katsoinpa millä selaimella tahansa.
navigaatioDIV keskellä, mutta navigaatiolinkin DIV:n vasemmassa laidassa. Laitoin korjausehdotuksen edelliseen vastaukseeni
Kokeilin ja siitä ehdotuksestasi seuraa se, että navigaatiopalkki on kapeampi kuin itse sivu.
Tarkoitus olisi, että musta palkki ulottuisi sivun reunasta reunaan ja linkit olisivat keskellä.