Aloitin opetella CSS:ää. Miten saan tehtyä sivustolleni sellaisen navigaatiopalkin, että sen korkeus määräytyy tekstin korkeuden mukaan ja klikattavien kohteiden alue on verrannollinen tekstin pituuteen eikä mene lyhyissä teksteissä kovinkaan pitkälle tekstin yli? Yritykseni
ul.nav {
width: 30%;
border: 1px solid #999;
margin: 0px auto;
background-color: lightblue;
overflow: hidden;
}
ul.nav li {
display: inline;
float: left;
width: 20%;
}
ul.nav li:hover {
background-color: mediumturquoise;
color: #C0FFC0;
}Esimerkki:
<ul class="nav"> <li><a href="register.html">Rekisteröidy</a></li> <li><a href="login.html">Kirjaudu sisään</a></li> </ul>
(Mod. huom: CSS-koodiin oikeat tagit ja HTML-koodista echot pois!)
Tässä se, mitä itse sain. En tajunnut täysin ongelmaa.
<style>
ul.nav {
list-style-type: none;
width: 37%;
border: 1px solid #999;
margin: 0px;
background-color: lightblue;
overflow: hidden;
}
ul.nav li {
display: inline;
}
ul.nav li:hover {
background-color: mediumturquoise;
color: #C0FFC0;
display: inline;
}
</style>
<center>
<ul class="nav">
<li><a href="register.html">Rekisteröidy</a></li>
<li><a href="login.html">Kirjaudu sisään</a></li>
</ul>
</center>Paratiisin poika kirjoitti:
Tässä se, mitä itse sain. En tajunnut täysin ongelmaa.
Jaska ilmeisesti haluaa, että ul:n leveys säätyy linkkien leveyksien mukaan.
<style type="text/css">
ul.nav {
display: inline;
}
ul.nav li {
display: inline;
}
</style>Tuosta tosin puutuu ongelman kannalta epäolennaiset värimäärittelyt ym.
Haluaisin tehdä sivulleni navigaatiopalkin vähän samaan tyyliin kuin sivulla http://treffit.suomi24.fi/main.do . Nyt tuohon rekisteröidy ja Kirjaudu sisään -linkin väliin ei jää paljoakaan tyhjää.
Paratiisin poika: Olisi kaikkien kannalta parasta, jos et yrittäisi auttaa, kun et itsekään tiedä näistä asioista mitään.
Jaska: Ensiksi suosittelen kaikkien värien ilmaisemista numeerisesti (kuten #abcdef tai rgb(255,255,255)). Toiseksi voisit kertoa vielä tarkemmin, mitä yrität saada aikaan; minä en ainakaan ymmärtänyt selitystäsi. Missä valikko sijaitsee, miten iso se on, ovatko linkit peräkkäin vai allekkain vai tällä lailla jatkuvan tekstin tavoin, ja pitääkö linkin vaatia aina yhtä iso tila riippumatta tekstin pituudesta (vaikka klikattava alue olisikin vain tekstin mittainen)?
Ainakin yksi koodisi ongelma on siinä, että inline-elementille ei voi asettaa leveyttä.
Edit: Ehditkin jo vastata jotain. Ilmeisesti siis haluat suunnilleen samanlaisen kuin tälläkin sivulla. Helpointa on laittaa li-elementille "display: inline" ja sen jälkeen a-elementille "display: inline-block" ja sopiva padding.
Mallisivu ja itse koodi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">/*<![CDATA[*/
div.nav {
text-align: center;
}
div.nav ul {
background: lightblue;
border: 1px solid #999;
display: inline-block;
line-height: 2.5em;
list-style: none;
margin: 0 auto;
padding: 0;
white-space: nowrap;
}
div.nav ul li {
display: inline;
margin: 0 1px;
padding: 0;
}
div.nav ul li a {
display: inline-block;
padding: .5em;
text-decoration: none;
vertical-align: middle;
}
div.nav ul li a:hover {
background: mediumturquoise;
color: #C0FFC0;
}
/*]]>*/</style>
</head>
<body>
<div id="dokumentti">
<div class="nav">
<ul>
<li><a href="">Rekisteröidy</a></li>
<li><a href="">Kirjaudu sisään</a></li>
</ul>
</div>
</div>
</body>
</html>Oletin että halusit keskitetyn leveydeltään joustavan valikon. Tätä varten tarvitsi lisätä yksi elementti lisää, koska lista on muutettu lohkoelementiksi, joka kuitenkin käyttäytyy rivielementin tavoin (siis inline-block). Suomeksi: se koko valikkolaatikko (lohko) on kuin yksi merkki rivillä keskitettyä tekstiä. Eli ainut merkki.
Lisäsin muutaman valikoissa usein käytettävän perustyylin, kuten white-space: nowrap;, joka estää tekstin automaattisen rivittymisen. Valitettavasti tällaisen CSS-valikon huono puoli on se, ettei se yleensä toimi monirivisen tekstin kanssa kovin hyvin, joten valikon tekstit tulee pitää kyllin lyhyinä.
Nyt sain navigaatiopalstan toimimaan. Sueraavaksi haluaisin sivulleni vasempaan reunaan pystysuoran tyhjän alueen, johon ei tule sisältöä. Kuva osoitteessa http://jaakkospage.comyr.com/testi.php (karsea koodi, tiedän, mutta kuva poistuu kun ongelma on ratkennut). Nyt kuitenkin tuo teksti "Rekisteröidy sivulle" alkaa ihan selaimen vasemmasta reunasta, eikä siinä ole marginaalia kuten esimerkiksi tällä sivulla.
Aihe on jo aika vanha, joten et voi enää vastata siihen.