Hvordan "style" en DIV? (CSS)

[g0mpen]

Jobber med min første hjemmeside bestående av kun DIV'er og CSS. Siden består av flere DIV'er, og så skal jeg bruke CSS til plassering osv. Det jeg lurer på er: Hvordan kan jeg "style" de forskjellige DIV'ene jeg bygger opp siden med? CSS for feks. border, farge, marg, plassering osv? Vil at de forskjellige DIV'ene skal ha forskjellige farger slik at det ser bedre ut + at jeg kan skille dem

 

Takk

Endret 26. august 2004 av g0mpen

[PoleCat]

HTML:

<div id="polecat"></div>

 

Stilark (CSS).

div#polecat {
 background: #f5f5f5;
 border: 1px solid #ccc;
 padding: 20px;
 width: 160px;
}

 

...og så videre.

 

Regner med at du vet hvordan du oppdretter og inkluderer et stilark.

[g0mpen]

Tusen takk, jeg vet hvordan jeg skal bruke det ja

 

Skal prøve det nå

[svamp]

Regner med at du vet hvordan du oppdretter og inkluderer et stilark.

Har du eget oppdrettsanlegg for stilark?

I boknafjorden kanskje?

 

 

Edit: Der har vi svaret på hvorfor du lager så gode sider. Du henter opp ferdige stilark fra oppdrettsanlegget.

Endret 26. august 2004 av svamp

[g0mpen]

Bildet sier mer enn jeg kan forklare...

 

Det er jo helt klart noe helt galt, kanskje en veldig liten endring I koden er alt som skal til, men hva vet jeg.

 

hjem.htm:

<div id="container">
 
<div id="header">
<img src="header.jpg">
</div>

<div id="meny">
   <ul>
     <li>Hjem</li>
     <li>Side 1</li>
     <li>Side 2</li>
     <li>Side 3</li>
   </ul>
</div>  

<div id="innhold">
Lalala
</div>

</div>

 

CSS:

div#container {
background: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
width: 704px;
margin: 0 auto;
}
div#header {
background: #f5f5f5;
border: 1px solid #ccc;
padding: 0px;
width: 700px;
}
div#meny {
background: #fff;
border: 1px solid #ccc;
padding: 5px;
width: 160px;
float: left;
}
div#innhold {
background: #fff;
border: 1px solid #ccc;
padding: 2px;
width: 700px;
}

[Lokaltog]

legg til en <hr style="visibility:hidden;clear:both" /> under innholdsdiv'en.

[g0mpen]

Ble jo litt bedre :!:

 

Hvordan kan jeg skille menyen, headeren, og innholdsboksen fra hverandre uten å lage store marginer inne i dem også?

[Lemkin]

margin - margin på utsiden, avstanden fra andre elementer.

padding - "margin"en på innsiden. avstanden fra der elemtenet starter til der feks teksten skal være

[g0mpen]

Dette ble stygt. Tables er enklere

 

Hvordan kan jeg lage en litt mer smooth side, som feks alistapart? Jeg vil ha noe slik:

[Arve Systad]

Dette ble stygt. Tables er enklere 

 

Hvordan kan jeg lage en litt mer smooth side, som feks alistapart? Jeg vil ha noe slik:

http://home.online.no/~kjaeran/design.jpg

"Dette ble stygt. Tables er enklere"

 

Tull.

 

Når du har lært deg å bruke CSS riktig, så går det _masse_ fortare, og du får masse finare kode, enn med tabeller. Dessuten gjør du faktisk ting riktig da, for å bruke tabeller til design/layout er Feil

Endret 26. august 2004 av enden

[enden]

Dette ble stygt. Tables er enklere

 

Hvordan kan jeg lage en litt mer smooth side, som feks alistapart? Jeg vil ha noe slik:

http://home.online.no/~kjaeran/design.jpg

Du er da ikke så langt unna dette?

 

Et lite hack er å putte menyen og innholdet inni en div, og å la denne ha et bakgrunnsbilde som er grått i bredden av menyen din og hvitt resten. Gi hele ramma en border, så er det løst

 

Samme prinsipp er tatt ibruk på www.disabused.com Vi har aktisk klin lik layout

 

Arve: Vi quoter ikke bilder her på forumet med mindre det er ytterst nødvending. *se stygt på*

[g0mpen]

Arve, jeg vet godt at de fleste her hater tables, det var litt for å erte dere da... Får prøve det enden foreslo...

Endret 26. august 2004 av g0mpen

[Arve Systad]

Arve, jeg vet godt at de fleste her hater tables, det var litt for å erte dere da... Får prøve det enden foreslo...

Vel, for å gi deg et godt råd: aldri ert oss om slikt - det gjelder liv og/eller død!

 

Arve: Vi quoter ikke bilder her på forumet med mindre det er ytterst nødvending. *se stygt på*

 

*putte fingra i øyrene* LALALALLALALALALAL! ......

[g0mpen]

Hvordan setter jeg bakgrunnsbilde for en div?

[Arve Systad]

Hvordan setter jeg bakgrunnsbilde for en div?

.klasse {

background: url(path/til/bilde.gif);

}

 

http://www.w3schools.com/css/pr_background.asp

[huf]

Tror ikke noen linket direkte til "faux colums" -artikkelen. Den finner du her: http://www.alistapart.com/articles/fauxcolumns/

[g0mpen]

Trodde ærlig talt ikke særiøse designere som dere ville "jukse" for å få til noe slik... Jaja, bare det funker er det vel greit nok

[Haraldson]

Det er vel ikke juks - snarere en illusjon. Og i webdesign er det en hel del illusjoner som spiller inn. Det blir som å si at skygge på en div er juks fordi det ser ut som om den ligger høyere enn bakgrunnen - selv om skjermen bare viser 2D

[enden]

Whatever works Bruker denne effekten ofte jeg

[g0mpen]

Har jo DIV'er "over" bakgrunnsbildet i container... Hvordan setter jeg disse til gjennomsiktige, der det ikke er tekst?

 

Når jeg bruker ul for liste, flyttes elementene et hakk inn på en måte... hvordan kan jeg forhindre dette? Det blir en unødvendig stor marg i menyen...