Table/DIV, CSS

[FuLu]

Lekte litt med CSS og DIV's. Forsøket mitt er kanskje ikke det ultimate, siden jeg fant ut at en DIV inni en DIV med padding likevel påvirket bredden på "moder" DIV'en. Hvertfall i noen tilfeller , håpløse greier

 

Her er fila

 

Tanken var å "simulere" tables med DIV og CSS. Men hehe ja, de elementene jeg lagde på venstre side vil ikke akuratt funke bra til noe med tekst i seg. Kanskje perfekt til en meny som inneholder bare bildeknapper e.l.

 

Den til høyre er litt mere dynamisk, hvertfall i høyden

 

De små DIV'ene til venstre er alle plassert med absolute position og alle har fast bredde/høyde. Den store DIV10 til høyre er også plassert med absolute position, men jeg har bare definert bredden og ikke høyden på den. Og DIV'ene som er inni DIV10, floates til venstre og er ikke av typen absolute position.

 

En kompis av meg sier at jeg ikke skal bruke pixel som fixed width, men enheten 'em', slik når man forstørrer/forminsker siden så skal box'ene også følge etter. Men kan kanskje bli vanskelig å plassere elementene riktig med absolute position med 'em' som enhet, aldri testet, og er ikke sikker på om man kan bruke 'em' som enhet inni left: og top:.

 

Kommer vel til å prøve meg på 'em' enheten veldig snart

 

Uansett, bruk av tables til layout er egentlig ikke noe galt med etter min mening. Men siden CSS er her, og man klarer å lage et layout som funker i de fleste nettlesere, så er det egentlig det beste.

 

Mitt største hodebry er og alltid blir, maset med nettlesere som henger etter og som ikke rendrer ut fra standard og "min" logiske tankegang

 

Nå ble kanskje dette innlegget en favorisering av CSS/DIV, siden jeg ikke har et eneste eksempel med tables. Men var egentlig en slags demonstrasjon av hva DIV/CSS kan gjøre.

 

Oq ja, hvis noen av dere har tips, erfaringer e.l. om dette, så sleng inn noen synspunkter da

[enden]

Det som er kjipest er at ulike browsere (les opera/mozilla mot IE) rendrer padding/scroll og bredde ulikt. IE legger det inni mens opera/mozilla legger det til bredden.

Skal du bruke em må du nok droppe absolutt posisjonering ja, men det anbefaler jeg deg uansett i de fleste tilfeller. Vet det er mey "tryggere" og vandt med absolutt, men slipper du deg løs med relativ blir sidene mye bedre

[haugsand]

Se dette eksemplet. Der er det brukt posisjonering, der det både er felt med fast bredde, og ett med dynamisk bredde.

[FuLu]

Det eksemplet er i for seg grei satyrium, men jeg er ikke helt for bruk av hacks som den med voice-family hacken. Den bruker også 3 kolonner, noe ikke man alltid trenger. Hvis man så ikke har bruk for en 3. kolonne, så kan man fint få til variabel bredde likevel. Men da dukker problemet opp, som sikkert ville vært problem med glish.com eksemplet og. Jeg har jo to divs som floater og skal være 50/50 bredde inni Div 4. Det funker utmerket i mozilla/opera, men IE gud jeg hater den nettleseren.

 

Eksempel nå med 'em' som enhet på bredde og bruk i absolute position.

 

Også eksempel med bruk av 'em', men Div 4 er nå dynamisk i høyde og bredde, men elementene inni vil da feile i IE, siden jeg bruker 50% på bredde der.

 

Så ja, enkelte ganger, så tror jeg table er til stor hjelp på layout, desverre, hvis ikke noen andre har bedre ideer.

[epsil]

Prøv:

 

.div2 {
    background-color: #33cc99;
    float: left;
    margin-right: 1em;
    width: 50%;
}
.div3 {
    background-color: #3399cc;
    margin-left: 50%;
}

Dette gir ikke nøyaktig 50 % i Internet Explorer, som regner bredden til .div2 av boksbredden til .div4 (som inkluderer padding), ikke innholdsbredden. En bedre løsning er å forkaste alle .divpadding-elementene og etterlikne glish.com-løsningen 2 columns, ALA style for .div2 og .div3.

Endret 11. desember 2003 av ePsiLON47