.otsikko
{
text-align: center;
color: #4682B4;
font-size: 12px;
border-bottom: thin dashed #000000;
}Tuollainen kohta on siis .css-tiedostossa, ja kun käytän sitä näin:
<p class="otsikko">qwertyu</p>
tulos on tämä: http://img100.imageshack.us/img100/97/fuckd.png
Eli millä saisin rajoitettua ton katkoviivan niin, että se alleviivaa ainoastaan tekstin, eikä koko sivun ylälaitaa?
<p><span class="otsikko">qwertyu</span></p>
Kiitos :) piti vaan laittaa <center></center> käyttäen se keskelle, kun ei muuten jostain syystä pysynyt siellä..
<center> tagi on kyseenalainen ratkaisu. Määritä mieluummin tuohon kappaleeseen text-align: center;
Miksei samalla vaikka <h?> mukainen tagi, jolloin se olisi jopa looginen. vai onko tarkoituksella tehty otsikolta näyttävä kappale?
Teuro kirjoitti:
Miksei samalla vaikka <h?> mukainen tagi, jolloin se olisi jopa looginen. vai onko tarkoituksella tehty otsikolta näyttävä kappale?
Jep, <hX> elementtiä käytettäessä tuota ylimääräistä span elementtiäkään ei luultavasti tarvita.
Silloin keskitys täytyy tehdä määrityksellä margin: auto;
Tässä on vähän vaihtoehtoja mietittäväksi:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-size: 10pt;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
h1 span {
border-bottom: thin dashed #000000;
color: #4682B4;
}
h2 {
float: left;
left: 50%;
position: relative;
}
h2 span {
border-bottom: thin dashed #000000;
color: #4682B4;
margin-left: -50%;
}
h3 {
display: inline-block;
left: 50%;
position: relative;
white-space: nowrap;
}
h3 span {
border-bottom: thin dashed #000000;
color: #4682B4;
margin-left: -50%;
}
p {
clear: both;
}
</style>
</head>
<body>
<h1><span>Vaihtoehto 1</span></h1>
<p>...</p>
<h2><span>Vaihtoehto 2</span></h2>
<p>...</p>
<h3><span>Vaihtoehto 3</span></h3>
<p>...</p>
</body>
</html>Ensimmäinen on helpoin ja paras. Toinen vaihtoehto näyttää, miten floatin saa keskitettyä. Kolmas vaihtoehto näyttää, miten inline-blockin saa keskitettyä ilman text-alignia.
Kaikkien huono puoli se, että tarvitaan ylimääräinen elementti. Mikäli saat määritettyä jo isännöivään elementtiin tekstin keskittämisen, niin siinä tapauksessa voit säästyä ylimääräiseltä elementiltä yksinkertaisesti tekemällä hX-elementistä inline-elementin. Vaikkapa:
body { text-align: center; }
body > * { text-align: left; }
body > h1 { display: inline; }Ja jos haluaa vain keskelle sivua niin <th> </th>
peg kirjoitti:
Ja jos haluaa vain keskelle sivua niin <th> </th>
Ei suositeltavaa, <th> on taulukon otsikkoa varten, ei muualle.
No eikö tuo ole otsikko. Mitähän varten taulukko taitto on kuin tabu?
Taulukkotaitolla saa aikaan pelkkää p*skaa ja se on muutenkin huono tapa. Älä vaan käske ketään käyttämään sitä. >:(
Minä käytin taulukkotaittoa eräällä sivustolla, sain haukut, ja tajusin vasta sitten, miten huono ratkaisu se on.
centeri-tagi ei suostu centteroimaan mm. DIVejä, jos niille on määritetty joku leveys.. <div align="center"></div> centeroi kaiken.. mut se centeroi sit kaikki tekstit, divit ja muutkin mitä sen sisällä on.
Talukot toimii joissakin kotarien leiskoissa varsin hyvin ja niillä on helpompi vääntää. Kun taas DIVeillä saa pikkusen opiskella ennenkun niillä saa kaiken mitä haluaa ja samallailla kaikissa selaimissa mitä kannattaa tukea.
Sitäpaitti yksi tapa centeroida divin sisään v-aligilla on tehdä sen kokuinen yksisoluinen talukko ja käyttää siinä v-alignia siis esim. jos listamenu pitää saada sen ns. taustaboxidivin sisään.
#menu {
/* tähän joku leveys */
}
ul.menu {
margin: 0;
padding: 0;
list-style: none;
background-image: url(../images/x.gif); /* näkymätön 1x1px .gif */
}
ul.menu li {
display: block;
list-style: none;
background-image: url(../images/x.gif); /* fixaa IE-bugin, eli jos ei ole näkymätöntä imagea niin ensimmäisen DIVin tai CSS:llä märitetyn oletuslistan background-image tulee tähän */
line-height: 40px;
float: right;
padding-left: 15px;
border-bottom: 1px red solid;
}
ul.menu li a {
padding-top: 0px;
padding-left: 0px;
padding-right: 15px;
margin: 0px;
display: block;
list-style: none;
background-image: url(../images/x.gif);
font-size: 14px;
white-space: nowrap;
text-decoration: none;
font-stretch: normal;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
ul.menu li a:hover {
padding-top: 0px;
padding-left: 0px;
margin: 0px;
display: block;
list-style: none;
background-image: url(../images/x.gif);
white-space: nowrap;
text-decoration: none;
font-stretch: normal;
font-weight: bold;
text-transform: uppercase;
color: #f00;
font-family: Arial, Helvetica, sans-serif;
}
ja sit
<!-- MENU -->
<div id="menu">
<ul class="menu">
<li><a href="/"><span>linkki 1</span></a></li>
<li><a href="/.html"><span>Linkki 2</span></a></li>
<li><a href="/.html"><span>linkki 3</span></a></li>
</ul>
</div>
<!-- MENU -->Niin.. listalla saa ja yleensä tehdään tollaset oli sit linkejä tai ei.
Elementtejä käytetään siihen, mihin ne on tarkoitettu. Taulukkoelementit ovat taulukkoja varten, ei layouttia. Jahka pidemmälle perehtyy, niin huomaa, että divit sopivat siihen hommaan paremmin.
peg kirjoitti:
No eikö tuo ole otsikko. Mitähän varten taulukko taitto on kuin tabu?
<th>:lla määritetään taulukon yksi solu otsikoksi. Tämän takia sen kuuluu olla taulukkoelementin sisällä ja vielä luultavasti <tr> -elementinkin sisällä. Siksi se ei ole validi ratkaisu normaaliksi otsikoksi. Otsikkotagi <hX> on yleisien otsikoiden merkkaamiseen. Katso viestin eka lause.
http://www.quirksmode.org/blog/archives/2009/02/
IE6:n voi unohtaa, kun IE8 tulee ulos niin saman voi oikeastaan saman tien tehdä IE7:lle. Tämä mahdollistaa taulukkotyylittelyn CSS:llä, sillä IE7 on valtaselaimista ainoa, joka ei tue display: table; -määritystä. Lisäksi HTML5 järkevöittää monia asioita kuvaavimmilla tageilla: header, section, article, footer, aside, nav... divien käyttö vähenee aika pitkälle siihen, että niillä luodaan JavaScriptin avuin efektejä. CSS3 taas vähentää varmasti ylimääräisten elementtien tarvetta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.