Tabell og Divs

[slimboy]

Har gjennom noen år brukt tabeller til å plassere objekter som bilder og text rundt på en side, gjerne etter eget ønske, eller en designer som på død og liv skal ha ting på millimentern.

 

Vel etterhvert har det latt seg gjøre, har nestet tabeller i tabeller i tabeller, skrevet cellspan, colspan og margins i ett, helt til jeg begynte å bruke css for et par år siden, ikke aktiv, men nok til å editere enkelte ting i et stylesheet, i stedet fo å editere 48 sider pga en kunde har skiftet font.

 

Det siste året har det blitt mye css, men jeg har bestandig bruk dem sammen med tabeller og linker, samt noen bilder da.

 

Måtte kikke litt rundt da dere på forumet hadde et nærmest relgiøst forhold til divs og css, så jeg har tenkt å konvertere, hvertfall i den tanke at jeg lærer noe nytt, samt skriver en linje med kode mindre:)

 

Sender med et par linker til noen sider vi har gjort: lenge siden og delvis ferdig og siden som jeg tester divs divs n tables

 

Det som var av min interesse var bruk av divs, og hva som evt er dårligere med min måte skrive klassen rett i a. Ellers falt jeg bare for den menyen hvor bildene kommer frem med :hover

Endret 25. juli 2004 av slimboy

[pgdx]

Måtte kikke litt rundt da dere på forumet hadde et nærmest relgiøst forhold til divs og css, så jeg har tenkt å konvertere, hvertfall i den tanke at jeg lærer noe nytt, samt skriver en linje med kode mindre:)

Ja, litt av poenget er at det skal bli midre koding, og det blir det i 99,99% av tilfellene. Religiøst? Nei, det er mye sterkere enn religion! Det er kampen for standardiseringer!

 

At du lærer noe nytt, er det ikke tvil om, og lærer du nok, vil du aldri igjen skrive <table> med mindre du virkelig mener det.

Det som var av min interesse var bruk av divs, og hva som evt er dårligere med min måte skrive klassen rett i a.  Ellers falt jeg bare for den menyen hvor bildene kommer frem med :hover

En div er jo bare en del av en side. Div kan brukes istedenfor dine utallige <td>-er, men istedenfor å ha tomme <td>-er og mange <tr>-er og problemer med å stille på de, kan du plassere de hvor du vil med CSS.

 

Jeg skjønte ikke helt hva du mente med "klassen rett i a"...

[slimboy]

Feks her, hvis man tar en view src

 

Her bruker jeg div, og id=link

 

<div id="links">

<a href="#" >Home <img src="css/gfx/home.gif"></a>

<a href="#" >Favourite <img src="css/gfx/Favourite.gif"></a>

<a href="#">Mail <img src="css/gfx/Mail.gif"></a>

<a href="#">Msn <img src="css/gfx/Msn.gif"></a>

<a href="#">Print <img src="css/gfx/Print.gif"></a>

<a href="#">Refresh <img src="css/gfx/Refresh.gif"></a>

</div>

 

I tabellen har jeg .classen på i a (<a href="#" class="Link_L1">)

 

<table cellspacing=0 cellpadding=0 border=0 class="meny_tabell">

<tr ><td ><a href="#" class="Link_L1">Home</a></td></tr>

<tr ><td ><a href="#" class="Link_L2">Favourite</a></td></tr>

<tr ><td ><a href="#" class="Link_L2">Mail</a></td></tr>

<tr ><td ><a href="#" class="Link_L2">Msn</a></td></tr>

<tr ><td ><a href="#" class="Link_L2">Print</a></td></tr>

<tr ><td ><a href="#" class="Link_L2">Refresh</a></td></tr>

</table>

 

En annen ting jeg lurer på er: hvordan skal jeg kunne lage en egen klasse/id på den øverste linken "Home" i div paletten, vil gjerne at den skal få samme effekten som "Home" linken i tabell paletten.

 

Hvis man ser i tabell paletten ser man at class'n heter link_L1 på home, på de andre er det link_2, dette kommer at "home" er toppnivå i, de andre er undernivå.

 

[svamp]

Du kan evt gi kun home-linken en ID, som gir egenskaper du angir i tillegg til de du har i klassen på div. Men det trengs kanskje endringer i den eksisterende klassen Link-L2 da.

 

Eller:

-Du kan gjøre som du gjorde i tabellen, med å sette class på alle linkene

-Du kan legge home i en egen div

[Cucum(r)]

En meny skal uansett settes opp som en uordret liste.

[slimboy]

En meny skal uansett settes opp som en uordret liste.

WHY

 

Rippet fra denne siden HER, og der har de ikke brukt liste, men en div som funker som en container, med linker i...

Endret 26. juli 2004 av slimboy

[Haraldson]

En meny skal uansett settes opp som en uordret liste.

WHY

Menyen skal settes opp i en liste pga. brukervennlighet. Om en besøkende kommer til siden din, og nettleseren han/hun bruker ikke har støtte for css, vil i alle fall menyen være en liste

[svamp]

Litt OT: Men om menyen er <a>'er som kun har bakgrunnsbilde (pixy's fast rollovers, f.eks.), som den ofte er, og ingen tekst, vil jo en som ikke har støtte for css se noe i det hele tatt likevel! Da betyr det vel ingenting om menyen er ordnet i en liste eller med posisjonering med <div> e.l. ?

[PoleCat]

Litt OT: Men om menyen er <a>'er som kun har bakgrunnsbilde (pixy's fast rollovers, f.eks.), som den ofte er, og ingen tekst, vil jo en som ikke har støtte for css se noe i det hele tatt likevel! Da betyr det vel ingenting om menyen er ordnet i en liste eller med posisjonering med <div> e.l. ?

<li><a class="anbefalinger" href="#">Anbefalinger</a></li>

Say wut? Teksten "skjuler" man jo ved padding, iallefall gjør jeg det.

Ta en titt på denne, her er hele a et bakgrunnsbilde, men om du ser her ser du at deler av a er tekst, og det bare er bakgrunnen som skifter ved :hover. Ved å bruke denne metoden, vil ja, teksten vises og ingenting annet for de uten støtte for css.

[haugsand]

Gilder/Levin-metoden er kanskje enda bedre, og vil funke selv uten bilde og med css aktivert. Ulempen er at det ikke er mulig å ha et transparent bilde. Shaun Inman skal også ha utviklet en metode vha flash, men den har jeg ikke sett noe på.

[Gronz]

En meny skal uansett settes opp som en uordret liste.

WHY

Menyen skal settes opp i en liste pga. brukervennlighet. Om en besøkende kommer til siden din, og nettleseren han/hun bruker ikke har støtte for css, vil i alle fall menyen være en liste

De som har en browser som ikke støtter CSS bør oppgradere uansett.

[Haraldson]

De som har en browser som ikke støtter CSS bør oppgradere uansett.

Det er meget mulig, men uansett hjelper det ikke med en sånn ignorant holdning når faktisk ikke alle har/får oppgradert.

[slimboy]

Takker for svar, selv om det tydlighvis ikke er noen fasit.

 

Grovt sett kan jeg si at jeg har 3 alternavtiver:

 

<table cellspacing=0 cellpadding=0 border=0 class="meny_tabell">

<tr ><td >

<a href="#" class="Link_L1">Home</a>

</td></tr>

</table

 

<div id="links">

<a href="#" >Home</a>

</div>

 

<ul>

<li>

<a href="#" class="Link_L1">Home</a>

</li>

</ul>

 

Men utifra det jeg har lært om div, så slipper jeg hvertfall å skrive cellspacing/padding og border=0 X ganger i løpet av en site hvis jeg dropper tabellene.

 

Vedr bakgrunnsbilde på:hover effekten, så bruker jeg stort sett et bilde uten text, og legger text'n ovenpå bildet, ikke bare pga av css, men pga at jeg tror det er lettere for bla Google å lese text, enn det som står skrevet på et bilde.

 

Vedr list, så synes jeg først de blir litt kule hvis man feks bytter bullets med et bilde, men jeg var innom ei side her om dagen som hadde gjort dette, problemet var vare at bullet'n poppet opp ca 1 /100 sekund før bilde kom opp, og det var jo ikke noe pent!

 

Ellers takker jeg for svar, og får fortsette å lese i litt mer om css, div og xhtml

Endret 27. juli 2004 av slimboy

[Haraldson]

Vedr bakgrunnsbilde på:hover effekten, så bruker jeg stort sett et bilde uten text, og legger text'n ovenpå bildet, ikke bare pga av css, men pga at jeg tror det er lettere for bla Google å lese text, enn det som står skrevet på et bilde.

Tror du!?