28220 sujets

CSS et mise en forme, CSS3

Float ou pas float...

Bonjour,
Voila j'ai un probleme qui me gene depuis plusieurs jours voila:
voici mon code de la page qiu me gene:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> /* c du css qui dirige le design de la feuille */
body
{
widht: 100%;
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
}
#header { border: 2px solid #CCCC00; }
#titre
{
font-size:larger;
color:#00CC00;
}
#menu_gauche
{
float: left; /* Le menu flottera à gauche */
width: 130px; /* Très important : donner une taille au menu */
border: 2px solid #CCCC00;
}
#center
{
float:left;
}
#menu_droite
{
float: right;
width: 130px;
border: 2px solid #CCCC00;
}
#sous_menu
{
list-style-image: url("puce.gif");
border: 1px solid #990000;
margin: 2px 2px 2px 2px;
}
#footer
{
padding: 5px;
text-align: center;
border: 2px solid #CCCC00;
clear: both;
}
</style>
<title>Le Site De Lucyberad</title>
</head>

<body>
<div id="header">
<img src="header.jpg" alt="Logo"/>
</div>
<div id="menu_gauche">
<div class="sous_menu">

<br/><div id="titre" align="center">Menu principal</div>
<ul> <!-- ca debute une liste a puce -->
<li><a href="index.php">Acceuil</a></li>
<li><a href="index.php?page=livreor">Livre d'or</a></li>
<li><a href="index.php?page=inscription">Inscription</a></li>
<li><a href="index.php?page=connexion">Connexion</a></li> <!-- le mettre peut etre dans la partie votre compte ou connexion -->

</ul>
<br/>
</div>
<div id="sous_menu">
<br/><div id="titre" align="center">Qui est en ligne?</div><br/>
<span style="color:#9900FF;">Il y as <strong>1</strong> personne connecté a ce site</span> </div>

<div id="sous_menu">
<hr>
<form method="post">
<input type="text" name="message" size="17">
<br/><input type="submit" value="soumettre">
</form>
</div>
</div>
<div id="center">
<fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>03/08/2005</em></span><br/><hr/>essai<br />
essai<br />

essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>encore un essai</strong></span><span style="float:right;"><em>01/08/2005</em></span><br/><hr/>essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>30/07/2005</em></span><br/><hr/>essai<br />
essai</fieldset></div>
<div id="menu_droite">
menu droite
</div>
<div id="footer">
<p>Copyright "Lucyberad" 2005, tous droits réservés...</p>

</div>

</body>
</html>


bon meme si le code a été ecris alors que j'etait comme ca: Smiley biggol
et voila quand j'enleve le float de center et que je mets des margin left et right comme c'est visible dans l'un de vos modeles, j'obtient comme sur le screenshot suivant:

<modération>Merci d'utiliser la fonction upload et une vignette plutôt qu'une image de ce format</modération>

(voici le lien si l'image ne fonctionne pas: http://img43.imageshack.us/img43/3351/image10xz.jpg)
le lien du modele: http://css.alsacreations.com/modeles/modele16.htm

et quand je laisse le float du contenu, ben le menu se mets bien a droite mais la, second probleme: le contenu central n'as aps la taille escomptée...

voila j'espere que vous pourrez m'aidez !

Lucyberad
Modifié par Laurent Denis (15 Aug 2005 - 17:12)
Merci de lire les règles du forum :
Règle du forum a écrit :
Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués).
Smiley smile
Bonjour Lucyberad,

L'image fonctionne très bien, mais il est recommandé d'éviter les images de cette taille dans un forum, et d'utiliser la fonction d'upload permettant de générer une vignette Smiley cligne

Le balisage de ton exemple de code avec [ code ] [ /code ] serait aussi appréciable, comme te l'a fait remarquer un membre du forum Smiley ohwell

Expliquer plus précisément ce qui ne va pas dans ton rendu serait encore une autre bonne idée.

Il ne s'agit pas de t'embêter avec des détails formels:
- ton image explose allègrement l'affichage du forum dans de nombreux navigateurs, et allourdit son chargement inutilement
- ton code est peu lisible, mal copiable, et ne donne guère envie de s'y plonger.
- le problème qui te préoccupe est évidemment très clair pour toi, mais beaucoup moins pour ceux qui découvrent ta page Smiley cligne

Dans l'idéal, si tu pouvait ramener tout cela à une page test limitée à l'essentiel... Smiley ravi
Modifié par Laurent Denis (15 Aug 2005 - 17:13)
he ben pas de prblm je vais essayer de me mieux gerer mon post, en effet, c'est la 1ere fois que j'utilise ce forum:
alors voici mon post reformulé plus clairement:

Bonjour,
Voila j'ai un probleme qui me gene depuis plusieurs jours voila:
voici mon code de la page qiu me gene:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> /* c du css qui dirige le design de la feuille */
body
{
widht: 100%;
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
}
#header { border: 2px solid #CCCC00; }
#titre
{
font-size:larger;
color:#00CC00;
}
#menu_gauche
{
float: left; /* Le menu flottera à gauche */
width: 130px; /* Très important : donner une taille au menu */
border: 2px solid #CCCC00;
}
#center
{
float:left;
}
#menu_droite
{
float: right;
width: 130px;
border: 2px solid #CCCC00;
}
#sous_menu
{
list-style-image: url("puce.gif");
border: 1px solid #990000;
margin: 2px 2px 2px 2px;
}
#footer
{
padding: 5px;
text-align: center;
border: 2px solid #CCCC00;
clear: both;
}
</style>
<title>Le Site De Lucyberad</title>
</head>

<body>
<div id="header">
<img src="header.jpg" alt="Logo"/>
</div>
<div id="menu_gauche">
<div class="sous_menu">

<br/><div id="titre" align="center">Menu principal</div>
<ul> <!-- ca debute une liste a puce -->
<li><a href="index.php">Acceuil</a></li>
<li><a href="index.php?page=livreor">Livre d'or</a></li>
<li><a href="index.php?page=inscription">Inscription</a></li>
<li><a href="index.php?page=connexion">Connexion</a></li> <!-- le mettre peut etre dans la partie votre compte ou connexion -->

</ul>
<br/>
</div>
<div id="sous_menu">
<br/><div id="titre" align="center">Qui est en ligne?</div><br/>
<span style="color:#9900FF;">Il y as <strong>1</strong> personne connecté a ce site</span> </div>

<div id="sous_menu">
<hr>
<form method="post">
<input type="text" name="message" size="17">
<br/><input type="submit" value="soumettre">
</form>
</div>
</div>
<div id="center">
<fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>03/08/2005</em></span><br/><hr/>essai<br />
essai<br />

essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>encore un essai</strong></span><span style="float:right;"><em>01/08/2005</em></span><br/><hr/>essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>30/07/2005</em></span><br/><hr/>essai<br />
essai</fieldset></div>
<div id="menu_droite">
menu droite
</div>
<div id="footer">
<p>Copyright "Lucyberad" 2005, tous droits réservés...</p>

</div>

</body>
</html>


voici ce que donne cette page: upload/2969-Image1.jpg
comme on peut le voir, le prblm est que le centre ne prend pas toute la place du milieu...

sinon j'ai essayé de suivre le modele present sur ce site a cette page:
http://css.alsacreations.com/modeles/modele16.htm
donc je reprend le principe en remplacant le "float: left;" de centre par "margin-left: 140px;" et "margin-right: 140px;"
on obtient donc ceci comme code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> /* c du css qui dirige le design de la feuille */
body
{
widht: 100%;
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
}
#header { border: 2px solid #CCCC00; }
#titre
{
font-size:larger;
color:#00CC00;
}
#menu_gauche
{
float: left; /* Le menu flottera à gauche */
width: 130px; /* Très important : donner une taille au menu */
border: 2px solid #CCCC00;
}
#center
{
margin-left: 140px;
margin-right: 140px;
}
#menu_droite
{
float: right;
width: 130px;
border: 2px solid #CCCC00;
}
#sous_menu
{
list-style-image: url("puce.gif");
border: 1px solid #990000;
margin: 2px 2px 2px 2px;
}
#footer
{
padding: 5px;
text-align: center;
border: 2px solid #CCCC00;
clear: both;
}
</style>
<title>Le Site De Lucyberad</title>
</head>

<body>
<div id="header">
<img src="header.jpg" alt="Logo"/>
</div>
<div id="menu_gauche">
<div class="sous_menu">

<br/><div id="titre" align="center">Menu principal</div>
<ul> <!-- ca debute une liste a puce -->
<li><a href="index.php">Acceuil</a></li>
<li><a href="index.php?page=livreor">Livre d'or</a></li>
<li><a href="index.php?page=inscription">Inscription</a></li>
<li><a href="index.php?page=connexion">Connexion</a></li> <!-- le mettre peut etre dans la partie votre compte ou connexion -->

</ul>
<br/>
</div>
<div id="sous_menu">
<br/><div id="titre" align="center">Qui est en ligne?</div><br/>
<span style="color:#9900FF;">Il y as <strong>1</strong> personne connecté a ce site</span> </div>

<div id="sous_menu">
<hr>
<form method="post">
<input type="text" name="message" size="17">
<br/><input type="submit" value="soumettre">
</form>
</div>
</div>
<div id="center">
<fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>03/08/2005</em></span><br/><hr/>essai<br />
essai<br />

essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>encore un essai</strong></span><span style="float:right;"><em>01/08/2005</em></span><br/><hr/>essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />
essai<br />

essai<br />
essai<br />
essai</fieldset><fieldset style="border-width:medium; border-color:#0066FF;"><span style="float:left;"><strong>essai</strong></span><span style="float:right;"><em>30/07/2005</em></span><br/><hr/>essai<br />
essai</fieldset></div>
<div id="menu_droite">
menu droite
</div>
<div id="footer">
<p>Copyright "Lucyberad" 2005, tous droits réservés...</p>

</div>

</body>
</html>

et comme resultat: upload/2969-Image2.jpg
et voila on se rend encore bien compte que cette fois le menu central est ok en taille mais le menu droit cette fois n'as pas sa place...
Sujet clos
Aller à