Probleem met layout

dolf10003 · 21 October 2012

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 · 21 October 2012

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

thjeu · 21 October 2012

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 · 21 October 2012

Thjeu heb het geprobeerd maar werkt helaas niet :(.

MJorritsma · 21 October 2012

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 · 21 October 2012

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

dolf10003 · 21 October 2012

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 · 22 October 2012

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.

Ferhat.Remory · 22 October 2012

toon het ook is online.

dolf10003 · 22 October 2012

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 · 22 October 2012

Code

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

een eigen cloud sever

DNS update Directadmin

Smarty Update

Graag advies voor mijn website

Ik wil op afstand studeren, kennen jullie Tech?

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Bijna 300 Nieuwe domeinnamen Mei 2024

Dating software

250 Nieuwe domeinnamen April 2024

Probleem met layout

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen