TABLES til CSS

[baRs]

Heisann.

 

Etter å ha lest mye om CSS og at tables ikke er bra til å strukturere web-sider har jeg bestemt meg for å konventere den table pregde siden min til CSS.

 

Jeg er ganske fersk med div blokker og den slags, samtidig kjenner jeg ikke til de rette CSS funksjonene som får siden til å se nøyaktig lik ut som den er idag (med tables). Jeg har lest masse om CSS på mange forskjellige sider, blandt annet artikler i "Oppslagsverk over artiker" i "Web-design, HTML og CSS" er på HW.no, men jeg har ikke funnet skikkelige eksempler på hvordan man bygger opp med div etc.

 

Sider per idag: http://www.subnor.com (med tables)

 

Jeg har laget en modell slik siden er bygd opp idag (med tables). De ulike fargene er de ulike tables'ene:

 

http://www.subnor.com/hw.no/tablestruktur.gif

 

Spørsmålet mitt er om noen kan hjelpe/vise hvordan man bygger opp disse tabellene i CSS (med div eller noe) og hvordan jeg kan få siden til å se slik ut den er idag..

 

hjelp!

Endret 28. februar 2004 av baRs

[EZAccess]

Dette er en greit sted å begynne...

 

http://glish.com/css/

 

[edit: innlegg nr 700!!!]

Endret 28. februar 2004 av EZAccess

[baRs]

takk for svar, men jeg spurte ikke etter linker

 

btw: den siden har jeg vært på

[EZAccess]

OK

Men, er det ikke bedre at du syr sammen et utkast til den nye siden. Og, heller spør på forumet når du får problem.

 

Sidene du har nå,ser jo proffe bra ut, og jeg nekter å tro at du ikke kan klare å lage noe med div og css som ser brukbart ut.

 

Layout'en til "the holy grail" ligner ganske mye på oppsettet du har nå.... Et sted å begynne...?

[Nervetattoo]

Får vell slenge inn et kjapt svar.

 

<div id="banner">
</div>
<div id="container">
 <div id="menu1">
       <div id="menuline">
       </div>
 </div>
 <div id="content">
       <div id="topline">
       </div>

       <div id="bottomline">
       </div>
 </div>
 <div id="menu2">
       <div id="menuline">
       </div>
 </div>
</div>
<div id="bunn">
</div>

CSS Delen:

#banner {
       position: absolute;
       width: 800px;
       height: 100px;
       left: 100px;
       top: 0px;
}
#bunn {
       position: absolute;
       width: 800px;
       height: 100px;
       left: 100px;
       top: 500px;
}
#container {
       position: absolute;
       width: 800px;
       height: 400px;
       left: 100px;
       top: 100px;
}
#menu1 {
       position: relative;
       float: left;
       width: 150px;
       height: 100%;
}
#content {
       position: relative;
       float: left;
       width: 500px;
       height: 100%;
}
#menu2 {
       position: relative;
       float: left;
       width: 150px;
       height: 100%;
}

 

Det burde funke.

Har ikke tatt mål i forhold til den strukturen du satte opp, så verdier må jo forandres, men siden burde funke.

 

Edit: sleng inn noen background colours for å se resultatet. Har ikke gjort noe med #menuline og #topline og #bottomline. Grunnen er om jeg er usikker på om de var ment som bokser. Men la de til i html strukturen.

Endret 28. februar 2004 av Findus

[baRs]

KONGE Findus

 

Akkurat slik et svar jeg ville se! Skal prøve meg frem ..

[Cucum(r)]

Akkurat slik et svar jeg ville se!

Så du ville ha noen til å gjøre det for deg med andre ord?

[baRs]

Findus

 

Jeg har prøvd det du viste, men menyene og innholds blokken ligger klistret til venstre!

 

Hva er galt?

[baRs]

Akkurat slik et svar jeg ville se!

Så du ville ha noen til å gjøre det for deg med andre ord?

ville ha noen til å vise meg. vet ikke hvordan jeg skal få ting til å stå der jeg vil ha det!

[Nervetattoo]

Findus

 

Jeg har prøvd det du viste, men menyene og innholds blokken ligger klistret til venstre!

 

Hva er galt?

Kommer litt ann på hva du mener med klistret til venstre.

Om width ikke er satt vil de ikke ha width, og da være klistret til venstre.

Vis du tenker på mellomrom(luft) til venstre kant bruker du enten margin-left eller bare left.

Og selv om jeg gjorde koden for deg nå har det ingen hensikt om du ikke klarer å bruke det til å lære det selv.

Som du kan se av koden er det ganske enkelt.

Prøv å lag ditt eget oppsett ikke bare kopier min kode, det er du ikke tjent med.

Finn deg en css2 reference, vil nok forklare det meste vis du fra forhånd har kjennskap til html layout(attributter).

Finnes en brukbar pdf reference ute der en plass, men har ikke url, har bare fila selv.

 

Håper du finner ut av det, ut med tables for layout!

[DanielP]

Her finner du de fleste CSS kommandoer. Ta en kikk på position, padding og margin

 

Bare bruk ctrl+f og søk etter position. andre gang du trykker søk, kommer du til layout osv osv. der står det meste, og resten står rett oppfor