28221 sujets

CSS et mise en forme, CSS3

[Réglé] Dépassement des divs, assez urgent...

Salut à tous Smiley ravi

Je suis tout nouveau ici, mais certains m'ont peut-être déjà parlé sur 2037.org Smiley cligne Je suis assez novice, et comme j'adore ce site, j'ai pensé que m'inscrire sur ce forum pourrait certainement m'aider à progresser en XHTML Smiley lol

Bon, sinon, je fais un site que je dois impérativement finir avant la fin des vacances (le 2 janvier au plus tard...), et j'ai un gros pépin : mes paragraphes dépassent et se superposent avec les autres divs s'ils sont plus hauts que le menu Smiley confus Je trouve ça louche d'une part, et sur 2037 j'ai pas de message d'aide qui m'apporte des résultats. Comme c'est impératif que ce site soit terminé, je commence à m'inquiéter Smiley confus

Alors, voici la première page mise en ligne :
http://nicoelro.ath.cx/pile/hydrogene/production.php
Voilà, moi je sais pas du tout d'où ça peut venir, j'arrive pas à comprendre comment c'et possible Smiley confus

Merci de m'aider si vous le voulez bien, @+ et Joyeux Noël à tous pour demain Smiley ravi
Modifié le 24 Dec 2004 - 18:06
Hello,

Ton site est mal concu, c'est tout. Reprends un modèle déja fait, il te faut mettre les choses en float pour que cela marche et que ton contenu pousse le footer.

Joyeux noël !
Bonjour,

A mon avis, ton problème vient du fait que ta div "contenu" est positioné en absolute. Ainsi, elle est sortie du flux courrant et c'est pour ça que ta div "info" se retrouve juste sous ton menu.

Ma technique pour faire un menu de gauche est la suivante :

Le menu est en absolute avec une valeur de largeur (width) fixe.

La partie principale a un décalage gauche égale à la largeur du menu plus une petite marge (padding-left).

Ainsi ta div "info" se retrouvera sous la partie principale.

Il peut être intéressant de mettre une valeur minimum pour la hauteur de ta div principale pour que l'effet inverse ne se produise pas (l'info qui empiète sur le menu) au cas ou ton texte principal soit court.

@+

Alex (Kiouk)

PS : J'ai utilisé cette technique pour le futur panel de tuxfamily.org. N'hésite pas à regarder la feuille de style et si t'as le temps à Reporter les bugs
Administrateur
Salut Smiley cligne

Rapidement :
- Toutes les questions de dépassements, de décallages et de mise en page sont à poser dans le Salon "CSS et mise en forme". Je déplace.
- Il y a une Méthodologie en post-it à lire avant de poser ses questions de mise en page.

Bonne chance
Voilà une piste rapide, je ne sais plus où j'ai fait les modifs j'ai fais cela rapidement. Efin je pense que c'est un bon début Smiley cligne 


body {
box-sizing: content-box;
padding: 0;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
width: 760px;
font-family: sans-serif;
font-size: 12px;
color: #ffffff;
background: #5A908C;
}

a:link { color: #ffffff; text-decoration: none; }
a:visited { color: #ffffff; text-decoration: none; }
a:active { color: #ffcc00; text-decoration: none; }
a:hover { color: #ffcc00; text-decoration: none; }

#banniere {
width: 760px;
border: 0;
height: 170px;
}

#bord {

width: 758px;
border-right: 1px solid #ffcc00;
border-left: 1px solid #ffcc00;
}

.rubrique {
height: 25px;
margin-top: auto;
margin-bottom: auto;
font-size: 13px;
background: #5A908C;
background-image: url(./images/rubrique.png);
text-align: center;
border-top: 1px solid #ffcc00;
border-bottom: 1px solid #ffcc00;
}
.rubrique a {
display: block;
height: 25px;
line-height: 25px;
}
.rubrique a:hover {
background-image: url(./images/lumiere.png);
color: #ffffff;
}
.rubrique span {
display: block;
height: 25px;
line-height: 25px;
}

#menu {
position:absolute;
border-right: 1px solid #ffcc00;
width: 120px;
background: #487370;
padding: 0px;
margin: 0px;
}
#find {
border-top: 1px solid #ffcc00;
height: 100px;
padding-top: 3px;
padding-left: 7px;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li a {
display: block;
height: 20px;
line-height: 20px;
padding-left: 5px;
}
li a:hover {
background: #6EB1AD;
}

#info {
float: left;
width: 758px;
height: 20px;
background-image: url(./images/info.png);
padding: 0px;
margin: 0px;
border: 1px solid #ffcc00;
text-align: center;
}
#info span {
vertical-align: middle;
}

.contenu {
margin-left:120px;
padding: 0px;
top: 175px;
width: 639px;
border-top: 1px solid #ffcc00;
}
.titre {
margin: 0px;
padding: 5px;
font-size: 15px;
color: #ffcc00
}
.partie {
margin: 0px;
padding: 5px;
font-size: 13px;
color: #ffcc00
}
.contenu p {
margin: 0px;
padding: 5px;
}


En fait en regardant d'un peu plus prés, ta feuille de style a besoin de suppression ou de raccourci de propriétés Smiley cligne

Par exemple pour des background Smiley cligne

De plus class="titre" et class="liens" ne sont pas déclarés dans ta feuille de style donc ne servent à rien, il faut les déclarer Smiley biggrin
Modifié le 24 Dec 2004 - 12:56
Juliofromlille : oui, les float faut que je réapprenne, j'ai jamais trop assimilé ça... Smiley lol

Raphael : désolé, à l'heure où j'ai posté ça j'ai pas fait gaffe à grand chose Smiley confused

Roger : merci ^^

Kiouk : formidable, superbe, merci beaucoup ça marche (j'avais pas pensé qu'un absolute pouvait faire ça Smiley confus et comme j'avais galéré au début avec les relative, ben j'ai fait un peu à l'arrache, sans vraiment comprendre ce que ça pourrait donner ^^)

Mais maintenant, il y a un problème : je trouve pas de méthode pour faire une div vide qui se placerait sous le menu, parce que là maintenant y a plus rien dessous ^^ et faudrait mettre un peu de couleur Smiley langue Mais en essayant, ça a rien donné, et je trouve rien sur le site pour les divs de ce genre...

Doomer : ouais, merci, j'obtiens le même résultat en changeant juste ce que Kiouk m'a dit de changer, mais je crois que c'est aussi ce que t'as fait nan ? J'ai pas bien capté ton histoire de background par contre...
Cela 
background: #5A908C url(./images/rubrique.png);


au lieu de

.rubrique {
background: #5A908C;
background-image: url(./images/rubrique.png);
}


Il y a des choses qui permettent de réduire la taille de ta feuille de style
Merci Igor pour les liens Smiley cligne

Bon, en trichant je suis arrivé au résultat voulu : j'ai simplement appliqué à la div "bord" qui contient mon menu et ma div "contenu" un background avec la couleur du menu, et j'ai mis la couleur voule comme background de la div "contenu" ^^ (fallait juste inverser, quoi ^^)
Et j'ai changé les attributs de bordures, pour aovir ce que je voulais Smiley cligne

Reste plus que la hauteur minimale du contenu, faut que je trouve l'attribut qui correspond Smiley smile

Merci à vous pour votre aide en tout cas, vous m'avez super bien avancé !!

[EDIT] Et vive la langue anglaise et surtout KWrite sous Mandrake Smiley lol Ouais, KWrite il me met les balises en gras, ou en couleur pour que je sache à quoi ça correspond ^^ (comme d'autres programmes genre EasyPHP si mes souvenirs sont bons Smiley cligne ), et du coup en essayant plusieurs trucs ("height-mini", "height-minimum", "height-min"), je suis arrivé à l'attribut "min-height" qui correspond à ce que je veux ^^

Merci encore à vous Smiley cligne Vous avez sauvé mon TPE Smiley lol
Modifié le 24 Dec 2004 - 17:58
Sujet clos
Aller à