Keskustelu: Nettisivujen teko: Css tyyli ja div-laatikon paikka

Olen tehnt kuvagalleriaa jossa on div laatikoissa linkki, jossa on kuvan pikkukuva. Tuota kuvaa klikkaamalla pääsee sitten isompaan kuvaan. Olen tehnyt div-laatikolle tyylin jossa määritellään sille reunaviivat niin, että oikea ja ala reunaviivat ovat paksumpia, näin saadaan laatikolle "varjo".

Tyyli:

#kuvaBoksi {border-right-style:solid; border-right-width:2px; border-right-color:black; border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:black; border-left-style:solid; border-left-width:1px; border-left-color:black; border-top-style:solid; border-top-width:1px; border-top-color:black; width:100px; height:100px;}

Ongelmana on nyt se, että nämä kuvaboksit menevät sivulle allekkain, vaikka ne mahtuisivat vierekkäinkin. Miten saan ne menemään vierekkäin?

Minäkin yritin joskus tehdä tuollaista systeemiä, mutta kun en saanut toimimaan kunnolla, niin päädyin taulukkoratkaisuun(mitä kyllä häpeän suuresti).

Mutta, tuohon sinun ongelmaasi: Se allekkain järjestäytyminen johtuu siitä, että div on block-elementti, eli sen alle tulee automaattisesti rivinvaihto. Voit kokeilla joko määrittää sen tuossa displayssa joksikin muuksi elementiksi, tai sitten tehdä jotain uskaliaita kokeita floatilla. En tiedä tosin toimiiko kumpikaan vaihtoehto.

Jooh, määritä DIV inlineksi display-ominaisuudella tai käytä suoraan SPAN:a.
Float saattaa toimia myös, mutta on altis selainten bugeille.

Inline:llä ne reunat jotenkin kutistuivat sinne kiuvan alalaitaan ja sen taakse. Float ei toimi.
EDIT: Taidanpa minäkin sortua taulukkoon...

Et vaan osaa! :P
http://pp.kpnet.fi/blaze/temp/galtsu.php

tsellani kylla tuo float toimii hyvin.
Mutta noi border jutut voi pistaa kaikki samaan juttuun.

#kuvaboxi {
  border: 1px 2px 2px 1px solid #000000;
}

Div vaihtaa oletuksena riviä.

Lisää CSS-koodiin display: normal; , niin pitäisi toimia.

ville-v kirjoitti:

Lisää CSS-koodiin display: normal; , niin pitäisi toimia.

display ei voi saada arvoa "normal". Se, mitä haet, on display: inline; (kuten ylempänä jo sanoin).

Oho! Olis pitäny lukea tarkemmin :D