"Tables" i CSS? Design for web

Sur og sarkastisk

3. mai 2011

Jeg har lenge hørt at å bruke Tables til design er fyfy, men hva gjør man hvis man har en loginboks, med brukernavn og passord og inputbokser til disse? Hvordan får man disse til å stå på samme "linje" som den forrige?

Ok, man KAN omgå hele problemet ved å skrive Login OVER input-boksen, men hva hvis man ikke vil ha det sånn?

Et annet eksempel jeg har nå, jeg prøver å lage en butikk inni et spill, og hvis jeg vil ha items stående på "table"-måten, hva gjør jeg da?

Sånn:
http://i56.tinypic.com/i380o1.png

kort sagt: HVA gjør man for å få CSS til å oppføre seg sånn, kort sagt?

Viva la Opium

jamen yolo da.

2.151 1.370

3. mai 2011

Å bruke tables til selve sidedesignet er fy-fy, men det er jo ikke ulovlig å bruke tables i det hele tatt.

Til det siste eksempelet ditt er det jo bare å bruke tables, for så å style de med CSS.

droppboks

Sur og sarkastisk

Trådstarter

1.513 619

3. mai 2011

Aah, da så, da har jeg misforstått, men er det ikke en måte å gjøre det på i CSS altså?

Jannis!

207 73

3. mai 2011

Det er ingen motsetning mellom tables og CSS.
CSS bestemmer utseendet, HTML bestemmer oppsettet.
I HTML sier du "Her vil jeg ha en tabell", i CSS sier du "Slik skal den se ut".

Det diskusjonen med tables pleier å gå ut på, er om det skal brukes til design, altså at en hel nettside skal være en tabell, med skjulte bordere og bakgrunnsfarger og slikt. Reultatet kan bli bra, det, men koden blir vanskelig å jobbe med, derfor er det ikke anbefalt.

Når det gjelder en faktisk tabell, du vil ha en tabell for å vise informasjon, slik du har i den nederste bildet, eller du vil strukturere en login form, bare kjør på. Det er ikke noe feil ved det, jeg gjør det hele tiden

SilverKhan

Up is the new down

1.494 144

3. mai 2011

Det første spørsmålet ditt kan løses på flere måter:

Inline-block:

HTML-kode

<!DOCTYPE html>
<title>CSS eksempel</title>
<style>
#loginfields{
list-style-type:none;
}
#loginfields input, label{
display:inline-block;
width:100px;
}
</style>
<ul id=loginfields>
 <li>
  <label for=user>User:</label>
  <input id=user type=text>
 </li>
 <li>
  <label for=password>Password:</label>
  <input id=password type=password>
 </li>
</ul>

Resultat:
http://freak.no/forum/attachment.php?attachmentid=8829&stc=1&d=1304424844

Floats:

HTML-kode

<!DOCTYPE html>
<title>CSS eksempel</title>
<style>
#loginfields{
list-style-type:none;
}
#loginfields li{
width:100%;
clear:both;
overflow:auto;
}
#loginfields label, #loginfields input{
width:100px;
display: block;
float:left;
}
</style>
<ul id=loginfields>
 <li>
  <label for=user>User:</label>
  <input id=user type=text>
 </li>
 <li>
  <label for=password>Password:</label>
  <input id=password type=password>
 </li>
</ul>

Resultat:
http://freak.no/forum/attachment.php?attachmentid=8830&stc=1&d=1304424936
(Må sannsynligvis tweakes litt for å se bra ut i IE, men det gjelder jo det meste)

Ang. det andre spørsmålet så anbefales det at du bruke tabeller, nettopp fordi du trenger en tabell over ting i en butikk.

Bruk HTML til å beskrive hva du vil lage, og bruk CSS til å beskrive hvordan ting skal se ut.

I login-eksempelet så har jeg først laget en liste av felter som må fylles ut, der hvert punkt i lista består av en merkelapp/label og et tekstfelt/input, i HTML. Først deretter begynte jeg å bruke CSS for å få det til å se ut slik jeg ville ha det.

Sist endret av SilverKhan; 3. mai 2011 kl. 14:21.

fuzzy76

webdings

2.482 589

3. mai 2011

Til tabulære data (ting som skal presenteres i rader og kolonner, som i det siste eksempelet ditt) er det fortsatt tabell man skal bruke.

Et login-skjema er derimot ikke tabulære data, og skal derfor ikke i en tabell.

z0p

uʍop ǝpısdn

3.814 906

4. mai 2011

Et login-skjema er heller ingen usortert list, så det vil se litt merkelig ut uten styling.
Jeg ville heller brukt:

Kode

<style type="text/css"> label, input { display: inline-block; width: 100px }</style>
  <form>
      <div>
        <label for="username">brukernavn</label><input name="username" />
      </div>
      <div>
        <label for="password">passord</label><input type="password" name="password" />
      </div>
  </form>

fuzzy76

webdings

2.482 589

4. mai 2011

Personlig bruker jeg <dl> for skjema

Syntes det gir ganske grei semantikk.

Sist endret av fuzzy76; 4. mai 2011 kl. 19:11.