CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

clouise Nybegynder

08. december 2005 - 14:10 Der er 27 kommentarer og
1 løsning

problemer med centrering horisontalt og vertikalt

Jeg er ved at sætte en hjemmeside op, som skal være centreret i midten af browseren... Problemet er, at indholdet delvist forsvinder i venstre side, når browservinduet gøres mindre. Er der nogen der kan gennemskue en måde at gøre det?

Her kommer min kode...

<html><head><title>testside</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>

<div class="outer">

<div class="flash">
Her kommer flash fil
</div>
<div class="content">
her kommer content
</div>
</div>

</body>
</html>

Synes godt om

Slettet bruger

08. december 2005 - 14:30 #1

2 ting:
- Du mangler DOC-type,
- Du mangler at angive, hvor dine DIV skal åbnes i hhv. IE og andre browsere.

Skal jeg komme med et eksempel?

Synes godt om

clouise Nybegynder

08. december 2005 - 14:34 #2

ja tak - meget gerne!

Synes godt om

Slettet bruger

08. december 2005 - 14:44 #3

- For det første, har jeg indsat en korrekt HTML 4.1 Transitional DOC-type.
- Dernæst har jeg indsat et IE-hack - forstået på den måde, at IE og alle de andre browsere opfatter DIV forskelligt, af flere grunde. Måden du styrer dette på, at at se nærmere på CSS-kildekoden jeg har indsat:
".outer" er kun til IE.
"html>body .outer" er til alle andre browsere.
Du skal nu chekke dit website i hhv. IE og hvad du ellers bruger af browsere, til at chekke dit website med. Jeg vil anbefale dig at bruge Firefox.

Eksempel:
====================================================
<!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">

<style type="text/css">
.outer { /* IE +5/Win */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif)
html>body .outer { /* FF, Opera osv. */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif)
</style>

</head>

<body>

<div class="outer">

<div class="flash">
Her kommer flash fil
</div>
<div class="content">
her kommer content
</div>
</div>

</body>
</html>
====================================================

PS: Du behøves ikke at skrive DIV foran, hver gang du vil definere en div-egenskab i dit CSS. ;-)

Synes godt om

clouise Nybegynder

08. december 2005 - 14:49 #4

hmmm jeg har stadig det samme problem - hvis en person med en 800x600 skærm skulle åbne min side, ville han ikke kunne se indholdet til venstre....

Synes godt om

Slettet bruger

08. december 2005 - 14:51 #5

Jo, lige éen vigtig ting mere:
Denne kode i din CSS:
====================================================
body {
background-color: #ebe7e0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
====================================================

skifter du ud med denne:
====================================================
html,body {
height: 100%;
width: 100%;
text-align: left;
background-color: #ebe7e0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin: 0px;
padding: 0px;}
====================================================

Synes godt om

Slettet bruger

08. december 2005 - 14:54 #6

Du vil altid have det samme problem, da du har defineret dit website til at være 964px bredt. Derfor kan ingen med en skærmopløsning på kun 800px kunne se hele dit website.
Men du har nu muligheden for at justere dit website til at stå præcist i midten, via mit kodeeksempel. Og alle med større skærmopløsninger, vil nu kunne se dit website korrekt.

Synes godt om

Slettet bruger

08. december 2005 - 14:58 #7

Prøv også at fjene dit baggrundsbillede (bg_estate.gif), når du retter dit website ind. Du kan altid indsætte det igen senere.

Synes godt om

Slettet bruger

08. december 2005 - 15:05 #8

Denne kode virker 100% korrekt, og sidder helt præcist i midten (både horisontalt og vertikalt) i hhv. IE og Firefox:

====================================================
<!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">

<style type="text/css">
html,body {
height: 100%;
width: 100%;
text-align: left;
background-color: #ebe7e0;
margin: 0px;
padding: 0px;}
.outer { /* IE +5/Win */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif)
html>body .outer { /* FF, Opera osv. */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif)
</style>

</head>

<body>

<div class="outer">

<div class="flash">
Her kommer flash fil
</div>
<div class="content">
her kommer content
</div>
</div>

</body>
</html>
;}
====================================================

Synes godt om

clouise Nybegynder

08. december 2005 - 15:13 #9

ok - så siger jeg tak for hjælpen ;-)

Synes godt om

roenving Novice

08. december 2005 - 15:24 #10

-- hvor afsluttes de to .outer-regler ?-)

Synes godt om

Slettet bruger

08. december 2005 - 15:30 #11

clouise:
Virker det også, når du indsætter de andre DIV? Og er du med på, hvordan det nu fungerer?

roenving:
Præcist hvad mener du?

Synes godt om

roenving Novice

08. december 2005 - 15:33 #12

Der mangler to slut-tuborger:

.outer { /* IE +5/Win */
...
background-image:url(bg_estate.gif)
}
html>body .outer { /* FF, Opera osv. */
...
background-image:url(bg_estate.gif)
}
</style>

Synes godt om

Slettet bruger

08. december 2005 - 15:49 #13

Nå ja, for søren da! Godt at du lige havde falkeøjet med, Roenving! Tak! :-)

Er du med på den, clouise? Altså at din CSS nu ser sådan ud (inden du indsætter dine sidste DIV):
====================================================
<style type="text/css">
html,body {
height: 100%;
width: 100%;
text-align: left;
background-color: #ebe7e0;
margin: 0px;
padding: 0px;}

.outer { /* IE +5/Win */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif); }
html>body .outer { /* FF, Opera osv. */
position:absolute;
left:50%;
top:50%;
width:964px;
height:594px;
margin-left:-482px;
margin-top:-297px;
background-color:#404040;
background-image:url(bg_estate.gif); }
</style>
====================================================

Synes godt om

Slettet bruger

08. december 2005 - 15:50 #14

Og forøvrigt: Tak for points, clouise. :-)

Synes godt om

johan.o Nybegynder

09. december 2005 - 00:18 #15

Øhm, jeg syntes da også det virker i FF uden den sidste 'html>body .outer' ?

Mvh. Johan

Synes godt om

Slettet bruger

09. december 2005 - 03:28 #16

johan.o :
Jepper, det gør det også - altså så længe at clouise ikke bruger "padding" og "border", for så er det nemlig at det går helt galt. IE opfatter nemlig "padding" og "border" helt forskelligt end de andre browsere (som forøvrigt følger W3C´s regler på det punkt). Og det er selvfølgelig i kombination med "height" og "width" til en boks, at IE opfører sig anderledes.
Så man kan også lige så godt lære det med det samme - problemet forsvinder jo ikke af selv, ved at ignorere det.

Her er et eksempel på hvordan en boks er opbygget iflg. W3C:
http://www.html.dk/tutorials/css/lektion9.asp

Og hvis du og/eller clouise er interesseret i at læse mere om dette problem, er her noget rigtigt godt læsestof:
http://www.brainjar.com/css/positioning/default.asp
http://css-discuss.incutio.com/?page=BoxModelHack

Som der også står, så er der flere metoder til at omgås IE´s fejl. Jeg har blot angivet mit favorit-IE-hack, fordi jeg nemmere og hurtigere kan justere koderne på den måde. :-)

Synes godt om

Slettet bruger

09. december 2005 - 03:37 #17

...jeg glemte lige at nævne, at selvom at der ser fint ud UDEN det hack, så ser det altså ikke særligt godt ud i IE +5.5 på hhv. MAC, Linux og/eller andre Operativ Systemer...

Synes godt om

clouise Nybegynder

09. december 2005 - 09:15 #18

ok og tak - jeg tror jeg har nogenlunde styr på det nu :-)

Synes godt om

johan.o Nybegynder

09. december 2005 - 09:37 #19

Når du sætter en korrekt DOCTYPE på så retter IE da ind efter w3.org boxmodellen, og behandler padding, margin, border korrekt i forbindelse med width.

Mvh. Johan

Synes godt om

Slettet bruger

09. december 2005 - 17:57 #20

johan.o:

Nej, IE lægger "padding" og "border" INDEN i content - hvorimod W3C foreskriver, at det skal lægges udenpå. Derfor opstår der disse forskelle, og man er nødt til at lave IE-hacks. :-(

Her er W3C´s foreskrift: http://www.w3.org/TR/CSS21/box.html

Synes godt om

johan.o Nybegynder

09. december 2005 - 19:00 #21

Når jeg tager det eksempel som er vist på dit link http://css-discuss.incutio.com, og sætter en korrekt DOCTYPE på (Den de bruger er jo forkert) så viser min IE og FF nøjagtigt samme resultat, de to 'kasser' er lige bredde.

Mvh. Johan

Synes godt om

roenving Novice

12. december 2005 - 10:34 #22

-- og for at IE skal tage box-modellen alvorligt (plus en række andre vigtige css-ting !-), skal man bruge et fuldt kvalificeret doctype-tag inklusive dtd-link, f.eks.

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

Se f.eks. mere her i tabellen under remarks, hvor der vises, hvornår IE går i quirksmode afhængig af dtd-linket:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/doctype.asp

Synes godt om

johan.o Nybegynder

12. december 2005 - 12:48 #23

Præcis :)

Mvh. Johan

Synes godt om

Slettet bruger

12. december 2005 - 13:28 #24

roenving:

Vedr. quirksmode:
- Hvor meget kan IE´s quirksmode override fejl i deres egen browser, og derved tilnærmelsesvis tilpasse sig W3C-standarden?
- Og hvor kraftfuld er IE´s quirksmode egentligt? Jeg synes tit at folk kan slippe af med en masse slamkode, og alligevel viser IE det nogenlunde korrekt.

Vedr. DOC-type:
Ja, jeg anbefalede også clouise at indsætte en korrekt DOC-type (incl. dansk charset) her: @ 08/12-2005 14:44:41

<!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">

Synes godt om

roenving Novice

12. december 2005 - 16:04 #25

Du kan finde documentets css-kompatibilitet ved at paste følgende i adresselinjen:

java script:alert(document.compatMode);

-- hvis du gør det på Eksperten, svarer den 'BackCompat', hvilket betyder at den er i quirksmode (pga. xml-deklarationen før doctype !-)

-- hvis du gør det på en side, som ikke har den slags og fuld doctype, vil den svare 'CSS1Compat', hvilket fortæller, at IE er i standards mode, og derfor overholder f.eks. box-modellen, kan centrere elementer horisontalt via css m.m.m.

-- og IE vil bruge en hvilkensomhelst undskyldning for at hoppe over i quirksmode, bare et eller andet foran doctype-tagget, vil få den til at gå i 'slamkode-mode', ligesom slamkode selvsagt vil igangsætte den motor !o]

Synes godt om

Slettet bruger

14. december 2005 - 03:10 #26

johan.o:
Jeg faldt lige over denne artikel, som beskriver IE´s box-problem godt og grundigt:
http://www.webdesign101.dk/xhtml/css/hacks/hack_1.php
Forhåbentligt artiklen kan beskrive problemet bedre end jeg kan. :-)

Synes godt om

Slettet bruger

14. december 2005 - 03:15 #27

roenving:
Kanon-metode, til at identificere CSS-kompatibiliteten! :-)

Men hvad skal der mon opgraderes med i CSS-koderne, før at det bliver til CSS2? Findes der en CSS-tags-liste, et eller andet sted?

Synes godt om

johan.o Nybegynder

14. december 2005 - 11:44 #28

Okay, lad mig præciserer et pat ting.

1.: Jeg er enig med dig omkring margin's på float's.

2.: Jeg er enig med dig omkring selectoren '>'

3.: Jeg er ikke enig med dig i at IE +5 med en korrekt DOCTYPE ikke opfylder w3c's boksmodel. Det er muligt IE 5 og 5.5 ikke gør, men +5 må jo betyde nyere end 5, og IE 6 behandler boksmodellen fint, hvis man sætter korrekt DOCTYPE.

Men okay hvis du mener at float's margin 'tingen' kommer ind under boksmodellen, så skal vi ikke 'skændes' om det :) - så er den naturligvis forkert. Men i forhold til de eksempler med width, pading osv. er IE 6 altså fint med.

Mvh. Johan

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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