CSS: Probleme d'Overflow...? Résolu/Fermé

Question

Bonjour à tous, Je suis en train de finaliser la création de mon blog. Support WP 2.8, à ouvrir avec FF ou google chrome pour l'instant, je n'ai pas fixer les détails pour IE, c'est plutôt moche. Adresse temporaire : http://www.colors-of-ludo.com Alors voila mon problème: Je ne sais pas utiliser la propriété overflow... et je pense que la solution est la mais je ne l'ai pas trouvée. Sur la page principal du blog, rien ne semble bizarre puisque j'ai contourner le problème en agrandissant la hauteur des div concernées, qui sont la div "page" et "post-content". Mais cette solution ne peut se répercuter sur les pages secondaires comme la page article.php ou page.php (pour consulter des pages entières ou les articles en entier... Le fait est que le contenu de mes div dépasse des div. Donc le background reste cloitré dans la div, mais pas derrière le contenu et cela provoque de gros pb de mise en page. Par ex, pour la div page qui est supposée être sous le header (sous l'eau, soit le menu) et jusqu'en bas, juste au dessus du footer: elle est environ de la taille du header (si l'on enlève la propriété height:500%) et positionnée derrière, le contenu commençant seulement à partir du texte de bienvenue. Je ne sais pas trop comment donner plus de détails, mais voici le code: /* Theme Name: Personal Pattern Theme URI: Description: Theme created by L*. Version: 0.1 Author: L* Personal Pattern by L* || */ /*Preparation*/ a img {border: none;} a form:active {border:none;} /*Mise en page des éléments de header.php*/ body {font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Sans-serif;font-size: 0.8em;text-align: left;background: #e3e6e8 url(img/bg_body.png) left top repeat;color: #006699;margin: 0 auto 0 auto;} #bg_left {position:absolute;top:0px;left:0px;width:100px;height:500px;} #bg_right {position:absolute;top:0px;left:1100px;width:100px;height:500px;} #page {background:#eee url(img/bg_page.jpg) left 9px repeat;margin: 0 0 0 100;width:1000px; height:300%;} #header_global {font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;height: 480px;width: 1003px;} #header {float: left;height: 480px;width: 1003px;} #header_left {float: left;height: 480px;width: 590px;} #header_middle {float: left;height: 480px;width: 110px;} #header_right {float: left;top:0px;height: 480px;width: 300px;} #header_right_left_left {float: left;height: 154px;width: 20px;} #header_right_left {float: left;height: 85px;width: 200px;} #header_right_right {float: right;height: 85px;width: 80px;} #header_menu {float: left;height: 90px;width: 1000px;} #header_menu_left {float: left;height: 90px;width: 75px;} #header_menu_right {float: right;height: 90px;width: 825px;} #header_menu_sup {float: right;height: 36px;width: 825px;} #header_menu_inf {float: right;height: 34px;width: 421px;} #header_menu_inf_bis {height: 34px;width: 825px;} #content_global {float: left;margin-top:18px;width: 1000px;background: transparent url(img/1.8.2.jpg) left top no-repeat;} #content {background: transparent;float: left;width: 700px;color:#000;} #diapo{background: transparent url(img/bg_diapo.png) left top no-repeat;height:306px;width:408px;margin:0 0 0 298px;padding:8 0 0 8;visibility:hidden;} #diapo #fsDemo p {text-align:center;height:25px;padding:252 0 0 0;background:#fff url(http://localhost/personalpattern/wp-content/themes/pp/img/bg_shenme.png) left top no-repeat;} #flickr_show {float:right; width:400px; height:400px; padding: 0 0 0 0;text-align:center;} #flickr_show a {color:#000;font-weight:bold;text-decoration:none;} #flickr_show a:hover {color:#99dd00;} /*Mise en page des éléments du post*/ .post {background-color: transparent; background: url(img/bg_post_up.png) right top no-repeat /*url(img/bg_post_global.png) right top no-repeat*/;margin: -20 0 0 -100;padding: 20 20 0 100;width: 700px;height: 400px;} .post .post_title {background:transparent url(img/bg_post.png) left bottom no-repeat;float: left;width: 700px;height: 75px;color: #000;font-weight: bold;font-size: 0.9em;line-height: 1.3em;padding-left: 76px;padding-bottom: 15px;margin-bottom: 8px;} .post .post_title a {color:#bb6600;text-decoration:none;} .post .post_title a:hover {color:#bb6600;text-decoration:underline;} .post .post_title .title {margin-left: -76px;font-size: 2.8em;line-height: 1.2em;} .post .post_title .title a {color:#000;text-decoration:none;} .post .post_title .title a:hover {color:#bb6600;} .post .post_content {background: transparent url(img/bg_post_content.png) right bottom repeat-y; width: 700px; height:200px; padding: 0 0 30 120;margin:101 0 0 -100;font-size: 1em;color: #000;} .post .post_content .content_text {background: transparent url(img/gui_post_down.png) right bottom no-repeat;float:left;width: 260px;margin:0;padding: 0 70 40 40;text-align:justify;} .post .post_content .content_img {float:right;padding:0 20 15 0;margin:0;width: 280px;} .post .post_content .content_img img {float:right;border: #fff solid 1px;} .post .post_content a {color: #bb6600;} .post .postmetadata {background:transparent url(img/bg_post_v.png) right top no-repeat;float:left;text-align:right;width: 721px;height: 43px;color: #000;font-weight: bold;font-size: 0.9em;line-height: 1.3em;padding: 10 0 0 100;margin: 0 0 50 -100;} .post .postmetadata a{color: #bb6600;text-decoration:none;} .post .postmetadata a:hover{color: #bb6600;text-decoration:overline;} .post .postmetadata img{padding: 8 5 0 5;} .post .postmetadata img:hover {padding: 5 5 3 5;background:transparent url(img/icone_underline.png) center bottom no-repeat;} .sidebar {float: right;width: 280px;margin: 16 0 0 0;} .sidebar a {color:#000;text-align:right;font-weight:bold;text-decoration:none;} .sidebar a:hover {color:#99dd00;text-align:right;font-weight:bold;} .sidebar h2 {background:transparent url(img/bg_sidebar.png) right bottom no-repeat;font-size: 1.2em;line-height: 60px;margin:0 2 20 0;} .sidebar ul{list-style-type: none;margin: 0 0 0 0;padding: 0;} .sidebar .diapo h2 {width:295px;margin: 9 0 0 10;background:transparent url(img/diapo_li_bg.png) left top no-repeat;font-size: 1.2em;} .sidebar ul li {width:280px;min-height:line-height:40px;color:#000;text-align:justify;padding: 0 10 0 10;} .sidebar ul li:hover {} .sidebar ul li h2 {color:#000;padding-top:0px;padding-right:10px;text-align:right;letter-spacing:0.4em;font-weight:bold;font-variant:small-caps;} .textwidget {padding: 0 30 0 10;} .sidebar ul li #facebookconnector {padding: 0 10 0 10;} .sidebar ul li ul li {background:transparent url(img/button_green_out.png) left no-repeat;list-style-type: none;width:230px;line-height:20px;text-align:justify;margin-bottom:0px;padding:0 10 0 20;} .sidebar ul li ul li:hover {background:transparent url(img/button_green_over.png) left no-repeat;padding: 0 0 0 25;} .sidebar ul li ul li a {width:250px;} .sidebar ul li ul li a:hover {} .sidebar ul li ul li li {display:none;}form {background:transparent;width:200px;height:40px;padding-top:0px;border:none;float:right;} /*Mise en page des éléments du formulaire de recherche*/ form #champ {float:left;border:none;width:175px; height:40px;padding: 10 5 0 70;color:#000;border:none;background: url(img/1.5.1.3.1.out.jpg) left top no-repeat;} form #champ:hover {background: url(img/1.5.1.3.1.over.jpg) left top no-repeat;border:none;} form #champ:active {border:none;} form #envoi {float:right;border:none;width:25px;height:40px;background:url(img/1.5.1.3.2.out.jpg) left top no-repeat;cursor: pointer;} form #envoi:hover {background: url(img/1.5.1.3.2.over.jpg) left top no-repeat;} #search_error form {background:transparent;width:135px;height:30px;padding-top:0px;border:none;float:left;} #search_error form #champ {float:left;border:none;width:110px; height:30px;padding: 10 5 0 5;color:#000;background: url(img/search_error.1.out.png) left bottom no-repeat;} #search_error form #champ:hover {background: url(img/search_error.1.over.png) left bottom no-repeat;} #search_error form #champ:active {} #search_error form #envoi {float:left;border:none;width:25px;height:30px;background:url(img/search_error.2.out.png) left bottom no-repeat;cursor: pointer;} #search_error form #envoi:hover {background: url(img/search_error.2.over.png) left bottom no-repeat;} /*Mise en page des éléments du footer*/ #footer {background: transparent url(img/footer_page/f_bg_right.jpg) 10px top repeat-x;clear: both;margin:0 0 0 0;padding:0;bottom:0;height:250px;color:#fff;} #footer_bis {width:1130px;margin:0;padding:0;} #f_col1 {float:left;height:250;width:375;} #f_col2 {float:left;height:250;width:510;} #f_col3 {float:right;height:250;width:245;} #f_2 {float:left;margin:0;padding:0;top:0;height:140;width:375;} #f_2_2-3 {float:right;margin:0;padding:0;width:260;height:140;} /*Mise en page des éléments du template commentaires*/ .comments-template{ margin: 10px 0 0 0;} .comments-template ol{margin:10px;padding: 0 0 0 15px;list-style: none;} .comments-template ol p{font-family: Trebuchet MS, Arial, Helvetica, Sans-serif;font-size: 0.9em;} .comments-template ol li{margin: 10px 0 0 0;line-height: 15px;padding: 0 0 10px;} .comments-template h2, .comments-template h3{font-size: 1.2em;} .commentmetadata{font-size: 0.9em;} .comments-template p.nocomments{padding: 0;} .comments-template textarea{font-family: Trebuchet MS, Arial, Helvetica, Sans-serif;font-size: 0.9em;} .cadre_commentaires {border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;} Code HTML

Bienvenue !
Bienvenue à toi websurfer, sur mon nouveau blog. Ici, je partagerais tout ce que j'ai envie de partager, ce que j'aime, les pensées que je peux avoir, les infos que je trouve intéressantes ou encore les expériences que je vis. N'hésites pas à réagir, donner ton avis et partager ce que tu désires également. Bref, appréciez votre visite. L*
Non, je ne renis pas ma langue native, un maximum d'articles seront traduit en Français. Normalement, le choix se fait automatiquement, si malgré cela vont ne trouvez que les articles en Anglais, veuillez vous diriger ici: Fr
Play the slideshow:

Shénme?! A slideshow should appear here! Connected?!

Posted by |
Category:

| Publish this article on :

Oooopppsss...

Sorry, but what you are looking for is not here...

You may want to try again:

Désolé, le code n'est pas très bien organisé mais je n'ai pas trouvé d'autre option pour afficher du beau code. Il est tel quel dans mes fichiers. Merci d'avance pour vos lumières sur mon problème, L*

L* · Answer

Pour mieux voir le code... car finalement c'est vraiment horrible, code source de la page d'accueil, puis pour le css: http://www.colors-of-ludo.com/style.css

Merci!

jjsteing · Answer

salut,

bon deja, sans regarder ton code, dans firefox avec la console d erreur.. tu en as plein dans ton css...

résoud deja ca je pense, c est certainement pour ca que t as un soucis d overflow :)

L* · Answer

Salut JJSteing,

En effet, ya plein d'erreurs, je n'avais pas vérifier, cependant je n'en ai corrigé qu'une qui n'avait que peut d'impact sur l'affichage, toutes les autres erreurs étant dues (je ne sais pas pourquoi) à la section wp-admin, a fbook (mais j'ai virer fbconnect) ou au plugin filckrshow que j'ai désactivé... je n'y peut pas grand chose et de toute façon j'avais ces problèmes d'affichage avant d'insérer les plugins! Et après :(.

Concernant l'overflow, je pense que c'est ca, mais j'ai lu ce document ressource (http://www.w3.org/TR/css-box-3/#overflow0) la dessus et je n'ai rien trouvé qui m'aide...

Enfin bon,
Merci déjà de ta réponse!

L* · Answer

Bon en fait j'ai résolu mon problème... ce n'est pas en ligne c'est toujours en local, mais c'est bon. Bien un problème d'overflow, j'ai suivi la technique de Mitch disponible à la fin de son post: http://www.commentcamarche.net/forum/affich 5208023 css probleme overflow auto?Acces=1#ecrire

Merci quand meme!

CSS: Probleme d'Overflow...?

4 réponses

Discussions similaires