Avatar billede killstun Nybegynder
02. oktober 2005 - 15:13 Der er 25 kommentarer og
1 løsning

CSS med centrering

Jeg har en asp side hvor jeg anvender css. Nu vil jeg gerne have min side centreret, så indholdet på siden altid står i midten, uanset opløsning. Nogle der kan hjælpe med dette. Har kæmpet i en times tid nu, men er ved at opgive :-(
Avatar billede udvikler Nybegynder
02. oktober 2005 - 15:16 #1
<div style="text-align: center;">

DIT INDHOLD

</div>

kunne du bruge det ?
Avatar billede killstun Nybegynder
02. oktober 2005 - 15:24 #2
Nope desværre, for det er kun teksten der bliver centreret. Det skal være hele indholdet på siden der skal centreres.
Avatar billede udvikler Nybegynder
02. oktober 2005 - 15:26 #3
Hvad mener du med hele indholdet ?
- det som jeg har givet dig virker på:

tabeller
iframes
frames
tekst
boxe
billeder

alt..

selvom der står text-align: center; så virker det på alt :)

- prøv i det mindste
Avatar billede killstun Nybegynder
02. oktober 2005 - 15:30 #4
Jeg har prøvet det. Men det virker ikke på <div></div> hvis du forstår hvad jeg mener. Hvis jeg skal vise det som eksempel:

<center>
<div>bla bla</div>
</center>

NB. Ovenstående fungere bare ikke...
Avatar billede udvikler Nybegynder
02. oktober 2005 - 15:32 #5
Hos mig bliver den kode du lige har skrevet vist som centreret ?
- bruger Internet explorer

men ellers kan du prøve med

<center>
<div style="text-align: center;">bla bla</div>
</center>

eller

<center>
<div align="center">bla bla</div>
</center>
Avatar billede killstun Nybegynder
02. oktober 2005 - 15:44 #6
Det fungere ikke her. Skal lige siges at jeg på asp siden henviser til min css fil.

<link href="style.css" rel="stylesheet" type="text/css" />

På asp siden skriver jeg så:

<center>
<div id='midtentop' align="center">bla bla</div>
</center>

css filen ser således ud (udsnit):

#midtentop {
BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: white 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; FONT: 11px/14px Verdana; letter-spacing: normal;  font-weight: 500; color: white; text-align: left; BORDER-LEFT: white 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: white 1px solid; background-color: #5916AB; POSITION: absolute; margin-left: 10%
}

#midtentop {
width:627px; top:130px; height:20px;
}
Avatar billede udvikler Nybegynder
02. oktober 2005 - 15:47 #7
Kan jeg ikke se selve siden ?
Avatar billede killstun Nybegynder
02. oktober 2005 - 15:49 #8
Nej, desværre. Den er ikke online. Men jeg har læst noget om at dette skulle virke i css filen:

margin-left: auto; margin-right: auto

Det fungere bare heller ikke. Kan ikke se hvad jeg gør galt.
Avatar billede udvikler Nybegynder
02. oktober 2005 - 15:52 #9
Prøv at tage backup af din side, og prøv dette:

slet alle de steder der burde centrere noget på din side men som ikke virker og derefter indsæt <center> aller øverst på siden og </center> aller nederst på siden. Det vil virke 100% jeg har altid selv gjort sådan!

(grunden til at du skulle tage backup var at jeg ikke gider at stå til ansvar for dine fejltagelse - hvis du uheldigvis skulle lave nogle ;-))
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:01 #10
Du syntes lyder underligt, for det virker ikke her. Anvender du attributen "absolute" på din <div>?
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:02 #11
Nej, det har jeg også lige tænkt over, det kunne være du skulle fjerne den og prøve igen :)
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:05 #12
Har lige prøvet at lave den om til relative...Det hjalp ikke.
Har også prøvet helt at fjerne position...Det hjalp heller ikke.

Damn, hvorfor virker det bare ikke?
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:09 #13
Prøv at give mig hele dit dokument, eller bare hele html delen og css delen så vil jeg lige ordne det for dig :)
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:12 #14
Oki, her er min asp fil:

<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='midtentop'>bla bla</div>
</body>
</html>

Her er min css fil:

style type="text/css">
a {
font
}
body {bgcolor: #778899; background-image: url("image/baggrund.jpg");}
#midtentop {
BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: white 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; FONT: 11px/14px Verdana; letter-spacing: normal;  font-weight: 500; color: white; text-align: left; BORDER-LEFT: white 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: white 1px solid; background-color: #5916AB; POSITION: absolute; margin-left: auto; margin-right: auto
}
#midtentop {
width:300; top:130px; height:20px;
}
</style>
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:22 #15
<html>
<head>
<title>title</title>
</head>
<body>
<center>
<div id='midtentop'>bla bla</div>
</body>
</html>

<style type="text/css">

a {
font
}

body {
bgcolor: #778899;
background-image: url("image/baggrund.jpg");
}

#midtentop {
BORDER-RIGHT: white 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: white 1px solid;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 0px;
FONT: 11px/14px Verdana;
letter-spacing: normal;
font-weight: 500;
color: white;
text-align: left;
BORDER-LEFT: white 1px solid;
PADDING-TOP: 2px;
BORDER-BOTTOM: white 1px solid;
background-color: #5916AB;
POSITION: center;
margin-left: auto;
margin-right: auto
}

#midtentop {
width:300;
top:130px;
height:20px;
}
</style>
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:22 #16
Og jeg har forresten også givet dig en bedre og pænere opstilling ;)
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:26 #17
Oki, du glemte lige denne linie i asp filen: <link href="test.css" rel="stylesheet" type="text/css" />

Men det virker stadig ikke her. "midtentop" er stadig ude i venstre side? Ser det rigtig ud hos dig?
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:27 #18
ja, det ser rigtig ud hos mig

sorry, kom til at slette den linie, men altså bruger du firefox ?
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:30 #19
Nope, bruger exploren (6.0). Fatter ingenting hvis det ser rigtig ud hos dig. Jeg kan sagtens lave "midtentop" bredere og den slags, men den er stadig placeret i venstre side.
Avatar billede roenving Novice
02. oktober 2005 - 16:32 #20
*lol*

-- der er stadig rigtig meget galt, hvis det er meningen, at det skal virke på indernettet !-)

Der må _ikke_ være html-kode i en css-fil, så du skal fjerne style-tags, og så skal du sætte en virkende doctype på, så du virkelig kan benytte dig af en rigtig css-centerering:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='midtentop'>bla bla</div>
</body>
</html>

-- og din css fil:

body {background-color: #789; background-image: url("image/baggrund.jpg");}
#midtentop {
border: white 1px solid; padding:2px 3px 0; font: 11px/14px verdana,sans-serif;  font-weight: 500; color: white; text-align: left; position: relative; margin:0 auto;
width:300px; top:130px; height:20px;
}

-- og længder i css skal indeholder enhed, ellers _skal_ den efter standarden overses !-ø)
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:32 #21
Så prøv at give mig hele koden, også asp delen. Så fixer jeg det lige for dig :)
- og fortæller hvad der var galt selvfølgelig
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:33 #22
ov, vent lidt. Hvis jeg lavede <center></center> udenom <div id='midtentop'></div> virker det nu ?? Jeg er et stort spørgsmålstegn lige nu, men det ser ud som om det virker efter hensigten... :-)
Avatar billede udvikler Nybegynder
02. oktober 2005 - 16:41 #23
Godt at høre at det virkede :)
- husk at lukke og slukke i spørgsmålet :)
Avatar billede killstun Nybegynder
02. oktober 2005 - 16:45 #24
Takker for hjælpen aco ;-) Og roenving, selvom det er lol, lærer man jo noget nyt hver dag ;-) Men det nederste du skriver forstår jeg ikke helt:

-- og længder i css skal indeholder enhed, ellers _skal_ den efter standarden overses !-ø)

Kan du prøve at uddybe det med længder?
Avatar billede roenving Novice
02. oktober 2005 - 16:58 #25
Der er desværre en browser, som oversætter manglende enheds-angivelse til px, så width:300; er det samme som width:300px; (og iøvrigt også 300pt; !-)

-- hvis man angiver en længde i css, stipulerer standarden helt entydigt, at en længde skal have en enhed (f.eks. px, em, cm el.) eller være relativ (altså i % !-), ellers skal værdien altid overses, altså er width:300; præcis det samme som width:0; efter standarden, for 0 er den eneste undtagelse fra den regel ...

-- og kommentaren med pt går på, at langt de fleste browsere faktisk respekterer enheden pt (som er ca. 0,35 mm), mens IE har den grimme vane at angive noget andet end det er og oversætte det direkte til px (hvilket burde være ca. det ½ alt efter skærmens opløsning (dot-størrelse på nutidige skærme er o. 0,2 - 0,25 mm.)
Avatar billede killstun Nybegynder
02. oktober 2005 - 17:03 #26
ahhh, oki. Takker for forklaringen.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

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