Problemer med midstilling av en side (CSS)

Halvt horn ost skinka piffi varmt · 7. desember 2007

La meg begynne med at jeg har lest sticky/faq'en om midstilling, og ørten andre.

Jeg sliter litt med en IT innlevering hvor jeg ønsker at siden skal være midstillt.

Er usikker på hva dere trenger får å hjelpe men her er ihvertfall css:

body

{

width: 960px;

margin: 0 auto;

}

#container

{

margin: 0 auto;

width: 800px;

}

font

{

font-family: "Times New Roman", Times, serif;

font-size:

small;

font-weight: normal;

font-style: italic;

color:

#000000;

position: absolute; top: 380px; left: 340px;

z-index:

2;

}

a:hover {

font-family: Arial, Helvetica,

sans-serif;

font-size: normal;

font-style: normal;

color:

#00FF00;

}

a:active {

font-family: "Times New Roman",

Times, serif;

font-size: large;

font-weight:

bolder;

font-style: oblique;

}

a:link {

font-family:

Arial, Helvetica, sans-serif;

font-size: medium;

font-weight:

100;

font-style: normal;

}

a:visited {

font-family:

Arial;

font-size: medium;

color: #FF0000;

}

h1

{

font-family: Arial, Helvetica, sans-serif;

font-size:

large;

font-weight: normal;

font-style:

italic;

font-variant: normal;

text-transform: none;

color:

#000000;

}

img {

border: #00000;

}

h2

{

padding: 3px 0px 16px 0px;

margin: 0px;

border:

t;

background-color: ;

position: absolute;

text-decoration:

underline;

}

table {

font-family:

Constantia;

font-size: small;

color:

#000000;

text-decoration: underline;

background-color:

#C0C0C0;

border-style: dotted;

border-width:

thin;

}

div {

background-color: ;

border-style:

;

border-width: ;

}

#layer1

{

position: absolute; top: 0px;

width: 100%;

height: 100%;

z-index: 2;

right: 13px;

left:

13px;

}

#nav-menu ul

{

list-style:

none;

padding: 0;

margin: 0;

position:

absolute;

Width: 600px

top: 0px; left:

0px;

}

#nav-menu li

{

float:

right;

margin: 0

0.15em;

}

#nav-menu li

a

{

background: url(background.gif) #fff bottom left

repeat-x;

height: 2em;

line-height: 2em;

float:

left;

width: 5em;

display: block;

border: 0.1em solid

#dcdce9;

color: #0d2474;

text-decoration: none;

text-align:

center;

z-index: 5;

}

#nav-menu li

a

{

float:

none

}

#nav-menu

{

width:51em

}

#Snomann

{

position:

absolute; top: 300px; left: 800px; z-index:

1;

}

#font2

{

font-family: "Times

New Roman", Times, serif;

font-size: small;

font-weight:

normal;

font-style: italic;

color: #000000;

position:

absolute; top: 50px; left: 50px;

z-index:

2;

}

#cpuvifte

{

position: absolute; top:

700px; left: 500px;

z-index: 1;

}

#air

{

text-decoration:

underline;

padding: 3px 0px 16px 0px;

margin: 0px;

border:

t;

background-color: ;

position: absolute; top: 250px; left:

650px;

text-decoration:

underline;

}

#font3

{

font-family:

"Times New Roman", Times, serif;

font-size: small;

font-weight:

normal;

font-style: italic;

color: #000000;

position:

absolute; top: 0px; left: 50px;

z-index: 2;

}

Jeg er ny med alt som har med HTML og CSS så jeg setter virkelig pris på hjelp.

øl_i_tastaturet · 7. desember 2007

Prøv å legg til dette øverst i csskoden:

* { margin: 0 auto; }

haugsand · 7. desember 2007

Skjer feilen i alle nettlesere?

Hvilken Doctype bruker du?

FrodeNilsen · 7. desember 2007

CSS koden din inneholder endel feil.

#font2 har du linjeskift i fontnavnet til times new roman.

#font2

{

font-family: "Times 

New Roman", Times, serif;

font-size: small;

font-weight: 

normal;

font-style: italic;

color: #000000;

position: 

absolute; top: 50px; left: 50px;

z-index: 

2;

}

Når du har rettet opp det, så er det flere syntaxfeil.

Last opp css fila på http://jigsaw.w3.org/css-validator/validator så skjønner du hva jeg mener.

Hjelper det å rette opp eller fjerne feilene?

pedervl · 7. desember 2007

Om du skal ha container i senter, skriver du som følger:

body {text-align: center}

#container {margin: 0 auto; width 950px; text-align: left}

Du må gjerne endre width'en.

Edit: Du skal ikke angi widthen til body da den uansett skal strekke seg ut til begge sider, selve innholdet legger du selvsagt i containeren. Ta også å fjern margin fra body, ser ikke helt funksjonen til den.

Ta heller å start CSS-dokumentet med:

* {margin: 0; padding: 0}

Da vil margin og padding være likt for alle browsere, men det kan hende du må justere de i somme divs. o.l.

Endret 8. desember 2007 av pedervl

FrodeNilsen · 8. desember 2007

Tekst-align kan du lese om her:

http://www.w3.org/TR/CSS21/text.html#propdef-text-align

tekst-align skal benyttes på block elementer eller inline elementer du setter til display block. Verdien gjelder for inline elementer som nøster under det aktuelle block elementet.

For block elementer benyttes auto marg til høyre og venstre.

http://www.w3.org/TR/CSS21/box.html#propdef-margin

Denne verdien skal benyttes på block elementer eller inline elementer du setter til display block. Her gjelder margen for det aktuelle elementet, og margen settes i forhold til boksen til elementet som det aktuelle elementet nøster under. Hvis elmentet er ett inline element som nøster under ett annet inline element, burde du skrive om html.

ie6 tolker block og inline feil.

haugsand · 8. desember 2007

Rettelse: IE 6 har ikke problemer med å tolke block og inline. margin: auto; vil fungere i IE 6 så lenge det er oppgitt en gyldig doctype.

øl_i_tastaturet · 10. desember 2007

Rettelse: IE 6 har ikke problemer med å tolke block og inline. margin: auto; vil fungere i IE 6 så lenge det er oppgitt en gyldig doctype.

Hva med IE5.5? Sliter litt der.

haugsand · 10. desember 2007

IE 5.5 tolker ikke margin: auto; riktig nei.

Redak Tøren · 10. desember 2007

Eksempel på enkel midtstilling Endret 10. desember 2007 av atomtissetasen

Halvt horn ost skinka piffi varmt · 10. desember 2007

Skjer feilen i alle nettlesere?
Hvilken Doctype bruker du?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Hvis det er det du tenker på(?)

CSS koden din inneholder endel feil.

#font2 har du linjeskift i fontnavnet til times new roman.
#font2 { font-family: "Times New Roman", Times, serif; font-size: small; font-weight: normal; font-style: italic; color: #000000; position: absolute; top: 50px; left: 50px; z-index: 2; }
Når du har rettet opp det, så er det flere syntaxfeil.

Last opp css fila på http://jigsaw.w3.org/css-validator/validator så skjønner du hva jeg mener.

Hjelper det å rette opp eller fjerne feilene?

Det med linjeskifting er noe som skjer når jeg klipper det inn på forumet... Lastet opp filen til http://jigsaw.w3.org/css-validator/ og rettet/fjernet alle feilene som kom (bortsett fra 3#containerValue Error : width Parse Error - 950pxsom jeg får feil på uansett hva jeg setter inn).

Etter rettingen hjalp ikke stort det hele er mye mer spredd på siden...

Om du skal ha container i senter, skriver du som følger:
body {text-align: center} #container {margin: 0 auto; width 950px; text-align: left}
Du må gjerne endre width'en.

Edit: Du skal ikke angi widthen til body da den uansett skal strekke seg ut til begge sider, selve innholdet legger du selvsagt i containeren. Ta også å fjern margin fra body, ser ikke helt funksjonen til den.

Ta heller å start CSS-dokumentet med:
* {margin: 0; padding: 0}
Da vil margin og padding være likt for alle browsere, men det kan hende du må justere de i somme divs. o.l.

Under hvor skal jeg sette inn den sist nevnte koden? Skal jeg bare sette den inn i CSS?

Når ser alt egentlig ganske rotete ut... Navigasjonsmenyen er på toppen av siden (mot venstre), og tekstene lener litt mot venstre, bildet/logoen ser ut som om den er i midten...

Lastet opp CSS filen slik den er i skrivende stund, gi lyd om det er noe jeg kan gjøre for å hjelpe dere hjelpe meg

style.css

FrodeNilsen · 11. desember 2007

Jeg hvet ikke hva du har av css kode nå, eller hvorfor du ikke får den til å validere. Jeg har fjernet feilene i den gamle

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

#container { 
margin: 0 auto; 
width: 800px; 
}

font {
font-family: "Times New Roman", Times, serif;
font-size: small;
font-weight: normal;
font-style: italic;
color: #000000;
position: absolute;
top: 380px;
left: 340px;
z-index: 2;
}

a:hover {
font-family: Arial, Helvetica, 
sans-serif;
font-style: normal;
color: #00FF00;
}

a:active {
font-family: "Times New Roman", Times, serif;
font-size: large;
font-weight: bolder;
font-style: oblique;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: 100;
font-style: normal;
}

a:visited {
font-family: Arial;
font-size: medium;
color: #FF0000;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: normal;
font-style: italic;
font-variant: normal;
text-transform: none;
color: #000000;
}

img {
border-color: #000000;
}

h2 {
padding: 3px 0px 16px 0px;
margin: 0px;
position: absolute;
text-decoration: 
underline;
}

table {
font-family: Constantia;
font-size: small;
color: #000000;
text-decoration: underline;
background-color: #C0C0C0;
border-style: dotted;
border-width: thin;
}

#layer1{
position: absolute;
top: 0px;
width: 100%; 
height: 100%; 
z-index: 2; 
right: 13px; 
left: 13px;
}

#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
position: absolute;
Width: 600px;
top: 0px;
left: 0px; 
}

#nav-menu li{
float: right;
margin: 0em 0.15em;
}

#nav-menu li a{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
z-index: 5;
}

#nav-menu li a{
float: none;
}

#nav-menu{
width: 51em;
} 

#Snomann {
position: absolute;
top: 300px;
left: 800px;
z-index: 1;
}

#font2{
font-family: "Times New Roman", Times, serif;
font-size: small;
font-weight: normal;
font-style: italic;
color: #000000;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}

#cpuvifte{
position: absolute;
top: 700px;
left: 500px;
z-index: 1; 
}


#air{
text-decoration: underline;
padding: 3px 0px 16px 0px;
margin: 0px;
border: 1px;
background-color: inherit;
position: absolute;
top: 250px;
left: 650px;
text-decoration: underline;
}

#font3{
font-family:  "Times New Roman", Times, serif;
font-size: small;
font-weight: normal;
font-style: italic;
color: #000000;
position: absolute;
top: 0px;
left: 50px;
z-index: 2;
}

Denne validerer, men hvis vi skal kunne hjelpe deg må du renskrive css slik at vi orker å se på det.

Benytt enten px eller em. På alle elementer.

Benytte px eller em på alle font strørrelser.

Det er umulig for oss å hjelpe deg når vi ikke sitter med en html skisse engang.

Vindstille · 12. desember 2007

Rettelse: IE 6 har ikke problemer med å tolke block og inline. margin: auto; vil fungere i IE 6 så lenge det er oppgitt en gyldig doctype.

I tillegg vil det ikke funke hvis man har XML-deklarasjonen øverst i dokumentet siden IE6 forventer at den skal finne Doctypen der.

Men XML-deklarasjon er noe man uansett bør unngå med mindre man sender XHTML-dokumentet som XML. Men da ville det ikke funket i Internet Explorer uansett.

Alt er forøverig fylldig dokumentert i FAQ-en (se sticky).

EDIT: Du er heldig i dag som får meg til å hente det til deg.

Hvordan midtstiller jeg en side?

Klikk for å se/fjerne innholdet nedenfor
Alt man trenger å gjøre er å sette disse CSS-egenskapene på div-elementet som inneholder innholdet til siden.
margin: 0 auto;
Da vil margene være 0 piksler på toppen og bunnen og like store (automatisk tilpasset) på høyre og venstre side. Husk at du også må stille inn hvor bred siden skal være.
width:500px;
Width-verdien varierer, sett den til så bred din side skal være.

NB! Dette vil ikke funke i Quirksmode IE. (F.eks. hvis du bruker XML deklarasjon eller ikke har satt noen doctype.)

Eksempel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="no-bok"> 
<head> 
<title>Sidestilling av side</title> 
<style type="text/css"> 
#container 
{ 
margin: 0 auto; 
width: 800px; 

/* Sett bakgrunn til rød for å enklere se div-elementet */ 
background: red; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
Sidens innhold 
</div> 
</body> 
</html>
Sjekk også: Dead Center
Hva er Quirksmode?

Klikk for å se/fjerne innholdet nedenfor
Quirksmode er en måte nettlesere rendrer gamle sider som ikke følger webstandardene, slik at de skal se ut slik designeren ønsket.

Den beste måten å unngå at websiden din blir rendret med Quirksmode er å følge W3C sine webstandarder og ha en doctype (se under) øverst i HTML-dokumentet.

HTML 4.01 Strict Doctypen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
I tillegg bør du passe på hvis du bruker XHTML at du ikke har en XML declaration (<?xml version="1.0"?>) øvert i XHTML-dokumentet. En bug i IE (Internet Explorer) gjør nemmelig at slike sider blir rendret i quirksmode.

Endret 12. desember 2007 av JonT

Logg inn

Problemer med midstilling av en side (CSS)

Anbefalte innlegg

Halvt horn ost skinka piffi varmt

Lenke til kommentar

Videoannonse

øl_i_tastaturet

Lenke til kommentar

haugsand

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

pedervl

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

haugsand

Lenke til kommentar

øl_i_tastaturet

Lenke til kommentar

haugsand

Lenke til kommentar

Redak Tøren

Lenke til kommentar

Halvt horn ost skinka piffi varmt

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Vindstille

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer