Keskustelu: Nettisivujen teko: Leveä divi sivun keskelle

Elikkä miten saisin kun mulla on divi mikä on leveä sen 800px niin miten saisin sen keskelle selainta?

<center>
<div style="width:800">

</div>
</center>

eh?

Newb kirjoitti:

<center>
<div style="width:800">

</div>
</center>

eh?

Tos menee tekstit keskelle

Lisäät sinne diviin text-alignin.

<center>
<div style="width:800px; text-align:left">
</div>
</center>

edit. blaze ehti ensin, kai se sitte noinki onnistuu.

Blaze kirjoitti:

<div class="mycontent"></div>

.mycontent {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

Tota en tiennykkää et toi keskittää sen

Kiitos avusta

Sit vielä et miten saan divin sisälle toisen divin eli että se toimii näin

div#sivu {
  margin-left: auto;
  margin-right: auto;
  widht: 800px;
}

div#sivu .sisalto {
  text-weight: bold;
}

JyKKemus kirjoitti:

Sit vielä et miten saan divin sisälle toisen divin eli että se toimii näin

div#sivu {
  margin-left: auto;
  margin-right: auto;
  widht: 800px;
}

div#sivu .sisalto {
  text-weight: bold;
}

Missä se ongelma on? :)

<div id="sivu">
  moi, olen tavallista tekstiä
  <div class="sisalto">
    moi, olen boldia
  </div>
</div>

Blaze kirjoitti:

JyKKemus kirjoitti:

Sit vielä et miten saan divin sisälle toisen divin eli että se toimii näin

div#sivu {
  margin-left: auto;
  margin-right: auto;
  widht: 800px;
}

div#sivu .sisalto {
  text-weight: bold;
}

Missä se ongelma on? :)

<div id="sivu">
  moi, olen tavallista tekstiä
  <div class="sisalto">
    moi, olen boldia
  </div>
</div>

Joo se toimii silleen mutta se toimii myös näin

.sisalto {
  font-weight: bold;
}

.. paitsi sitten kun tilanne on seuraava: [nusnus]

<div id="sivu">
  moi, olen tavallista tekstiä
  <div class="sisalto">
    moi, olen boldia
  </div>
</div>

<div id="palkki">
  moi, olen tavallista tekstiä myös
  <div class="sisalto">
    moi, enhän ole boldia
  </div>
</div>

[/nusnus]

Huomioita:

- div#sivu kannattaisi olla vaan #sivu - ID:t esiintyvät sivulla kuitenkin vain kerran, ja jotkut hömelöt selaimet vieläpä ovat hitaampia jos sen divin siihen tökkää (ilmeisesti koska ensin valitsevat kaikki sivun divit ja sitten etsivät niistä sen joista löytyy se jossa id="sivu")

- Classien suhteen taas on kannattavampaa laittaa myös tagin nimi, sillä se nopeuttaa/nopeutti selaimien CSS:n käsittelyä (Safarin uusin on tainnut kehittyä niin pitkälle, ettei tällä ole niin paljon merkitystä, ei ole jaksanut tehdä testiä: jokatapauksessa Safari renderöi sikamaisen nopeasti, ja ennen kaikkea valtaosan aikaa monimutkaisiakin tilanteita oikein, toisin kuin Opera)

- margin: 0 auto; on kivempi kuin margin-left ja margin-right

- DOCTYPE on pakko määritellä tiedoston alussa, jotta marginaalikeskitys toimisi myös IE:ssa, ja ennen sitä DOCTYPEä ei sitten saa olla yhtään mitään, ei rivinvaihtoa, ei XML-prologia, ei kommenttia: tämä pistää IE:n standarditilaan

- Jos ihan tahtoo tukea peräti vanhaa IE:tä, niin keskitys tapahtuu niinkin tyhmästi kuin:

body { text-align: center; }
#sivu { text-align: left; width: 800px; }

- Eihän käytetä enää center-tagia! Saa sydärin joka kerta kun sen näkee! ^_^

- Palstatagia olisi kiva nähdä: <br>:n käyttö muihin kuin yksittäisiin rivinvaihtoihin on sen väärinkäyttöä, <p> on lisäksi paremmin tyyliteltävissä, esim. joka kappaleen ekan kirjaimen saa halutessaan tyyliteltyä erikseen, tai tehtyä tekstiä varten enemmän sisennystä kuin otsikoihin, asetettua maksimileveyden kappaleelle ettei tekstistä tule kauhean leveää korkeilla resoluutioilla ja niin edelleen.

<div id="sivu">
    <h1 id="otsikko">Pääotsikko</h1>
    <ul id="valikko">
        <li><a href="">Navigaatio jee!</a></li>
    </ul>
    <div id="sisalto">
        <h2>Moi!</h2>
        <p>Olen tavallista leipätekstiä.</p>
    </p>
    <p id="tehnyt">Joku muu ku Merri</p>
</div>

Merri kirjoitti:

- Eihän käytetä enää center-tagia! Saa sydärin joka kerta kun sen näkee! ^_^

Mitä vikaa center-tagissa?

Newb kirjoitti:

Mitä vikaa center-tagissa?

Sivun ulkoasu määritellään CSS:llä, (x)hötömölöllä merkataan ainoastaan rakenne.

Se on deprecated. Netscape kehitteli sen aikanaan ja sitten se meni kaikkiin selaimiin. Pääsyy on kuitenkin se, että se asettaa tyyliä HTML:ssä, kun kaikki tyyli pitäisi hoitaa CSS:n kautta. Samasta syystä esimerkiksi font on deprecated.

Ennen näki tämännäköisiä koodiviritelmiä, kun ei käytetty CSS:ää ollenkaan:

<center><table border="0" cellspacing="0" cellpadding="0" width="800">
    <tr>
        <th align="left" colspan="2" valign="top"><font face="Verdana, Arial" size="10">Oon melkein niinku sivuston otsikko</font></th>
    </tr>
    <tr>
        <td align="left" bgcolor="black" valign="top" width="200"><font face="Verdana, Arial" color="white" size="3">
            - <a href=""><font color="white">Navigaatio mukamas</font></a><br>
        </font></td>
        <td align="left" valign="top" width="600"><font face="Verdana, Arial" size="3">
            <font face="Verdana, Arial" size="7">Tämän sivun otsikko</font><br>
            <br>
            Sitte tässä on leipätekstiä.<br>
            Tätä on aika vaikea ylläpitää ja tyylitellä. Aattele jos tahtoo vaihtaa ihan vaan yhtä säännöllisesti toistuvaa asiaa.
        </font></td>
    </tr>
    <tr>
        <td align="center" valign="middle"><font family="Arial, Verdana" size="2">Joku muu ku Merri</font></td>
    </tr>
</table></center>

Ja tämä on sentään nätisti sisennetty ja muotoiltu, mikä oli suhteellisen harvinainen näky taulukkotaitoissa. Vertaile tämän ja edellisen esimerkkini luettavuutta.