Probleem met layout

dolf10003

Hallo ICTscripters,

Ik heb een probleem met de layout van een php spel waarmee ik bezig ben. Als ik de layout naar het midden wil centreren gaat het mis de content verplaatst niet mee.

Dit is de css

Code

body { background-image: url('images/background.jpg'); background-repeat: no-repeat; text-align: center;}
body a {    color: #000000;	margin:0px auto;}
#header {    background-color: FF0010;    width: 1000px;    color: #FFFFFF;    font-size: 18pt;    border: 1px solid #000000;	margin:0px auto;}
#output {padding:2px 4px;margin:0px;border:solid 1px #FBD3C6;background:#FDE4E1;color:#CB4721;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;text-align:center;}


#outputp {padding:2px 4px;margin:0px;border:solid 1px #C0F0B9;background:#D5FFC6;color:#48A41C; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;text-align:center;}
#container {    overflow: hidden;	margin:0px auto;}
#navigation {    background-color: #C3C3C3;    width: 179px;    float: left;    margin-bottom: -32767px;    padding-bottom: 32767px;    border-left: 1px solid #000000;    border-right: 1px solid #898989;}
#navigation a {    color: #000000;    text-decoration: none;}
#nav_div {    padding: 10px;}
#con_div {    padding: 10px;}
#content {    background-color: #DDDDDD;    width: 820px;    float: left;    margin-bottom: -32767px;    padding-bottom: 32767px;    border-right: 1px solid #000000;}
#footer {    background-color: #898989;    width: 1000px;    color: #FFFFFF;    font-size: 12pt;    border: 1px solid #000000;	margin:0px auto;}

Toon Meer

Dit zijn de DIV

Code

<div id="header"><center><img src="images/logo.png" alt="logo"/></center></div><div id="container"><div id="navigation"><div id="nav_div">
<div id="content"><div id="con_div">




</div></div></div><div id="footer"><center>Copyright Deraca</center></div>

EDIT

Heb het online gezet dit is de url http://dolfgames.eu/kingdoms/.

bramieboy100

Misschien komt dat omdat je content op float left hebt staan.

thjeu

je hebt het div voor je logo tussen <center></center> tags staan, maar de overige divs niet. Als je de complete layout wil centreren, kun je ook alles in één div gooien

PHP

<div id="container">


Hier alle overige divs


</div>

Met als css:

PHP

#container { margin: 0 auto; }

dolf10003

Thjeu heb het geprobeerd maar werkt helaas niet :(.

MJorritsma

Volgens mij klopt het wel wat hij zegt. Je heb nu namelijk alleen de header op center staan. Daarnaast zou ik trouwens ook geen <center> tags gebruiken, maar gewoon via de CSS centreren.

Met vriendelijke groet,
Maks Jorritsma

thjeu

Ik weet haast wel zeker dat het daar aan ligt. Kun je je code die je nu hebt even sturen?

dolf10003

Ja, heb de codes volgens mij niet heel erg duidelijk neer gezet.

Dit is de hele code van header.php.

Header.php wordt in iedere pagina geinclude

PHP

<html>
<head>
<title>Deraca</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"><img src="images/logo.png" alt="logo"/></div>
<div id="container">
<div id="navigation"><div id="nav_div">


<?php
if(isset($_SESSION['uid'])){
    include("safe.php");
    ?>
    &raquo; <a href="main.php">Statistieken</a><br /><br />
	&raquo; <a href="town.php">Mijn stad</a><br /><br />
	&raquo; <a href="member_list.php">Steden</a><br /><br />
	&raquo; <a href="message_inbox.php">Berichten  </a><br /><br />
	&raquo; <a href="account_settings.php">Instellingen  </a><br /><br />
    &raquo; <a href="logout.php">Uitloggen  </a><br /><br />
	        <a href="updates.php">Versie : <?php echo $game['version']; ?>  </a>
    <?php
}else{
    ?>
	<center><h3>Login</h3></center>
    <form action="login.php" method="post">
	<input name="username" type="text" value="Gebruikersnaam" class="text" onclick="if(this.value == 'Gebruikersnaam') this.value='';" onblur="if(this.value == '') this.value='Gebruikersnaam';" />
	<input name="password" type="password" value="Wachtwoord" class="text" onclick="if(this.value == 'Wachtwoord') this.value='';" onblur="if(this.value == '') this.value='Wachtwoord';" />
    <center>Wereld</center>
	<select name="selectserver" style="height: 25px; width: 160px">
    <option value="server1">Wereld 1</option>
    </select>
    <input type="submit" name="login"  value="Inloggen" class="button green" onclick="if(this.value == 'Inloggen') this.value='Uw wordt ingelogd'" style="height: 35px; width: 160px"/>


	




    </form>
    &raquo; <a href="register.php">Aanmelden</a>
    <?php
}
?>
</div></div>
<div id="content"><div id="con_div">

Toon Meer

footer.php

Code

</div></div>
</div>
<div id="footer"><center>Copyright Deraca</center></div>
</body>
</html>

In de css heb ik neergezet dat header container en footer moeten gecentreert worden. Dat heb ik gedaan door deze code toetevoegen aan de css margin:0px auto; .

Dit is de css

Code

body { background-image: url('images/background.jpg'); background-repeat: no-repeat;
}
body a {    color: #000000;}
#header {    background-color: FF0010;    width: 1000px;    color: #FFFFFF;    font-size: 18pt;    border: 1px solid #000000;	margin:0px auto;}






#output {padding:2px 4px;margin:0px;border:solid 1px #FBD3C6;background:#FDE4E1;color:#CB4721;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;text-align:center;}


#outputp {padding:2px 4px;margin:0px;border:solid 1px #C0F0B9;background:#D5FFC6;color:#48A41C; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;text-align:center;}
#container {    overflow: hidden;	margin:0px auto;}
#navigation {    background-color: #C3C3C3;    width: 179px;    float: left;    margin-bottom: -32767px;    padding-bottom: 32767px;    border-left: 1px solid #000000;    border-right: 1px solid #898989;}
#navigation a {    color: #000000;    text-decoration: none;}
#nav_div {    padding: 10px;}
#con_div {    padding: 10px;}
#content {    background-color: #DDDDDD;    width: 820px;    float: left;    margin-bottom: -32767px;    padding-bottom: 32767px;    border-right: 1px solid #000000;}
#footer {    background-color: #898989;    width: 1000px;    color: #FFFFFF;    font-size: 12pt;    border: 1px solid #000000;	margin:0px auto;}

Toon Meer

cakemasher

PHP

margin-bottom: -32767px;    padding-bottom: 32767px;

sorry hoor.. maar wtf??

maar je laat #content ook left floaten, overruled dat de center positie niet?

Wat MJorritsma ook al zei, ik zou proberen de <center> tags te vermijden. En in CSS gaan centreren door met text-align & margin auto te gaan werken.

Thisguyisgone

toon het ook is online.

dolf10003

Ferhat Dat zal helaas niet gaan ben er aan het werken op localhost.

Ga wat Cakemasher zegt eens proberen.

EDIT

Heb het online gezet dit is de url http://dolfgames.eu/kingdoms/.

WHMCSAddons

Code

#fulllayout {margin: 0 auto; width: 1002px;}

ICTscripters

Dé plek voor IT

Dé plek voor IT

Op zoek naar de legends

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

Developer Gezocht

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Van een pixelige afbeelding naar een strakke, moderne website

Probleem met layout

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2