Firefox centrerer ikke ordentligt

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46
Firefox centrerer ikke ordentligt

Indlæg af Josefine » 5. feb 2012, 19:34

Hejsa :D

Jeg har lidt problemer med at få banner-delen centreret ordentligt i Firefox. Jeg har brugt disse koder:

Kode: Vælg alt

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
   <head>
   <center>
<div id="title">
<h1>Banner</h1>
</div>
   </center>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
	<li>Punkt 4</li>
	<li>Punkt 5</li>
	<li>Punkt 6</li>
	<li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
	<li>Ditten</li>
	<li>Datten</li>
</ul>
</div>

</head>

<body>

<style type="text/css">

body {
	margin:0px;
        background-color: green;
}
#title {
	position:center;
	left: center;
	top:0px;
        margin-left: 70px;
	width:75%;
	height: 100px;
	background-color:orange;
}
#leftmenu {
	position:absolute;
	left:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#rightmenu {
	position:absolute;
	right:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#content {
	padding-top: 70px;
	margin-left:160px;
	margin-right:160px;
	background-color:white;
}

</style>
</body>
</html>


Det ser fint ud i både Safari og Chrome, men Firefox driller altså lidt. Jeg har ikke lige haft mulighed for at afprøve IE, da jeg ikke har den installeret til min mac, men det ser sikkert endnu værre ud der.

Nogle der har nogle ideer til, hvordan jeg kan få browserne til at arbejde lidt sammen for en gangs skyld?
Det ville ellers være rart med sådan en kode, der fik alle de andre koder til at se ens ud i alle browsere :lol:

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Firefox centrerer ikke ordentligt

Indlæg af ThomasI » 5. feb 2012, 20:53

Hej Josefine,

Der er noget et fundamentalt galt med din kode...

For det første har du al dit indhold stående mellem <head> </head> tags'ne... Det skal stå mellem dine body tags!

Derudover er dit <center> tag "udgået" af html, så du må ikke bruge dette tag til at centrerer din title div. Det kunne godt være derfor at firefox beklager sig, idet du bruger en HTML5 doctype, mens <center> tagget i html5 ikke tilladt. ;)

Brug istedet dette i din CSS kode til at centrere din div på siden:

Kode: Vælg alt

margin-left: auto;
margin-right: auto;
Sæt også gerne en fast ixel width på dine divs istedet for at bruge f.eks 75%...

Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46

Re: Firefox centrerer ikke ordentligt

Indlæg af Josefine » 7. feb 2012, 09:52

Arh, nu virker det! Tusind tak for hjælpen :D

Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46

Re: Firefox centrerer ikke ordentligt

Indlæg af Josefine » 7. feb 2012, 16:11

Argh, og Internet Explorer godtager som den eneste selvfølgelig ikke koden, ser det ud til.

For det første viser den ikke æ, ø og å, for det andet popper banner-delen helt op øverst i stedet for at have lidt mellemrum fra toppen ligesom i de andre browsere, og for det tredje er det helt galt med content-delen, der slet ikke er centreret overhovedet.

Mine koder ser sådan ud nu:

Kode: Vælg alt

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
   <head>
       <META charset="utf-8" />
        <META name="keywords" content="" />
        <META name="description" content="" />
        
   </head>
   
   <body>
       
   <center>
<div id="title">
<h1>Banner</h1>
</div>
   </center>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
	<li>Punkt 4</li>
	<li>Punkt 5</li>
	<li>Punkt 6</li>
	<li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
	<li>Ditten</li>
	<li>Datten</li>
</ul>
</div>
<style type="text/css">

body {
	margin:0px;
        background-image: url("http://i39.tinypic.com/2jshsj.png");
}
#title {
	
	top:0px;
        margin-left: auto;
        margin-right: auto;
	width: 945px;
	height: 110px;
	background-color:orange;
}
#leftmenu {
	position:absolute;
	left:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#rightmenu {
	position:absolute;
	right:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#content {
	padding-top: 70px;
	margin-left: auto;
	margin-right: auto;
	background-color:white;
        width: 945px;
}

</style>
</body>
</html>

Nogle ideer? Jeg er totalt blank :roll:


I kan se, hvordan det ser ud her: http://css-layout.webs.com/index.htm

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Firefox centrerer ikke ordentligt

Indlæg af ThomasI » 7. feb 2012, 20:42

Hej igen,

Har prøvet at kopiere din kode, og jeg kan umiddelbart godt få det til at virke i IE.

Det eneste jeg har ændret i din kode er at sætte din CSS kode op i head tagget. Altså sådan at det står mellem dine head tags...

Ved ikke om du allerede har gjort det selv eler om det bare er her inde din css står til sidst.

Men anyways så skal du altid huske at indsætte din css i head tagget!

prøv at flyt det så virker det...

Hos mig er der heller ikke problemet med æ ø og å

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Firefox centrerer ikke ordentligt

Indlæg af Daniel » 7. feb 2012, 20:47

Hej Josefine.

Lige en anden mulighed kunne også være at du har en ældre version af IE, det er ikke alt HTML som kører lige godt med de ældre versioner af IE, så prøv at hente den nye version inde fra Microsoft af. :)

Mvh. Daniel - Moderator på Nemprogrammering forum

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Firefox centrerer ikke ordentligt

Indlæg af ThomasI » 7. feb 2012, 21:01

Kiggende lige på dit link igen, og nu ser det da rigtig nok ud?? - har du ændret noget..??

Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46

Re: Firefox centrerer ikke ordentligt

Indlæg af Josefine » 7. feb 2012, 21:29

Det er Internet Explorer 8, så det ville undre mig, hvis det var det, der er galt.
Og jeg har altså ikke ændret i koderne, kun dem på min localhost (ikke på webs), og det ser stadig lige så forkert ud i IE hos mig - faktisk ser det værre ud - den vil pludselig ikke vise æ, ø og å igen. Det er simpelthen så mærkeligt. Det virker som vinden kommer og går - og jeg ændrer virkelig ikke i de der meta-tags overhovedet!
Nå, men jeg har prøvet at sætte CSS'en op i headeren (er det al CSS, der skal det ?? Har ikke lige haft så meget om CSS endnu, men jeg kan da se, at jeg hellere må kigge lidt mere på det så :lol: ), og det virker altså desværre stadig ikke:

Kode: Vælg alt

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
   <head>
       <META charset="utf-8" />
        <META name="keywords" content="" />
        <META name="description" content="" />

<style type="text/css">

body {
	margin:0px;
        background-image: url("http://i39.tinypic.com/2jshsj.png");
}
#title {
	
	top:0px;
        margin-left: auto;
        margin-right: auto;
	width: 945px;
	height: 110px;
	background-color:orange;
}
#leftmenu {
	position:absolute;
	left:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#rightmenu {
	position:absolute;
	right:0px;
	top:140px;
	width:150px;
	background-color:silver;
}
#content {
	padding-top: 70px;
	margin-left: auto;
	margin-right: auto;
	background-color:white;
        width: 945px;
}

</style>

   </head>
   
   <body>
       
   <center>
<div id="title">
<h1>Banner</h1>
</div>
   </center>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
	<li>Punkt 4</li>
	<li>Punkt 5</li>
	<li>Punkt 6</li>
	<li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
	<li>Ditten</li>
	<li>Datten</li>
</ul>
</div>

</body>
</html>

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Firefox centrerer ikke ordentligt

Indlæg af ThomasI » 7. feb 2012, 21:50

Altså når jeg kopiere præcis den kode ind du ligger ud her kan jeg ikke se nogen problemer. Jeg får det du ser i linket herunder:

http://imgur.com/fRkRE

Tror derfor det er et problem hos dig lokalt eller os er det en dårlig host du har...

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Firefox centrerer ikke ordentligt

Indlæg af Daniel » 7. feb 2012, 22:42

Det kan faktisk godt være fordi du bruger IE version 8, der er nogle problemer med det og derfor vil jeg anbefale dig at du henter IE version 9. :)

Men en anden ting jeg kommer til at tænke på er at du jo rent faktisk sidder på en Mac computer, dette kan også godt have betydning efter hvad jeg har hørt. :)

(Er på ingen måde inde i Mac så det er kun ud fra andres erfaringer).

Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46

Re: Firefox centrerer ikke ordentligt

Indlæg af Josefine » 8. feb 2012, 13:34

Jeg forstår det bare ikke helt. Vi har en stationær her i hjemmet, som jeg sidder ved nu (i skrivende stund), og den er altså forholdvis ny (købt for nogle uger siden eller deromkring). Windows 7, IE 8 (og Firefox og Chrome) osv. - det burde altså ikke være det, der er problemet.
Men er der ikke mange, der bruger IE8? For så duer det jo ikke, at det ikke virker i den browser :?
Og hos mig så og ser det stadig sådan her ud:

http://i42.tinypic.com/121z792.png

Besvar