Jump to content

html/css : organisation de mes <div>...

Nnexxus

Recommended Posts

Nnexxus Débutant

Nnexxus

Posted
Posted

Salut à tous ! Je me suis lancé récemment dans la création de site web, j'ai un site qui tourne depuis quelques semaines maintenant, et je suis en train d'améliorer sa présentation et sa conformités aux normes. Je refait donc ma page d'accueil en remplaçant tous les tableaux par des calques div, mais j'arrive pas à les organiser comme je voudrais...

voilà la page : version 3

(faites pas attention aux couleurs, c pour bien repérer les différents calques :yes: )

Ce que je voudrais, c'est que le cadre tout fin contenant le tagboard vienne se mettre à droite du cadre principal (celui qui contient le tableau vide de test).

J'ai essayé de jouer avec les propriétés de mes div en ajoutant des float: left ou right, le souci c'est qu'avec ça, le div du bas et la bordure inférieure se placent mal, comme vous le voyez ici : version 4

quelqu'un aurait une idée ? Voilà les codes (pour la version 3 : celle où le cadre du bas est bien placé mais pas le cadre de droite)

la page :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cybertests</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cybertests3.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="logo"></div>
<div class="menupage"><? include("menu2.php"); ?></div>
<div class="centre" class="textepage">
<?ptit script?>
</div>
<div class="droite" class="textepage">
<div class="elementdroite">
<?
include("identification.php");  
   ?>
</div>
<div class="elementdroite">
<? ptit script 
 $droite = $droite.".php";
 	include($droite);
     }
 }
?>
</div>
</div>
<div class="bas" class="textepage">
<?
  ptit script
 	$bas = $bas.".php";
 	include($bas);
     }
 }
?>

Cybertest, le site de tests de films et de jeux vid�s.
</div>
</body>
</html>

le CSS :

<style type="text/css">
<!--
<!-- styles css pour la page --> 
body {
width: 965px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
background-color: #FFFFFF;
border: 8px solid #090060;
}
body {
width: 965px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
background-color: #FFFFFF;
border: 8px solid #090060;
}
.logo {
width: 965px;
height: 98px;
background-image: url(cybertests.png);
background-repeat: no-repeat;
margin-bottom: 25px;
}
.menupage {
position: absolute;
top: 95px;
float: left;
width: 965px;
height: 20px;
margin: 0px;
padding: 0px;
border: 0px;
}
.centre {
width: 700px;
margin-left: 5px; 
display: inline;
}
.droite {
width: 150px;
margin-left: 810px;
margin-right: 5px;
display: inline;
}
.elementdroite {
margin-bottom: 5px;
display: inline;
}
.bas {
width: 955px;
margin: 5px;
text-align: center;
background-color: #00ff00;
}
.copyright {
width: 955px;
margin: 5px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
} 

</style>

Toute réponse ou même simple suggestion sera appréciée, merci d'avance !!

PS : je sais que le code est pas toujours très propre, mais à part le problème que je décrit, il marche pas mal, essayez donc de ne pas trop dévier dans vos réponses en corrigeant d'autres problèmes, merci :reflechis:

Link to comment
Share on other sites
Bricomix Nouveau

Bricomix

Posted
Posted

Dans la version 4, corrige le code CSS de .bas par ceci :

.bas {
clear: both;
width: 955px;
margin: 5px;
text-align: center;
background-color: #00ff00;
}

Fais attention, dans ton code HTML tu déclares souvent plusieurs fois l'argument class par balise. Connais-tu la différence entre la class et l'id ? Je te renvois sur cette page d'Alsacréations

Cependant, si tu veux tout de même qu'une balise soit associée à plusieurs class, il faut le faire dans un seul attribut class, par exemple : class="bas textepage". Enfin, ton code aurait besoin d'un petit nettoyage, voilà tout :boulet:

Link to comment
Share on other sites
Yangzebul Collaborateur

Yangzebul

Posted
Posted

J'ai pas regardé ton problème de positionnement vu que bricomix a apparement trouvé la solution, mais par contre il y'a quelques petites incoherences ou perfectionnements sur ta css que tu devrais effectuer.

- utilise les attributs raccourcis, ca te fera économiser en taille, en simplicité, et aussi en temps ( souvent un attribut raccourci permet de remplacer 4 ou 5 attributs en même temps, ainsi c'est plus facile de les retenir )

- dans ton body tu déclare :

margin: auto;

margin-top: 5px;

margin-bottom: 5px;

en gros tu déclare 2 fois tes marges top et bottom -> seule la dernière valeur est normalement prise en compte (dans ce cas 5px), mais ca reste une erreur qui peut entrainer des problèmes de rendu. idem pour .copyright

- tu déclare deux fois ton body, mais bon je pense que la c'est juste une erreur de copier coller. :francais:

- quand tu déclare une valeur à 0 (margin, padding ect..) pas besoin de mettre d'unité, 0px ou 0em en général ca revient au même :transpi:

- les diviseurs neutres <div> ont par défaut un margin et un padding à 0, donc pas besoin de les redéclarer (ex .menupage).

- pour les codes couleurs tu as aussi des formes réduites pour la palette sécurisée, exemple:

#FFFFFF -> #FFF

#00FF00 -> #0F0

- au début tu ouvre un commentaire vide sans le refermer <!--

<style type="text/css">
<!-- styles css pour la page --> 
body {
width: 965px;
margin: 5px auto;
background: #FFF;
border: 8px solid #090060;
}
.logo {
width: 965px;
height: 98px;
background: url(cybertests.png) no-repeat;
margin: 0 0 25px 0;
}
.menupage {
position: absolute;
top: 95px;
float: left;
width: 965px;
height: 20px;
}
.centre {
width: 700px;
margin: 0 0 0 5px; 
display: inline;
}
.droite {
width: 150px;
margin: 0 5px 0 810px;
display: inline;
}
.elementdroite {
margin: 0 0 5px 0;
display: inline;
}
.bas {
width: 955px;
margin: 5px;
text-align: center;
background: #0F0;
}
.copyright {
width: 955px;
margin: 5px 50px;
text-align: center;
} 

</style>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...