Aller au contenu

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

Nnexxus

Par Nnexxus
dans Programmation et Lignes de code

Messages recommandés

Nnexxus Débutant

Nnexxus

Posté(e)
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites
Bricomix Nouveau

Bricomix

Posté(e)
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

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>

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...