Notifikationer

Markér alle som læst Log ud

anders02 Nybegynder

25. april 2007 - 08:55 Der er 15 kommentarer og
1 løsning

Hvordan lave ens div-bokse i alle browsere?

Hej
Jeg har set på hjemmesiden:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

Formålet med det viste er, at man skal kunne lave ens lag i alle browsere, så uanset hvad man sætter på af borders og padding, så forbliver boksene ens i størrelsen lige meget hvilken browser man bruger?

Men kan nogen forklare mig eller sende mig et koden til en side, hvor det virker?

Har nogen erfaring med det her?

Jeg har simpelthen svært ved at gennemskue det?

Mvh anders02

Synes godt om

duuink Nybegynder

26. april 2007 - 00:06 #1

Hej Anders02

Jeg har selv opbygget en side (skoleprojekt) ved udelukkende brug af div-tags til opsætning, og ja det er meget tidskrævende og besværligt at lave men det er fyldt med muligheder.

Siden er http://www.harrieshansen.dk/vektorer
og css koden ligger på http://www.harrieshansen.dk/vektorer/css/style.css

som du kan se skal der meget css til, men spørg da endeligt hvis der er noget jeg kan hjælpe med

( ps. funktionen z-index virker dårligt i IE 6.0 )

Thomas

Synes godt om

anders02 Nybegynder

26. april 2007 - 07:30 #2

Hej Thomas
Det ser meget fint ud, det I har lavet, men jeg kan ikke lige få det til at virke rigtigt, når jeg hiver det ind i mit Dreamweaver for at "studere det nærmere".
Jeg tager ellers og kopierer kildekoden fra forsiden som vektorer.htm, og så laver jeg en mappe "css" i Dreamweaver og tager koden fra ...dk/vektorer/css/style.css og hæfter style.css til vektorer.htm, men det ser ikke rigtigt ud.
Hvad gør jeg galt, tror du?
Hvordan virker z-index dårligt i IE 6.0? For mig har det egentlig virket ok, synes jeg ...?
Mvh anders02

Synes godt om

duuink Nybegynder

26. april 2007 - 10:33 #3

Send lige et link på det, hvis du altså har lagt det op.

Når du redigerer filerne benyt notepad 2 istedet for dreamweaver, da den selv kan finde på at gå og redigere i filerne.

Synes godt om

anders02 Nybegynder

26. april 2007 - 12:07 #4

Hej Thomas

Der er nok noget, jeg har misforstået, for jeg har bare taget dit første link, trykket Vis Kilde, i browseren, kopieret det, sat det ind i DW (Dreamweaver) som filen vektorer.htm, derefter åbnet dit link 2, som jeg har åbnet i Firefox, fordi den viser bare koden direkte, sat det ind i DW i en mappe "css" som style.css.

Hvad går galt?

Jeg er spændt på at "tyde" dine koder, for jeg tror, jeg kan lære det nødvendige af det!

Mvh Anders

Synes godt om

olebole Juniormester

26. april 2007 - 14:46 #5

<ole>

duuink >> At skrive XHTML1.0-Trans giver ikke megen mening. Alle browsere (nu og i fremtiden) vil parse koden som dårlig HTML ... aldrig som X(HT)ML!
Desuden er det svært at se meningen i at give et link-element 'display:inline'. Et link-element renderes ikke, hvorfor det ikke giver mening at tale om dets display ;o)

anders02 >> Hele humlen ligger i DTD'en - og om den får IE til at gå i quirks-mode.
Test f.eks. dette i FF og IE6 (ser ens ud i begge):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
width: 150px;
height: 150px;
background: yellow;
}
.withBorders {
border: 50px solid red;
}
</style>
</head>
<body>

<div>blabla</div>
<div class="withBorders">blabla</div>

</body>
</html>

Test derefter dette (DTD'en får IE6 til at gå i quirks og dermed disable CSS' box-model):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
width: 150px;
height: 150px;
background: yellow;
}
.withBorders {
border: 50px solid red;
}
</style>
</head>
<body>

<div>blabla</div>
<div class="withBorders">blabla</div>

</body>
</html>

Test også denne (Korrekt DTD, men læs kommentaren før):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
width: 150px;
height: 150px;
background: yellow;
}
.withBorders {
border: 50px solid red;
}
</style>
</head>
<body>

<div>blabla</div>
<div class="withBorders">blabla</div>

</body>
</html>

/mvh
</bole>

Synes godt om

olebole Juniormester

26. april 2007 - 14:48 #6

Læs her om fænomenet:
http://msdn2.microsoft.com/en-us/library/bb250395.aspx

Læs under: The !DOCTYPE "Switch"

Synes godt om

olebole Juniormester

26. april 2007 - 14:51 #7

- men lad os endelig høre, hvad duuink mener, der skulle være i vejen med z-index i IE6 ... det tror jeg nemlig ikke, der er andre, der er informeret om ;o)

Synes godt om

anders02 Nybegynder

26. april 2007 - 16:38 #8

Hej

Jow, jeg har været inde på forskellige sites og læse om forskellige måder at sætte browserne til at køre på, det jeg formoder olebole kalder DTD, og jeg kan se, at Dreamweaver, som jeg bruger, bruger den ,som olebole anbefaler. Andre skriver noget andet, fx her: http://www.quirksmode.org/css/quirksmode.html

I oleboles eksempel bliver alle tre par "forkerte", dvs. alle seks kasser får samme størrelse, når jeg fjerner DTDen i DW. Til gengæld bliver alle tre par korrekte, når den sættes ind igen. Jeg har IE 7 på min pc.

SÅ vil det sige, at jeg skal bare indsætte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
hver gang, så kører tingene af sig selv - så bliver boksene CSS standard, hvor (border + padding x 2) + width ?giver størrelsen, og jeg undgår quirks? Hvad med i IE 5?

Vil det også sige, at jeg kan se relativt meget bort fra problemerne i IE 5 - og andre browsere - og ikke bekymre mig så meget om det med boksenes størrelser, hvis jeg bare (eller DW gør det) indsætter den nævnte DTD hver gang?

Dét kan jeg ikke rigtig helt finde ud af at overskue?

Mvh anders02

Synes godt om

duuink Nybegynder

26. april 2007 - 16:46 #9

hej olebole

jeg har aldrig kunnet få z-index til at virke ordenligt i IE 6. giver under mystiske omstændigheder altid problemer ved at det ikke er de rigtige der kommer øverst.

når jeg har skrevet display:inline på et link element var det nok mest som et forsøg til at fjerne overskydne mellemrum. (kan ikke huske det nærmere, det er over et år siden jeg lavede den)

mht. doctype, så er jeg ikke den store geek inden for det område, men det virker og bliver godkendt af validatoren xD

Synes godt om

olebole Juniormester

27. april 2007 - 14:36 #10

duuink >> Vedr. z-index er jeg helt sikker på, du begår en eller flere fejl ... på det område har IE6 ikke kendte fejl.

Et link-element kan aldrig give overskydende mellemrum nogen steder - hvorfor det som sagt ikke giver mening at sætte style-properties på det.

Valid kode er absolut ikke nødvendigvis god kode - men god kode er altid valid ;o)

anders02 >> En DTD (DocType Definition) fortæller browseren hvilken markup-standard, koden er skrevet i - og derfor, hvordan den skal tolkes. Det er derfor vigtigt, at DTD'en passer til den standard, man vil skrive mod.
Den DTD, jeg har vist, dækker HTML4.01-Transitional - men du kan også bruge HTML4.01-Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

www.quirksmode.org har derimod taget det tåbelige valg at skrive XHTML1.0-Transitional - og bruger derfor den standards DTD. XHTML1.0-Trans kan ikke tolkes som XHTML af nogen eksisterende browser, men tolkes altid som dårlig/tilfældig HTML.

Der er oceaner af ammestuehistorier i omløb om XHTML ... næsten alle stammer fra (og viderebringes af) folk uden ringeste anelse om, hvad XHTML er.

Hvis man bruger XHTML korrekt og skriver valid kode, er der en del ting, der bliver umuliggjort (f.eks. det at validere en form) - dels fordi der endnu ikke er en brugbar/konsistent XHTML-standard - og dels fordi ingen browser endnu understøtter XHTML korrekt.

Alt bliver bedre, når XHTML2.0 - med tilhørende XForms og XEvents - bliver en realitet ... og vel at mærke bliver understøttet af browserne.
Indtil da skal man have _meget_ specielle behov for at skrive XHTML. Mange af de ting, der hører til under X(HT)ML, kan faktisk bruges under HTML ... det bliver selvsagt ikke validt - men det gør den tilsvarende XHTML-kode alligevel sjældent.

Mit råd: Brug HTML4.01 (meget gerne strict) og valider dine sider. Vent med XHTML til standarden er færdig-udviklet =)

Vedr. IE5, så kørte alle IE'er før IE6.0 i quirks mode. Det er førsdt fra og med IE6.0, du kan sætte IE i standard mode.

Endnu et råd: Lav tingene, så de kan ses i gamle IE'ere (5.0 og 5.5) - og lav det, så det bliver lækkerligt i alle andre browsere. Efterhånden kan du godt tillade dig at blæse på version 4 browserne

Synes godt om

duuink Nybegynder

27. april 2007 - 15:39 #11

sorry mr. Wise-guy!

Synes godt om

anders02 Nybegynder

27. april 2007 - 21:27 #12

Tusind tak for svar, især til olebole. Fedt at vide det med XHTML - jeg har efterhånden hørt på en del om det (selvom jeg kun er newbie med hjemmesider), og nu føler jeg mig ikke så dum, når jeg må sige, at jeg er aldrig blevet overbevist om noget som helst, der skulle være logisk, på det punkt! Rar fornemmelse.

Jeg skal bare lige høre helt præcist - hvad er det så, der skal til, for at siderne kan laves til IE 5.0, og hvordan skal jeg kunne se resultatet i IE 5.0 og 5.5 til tjek af mig?

Hvordan tjekker man det med IE 5.0 - jeg har kun IE 7.0 på min pc (+ Firefox, Netscape osv., men alle i de nyeste versioner, så hvordan tjekker man IE 5.0, når man har IE 7.0 på sin pc?).

Mvh anders02

Synes godt om

anders02 Nybegynder

02. maj 2007 - 14:43 #13

Nå, duuink og olebole, efter en længere disput, så smid lige svar begge to, så jeg kan give jer nogle point?

Jeg vil dog godt lige høre olebole igen, om hvordan man tjekker IE 5.0, når man allerede har IE 7.0 på sin pc, og hvad er det præcist, jeg skal gøre, for at kunne producere siderne til IE 5.0 også - skal jeg bare smide en DTD ind i html-dokumentet, og så bare lade være meda tænke så meget mere over det problem?

Mvh anders02

Synes godt om

anders02 Nybegynder

04. maj 2007 - 09:05 #14

I skal stadigvæk smide svar for at kunne få points :-)

Mvh anders02

Synes godt om

anders02 Nybegynder

06. maj 2007 - 11:52 #15

Nå, nu lukker jeg spørgsmålet selv, jeg har bedt om svar nogle gange ...

mvh anders02

Synes godt om

mclemens Nybegynder

07. maj 2007 - 01:43 #16

Kommentar: olebole
26/04-2007 14:51:10
- men lad os endelig høre, hvad duuink mener, der skulle være i vejen med z-index i IE6 ... det tror jeg nemlig ikke, der er andre, der er informeret om ;o)

Kommentar: olebole
27/04-2007 14:36:07
duuink >> Vedr. z-index er jeg helt sikker på, du begår en eller flere fejl ... på det område har IE6 ikke kendte fejl.

...

Nu har jeg ikke lige teste i IE6, (kun 7) men det varierer
lidt pudsigt i nedenstående med z-index og scrolling.
... Så kan man selvfølgelig kaste en baggrund på #static
så den dækker eller en z-index:10; på #bodyen, men det er et
pudsigt eksempel, hvor scrolling er muligt hvis height ikke er sat.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}
body {background: url("tonga.gif");}

#main {
margin:0 auto;
width:878px;
position:relative;
height:100%;
}

#static {
left:50%;margin-left:-439px;
width:878px;height:100%;
position:absolute;
}

#main {left:10px;background:#fc5;}

#lb,#rb {
width:45px;height:100%;
position:absolute;
background:#ff0;
z-index:9;
}
#lb {left:-22px;}
#rb {right:-22px;}

#copy {
position:absolute;
bottom:0;left:0;
width:878px;
background:url('gray.gif');
z-index:8;text-align:center;
}

#bodyen {
height:100%;width:100%;
overflow-y:scroll;
position:absolute;
top:0;left:0;
}

#bodyen>#main {
height:auto;
min-height:100%;
}

#bannerarea {
height:176px;
background: #faa;
}

#toparea {
text-align:center;font-weight:bold;
background: #aaa;
}

</style>
</head><body>

<div id="bodyen">
<div id="main">
<div id="bannerarea">a<br>a<br></div>
<div id="toparea">aaa</div>
<div style="margin-left:20px;background:#0f0;">Scroll uden height angivet<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br></div>

<div style="margin-left:20px;height:1000px;background:#f00;">Scroll med height angivet<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br></div>
</div>
</div>

<div id="static">
<div id="lb"></div>
<div id="rb"></div>
<div id="copy">aaa</div>
</div>

</body></html>

...

IE og FF er også lidt uenige her - prøv at fjerne

(eftersom #wm3 har z-index:2; burde ovenstående vel ikke være nødvendigt?)
... Igen kun checket IE7, men mener at jeg havde samme erfaring under ie6.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
position:absolute;
height:100%;
width:100%;
overflow-y:scroll;
}

#main{
height:100%;
}

#main2{width:100%;position:relative;z-index:2;background:#0ff;}

#bodyen>#main{
height:auto;
min-height:100%;
}

#wm {
position:absolute;top:50%;left:50%;
width:0;
height: 0;
}
#wm2{
margin-right:17px;
height:100%;
position:relative;
}
#wm3{
position:absolute;
top:100%;left:50%;
margin: -100px 0 0 -150px;
width:300px;
height:200px;
z-index:2;
background:red;
}
</style>

</head><body>

<div id="wm"><div id="wm2"><div id="wm3">aaaaa</div></div></div>

<div id="bodyen">

<div id="main"><div id="main2"><div>main...start<br>maiain...<br>main...<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..vv.<br>main...<br>main...slut</div></div></div>

</div>

</body></html>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS