18041 sujets
Questions générales et questions de débutants
Ok voici donc le code de ma css et de ma page html. Désolé s'il y a des erreurs, je ne suis qu'un newbee (pour le moment 
)
Page Html
)
/* CSS Document */
<style type="text/css">
body {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 1em;
margin: 0;
padding: 0;
}
#site {
position: absolute;
width: 100%;
max-width: 1024px;
min-width: 700px;
left: 0px;
top: 0px;
}
#header {
}
#bandeau {
height: 67px;
background: url(bandeau.png) left no-repeat;
width: 100%;
background-color: #1CA101;
}
#motfort {
margin-left: 160px;
margin-top: 45px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-weight: bold;
color: #FFFFFF;
}
ul#menuhaut{
margin: 0;
padding: 0;
list-style-type: none;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 1em;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
color: #1CA101;
text-decoration: none;
margin: 2px 10px;
}
#menuhaut a:hover {
text-decoration: underline;
color:#FF99FF;
}
form {
margin: 3px 0 0 0;
padding: 0;
}
#recherche {
text-align: right;
border: solid #24C702;
border-width: 1px 0px;
padding: 4px;
margin: 0 10px;
}
.trainfamille {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 0.8em;
}
.trainfamille a {
color: #1CA101;
text-decoration: none;
margin: 2px 10px;
}
.trainfamille a:hover {
text-decoration: underline;
color:#FF99FF;
}
#identification {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
width: 260px;
background-color:#FFCCFF;
padding: 2px;
}
.moncompte {
font-size: 1.2em;
color: #188602;
line-height: 1.2em;
margin: 0;
padding: 0;
}
#menugauche {
position: absolute;
left: 0px;
width: 260px;
}
ul#listegauche{
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
list-style-type: none;
font-size: 0.8em;
margin: 0px;
padding: 0 0 0 5px;
border-bottom: dashed #21BF02 1px;
}
#listegauche a {
color: #1CA101;
text-decoration: none;
}
#listegauche a:hover {
text-decoration: underline;
}
.newsletter {
width: 260px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 0.8em;
border-bottom: dashed #21BF02 1px;
}
#centrepage {
margin-left: 265px;
margin-right: 265px;
}
#menudroit {
position: absolute;
right: 0px ;
text-align: right;
width: 260px;
}
#pied {
background-color: #1CA101;
margin: 5px 0 0 0;
padding: 0px;
}
ul#pied{
margin: 0;
padding: 0;
list-style-type: none;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 0.85em;
text-align: center;
}
#pied li {
display: inline;
}
#pied a {
color: #FFFFFF;
text-decoration: none;
margin: 0 10px 0;
padding: 0;
}
#pied a:hover {
text-decoration: underline;
color:#FFFFFF;
}
</style>
Page Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>template.htm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div id="header">
<div id="bandeau">
<div id="motfort">motfort</div>
</div>
<ul id="menuhaut">
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
</ul>
<form method="get" name="form" action="/recherche.html">
<div id="recherche">
<input name="_motsclefs" type="text" value="Rechercher" onFocus="javascript:this.value=''" />
<input type="image" src="fleche.gif" align="absmiddle"/>
</div>
</form>
<span class="trainfamille"><a href="/index.html">Rubrique</a></span>
</div>
<div id="menugauche">
<div id="identification">
<span class="moncompte">Mon compte</span><br />
</div>
<ul id="listegauche">
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
</ul>
<p class="newsletter">
Newsletter
<form action='newsletter.php'>
<input type="text" name="email" value="Votre email" onFocus="javascript:this.value=''" />
<input type="image" src="fleche.gif" align="absmiddle"/>
</form>
Recevez promos et nouveautés !
</p>
</div>
<div id="menudroit">pouetpouetpouetpouetp</div>
<div id="centrepage">
pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp
pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp pouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetppouetpouetpouetpouetp </div>
<div id="pied">
<ul id="pied">
<li><a href="#">Contact</a></li>
<li><a href="#">Frais de port</a></li>
<li><a href="#">Conditions de vente</a></li>
<li><a href="#">Liens</a></li>
</ul>
</div>
</div>
</body>
</html>
Hello,
D'après le code que tu donnes, tu as deux balises HTML dans ta feuille de style CSS. C'est une erreur (de newbie, effectivement
).
Quant au problème de fond: quel est le bloc qui est étiré par le texte?
S'il s'agit de div#centrepage, il te suffit de lui attribuer une couleur de fond voyante (un petit background: red; par exemple) pour constater que le bloc n'est pas étiré, et qu'il garde bien ses dimensions. Par contre, les chaines de caractères trop longues pour tenir dans la largeur du bloc dépassent à droite, car les navigateurs n'effectuent pas de césure automatique des mots ou des chaines de caractères.
Le seul cas où div#centrepage est étiré en largeur, c'est avec Internet Explorer 6, mais c'est un bug de ce navigateur (corrigé avec la version 7).
Reste donc le problème de ton contenu: est-ce que tu vas réellement avoir des contenus avec des éléments (chaines de caractères sans espaces, images) trop larges pour leur conteneur, ou bien est-ce juste un effet de bord du texte de test que tu as tapé (une erreur classique de newbie, là encore )?
D'après le code que tu donnes, tu as deux balises HTML dans ta feuille de style CSS. C'est une erreur (de newbie, effectivement
).Quant au problème de fond: quel est le bloc qui est étiré par le texte?
S'il s'agit de div#centrepage, il te suffit de lui attribuer une couleur de fond voyante (un petit background: red; par exemple) pour constater que le bloc n'est pas étiré, et qu'il garde bien ses dimensions. Par contre, les chaines de caractères trop longues pour tenir dans la largeur du bloc dépassent à droite, car les navigateurs n'effectuent pas de césure automatique des mots ou des chaines de caractères.
Le seul cas où div#centrepage est étiré en largeur, c'est avec Internet Explorer 6, mais c'est un bug de ce navigateur (corrigé avec la version 7).
Reste donc le problème de ton contenu: est-ce que tu vas réellement avoir des contenus avec des éléments (chaines de caractères sans espaces, images) trop larges pour leur conteneur, ou bien est-ce juste un effet de bord du texte de test que tu as tapé (une erreur classique de newbie, là encore
)?Florent V. a écrit :
Hello,
D'après le code que tu donnes, tu as deux balises HTML dans ta feuille de style CSS. C'est une erreur (de newbie, effectivement
Quant au problème de fond: quel est le bloc qui est étiré par le texte?
S'il s'agit de div#centrepage, il te suffit de lui attribuer une couleur de fond voyante (un petit background: red; par exemple) pour constater que le bloc n'est pas étiré, et qu'il garde bien ses dimensions. Par contre, les chaines de caractères trop longues pour tenir dans la largeur du bloc dépassent à droite, car les navigateurs n'effectuent pas de césure automatique des mots ou des chaines de caractères.
Le seul cas où div#centrepage est étiré en largeur, c'est avec Internet Explorer 6, mais c'est un bug de ce navigateur (corrigé avec la version 7).
Reste donc le problème de ton contenu: est-ce que tu vas réellement avoir des contenus avec des éléments (chaines de caractères sans espaces, images) trop larges pour leur conteneur, ou bien est-ce juste un effet de bord du texte de test que tu as tapé (une erreur classique de newbie, là encore
Merci pour ton message :
pour les balises html, tu veux parler de body et form je pense, je devrais donc faire un #body par exemple ?
Ensuite ce qui est étiré c'est les deux pavés à gauche et à droite du div#centrepage (respectivement #menugauche et #menudroite)
Ce qui est dans div#centrepage est quand à lui bien en place et va à la ligne sans étirer le div.
Je vais placer dans les deux pavés des rubriques d'une boutique donc je ne maitrise pas réellement la longueur si ce n'est compter chaque caractère quand je crée la rubrique
Je confirme aussi que j'ai ce bug même avec IE7
pan a écrit :
pour les balises html, tu veux parler de body et form je pense, je devrais donc faire un #body par exemple ?
Non, je parle de ceci:
/* CSS Document */
[#red]<style type="text/css">[/#]
body {S'il s'agit d'une feuille de style externe, les balises HTML n'ont rien à y faire. Par contre, tu peux très bien avoir des sélecteurs CSS qui visent des éléments HTML, comme par exemple dans le code suivant:
form {
margin: 3px 0 0 0;
padding: 0;
}Un sélecteur CSS est bien en syntaxe CSS, qu'il s'agisse d'un sélecteur d'élément ou d'un sélecteur de classe ou d'identifiant (ou autre...). Une balise HTML, par contre, c'est de la syntaxe HTML, et ça n'a rien à faire dans une feuille de style
pan a écrit :
Ensuite ce qui est étiré c'est les deux pavés à gauche et à droite du div#centrepage (respectivement #menugauche et #menudroite)
Ce qui est dans div#centrepage est quand à lui bien en place et va à la ligne sans étirer le div.
Je n'ai pas constaté cela pour ma part. Une page en ligne où le problème serait manifeste, peut-être?
pan a écrit :
Le fait d'avoir retiré <style type="text/css">
a résolu tous mes problèmes !!!!
Il est probable qu'à cause de ce bout de code parasite et syntaxiquement faux (pour du CSS), le navigateur ne s'y retrouvait plus et ignorait une partie de tes styles CSS (ceux qui suivent directement l'erreur de syntaxe, en général).
Prendre l'habitude de valider son code HTML et son code CSS peut éviter ce genre de mésaventure.