---

Hej,

Jeg er så småt gået i gang med at ændre nogle af mine sider fra at
have et tabel-styret layout til at bruge CSS2-positionering. Jeg har
prøvet at lave nogle testsider - men det er åbenbart ikke helt
uproblematisk.

Fx: Hvis man sætter en div box til
width:100%;
og så bagefter sætter en border på, så aktiverer det den horisontale
scrollbar (I IE6, NN6 og FF). Altså er den bredere end 100%.
Er det mig der har misforstået noget, eller burde border ikke være
inkluderet i width-angivelsen?

Jeg har et eksempel på:
<url: http://www.marxisme.dk/csstest/side1.htm>
På side 2 har jeg slået border fra (på topbar og footer), og på side 3
har jeg lavet et hack: sat width til 99,5%, som "løser" problemet,
hvis folk bruger nogenlunde normale browserbredder, men det ser ikke
kønt ud ...


Mere generelt er jeg interesseret i at finde en løsning, som:
- ligner et klassisk tabel-layout med topbar, venstremenu,
indholds-blok og en footer.
- så vidt muligt bruger relative værdier, så man kan forstørre og
formindske browser-vinduet uden at det hele falder sammen
- fungerer rimeligt i nyere versioner af gængse browsere
- validerer som min. HTML4 Transitional/CSS2

Vil jeg blive ved med at støde ind i problemer som ovenfor, eller skal
jeg bare have tålmodighed til at lære browsernes unoder?

Mvh. Jørn

--
Jørn Andersen,
Brønshøj

---

Jørn Andersen wrote:
>
> Fx: Hvis man sætter en div box til
> width:100%;
> og så bagefter sætter en border på, så aktiverer det den horisontale
> scrollbar (I IE6, NN6 og FF). Altså er den bredere end 100%.

Jeg angiver _aldrig_ en width til 100%. Det kan kun give problemer.
Et blok element prøver automatisk at fylde det den kan i width'en, så
100% er ganske overflødig.

> Er det mig der har misforstået noget, eller burde border ikke være
> inkluderet i width-angivelsen?

Nej, kun indholdet er med i width'en. Padding og border samt margin
kommer uden på indholdet.

> Jeg har et eksempel på:
> <url: http://www.marxisme.dk/csstest/side1.htm>

Der er ingen grund til at float din #topbar, så drop både float og som
sagt width 100%.

Rent faktisk er det kun menuen du bør float'e. Jeg har lavet et eksempel
her:
http://www.hintzmann.dk/testcenter/css/2spalte/
CSS'en til eksemplet er ultra simpel.

#menu float left og width XX
#main margin-left XX

>
> Vil jeg blive ved med at støde ind i problemer som ovenfor, eller skal
> jeg bare have tålmodighed til at lære browsernes unoder?
>

Man bør altid være tålmodig, men det er en god ide at du får forståelse
af CSS-box modellen. Og så prøv at hold din CSS simpel... kiss ... Keep
It Simpel, Stupid

Ang. browserenes unoder, så vil sige at det ofte er IE der er "klassens
klovn". Jeg udvikler efter standarderne og tester løbende i Firefox. 99%
af gangene ser det ens ud i Opera og Safari.
Mens jeg ofte skal tilpasse til IE.

--
Martin Hintzmann
http://www.hintzmann.dk/

---

On Mon, 17 Oct 2005 01:25:31 +0200, Martin Hintzmann <no@spam.invalid>
wrote:

Hej Martin,

>Jeg angiver _aldrig_ en width til 100%.

Det var synderen - tak!

>Nej, kun indholdet er med i width'en. Padding og border samt margin
>kommer uden på indholdet.

OK - så var det mig, der havde misforstået.

>> Jeg har et eksempel på:
>> <url: http://www.marxisme.dk/csstest/side1.htm>
>
>Der er ingen grund til at float din #topbar, så drop både float og som
>sagt width 100%.

Hvis ikke jeg bruger float på #topbar, så hopper de to floatede
h3'ere, som er indeni, ud - ?

>Rent faktisk er det kun menuen du bør float'e. Jeg har lavet et eksempel
>her:
>http://www.hintzmann.dk/testcenter/css/2spalte/
>CSS'en til eksemplet er ultra simpel.
>
>#menu float left og width XX
>#main margin-left XX

Den kigger jeg lige lidt nærmere på i aften.

Mvh. Jørn

--
Jørn Andersen,
Brønshøj

---

Jørn Andersen wrote:
>
> Hvis ikke jeg bruger float på #topbar, så hopper de to floatede
> h3'ere, som er indeni, ud - ?
>


Sæt overflow til hidden på #topbar, så hopper floated elementer inden i
ikke ud. Eller med andre ord, forældre elementet omkrandser flydende
børne elementer.

#topbar {
   overflow:hidden;
}

Dette kræver dog noget ekstra CSS til IE. Brug f.eks. conditional
comments for at servere et ekstra styleshet kun til IE.
http://www.hintzmann.dk/articles/skjulecss/conditionalcomments/


I det stylesheet skal du sætte height til 1% på #topbar.
#topbar {
   height:1%;
}



--
Martin Hintzmann
http://www.hintzmann.dk/

---

Martin Hintzmann wrote:
> Jørn Andersen wrote:
>
>>
>> Hvis ikke jeg bruger float på #topbar, så hopper de to floatede
>> h3'ere, som er indeni, ud - ?
>>

Har lige lavet et eksempel her.
http://www.hintzmann.dk/testcenter/css/2spalte/index2.html

* html CSS-hacket bør dog laves med conditional comments.

--
Martin Hintzmann
http://www.hintzmann.dk/

---

Jørn Andersen skrev:

> Jeg er så småt gået i gang med at ændre nogle af
> mine sider fra at have et tabel-styret layout til at bruge
> CSS2-positionering.

Godt!

> width:100%;
> og så bagefter sætter en border på, så aktiverer det
> den horisontale scrollbar

Prøv at slette width:100% fra #topbar{ og #footer{ - så
skulle det falde på plads.

<p> og <h3> er i forvejen blokelementer, og fylder derfor
bredden ud til en eventuel margin-definition.

> Mere generelt er jeg interesseret i at finde en løsning,
> som: - ligner et klassisk tabel-layout med topbar,

Prøv også at se http://html-faq.dk/2003.asp - hvor jeg har
skrevet noget om det.

> Vil jeg blive ved med at støde ind i problemer som
> ovenfor, eller skal jeg bare have tålmodighed

Til kræver lidt tålmodighed at skifte fra <table> til <div>,
men har du først lavet noget brugbart, vil du ikke undvære
den fleksibilitet det giver.

Du kender sikkert http://csszengarden.com/ og den måde
det er bygget op på?

--
Allan Vebel
http://html-faq.dk