Keskustelu: Nettisivujen teko: Tekstin sijoittelu

Palaan teidän luoksenne uusien ja entistä kiperimpien CSS-kysymysten kanssa!

Nyt ongelmani on se, että haluan sijoitella tekstini tähän tapaan:

Moikka!                          1. Pälä 2. Pölö 3. Pälä 4. Pälä

Yritin tätä muodossa:

<p>Moikka!</p><p style="float: right;">1. Pälä ...</p>

Mutta selain näyttää rivit päällekäin eikä samalle riville. Voiko asiaa korjata?

Hmm.. Koitas

<div align="left">Moikka!</div> <div align="right">1. Pälä ...</div>

Ja Css:

div {
display: inline; }

Toi ei oo kyllä kokonaan css. Kun Burton oli ilmeisesti sitä hakemassa.

No, laitetaan sitten <div style="align: right;"></div>

Näinhän tämä toimii, vai mitä?

Css:

.left {
float: left;
}

.right {
float: right;
}

Html:

<p class="left">Moikka</p>
<p class="right">1. Pälä 2. Pölö 3. Pälä 4. Pälä</p>

E: Ja kannattaa opetella käyttämään id:eitä ja classeja, eikä suoraan muokkausta diveihin ym. Ei ole kaunista katseltavaa.

Taitaa se noinkin mennä, mutta ei ole ainoa vaihtoehto.

Rocceri kirjoitti:

No, laitetaan sitten <div style="align: right;"></div>

Eihän css:ssä ole edes mokomaa align määritettä.
Smuliin tapa on muutenkin parempi.

Css:stä löytyy kyllä text-align, mutta sehän ei tasaa elementtiä johonkin reunaan, vaan tekstin (no tietty kuvat). Mutta tuo on sen käyttö tarkoitus. Kun taas sijoitetaan laatikot erireunoille käytetään hyväksi floattia. Ja floatin kanssa kannattaa muistaa, ettei sen vaikutus lopu kyseiseen elementtiin. Tällä saadaan helposti ihmeellisiä ongelmia muissa tyyleissä jossei floattien vaikutusta kumota seuraavissa elementeissä clear määritteellä. Esim. <br style="clear: both" /> -tyylistä tagia on tullut käytettyä kumoamaan vaikutus. Ihan hyvin se voilla missä tahansa elementissä ja id:n tai class:n välityksellä tyyli.css:stä.

Ensin float, sitten vasta normaali elementti.

<p style="float: right;">1. Pälä ...</p><p>Moikka!</p>

Sisällön järjestys on kuitenkin aikamoisen tärkeää joskus, joten ehkä on parempi kuitenkin floatata se vasemmanpuoleinen ja laittaa oikeanpuoleiselle vähän marginaalia :)

Tässä on hieman monimutkaisempi tapa kuin mitä sinällään selitin, sillä käytän tässä oikeaa listaelementtiä:

div.kappalelista p {
	float: left;
	margin: 0;
	padding: 0;
	width: 10em;
}

div.kappalelista ol {
	margin: 0 0 0 10em;
	padding: 0;
}

div.kappalelista ol:after {
	clear: both;
	content: '';
	display: block;
}

div.kappalelista li {
	float: left;
	margin-left: 2em;
}



<div class="kappalelista">
    <p>Moikka!</p>
    <ol>
        <li>Pälä</li>
        <li>Pölö</li>
        <li>Pälä</li>
        <li>Pälä</li>
    </ol>
</div>