30. december 2007 - 18:32
Der er
15 kommentarer og 1 løsning
Centrering af side.
Hej. Jeg har set på forskellige tråde her inde, men har ikke rigtig kunnet finde et svar på mit problem. Jeg vil gerne have centreret en side, men kan ikke rigtig gennemskue det. Vil blive meget glad hvis der er en der vil prøve, at forklare mig hvordan det skal gøres. siden ser sådan ud: <html> <head> <title>Titel</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div id="title"> <h1>Titel</h1> </div> <div id="content"> <h1>Overskrift</h1> tekst </div> <div id="leftmenu"> <p>venstre menu</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>højre menu</p> <ul> <li>Punk 1</li> <li>Punkt 2</li> </ul> </div> </body> </html> css filen ser sådan ud: body { position:absolute; width:800; height:98%; border: 1px solid black; } #title { position:absolute; left:0px; top:0px; width:100%; height: 75px; background-color:orange; } #leftmenu { position:absolute; left:0px; top:75px; width:150px; background-color:silver; } #rightmenu { position:absolute; right:0px; top:75px; width:150px; background-color:silver; } #content { padding-top: 70px; margin-left:160px; margin-right:160px; background-color:white; }
Annonceindlæg tema
Forsvar & beredskab
Cybersikkerhed, realtidsdata og robuste it-systemer er blevet fundamentet for moderne forsvar.
30. december 2007 - 18:41
#1
der er jo flere måder at gøre det på - f.eks at placere siden i en <div align="center"> eller placere det hele i en tabel som du så med en class også centrere
30. december 2007 - 18:43
#2
nu er align="center" jo ikke ligefrem css :) men bortset fra det er det tæt på - pak al indhold ind i en div; <div style="width: 800px; margin: auto;"> DIT INDHOLD </div>
30. december 2007 - 18:48
#3
Om man kunne faktisk bare indsætte margin: 0 auto; på body-taggen instedet: body { position:absolute; width:800; height:98%; border: 1px solid black; margin: 0 auto; }
30. december 2007 - 19:02
#4
Hmm.. der er ikke noget af det der virker.. I Firefox er siden placeret i venstre side, og i IE7 fylder siden hele skærmen..
30. december 2007 - 19:03
#5
Glem det med body-taggen. Det virker vist ikke efter hensigten ;-)
30. december 2007 - 19:08
#6
link eller kode?
30. december 2007 - 19:08
#7
... iøvrigt - glemt _aldrig_ doctype.
30. december 2007 - 19:24
#8
body { position:absolute; width:800; height:98%; border: 1px solid black; margin: 0 auto; } #title { position:absolute; left:0px; top:0px; width:100%; height: 75px; background-color:orange; } #leftmenu { position:absolute; left:0px; top:75px; width:150px; background-color:silver; } #rightmenu { position:absolute; right:0px; top:75px; width:150px; background-color:silver; } #content { padding-top: 70px; margin-left:160px; margin-right:160px; background-color:white; } <html> <head> <title>Titel</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div id="position"> <div id="title"> <h1>Titel</h1> </div> <div id="content"> <h1>Overskrift</h1> tekst </div> <div id="leftmenu"> <p>venstre menu</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>højre menu</p> <ul> <li>Punk 1</li> <li>Punkt 2</li> </ul> </div> </div> </body> </html>
30. december 2007 - 23:28
#9
hvor er din position klasse? og doctype?
31. december 2007 - 10:41
#10
sådan kan det gøres
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
margin :0 ;
}
#center
{
margin-left: -400px;
position:absolute;
height:98%;
border: 1px solid black;
left: 50%;
width: 800px;
visibility: visible
}
#title {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 75px;
background-color:orange;
}
#leftmenu {
position:absolute;
left:0px;
top:75px;
width:150px;
background-color:silver;
}
#rightmenu {
position:absolute;
right:0px;
top:75px;
width:150px;
background-color:silver;
}
#content {
padding-top: 70px;
margin-left:160px;
margin-right:160px;
background-color:white;
}
-->
</style>
</head>
<body>
<div id="center">
<div id="title">
<h1>Titel</h1>
</div>
<div id="content">
<h1>Overskrift</h1>
tekst
</div>
<div id="leftmenu">
<p>venstre menu</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>højre menu</p>
<ul>
<li>Punk 1</li>
<li>Punkt 2</li>
</ul>
</div>
</div>
</body>
</html>
31. december 2007 - 12:32
#11
Syvon det virker! Kunne jeg evt. få en forklaring?
31. december 2007 - 12:44
#12
der er sat dogtype på og så er der lagt et div uden om det hele som er lagt 50% fra venstre side der har en minus margen på halvdelen af div's brede
31. december 2007 - 12:48
#13
doctype som foreslået et par gange - samt, mere eller mindre, de styles der blev foreslået 30/12-2007 18:43:47.
02. januar 2008 - 15:35
#14
Det er vidst 50 50 om svarene så.. Syvon smid et svar, så deler jeg lige point ud ;)
02. januar 2008 - 15:44
#15
Ingen point her ellers tak :)
03. januar 2008 - 23:14
#16
Okay :) Tak for besvarelsen!
Vi tilbyder markedets bedste kurser inden for webudvikling