Div istedenfor tabeller

Haraldson · 9. april 2004

for å gjøre det litt lettere å forstå kan jeg prøve å forklare hver enkel kode sin funksjon:
width: 100px; -Forteller oss at bredden på denne boksen er 100px (pixels)

height: 100px; -Forteller oss at høyden på denne boksen er 100px;

border: 1px soild #000; -Denne koden gir boksen en "ramme" som er 1px tykk, linjen er vanlig og at fargen på linjen er #000 (svart)

Alt dette tilsammen gir oss en boks som er 100x100 px med en svart ramme rundt

Dette er jeg jo kjent med fra HTML ellers. Lurer egentlig bare på hvordan man skriver inn i CSS-fila for at det skal virke.

Nå som den diven " har class="noob" ", blir det i CSS-en bare "noob { kode osv } ?

Endret 9. april 2004 av NMI on XTC

Knebba · 9. april 2004

i html fila (f.eks index.html):

<div class="noob">
Jeg er 1337 i CSS
</div>

i CSS fila(f.eks stil.css)

.noob {
font-size: 12px;
color: #808080;
width: 100px;
}

du har vel

mellom <head> og </head>?

(

<head>
<title>Css 1337</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>

)

Endret 9. april 2004 av kennteh

Lemkin · 9. april 2004

Hehe det er vel egentlig ikke så vanskelig

Men du er på rett spor nå.

Tips: prøv deg fram og les på www.w3schools.com sammtidig! :thumbup:

Haraldson · 9. april 2004

ja!

det er helt riktig!

se der du, det var jo ikke vanskelig en plass ;)

Ok... Så id og class er ikke viktig, det er bare for at programmereren skal kjenne igjen i kodinga? Eller er jeg på jordet igjen?

Haraldson · 9. april 2004

i html fila (f.eks index.html):

<div class="noob">

Jeg er 1337 i CSS

</div>

i CSS fila(f.eks stil.css)

.noob {

font-size: 12px;

color: #808080;

width: 100px;

}

...og der var svaret på min forrige post. Da kan jeg kanskje "move on"!

Lemkin · 9. april 2004

id og class er vel bare hjelpemiddler som funker linkt. Prøv å bruk dem for å holde orden over kodinga di.

Prøv også å bruk id="" fast. Det er vel det som er meningen

Knebba · 9. april 2004

se editene fra den posten

Haraldson · 9. april 2004

OK!

Nå har jeg fått lagt bakgrunnsfarge + tekstfarge på div-en. Ikke dårlig!

Knebba · 9. april 2004

hehe.. ikke dårlig

Lemkin · 9. april 2004

hehe bra jobba :thumbs:

emil_ · 9. april 2004

Når du leter etter CSS-koder og slikt kan det være kjekt å ha denne tilgjengelig: http://www.w3.org/TR/CSS2/propidx.html som er en oversikt over alle CSS egenskapene. Det er også smart å validere koden hvis du er i tvil om noe. For eksempel hvis du hadde prøvd den kodesnuttent som smoothie viste deg tidligere så hadde du sikkert merket at bakgrunnsfargen ikke ble lys eller mørk når du tok class="lys" eller class="mørk", det skyldes at egenskapen backgroundcolor ble satt, men dessverre så er det ingen egenskap i CSS som heter backgroundcolor, men background-color. Så hvis du er i tvil om stilarket ditt er rett så bør du validere det. Dette var bare ett eksempel på hvor smart det er å validere når du er i tvil

Lemkin · 9. april 2004

Kun en menskelig feil, men det med validation er kjekt. Å bruke Valid HTML og valid CSS må være det beste man kan gjøre innen webdesign :yes:

TLZ · 9. april 2004

eg har en navigator div. inni denne er det linker. problemet er at hver link lager seg en ny linje. men eg vil ha alle på samme linje!

(håper noen forstod me nå :roll: )

CSS:
div#navigator
{
height: 13px;
background: url(Images/ImgSet-V2/navigator_bg.png) no-repeat;
vertical-align: bottom;
text-align:left;	
}

a.LinkHome 
{
background: url(Images/ImgSet-V2/Buttons/Home.png) no-repeat;
width: 54px;
height: 14px;
display: block;
}

HTML:
<div id="navigator">
 <a href="#" class="LinkHome"></a><a href="#" class="LinkHome"></a>
</div>

Koselig at du kommer og spør i posten min, TLZ ( )

ble litt unødvendig å starte ny, haddde opprinlig tenkt å poste i kafeen men så var det jo en post om akkurat det temaet eg holdt på med...

Endret 10. april 2004 av TLZ

Haraldson · 9. april 2004

Koselig at du kommer og spør i posten min, TLZ ( :devil: )

Knebba · 10. april 2004

display: inline;

da lager de ikke ny linje

Haraldson · 10. april 2004

Ok... Nå har jeg fått leika meg litt med diverse CSS-koder og sånt.

Jeg sitter fremdeles med en del spørsmål:

- Hvordan kan jeg plassere div-ene best mulig?

- Kan jeg ha flere celler i en div, sånn som jeg kan i en tabell?

- Dette med id og class... Sett at jeg har én side som jeg skal ha flere div-er på. Skal jeg da skrive lik id på alle, men forskjellig class? Omvendt?

Arve Systad · 10. april 2004

http://css.absentvoid.com :w00t:

- Hvordan kan jeg plassere div-ene best mulig?

Les litt om Posisjonering.

- Kan jeg ha flere celler i en div, sånn som jeg kan i en tabell?

Ja, men bruk en tabell om det er tabulær data som skal settast opp. Til layout derimot, bruk div's.

- Dette med id og class... Sett at jeg har én side som jeg skal ha flere div-er på. Skal jeg da skrive lik id på alle, men forskjellig class? Omvendt?

http://css.absentvoid.com/norsk/index.php?...e=grunnleggande

:w00t:

Endret 10. april 2004 av arve87

Haraldson · 10. april 2004

Etter å ha lest den artikkelen skjønner jeg ennå ikke hvorfor id skal bli brukt... :roll:

Man kan altså bare bruke id en gang... Hva er det man bruker id til i et vanlig HTML-dokument? body id?

Spør en hel del her, men dette er jo et forum

Edit: Bra og fin side forresten, arve87! :thumbs:

Endret 10. april 2004 av NMI on XTC

Haraldson · 10. april 2004

Så også gjennom posisjoneringskodene på WC3Schools. Der stod det ikke hvordan man midstiller osv. Hvordan blir det? Gjøres med "en annen" <div align></div> i HTML-en, eller gjøres det i CSS?

Jeg oppdaga også at dersom jeg skrev inn

position:absolute

...kunne jeg flytte div-en som et layer (?) (I DreamWeaver) Det kunne jo være aktuelt i høyden, istedenfor å skrive <body topmargin=".. osv.?

TLZ · 10. april 2004

display: inline;

da lager de ikke ny linje

nei, da lager ikke ny linje i IE og Opera...

men i Mozilla så forsvinner linkene helt :scared:

http://css.absentvoid.com

Helt genial den, men det vel først og fremst source'n til siden og ikke tutorialen i seg selv eg lærte av

Endret 10. april 2004 av TLZ

Div istedenfor tabeller

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer