DIV centreren
Ik krijg het niet voor elkaar dze div te centreren... ik heb align center al gebruikt... Iemand een idee?
Groetjes
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
<div id="header" style="margin:0;padding:0; position:fixed;left:0px;top:50px;width:750px;height:40px;text-align:left; background-color:#999;">
<font color="#FFFFFF">Titel</font>
</div>
<div id="header" align="center" style="margin:0;padding:0;position:absolute;left:550px;top:20px;width:750px;height:40px;text-align:left;z-index:33;">
<img src="images/thumb.PNG" width="100px" height="100px" />
</div>
?>
<div id="header" style="margin:0;padding:0; position:fixed;left:0px;top:50px;width:750px;height:40px;text-align:left; background-color:#999;">
<font color="#FFFFFF">Titel</font>
</div>
<div id="header" align="center" style="margin:0;padding:0;position:absolute;left:550px;top:20px;width:750px;height:40px;text-align:left;z-index:33;">
<img src="images/thumb.PNG" width="100px" height="100px" />
</div>
?>
Volgens mij is position idd absolute, en dan is het width bijvoorbeeld 1000px breed, dan is je margin-left: -500px;
Dus de margin-left is dan de helft van je totale breedte van je div.
Gewijzigd op 12/12/2012 15:09:55 door Chris PHP
even snel 2 puntjes;
1) Waarom maak je 2x dezelfde div aan?
en
2) Waarom doe je de styling op die manier?
Ik zou je aanraden om alle styling in een apart .css bestand te doen en deze te linken bovenin je html pagina.
Quote:
<link rel="stylesheet" href="css/style.css" />
Verder om je probleem op te lossen:
http://jsfiddle.net/tbrwb/1/
Gewijzigd op 12/12/2012 15:18:27 door Max -
Ik weet ook niet precies hoe de browser hiermee omgaat.
<div id="header" style="margin:0;padding:0; position:fixed;left:0px;top:50px;width:750px;height:40px;text-align:left; background-color:#999;">
<div id="header" align="center" style="margin:0;padding:0;position:absolute;left:550px;top:20px;width:750px;height:40px;text-align:left;z-index:33;">
Twee keer de zelfde id met compleet andere opmaak op dezelfde pagina. Gebruik hiervoor een css sheet, en geef ze beiden een andere id om problemen te voorkomen.
Gewijzigd op 12/12/2012 15:39:38 door Chris PHP
Toevoeging op 12/12/2012 15:44:24:
Heb de IDs een andere naam gegeven, maar nog hetzelfde, krijg ze niet gecentreerd...
#body {
position: absolute;
width: 1000px;
height: 400px;
margin-left: -500px;
}
<div id="header" style="margin:-375px; position:absolute;left:0px;top:50px;width:750px;height:40px; background-color:#999; z-index:100;">
test
</div>
En het werkt voor geen meter :S
jsfiddle is alleen om te laten zien wat de code doet.
Als ik jou was zou ik mijn advies volgen en de css is een apart bestand doen, dit houd je code een stuk overzichtelijker.
verder is het enige wat je met margin moet doen:
margin: 0 auto;
die 0 staat voor 0 pixels vanaf de bovenkant, de auto zorgt ervoor dat hij van zowel links als rechts even ver staat (dit geeft dus dat center effect).
http://www.w3schools.com/css/css_margin.asp
probeer is dit (CSS zit hier dus niet in een apart bestand):
Quote:
<style>
#header{
position:fixed;
margin: 0 auto;
width:750px;
height:40px;
text-align:left;
background-color:#999;
}
#header2{
margin: 0 auto;
position:absolute;
width:750px;
height:40px;
text-align:left;
z-index:33;
}
</style>
<div id="header">
<font color="#FFFFFF">Titel</font>
</div>
<div id="header2" align="center">
<img src="images/thumb.PNG" width="100px" height="100px" />
</div>
#header{
position:fixed;
margin: 0 auto;
width:750px;
height:40px;
text-align:left;
background-color:#999;
}
#header2{
margin: 0 auto;
position:absolute;
width:750px;
height:40px;
text-align:left;
z-index:33;
}
</style>
<div id="header">
<font color="#FFFFFF">Titel</font>
</div>
<div id="header2" align="center">
<img src="images/thumb.PNG" width="100px" height="100px" />
</div>
Als het nu nog niet lukt, heb je waarschijnlijk een css conflict. dan zal je eerst moeten uitzoeken waar je al CSS code hebt geschreven waardoor de div'jes links blijven hangen.
Gewijzigd op 12/12/2012 16:15:36 door Max -
Waar wordt je ziek van? Begrijp je de code niet? Dan raad ik je aan alles opzij te leggen en eens vanaf 0 te beginnen met leren. Naar mijn idee copy/past je code van her en der en denkt zo dat je het werkend kunt krijgen. Helaas is er ook kennis van zaken voor nodig om het voor elkaar te krijgen. Precies zoals je met een stapel bakstenen, een keuken, een douche en een bed niet direct een huis hebt.
Donny van Grondelle op 12/12/2012 16:32:25:
Schiet mij maar in een mandje... Ik wordt er helemaal gallisch ziek van...
hahaha ik herken het, morgen ga je er weer naar kijken en dan zie je het probleem in 5 minuten.
Wat je kan proberen is je site te openen in bijv firefox (chrome heeft deze functie ook volgensmij, IE zou ik niet weten, gebruik ik niet).
Met de rechtermuisknop kan je bij "inspect element" komen.
Vervolgens kan je daarmee je header div opzoeken, en kan je zien welke CSS die div beinvloed.
Verder heeft Wouter J wel een punt, aan "ik snap het niet/Het werkt niet" hebben wij niks. Een probleem omschrijving zou wel degelijk helpen. Blijft de div bijvoorbeeld nog steeds links staan?
Gewijzigd op 12/12/2012 16:51:02 door Max -
De Div blijft links staan maar lijkt wel een margin omheen te zitten. Ik heb de EXACTE code van Max- overgenomen en in een apart document gezet en geload. Ook in dit geval blijft de Div aan de linkerkant staan.
Wat ik zou doen als ik jou was:
- Eerst even de inline stijl uit de html tags halen en ze in een apart bestand plaatsen, en dat bestand includen. Zoals hierboven al staat geschreven in het topic.
- Dan zou ik zorgen dat je niet 2x hetzelfde id gebruikt, een id kan maar voor 1 html element worden gebruikt, wil je meer elementen benoemen met dezelfde naam, gebruik dan class="header" in plaats van id="header"
En ik heb dit probleem al heel vaak gezien bij anderen en mezelf.
Het is ook juist zo raar dat CSS wel kan floaten naar links, of naar rechts, maar niet in het midden. float:center heeft CSS nog nooit van gehoord, terwijl dat heeel handig zou zijn.
Ze zeggen dat stijl attributen van HTML zelf niet meer moeten worden gebruikt, omdat die verouderd zijn. Je gebruikt nu de font tag, en die is dus verouderd. Als je de tekst wilt kleuren moet je die tussen <span> en </span> zetten. Die span geef je een id of class en met CSS doe je dan de tekst kleuren met color:white
Echter is het wel nog gewoon goed dat je het HTML attribuut align="" gebruikt, maar dan uitsluitend om een div te centreren. Gebruik dan dus align="center"
Als dit nog steeds niet werkt, gebruik dan deze "formule" om divs in het midden te zetten: [de helft van het beeldscherm (50%)] min [breedte van div gedeeld door 2]
Dan heb je de left positie, en kun je deze gebruiken om de div position:absolute te geven.
De top positie kun je zelf aanpassen (dat is hoe hoog de div komt)
Quote:
Echter is het wel nog gewoon goed dat je het HTML attribuut align="" gebruikt, maar dan uitsluitend om een div te centreren. Gebruik dan dus align="center"
Oh? Alle vormen van inline of interne CSS zijn fout, op <style scoped> na. Tevens moet je align="center" nooit als centreer methode voor block elementen gebruiken.
Merk op dat voor horizontaal centreren het opgeven van een breedte (width) + margin: 0 auto; genoeg moet zijn en beter is dan met position: absolute; aan de slag te gaan. En ga je met de position: absolute; techniek aan de slag, dan raad ik je aan dit te gebruiken: http://d-graff.de/fricca/center.html (om problemen met deze methode te voorkomen)
Probeer dit eens.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title> Titel </title>
<style>
#header {
background-color: #999;
text-align: left;
color: #FFFFFF;
width: 500px; /* De breedte van de div */
height: 40px; /* De hoogte van de div */
margin: 0 auto; /* Dit zet de div in het midden */
}
</style>
</head>
<body>
<div id="header"> De header </div>
</body>
</html>
<html>
<head>
<title> Titel </title>
<style>
#header {
background-color: #999;
text-align: left;
color: #FFFFFF;
width: 500px; /* De breedte van de div */
height: 40px; /* De hoogte van de div */
margin: 0 auto; /* Dit zet de div in het midden */
}
</style>
</head>
<body>
<div id="header"> De header </div>
</body>
</html>
Je < ?php ? > is nergens voor nodig. Dit is als je een script gebruikt.
Gewijzigd op 12/12/2012 20:30:50 door Machiel K
Harry hogeveen op 12/12/2012 19:14:14:
Ik denk dat je nog een beetje aan het beginnen bent, en dan kun je van dit soort problemen goed leren.
Wat ik zou doen als ik jou was:
- Eerst even de inline stijl uit de html tags halen en ze in een apart bestand plaatsen, en dat bestand includen. Zoals hierboven al staat geschreven in het topic.
- Dan zou ik zorgen dat je niet 2x hetzelfde id gebruikt, een id kan maar voor 1 html element worden gebruikt, wil je meer elementen benoemen met dezelfde naam, gebruik dan class="header" in plaats van id="header"
En ik heb dit probleem al heel vaak gezien bij anderen en mezelf.
Het is ook juist zo raar dat CSS wel kan floaten naar links, of naar rechts, maar niet in het midden. float:center heeft CSS nog nooit van gehoord, terwijl dat heeel handig zou zijn.
Ze zeggen dat stijl attributen van HTML zelf niet meer moeten worden gebruikt, omdat die verouderd zijn. Je gebruikt nu de font tag, en die is dus verouderd. Als je de tekst wilt kleuren moet je die tussen <span> en </span> zetten. Die span geef je een id of class en met CSS doe je dan de tekst kleuren met color:white
Echter is het wel nog gewoon goed dat je het HTML attribuut align="" gebruikt, maar dan uitsluitend om een div te centreren. Gebruik dan dus align="center"
Als dit nog steeds niet werkt, gebruik dan deze "formule" om divs in het midden te zetten: [de helft van het beeldscherm (50%)] min [breedte van div gedeeld door 2]
Dan heb je de left positie, en kun je deze gebruiken om de div position:absolute te geven.
De top positie kun je zelf aanpassen (dat is hoe hoog de div komt)
Wat ik zou doen als ik jou was:
- Eerst even de inline stijl uit de html tags halen en ze in een apart bestand plaatsen, en dat bestand includen. Zoals hierboven al staat geschreven in het topic.
- Dan zou ik zorgen dat je niet 2x hetzelfde id gebruikt, een id kan maar voor 1 html element worden gebruikt, wil je meer elementen benoemen met dezelfde naam, gebruik dan class="header" in plaats van id="header"
En ik heb dit probleem al heel vaak gezien bij anderen en mezelf.
Het is ook juist zo raar dat CSS wel kan floaten naar links, of naar rechts, maar niet in het midden. float:center heeft CSS nog nooit van gehoord, terwijl dat heeel handig zou zijn.
Ze zeggen dat stijl attributen van HTML zelf niet meer moeten worden gebruikt, omdat die verouderd zijn. Je gebruikt nu de font tag, en die is dus verouderd. Als je de tekst wilt kleuren moet je die tussen <span> en </span> zetten. Die span geef je een id of class en met CSS doe je dan de tekst kleuren met color:white
Echter is het wel nog gewoon goed dat je het HTML attribuut align="" gebruikt, maar dan uitsluitend om een div te centreren. Gebruik dan dus align="center"
Als dit nog steeds niet werkt, gebruik dan deze "formule" om divs in het midden te zetten: [de helft van het beeldscherm (50%)] min [breedte van div gedeeld door 2]
Dan heb je de left positie, en kun je deze gebruiken om de div position:absolute te geven.
De top positie kun je zelf aanpassen (dat is hoe hoog de div komt)
oke... maar als mijn scherm nou "1000PX" breed is, en de jouwe is 1500, dan staat mijn pagina niet meer in het midden gecentreerd...