20. april 2007 - 11:23
Der er
20 kommentarer og 1 løsning
Centrering af site
Hej og tak fordi du tager dig tid til at læse mit spørgsmål. Hvis jeg nu har diverse felter jeg vil placere (banner, side-nyheder, maintable, menu1 og menu2) og jeg vil have dem til at stå på en bestemt måde* hver gang og stadig holde "side" centreret i browseren, hvordan gør jeg så det i CSS? PT. Har jeg flg: #topleftmenu { width: 347px; height: 50px; background-color: beige; border: 1px solid olive; margin-right: 1px; } #toprightmenu { width: 146px; height: 50px; background-color: beige; border: 1px solid olive; } #maintable { width: 497px; height: 500px; background-color: beige; border: 1px solid olive; padding: 5px; } #sidenewsright { width: 150px; height: 551px; background-color: beige; border: 1px solid olive; } #site { width: 800px; margin:0% 10% auto; position:relative; align:center; } #banner { height: 100px; width: 651px; position: absolute; top: 10px; background-color: beige; border: 1px solid olive; } Og så synes jeg ikke den er så glad for "align: center;" hvad er den korrekte kommando? Måde jeg gerne vil have det til at stå på er: <-----BANNER----->|-s-| <-----BANNER----->|-i-| <--menu1--><menu2>|-d-| <----maintable--->|-e-| <----maintable--->|-n-| <----maintable--->|-e-| <----maintable--->|-w-| <----maintable--->|-s-| <----maintable--->|---| <----maintable--->|---| <----maintable--->|---| <----maintable--->|---| <----maintable--->|---| På forhånd tak for hjælpen...
Annonceindlæg tema
Cloud & AI
I dette særtema ser vi på, hvordan cloud og AI bliver fundamentet for virksomhedernes digitale forretning, og hvordan de nye muligheder for automatisering og forretningsværdi kan udnyttes uden at miste overblik, sikkerhed og menneskelig kontrol.
20. april 2007 - 11:24
#1
Nåjada... Kopierer man min lille "model" ind et sted med monospace-charset, så er det nemmere at overskue... :)
20. april 2007 - 11:45
#2
Du kan jo lave en boks, der omkranser alle dine andre lag. Eksempelvis: #container { position:relative; margin-left:auto; margin-right:auto; margin-top:0px; width:800px; height:650px; background-color:transparent; border:1px solid #000000; } Tilpas så ovenstående, således at height og width passer sammen med dine andre lag. HTML vil så være: <div id="container"> <div id="banner"></div> / / / </div> * Denne sidste div lukker dit container-lag. På denne måde er alle dine andre lag inde i et omkransende lag, som er centreret (ihvertfald i Firefox).
20. april 2007 - 11:46
#3
Skal måske nok skifte position:relative; til position:absolute;
20. april 2007 - 12:00
#4
Mjah... Det kommer bare til at se sjovt ud.
F.eks. er intet centreret stadigvæk. Og det hele ligger oven i hinanden.
For at vise hvad det er jeg vil, så har jeg lavet designet i absolute..
http://dwr.dk/design/ og her er hvordan det egentlig ser ud:
http://dwr.dk
20. april 2007 - 12:04
#5
Vel og mærke, så har jeg lige fejlet lidt i min absolute, da jeg bare har prøvet at genskabe den, så det er ikke centreret, som det var planen.
20. april 2007 - 13:02
#6
HTMLen ser således ud: <?PHP session_start(); ?> <html> <head> <title>Sandbox</title> <link rel="stylesheet" type="text/css" href="build.css"></link> </head> <body> <center> <div id="container"> <?PHP include "txt/banner.php"; include "txt/topleftmenu.php"; include "txt/toprightmenu.php"; include "txt/maintable.php"; include "txt/sidenewsright.php"; ?> </div> </center> </body> </html>
20. april 2007 - 13:03
#7
<center></center> står der kun midlertidigt og fungere bestemt ikke som forventet ;)
20. april 2007 - 13:25
#8
20. april 2007 - 15:13
#9
Du har glemt at sætte en doctype på, så det bliver et rigtigt html-document, og hvis du gør det, kan du også udelade center-tags !-)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
20. april 2007 - 15:14
#10
PS. Det skal være det allerførste i outputtet til browseren, f.eks.
<?PHP
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
20. april 2007 - 15:20
#11
Ok... takker... smider du ikke lige et svar... jeg har fanget fejlen nu også...
20. april 2007 - 15:36
#12
Nu startede stenger jo med at give dig en særdeles vigtigt detalje, jeg supplerede lige en anelse, så det er nok stenger, der skal tildeles point ;~}
20. april 2007 - 15:38
#13
Det går nok.. ikke fordi jeg jagter point det vilde :)
Jeg har lige siddet og kæmpet med at få hele mit container-div til at centrer. Jeg fandt en umiddelbar løsning: div#container{position: static; left: x%; top x%;}
En anden måde kunne være sådan her: #container { position:absolute; left:50%; margin-left:-xxx px; osv. } Margin-left skal så være halvdelen af width på dit container-lag. Så skulle det også gerne være centreret på siden. Læg mærke til at der er et minus-tegn foran pixel-angivelsen på margin-left.
Den bedste måde at centrere vil absolut være at sætte margin til auto på et element med defineret bredde !-)
^ Enig med Roenving. Forstår heller ikke helt hvorfor det ikke virker for dig...
Godt så... problem solved :)
11. juni 2007 - 14:49
#20
lukker
11. juni 2007 - 23:30
#21
Okay ?-)
Vi tilbyder markedets bedste kurser inden for webudvikling