28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis débutant en html php et css.

Parcontre malgré que j'ai essayé de chercher des réponses et que je les ai testé il me reste un problème dans mon site, je ne sais pas si je peux donné l'adresse ... Je ne veux pas faire de pub intempestive donc je vais m'abstenir.

Voilà en faite j'aimerais que mon site internet soit divisé en 5 (un peu la methode php nuke) que le header soit en haut avec ma bannière, à gauche des menu à droite également des menus, au centre mon contenu et tout en bas mon copyright.

Cependant j'ai un problème, c'est que une fois que mon contenu arrive en bas du menu de gauche ou de droite, et bien le texte vient continuer en dessous de ses 2 menus, alors qu'il devrait resté dans l'espace prévu pour le contenu aligné.

De plus un autre soucis est que parfois sur certaine page mon contenu commence avec un décalage du texte comme si j'avais fais 2 tabulations vers la droite.

Est-ce que quelqu'un peu vérifié mon css et mon php pour me guider svp ?

Je sais mes codages sont certainement rempli d'erreur, n'hésité pas si vous en voyer à me les expliquer, j'aime la critique constructive tant que c'est fait de manière sympa vu que je suis la pour apprendre.

style.css :


#header, #nav, #nav2, #content, #footer {
padding:1px 0;
}
#header
{
	width: 100%;
	background-color: #ffffff;
	text-align:center;
}
#nav
{
	float: left;
	width: 20%;
	height: 80%;
	background-color: #ffffff;
	margin-right: 0%;
	margin-left: 0%;
}
#nav2
{
	float: right;
	width: 20%;
	height: 80%;
	background-color: #ffffff;
	margin-left: 5%;
	margin-right: 0%;
}
#content
{
	width: 80%;
	height: 100%;
	background-color: #ffffff;
	margin-left: 30%;
	margin-right: 30%;
}
#footer
{
	bottom: 0;
	background: #000;
	height: 100%;
	background-color: #ffffff;
	width: 100%;
	text-align: center;
	clear: both;
}


index.php : (par exemple)


<?php
 session_start();
$User=$_SESSION['User'];
include('/var/www/serveurs/config/config.php');
// on teste si le visiteur a soumis le formulaire de connexion
if (isset($_POST['connexion']) && $_POST['connexion'] == 'Connexion') {
	if ((isset($_POST['User']) && !empty($_POST['User'])) && (isset($_POST['Password']) && !empty($_POST['Password']))) {

		// on teste si une entr?de la base contient ce couple login / pass
		$sql = 'SELECT count(*) FROM comptes WHERE User="'.mysql_escape_string($_POST['User']).'" AND Password="'.mysql_escape_string(md5($_POST['Password'])).'"';
		$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
		$data = mysql_fetch_array($req);

		mysql_free_result($req);
		mysql_close();

		// si on obtient une réponse, alors l'utilisateur est un membre
		if ($data[0] == 1) {
			session_start();
			$_SESSION['User'] = $_POST['User'];
			header('Location: membre.php');
			exit();
		}
		// si on ne trouve aucune réponse, le visiteur s'est trompé dans son login, soit dans son mot de passe
		elseif ($data[0] == 0) {
			$erreur = 'Vous avez avez introduit une mauvaise information.';
		}
		// sinon, alors la, il y a un gros probl? [smile]
		else {
			$erreur = 'Problème dans la base de donn? : plusieurs membres ont les mêmes identifiants de connexion.';
		}
	}
	else {
		$erreur = 'Au moins un des champs est vide.';
	}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.<?php echo "$Ns_serveur"; ?>/config/style.css" />
<title>Connexion à <?php echo "$Ns_serveur2"; ?></title>
<div id="header">

<?php include('/var/www/serveurs/config/header.php'); ?>

</div><!-- #header end -->

</head>
<body>

<div id="nav">

<p><a href="http://www.<?php echo "$Ns_serveur"; ?>/inscription.php" style="text-decoration:none"><img src="http://www.liberty-chat.be/images/bouttons/signupr.png" BORDER="0"></a></p>

</div><!-- #nav end -->

<div id="nav2">

<center><u><b>Connexion :</b></u></center>
<form action="index.php" method="post">
<p>Login : <br /><input type="text" name="User" value="<?php if (isset($_POST['User'])) echo htmlentities(trim($_POST['User'])); ?>"><br />
Mot de passe : <br /><input type="password" name="Password" value="<?php if (isset($_POST['Password'])) echo htmlentities(trim($_POST['Password'])); ?>"><br /></p>
<input border=0 src="http://www.liberty-chat.be/images/bouttons/login.png" type="submit" name="connexion" value="Connexion" align="middle">
</form>
<br />
<?php
if (isset($erreur)) echo '<br /><br />',$erreur;
?>
<br/>

</div><!-- #nav2 end -->

<div id="content">

<br /><br /><br /><br /><p><center>Bonjour et bienvenue sur <strong>Liberty-Chat.be</strong></center></p>

</div><!-- #content end -->

</body>
<footer>
<div id="footer">
<?php include('/var/www/serveurs/config/footer.php'); ?>
</div><!-- #footer end -->
</footer>

</html>



Merci d'avance.

Bien à vous.
Saloute,

Pour ton problème de mise en page j'ai pas regardé en détail mais à coup sûr ton problème vient du float. Une propriété à éviter selon moi (pour le positionnement du moins).

Alsacréations met à disposition des gabarits html/css commentés, très pratiques pour débuter et pour bien saisir les subtilités de mise en page avec CSS. Tu devrais aller jeter un coup d’œil tu y trouvera ton bonheur à mon avis.

Pour ce qui est de l'espace avant certains éléments, je te conseil d'appliquer un reset CSS ou autre feuille de style pour harmoniser tout les styles (les navigateurs appliquent leurs propres styles, c'est pour ça que parfois tu peux te retrouver avec un padding-left sur un ul/ol sans l'avoir codé).

Tu utilises également ces balises :
<center><u><b>Connexion :</b></u></center>
Qui remplissent un rôle de stylisation, hors ce genre de comportement se fait à l'aide de CSS. De plus tu spécifié que tu codes en HTML5 (<!DOCTYPE html>) et <center> est déprécié depuis HTML4.01.

En espérant t'avoir fourni quelques pistes de recherche Smiley smile
Bonjour,

Désolé pour ma réponse tardive, j'ai pas su me connecter hier panne général internet dans ma région.

Merci à toi, je vais lire ces pages a mon aise demain soir.
Modifié par tzmagnum (17 Oct 2012 - 23:38)