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;}

Meer tonen

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">

Meer tonen

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;}

Meer tonen

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

Externe testers gezocht — Saphaxis AI Chat Organizer 0.1.59

nieuwe game

Criminolz

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

[Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

Probleem met layout

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

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

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

Gebruikers die dit topic bekijken