center jou site met css layout

Status
Niet open voor verdere reacties.
J

johndirk

Gebruiker
Lid geworden
17 aug 2009
Berichten
167
hi allemaal

Ik heb een site in dreamweaver gemaakt.
kan ik met css mijn site ceteren?

als er zijn meer vragen kunt u van mij stellen.

bedankt allemaal
 

Bijlagen

Laatst bewerkt:
heb je de site in een tabel? kun je dan niet gewoon de tabel in css doen en dan in css:
margin: auto;


dat bedoel je toch of niet?
 
center site met css

hi allemaal

bedankt voor uw snelle reactie
ik heb eerder mijn site met tabel gecentereerd.
ik vind met tabel mijn site centeren niet goede oplossing.
.
ik wil met CSS mijn site centeren.
ik weet niet hoe in CSS kan ik mijn site centeren.
kan ik met CSS mijn site centeren?

:rolleyes:
als u heeft vragen u kunt vraag stellen

groeten
 

Bijlagen

Laatst bewerkt:
dus de inhoud van de site heb je in een tabel? dan doe je om die te centreren in css:

#tabel {
margin: auto;
}


en dan bij de tabel tag, die je al hebt in je document:

<table id="tabel"



dan is de tabel gecentreerd
 
hi volvogangster

hi allemaal

bedankt voor uw snelle reactie
ik heb eerder mijn site met tabel gecentereerd en vond ik lastig met tabels werken.(laatste alternatief)
ik wil zonder tabel werken
kunt u gewoon met css een homepage centeren?:thumb:
.
ik wil met CSS mijn site centeren.
ik weet niet hoe in CSS kan ik mijn site centeren.
kan ik met CSS mijn site centeren?

groeten
 
dus je hebt verder geen tabellen of divs, dan kun je toch gewoon de inhoud centreren met align="center" ?
 
of als je een paragraaf hebt, dan <p align="center"

of als je het per se met css wilt doen <p id="para"


en dan in css

#para {
text-align: center;
}
 
Hij vraagt om 'n manier van centreren met css en zonder tabel. Wat nu is gegeven is of html, of voor 'n tabel.
text-align: center is niet bedoeld voor 'n blok-element als 'n div of 'n tabel, maar voor inline-elementen als tekst en afbeeldingen. Het heeft allerlei vervelende bij-effecten als je 't foutief gebruikt voor blok-elementen.

Je kunt 'n pagina uitstekend centreren met css. Ik ga er even vanuit dat je pagina geen position: absolute heeft (dus dat niet de hele pagina absoluut is gepositioneerd). Als dat wel zo is moet je dat even melden, want dan moet het op 'n andere manier.

Je geeft het buitenste element van de pagina, dus waar de hele pagina in staat, 'n breedte. Dat mag in px of in % of in em, maakt niet uit, als het maar 'n breedte heeft. Dat kan dus de <body> zijn, of 'n <div> waar de hele pagina in staat:
HTML: 
<div id="wrapper">
     Hier komt de hele pagina
</div>
css:
Code: 
div#wrapper {width: 790px; margin: 0 auto;}
De breedte moet je aanpassen.
margin: 0 auto: omdat er alleen maar waarden voor boven en rechts zijn ingevuld, krijgen onder en links automatisch dezelfde waarden. Hier staat dus eigenlijk margin: 0 auto 0 auto in de volgorde boven - rechts - onder - links.
auto wil in dit verband zeggen: evenveel. Oftewel: altijd horizontaal gecentreerd.
 
css

hi allemaal

ik heb de onderstaande code gebruikt:
<body>
<p align="center"
/p>welcome
<p align="center"
/p>welcome pagina
<p align="center"
/p>eerst column
<p align="center"
/p>second column
tweede column tweede column
<p align="center"
/p>third column
derde column derde column derde column derde colum
</body>

ik wil alle zinnen onder elkaar centeren

Is dit mogelijk?

heelveel bedankt voor alle uw antwoorden

groeten :thumb:
 
Laatst bewerkt:
bedankt voor uw snelle antwoord

waar moet ik "margin: auto;" plaatsen?
ik wil links centeren zodat elke column onder elkaar komt en in de center:
<body>
margin: auto;
welcome​
welcome pagina
Tweede column
derde column derde column derde column
fourth column fourth column fourth column fourth fourth column​
</body>

zo bedoelt u? of moet ik div gebruiken?
 
Laatst bewerkt:
css

bedank voor uw snelle reactie

ik heb het eindelijk begrijpen wat bedoeldt u met auto.(dom van mij)

mijn webpage is gecentreerd
ik heb div wrapper gemaakt dan auto :thumb:

groeten van john
 
Precies, dat is niet dom. 'auto' is gewoon 'n hele rare omschrijving voor 'evenveel'. Ik snap niet waarom ze 't niet 'equal' of zo hebben genoemd.
 
aangegeven methode geprobeerd maar werkt niet?!

Hoi!
Ik heb zoals je kunt zien in het css bestand geprobeerd om de hele website te centreren voor welke scherm grootte dan ook met een div wrapper zoals beschreven.. echter werkt dit niet (bij mijn website althans?!:eek:)

Weet iemand de oplossing??

--------------------

/* CSS Document */

body{
background-image:url(../images/agd.gif);
background-repeat:repeat-x;
font-family: 'Lithos Pro Regular', 'Trebuchet MS', helvetica, sans-serif;
font-size:10pt;
color:#009900;
align:center;
text-align:center;
}

#wrapper{
width:1007px;
margin:0 auto;
}

a:hover, a:visited, a:active, a:link{
color:green
}

div.imageholder{
position:absolute;
top:0px;
left:1px;
width: 1006px;
height: 174px;
}

#Layer21{
position:absolute;
left:959px;
top:200px;
width:40px;
height:25px;
vertical-align:right;
z-index:3;
}

#Layer8{
position:absolute;
top:200px;
left:219.5px;
width:570px;
height:10px;
font-family:'Lithos Pro Regular','Trebuchet MS', arial, sans-serif;
font-size:12pt;
font-weight:3;
color:#009900;
}

#Layer3{
position:absolute;
left:843px;
top:200px;
width:160px;
height:600px;
align:right;
visibility:hidden;
}

.jumpmenu1{
font-family:'Lithos Pro Regular', Arial, sans-serif;
width:160px;
height:auto;
font-size:10pt;
color:#00CC00;
background:#000000;
}

#Layer5{
position:absolute;
left:538px;
top:228px;
width:468px;
height:60px;
z-index:3;
}

#Layer6{
position:absolute;
background-color:white;
overflow:visible;
visibility:inherit;
top:1030px;
left:206px;
width:600px;
height:600px;
}

#Layer20{
position:absolute;
left:220px;
top:1635px;
height:26px;
width:137px;
font-size:7pt;
}

#Layer7{
position:absolute;
top:975px;
left:1px;
width:1006px;
height:20px;
visibility:hidden;
}

#Layer18{
position:absolute;
top:1988px;
left:1px;
width:1006px;
height:20px;
}

#Layer11{
position:absolute;
top:2012px;
left:5px;
width:1001px;
height:20px;
z-index:2;
overflow:visible;
}

.tabel1{
width:auto;
height:20px;
font-size:7pt;
text-align:right;
vertical-align:center;
}

.tabel2{
font-size:10pt;
text-align:center;
vertical-align:center;
}

#Layer9{
position:absolute;
top:307px;
left:0px;
width:1007px;
height:24px;
z-index:3;
}

#Layer10{
Position:absolute;
top:330px;
left:5px;
width:160px;
height:1641px;
}

#Layer4{
position:absolute;
left:846px;
top:330px;
width:160px;
height:1641px;
text-align:center;
}

.tabel3{
font-size:7pt;
text-align:left;
vertical-align:left;
font-family:arial, sans-serif;
}

#Layer4{
color:#009900;
text-decoration:none;
text-align:right;
}

#Layer15{
position:absolute;
top:1671px;
left:206px;
width:600px;
height:300px;
}

#Container{
display:block;
position:absolute;
visibility:inherit;
overflow:auto;
overflow-x:hidden;
margin:auto;
padding-left:0px;
vertical-align:top;
top:324px;
left:166px;
width:680px;
height:657px;
text-decoration:none;
text-align:left;
color:#009900;
font-family:'Calibri','Trebuchet MS', arial, sans-serif;
font-size:12pt;
}

h1{
font-family:'Calibri','Trebuchet MS', arial, sans-serif;
color:#00CC00;
font-size:21pt;
font-style:normal;
font-weight: normal;
font-variant: normal;
}

h2{
font-family:arial, sans-serif;
color:#0066FF;
font-size:10pt;
font-style:normal;
weight: bold;
font-variant: normal;
}

h3{
font-family:arial, sans-serif;
color:#00CC00;
font-style:small;
font-size:12pt;
}

paragraph{
font-family:arial, sans-serif;
color:#000000;
font-size:10pt;
font-style:normal;
font-weight: normal;
font-variant: normal;
}

#Layer2{
position:absolute;
left:1px;
top:240px;
width:1006px;
height:80px;
background:#FFFFFF;
z-index:1;
}

#Layer2 a:link, a:visited, a:active, a:hover{
color:blue;
}

#nav, #nav ul {
padding: 3px 0 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width:auto;
}

#nav ul {
position: absolute;
left: -1500px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
color:blue;
background-position: 0 0;
}

#nav a {
display: block;
margin: 10px 0px 10px 0px;
width:11.25em;
text-decoration: none;
font-family: 'lithos Pro Regular', 'Trebuchet MS', sans-serif;
font-size: 1em;
text-align:center;
}

ul a{
font-weight: bold;
color: blue;
cursor: default;
align:center;
}

ul ul a:link{
font-weight:normal;
color:blue;
text-decoration: underline;
align:left;
}

ul ul a:visited{
font-weight: normal;
color:blue;
cursor: pointer;
text-decoration: underline;
align:left;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color:blue;
cursor: pointer;
text-decoration: underline;
align:left;
}

ul li{
background-image: url(images/button.gif);
border-left: 3px;
}

ul ul li{
background-image:none;
text-decoration:underline;
align:left;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid #FFF;
}

* html ul ul li{
border-top: 0;
}

/* Einde IE only hack */
 
Laatst bewerkt:
Als ik 't zo even snel bekijk, zou het het volgende kunnen zijn:
je hebt allerlei elementen absoluut gepositioneerd. Die worden absoluut gepositioneerd ten opzichte van de eerste ouder die zelf relatief, absoluut of strict is gepositioneerd. Als die er niet is, wordt gepositioneerd ten opzichte van het venster.

Er vanuit gaande dat die absoluut gepositioneerde elementen als ouder #wrapper hebben:
voeg aan de css voor #wrapper toe:
Code: 
position: relative;
Nu worden ze gepositioneerd ten opzichte van #wrapper, en aangezien die in het midden staat...
Als dat niet helpt graag 'n link naar de volledige code. Overigens is 't misschien handig om je vraag in 'n eigen topic te starten, dan zullen er meer mensen naar kijken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan