Keskustelu: Nettisivujen teko: 2 diviä vierekkäin

Moi!

Haluaisin saada kaksi div -elementtiä vierekkin nettisivulle. Miten tämä onnistuu?

Avainsana on float.

https://www.ohjelmointiputka.net/koodivinkit/vinkki.php?id=25263

Kiitos!

Macro kirjoitti:

Avainsana on float.

Riippuu siitä, mitä halutaan. Avainsana voi olla myös position tai table.

Itse asiassa float merkitsee sitä, että elementit _eivät_ ole vierekkäin, jos ne eivät mahdu vierekkäin ilman vaakaskrollausta. Riippuu ihan tarkoituksesta, onko tämä hyvä vai huono asia - siis onko vaakaskrollaus (tai tarve leventää selainikkunaa) pienempi paha kuin se, että elementit menevät päällekkäin.

Silläkin on merkitystä, mitä div-elementtien sisällä on. Esimerkiksi listat (<ul>, <ol>) aiheuttavat helposti yllätyksiä ja lisätyötä

Yucca kirjoitti:

Silläkin on merkitystä, mitä div-elementtien sisällä on. Esimerkiksi listat (<ul>, <ol>) aiheuttavat helposti yllätyksiä ja lisätyötä

Ai, itse en ole huomannut, että kyseiset elementit olisivat koskaan aiheuttaneet mitään ylimääräisiä tai yleensäkään eroavia yllätyksiä?

Voi olla tietenkin, että minulla on vain ollut hyvää tuuria... olenhan tehnyt kuitenkin vasta seitsemän vuotta täyspäiväisenä näitä hommia.

No ainakin auttoi.

Jos laittaa diveille display:inline niin onnistuu myös. Voi olla parempi ratkaisu joskus.

display: inline-block; on jossain määrin inlineä parempi vaihtoehto. Se kun saa elementin käyttäytymään jokseenkin samalla tavalla kuin jos se olisi floatattu, mutta kelluttamisen sijaan sitä käsitellään yhtenä merkkinä. Inline-elementti on rajoitetumpi, koska sille ei voi asettaa esimerkiksi paddingia, kun taas inline-block -elementille voi. Tai no, voi antaa, mutta se ei toimi "halutulla" tavalla.

Huono puoli molemmissa näistä on se, että HTML-koodissa kahden inline-elementin väliin jäävä mikä tahansa tyhjä tila tulkitaan välilyönniksi elementtien väliin. Silloin kun tämä ei ole toivottua (esim. elementtien keskitys eikä niiden väliin haluta tyhjää) täytyy myös HTML-koodissa elementtien olla tiukasti kiinni toisissaan.

. . .

Mitä tulee siihen, että kelluttaessa ul, li ym. aiheuttavat lisätyötä, niin tuo toteamus koskee lähinnä aloittelevia sivuntekijöitä. Kokeneemmalle ne eivät ole mikään ongelma, koska...

ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    /* yhden rivin "venytä kellutettujen elementtien korkeuteen": */
    overflow: hidden;
}

li {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
}

... riittää ainakin mittasuhteista syntyvien "ongelmien" pyyhkimiseen. Hyvinkin perinteistä settiä, jota tulee kirjoitettua melkein joka sivustolla. Joku voi ihmetellä kylläkin, että miksi laitoin ensin li-elementille inlinen ja sitten floattasin sen, koska tämähän "kumoaa" inlinen vaikutuksen. Listaelementin oletustyyli on list-item, joten se on ihan hyvä vaihtaa pois elementtiä kellutettaessa, ja inline toimii usein muita vaihtoehtoja paremmin *rumpujen pärinää* IE6:ssa, joten tapa on jäänyt.