hjelp til å midstille i IE og Firefox

Beyma · 29. september 2008

Først brukte jeg bare align og auto, men så ser jeg at boksen min er midstilt i firfox, men i IE så er den til venstre..

Jeg lager en blogg lignende side med css og vil ha den midstilt, men får det ikke til..

Kan noen hjelpe en nybegynner?

mikk- · 29. september 2008

Lag et blokkelement med begrenset bredde, og sett margin-egenskapen til å ha "auto" i venstre- og høyreretning.

Med andre ord:

body {
 width: 500px;
 margin: 0 auto;
}

Beyma · 29. september 2008

Det fungerte ikke :\

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

Hva må jeg gjøre annerledes?

uranus · 29. september 2008

I body, skriv text-align: center;

Og på diven du sentrerer det hele med, skriver du:

text-align: left;

margin: 0 auto;

Da tenker jeg den er midtstilt i både IE og FF

Erik B. · 29. september 2008

Det fungerte ikke :\

Koden jeg bruker er slik
div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}
Hva må jeg gjøre annerledes?

Prøv med denne:

div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}

Er ganske sikker på du ma ha definert en høyde for at det skal virke.

Beyma · 29. september 2008

Det fungerte ikke :\

Koden jeg bruker er slik
div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}
Hva må jeg gjøre annerledes?
Prøv med denne:
div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}
Er ganske sikker på du ma ha definert en høyde for at det skal virke.

Hmm.. funket heller ikke

Steinmann · 29. september 2008

Det fungerte ikke :\

Koden jeg bruker er slik
div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}
Hva må jeg gjøre annerledes?
Prøv med denne:
div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}
Er ganske sikker på du ma ha definert en høyde for at det skal virke.

Fail.

Jeg er rimelig sikker på at det er noe annet enn dette som er problemet. Gi oss komplett html og css så har vi kanskje en sjans til å hjelpe deg.

Torjus · 29. september 2008

Det fungerte ikke :\

Koden jeg bruker er slik
div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}
Hva må jeg gjøre annerledes?

Bytt koden med:

div.container {
margin: 0: auto;
width:800px;
padding:2px;
}

Hvis ikke det virker så er det noe annet som er galt.

mikk- · 29. september 2008

div.container {
margin: 0: auto;
width:800px;
padding:2px;
}
Hvis ikke det virker så er det noe annet som er galt.

div.container {
margin: 0 auto;
width:800px;
padding:2px;
}

Fixed. For øvrig det samme som jeg skrev i min første post.

Som Steinmann sier, legg ut hele dokumentet, HTML og CSS.

Beyma · 29. september 2008

Okei..

Her er css

body {background-image: url('08original.gif');
}

h2 
{
color: #808080;
}

p 
{
color: #ffffff;



font-family: arial;
}

ul.ego
{color: #808080;

}

a:visited  {color: #000000; text-decoration: none}
a:link  {color: #000000; text-decoration: none}
a:active  {color: #000000; text-decoration: none}


div.container {
margin: 0: auto;
width:966px;
padding:2px;
margin: auto
}

div.info {
float: right;
width:150px;
height: 100%;
border-left: 3px dotted #808080;
padding: 5px;
}

div.header
{width:966px;height:368px;
background-image: url('header.png');
clear:left;
vertical-align: bottom;
}

div.menuline
{
width: 817px;
height: 50px;
}

#menu
{
float:left;
height: 50px;
width: 120px;
background: url(kanppen.png) no-repeat left top;
text-align: center;
vertical-align: middle;

}

div.content
{
background-color: #d1d1d1;
width:817px;
height:400px;

}

div.top
{background-image: url('toppstrek.png');
width:817px;
height:20px;
}

div.bottom
{
background-image: url('bunnstrek.png');
text-align:center;
height: 20px;
width:817px;
}

img
{
border:2px solid black;
}

ul.none
{
list-style-type: none;
}

ul.menu
{
float:left;
padding:0;
margin:0;
list-style-type:none;
background-image: url('knappen.png');
}

ul.mheader
{
float:left;
width:80px;
padding:0.2em 0.6em;
margin:0;
list-style-type:none;
border-bottom:1px solid #808080;
border-right:1px solid #808080;
}

a
{
float:left;
width:5.5em;
text-decoration:none;
color:white;
padding:0.2em 0.6em;
border-bottom:1px solid #808080;
}

li {display:inline}

a:hover {background-color:#8ddcca}

a.stil
{text-decoration:none;}

<html>
<head>
<title>playGROUND</title>
<link rel="stylesheet" type="text/css"
href="classicgrey.css">
</head>
<body>
<div class="container">

<div class="header">
</div>
<div class="menuline">
<div id="menu"><p>Home</p></div><div id="menu"><p>Foto</p></div><div id="menu"><p>Fun</p></div>
</div>
<div class="top">
</div>
<div class="content">
<div class="info"> INFO. Her kan det stå masse tekst. masse tekst...jajajja.. masse tekst.</div>


Hei jeg heter Christer





:)<div>

<div class="bottom"></div>


</div>
</body>
</html>

mikk- · 29. september 2008

HTML-en din er jo helt skakkjørt. Du åpner mange flere elementer enn du lukker. Container-diven lukkes ikke, kanskje det kan ha noe med saken å gjøre?

For øvrig har du mange elementer med ID-en "menu". ID-er skal være unike! (Klasser kan deles mellom flere elementer.)

Rydd opp i HTML-en din, eventuelt bruk HTML-validatoren på w3c.org, så skal du se det blir ordnings!

uranus · 29. september 2008

Hadde funka det jeg sa men

mikk- · 29. september 2008

Sikker? Kommer ikke FF til å ignorere text-align-egenskapen på div-en fordi det er et blokkelement (som ikke påvirkes av text-align)? Da vil vel det som står igjen til å påvirke utseendet i FF være "margin: auto;", som er det samme som jeg sa? Eller tar jeg feil?

uranus · 29. september 2008

Prøv, jeg bruker det på min side (sleit med det samme i dag tidlig, så leste jeg meg frem til denne løsningen).

Du kan selvfølgelig legge til kvote rundt koden slikt at den kun funker i IE hvis du vil, men det funker fint for meg

mikk- · 29. september 2008

Poenget er jo at margin:auto; tydeligvis ikke har noen effekt i akkurat dette tilfellet (sannsynligvis fordi noe er feil med HTML-koden), og at text-align:auto; ikke skal ha noen effekt i Firefox.

uranus · 29. september 2008

Hmm, foreslår du poster absolutt all kode jeg trådstarter, prøve på lokalserver

Beyma · 29. september 2008

den ligger på www.freewebs.com/crimar til jeg har fått kjøpt mitt eget domene..

Demantios · 2. oktober 2008

Litt overdreven bruk av div's :hmm:

I utgangspunktet er det ikke verre enn slik

body {
text-align: center; }
#wrapper {
width: 800px;
margin: 0px auto; }

Evnt med menyer og slik

body {
text-align: center; }
#header {
width: 800px;
margin: 0px auto; }
#menu {
float: left;
width: 100px;
margin: 0px auto; }
#content {
float: left;
width: 700px;
margin: 0px auto; }

Tar forbehold om mulige feil

Endret 2. oktober 2008 av PepsiCo

haugsand · 2. oktober 2008

Det trengs en gyldig doctype-deklarasjon for at margin: auto; skal bli tolket korrekt av Internet Explorer.

Vindstille · 2. oktober 2008

Det trengs en gyldig doctype-deklarasjon for at margin: auto; skal bli tolket korrekt av Internet Explorer.

Jepp. Legg dette øverst i HTML-koden.

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

Endret 2. oktober 2008 av JonT

Logg inn

hjelp til å midstille i IE og Firefox

Anbefalte innlegg

Beyma

Videoannonse

mikk-

Beyma

uranus

Erik B.

Beyma

Steinmann

Torjus

mikk-

Beyma

mikk-

uranus

mikk-

uranus

mikk-

uranus

Beyma

Demantios

haugsand

Vindstille

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer