Roder med layers og kan ikke hite ud af det

vi er på vej....
ikke perfekt endnu, men det er kun lidt justering..
se: www.e-tidsskrift.dk/dev/el_barto.html

//mik

det der stadig driller er de to de bokse der er placeret med float: right; jeg har prøvet at placere dem med negativ margin. prøver med display: inline i stedet....

display: inline dur ikke

SKAL det være i relative mål? det er betydeligt nemmere i faste mål...

så er den da vist meget god, eller? (samme link som oven for)
jeg går ud fra at du vil have den til også at fylde hele browseren ud i bredden..

princippet er flg: <div>'er er blokelementer og lægger sig altså naturligt under hinanden. For at lægge lag ved siden af andre lag er der to muligheder: float: right eller position: absolute med angivelse af top og left. Men for at positionere lag absolut skal de være omgivet af en anden <div> der har position: relative. Så designet bliver:
lag 1: ingen problemer - det ligger bare øverst.
Derunder ligger så en container div med position: relative.
lag2, 4 og 6 lægges så bare efter hinanden inden i denne - de lægger sig automatisk under hinanden til venstre.
lag 3, 5, 7 og 8 positioneres absolut - top og left beregnes i forhold til den omgivne <div>

Hej og tak for indsatsten!

Hvis det gør dig nemmere skal den have en fast bredde på ca. 700 pixels.

Derudover skal boks 2 have fast højde, da den skal indeholde et billede :)

Derudover ser det ud til at boks 6 hopper lidt i forhold til boks 7 og 8?

Jeg ved godt det er en udfordring, men jeg kan altså kun lave det i tabeller...

jeg tror godt den kan rettes til. problemet er mest de der borders. der er angivet i px, men de giver alt i alt nogle ekstra procenter som det er svært at tage højde for, så man skal ind og justere brøker af procenter...

Hvad mener du egentlig med at boks 3 ikke skal have fast højde? at boksen skal kunne udvides eller at dens højde er angivet i procenter? hvad skal der i den. Det er ingen sag at erstatte mine procenter med mål i px. Det gør det kun nemmere.

hvad er målene for boks 2 (med billedet)?

Boks 3 skal indeholde tekst, og det skal være den sammen med boks 4 der udvider sig i højden. Målet er at boks 6, 7 og 8 altid ligger i bunden, og har samme højde.

Boks 5 skal indeholde nyheder, og må meget gerne have fast højde.

:)

Billedet er 382 pixel højt og 201 bred

OK, så box 3 og 4 skal indeholde tekst. Men vi kan ikke sætte dens højde til auto uden at hele designet skubbes nedad når der kommer mere tekst ind end udgangshøjden kan rumme. Så må hele siden alt i alt godt fylde mere end skærmhøjden, eller vil du have overflow (med lodret scrollbar når det er nødvendigt) i de to tekst bokse?

... altså dvs. vil du have de to tekstbokse til at se ud iframes med scrollbar når det er nødvendigt, eller skal hele siden bare blive dybere når tekstboksene fyldes op med mere tekst end boksene kan rumme i udgangsdesignet?

Hmmm....så vil jeg gerne have scrollbar i dem.

Men kan du forstå jeg synes det er nemmere med tabeller? Jeg må sige at det er svært at slippe dem, og se fordelene ved layers.

Jeg synes der er mange herinde der "ser ned" på tabeller, og er glad for at du gider hjælpe :)

Der er overhovedet ingen grund til at se ned på tabeller. Det er bare en idiotisk trend (ligesom alle de andre). Det der er pointen er at se hvad forskellige designs er gode til. Her hvor vi har forskudte bokse er denne her løsning med <div>'er nok god, men tabeller kunne være lige så godt. Eller en kombination...

Det der nogle gange gør tabeller surt at arbejde med er når vi skal have tabeller inde i tabelceller inde i tabelceller ... så det til sidst er en labyrint at finde rundt i når der skal rettes

prøv også lige at se et andet layer-design, som jeg lavede forleden efter er andet sp. på eksperten: www.e-tidsskrift.dk/dev/position.php

Lige en ting: hvordan skal det være når folk ser siden i et vindue der er resizet ned? Hvis boks 2 samt 6,7 og 8 skal have faste mål, så er der kun boks 4 og 1 (i venstre side), og 5 (i højre side) der kan give sig hvis vinduet formindskes? Skal det være sådan? Eller skal vi lave det hele i faste mål, der i udgangspunktet er inden for alm skærm højde (768 eller 560?) ?

Siden skal passe til 800 x 600, brugere der har mindre vinduer end dette må leve med lidt scrollbars i browseren :)

Så: faste mål

hej, dit billede er for højt (382px) til et design der højst må fylde ca. 450px i højden...

ok, så må jeg jo skære i det :)

prøv at se: www.e-tidsskrift.dk/dev/el_barto_fixed.html

i min egen IE er det lidt for langt (jeg får en lodret scrollbar), men i Mozilla (hvor toppanelerne fylder mindre) er det fint og uden scrollbar. Men det er jo lige til at justere på. Det er bare at finde lommeregneren frem og rette på px-målene

Hmmm...nu udvider den sig jo ikke i højden?

hvad mener du?

el_barto> jeg er nødt til at løbe til engang i eftermiddag.
men du kan jo selv gå videre herfra....

jeg ville: først lave det hele i faste mål, og derefter, hvis du godt vil have designet til at give sig efter vindue, så omregn alt til procenter og angiv så alt undtagen boks 2 i disse procentværdier (husk man kan godt bruge decimaler af procenter, f.eks. 0.2% e.l.), men lad boks 2 stå i px. Så burde det vel fungere.

"omregn alt til procenter"...., dvs. også borders

Hej!

Tak for din store hjælp, jeg har nu lavet det i tabeller :(

Vil du være rar og lægge et svar? Jeg har ikke mere tålmodighed med de forbande layers.

Nu skal jeg bare have ryddet op i koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>

<body style="padding:0px;margin:0px;background:#C1BC9E">

<table align="center" cellpadding="0" cellspacing="0" style="width:700px;height:100%" border="0">

<tr><td style="background:url('billeder/gradient_top.gif');height:94px"></td></tr>
<tr><td style="background:#FFFFFF;padding:13px;height:100%">

<table cellpadding="3" cellspacing="0" style="width:100%;height:100%" border="0">

<tr><td style="height:100%">

<table cellpadding="0" cellspacing="0" style="height:100%" border="0">
<tr><td style="border:3px solid #CBCBCB;width:201px;height:382px"><img src="billeder/blomst.jpg" width="201" height="382" alt="" border="0"></td></tr>
<tr><td style="height:13px"></td></tr>
<tr><td style="height:100%;background:#CBCBCB">menu</td></tr>
</table>

</td><td style="width:100%">

<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
<tr><td style="height:100%;background:#CBCBCB">tekst1</td></tr>
<tr><td style="border:1px solid #CBCBCB">tekst2</td></tr>
</table>

</td></tr>

<tr><td colspan="2">

<table cellpadding="0" cellspacing="0" style="width:100%" border="0">

<tr><td colspan="3" style="height:8px"></td></tr>

<tr><td style="width:208px;border:2px solid #CBCBCB;height:97px;background:url('billeder/gradient_bund.gif')" nowrap>1</td><td style="width:5px" nowrap></td><td style="width:100%;border:2px solid #CBCBCB;height:97px;background:url('billeder/gradient_bund.gif')">2</td><td>1</td><td style="width:208px;border:2px solid #CBCBCB;height:97px;background:url('billeder/gradient_bund.gif')" nowrap>3</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</body>
</html>

en grund til at det går i kludder med lagene kan være at din doctype ikke er fuldstændig (mangler URL). Den fulde doctype lyder:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype betyder meget for css. Hvis ikke doctypen er korrekt angivet og korrekt placeret (som det allerførste i dokumentet - ingen blanktegn eller andet forinden), går IE i quirks mode og css reagerer anderledes.

Du kan tjekke om dit dokument er i standard mode eller quirks mode med flg. link sat ind på din side:

<a href="java script:alert((document.compatMode=='CSS1Compat')?'Standard mode':'Quirks mode');">[tjek mode]</a>
//mik