Centeren div's css

Door Ronnie Vos op 09-01-2019 21:22

1.984 views

Heb de volgende code op mijn computer word alles netjes in het midden weergegeven maar kijk ik op een andere computer met andere resolutie staat alles scheef. wie weet hoe ik dat simpel op kan lossen. (zie ook foto's)

[img]https://i.ibb.co/4g2c3bt/goed.png[/img]
[img]https://i.ibb.co/N6Y2SSG/verkeerd.png[/img]

#logo{
	position: absolute;
	top: 0px;
	left: 50px;
	width: 571px;
	height: 124px;
}

#wmp{
	position: absolute;
	top: 402px;
	left: 43px;
	width: 141px;
	height: 134px;
}

#wmpt{
	position: absolute;
	top: 540px;
	left: 34px;
	width: 227px;
	height: 23px;
}

#real{
	position: absolute;
	top: 402px;
	left: 338px;
	width: 141px;
	height: 134px;
}

#realt{
	position: absolute;
	top: 540px;
	left: 370px;
	width: 81px;
	height: 23px;
}

#winamp{
	position: absolute;
	top: 402px;
	left: 621px;
	width: 141px;
	height: 134px;
}

#winampt{
	position: absolute;
	top: 540px;
	left: 663px;
	width: 57px;
	height: 23px;
}
</style>
</head>
<body>
<div id="logo"><p><img src="img/header.png" width="436" height="101"></p>
</div>

<div id="shoutcast2" style="width:100%; height:100px;"></div>

<div id="wmp"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.wax"><img src="img/wmp.png" width="135" height="130"></a></div>
<div id="wmpt">Windows media player</div>		
<div id="real"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.ram"><img src="img/real.png" width="135" height="130"></a></div>
<div id="realt">Real player</div>
<div id="winamp"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.pls"><img src="img/winamp.png" width="135" height="130"></a></div>
<div id="winampt">Winamp</div>

- Ariën -

09-01-2019 21:30 gewijzigd op 09-01-2019 21:41

Waarom maak je geen container waar je alles in plaatst? Of nog beter: Gebruik het Bootstrap framework. Deze maakt gebruik van een grid, waarbij je zelf niet meer hoeft te klooien met posities en dergelijke.

Jan te Pas

09-01-2019 21:43

Wat Ariën voorstel is een goede oplossing. Een voorbeeld:

Deel 1, style opnemen in css,


<style>
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
</style>

Deel 2 in body:


<body>
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
</body>

[size=xsmall]Toevoeging op 09/01/2019 21:44:33:[/size]

Jan te Pas op 09/01/2019 21:43:52

Wat Ariën voorstetl is een goede oplossing. Een voorbeeld:

Deel 1, style opnemen in css,
<style>
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
</style>
Deel 2 in body:
<body>
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
</body>

Reageren

Inloggen om te reageren