mekasiat Posté 9 Février 2007 Posté 9 Février 2007 (modifié) Bonjour, En raison de l'absence de mon webmaster huhu, je voudrais savoir comment faire pour adapter automatiquement la marge gauche et droite de couleur noir de mon site en fonction de la longueur de la page ? car là elles s'arrêtent en plein milieu, ce n'est pas beau du tout ! L'adresse de mon site : http://www.essentialhomme.com/mode.php Le bout de code concernant la marge gauche et droite est le suivant : } #marge_gauche, #marge_droite { background-color:black; } #marge_gauche{ float:left; /* positionnement flottant gauche du conteneur */ width:110px; height:100% } #marge_gauche ul, #marge_gauche li { padding:0 } #marge_gauche ul{ list-style-type: none; margin:5px } #marge_gauche li{ line-height:15px } #marge_gauche a{ text-decoration:none; font-size:8pt; color:white } #marge_gauche a:hover{ text-decoration:underline } #marge_droite{ float:right; /* positionnement flottant droite du conteneur */ width:260px; height:100% Je vous remercie beaucoup Modifié 9 Février 2007 par mekasiat
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 Salut, si j'ai bien compris, tu voudrais que tes marges restent noires indépendamment de la hauteur du conteneur ... Une solution serait d'attribuer une couleur de fond qui soit noire pour le div #conteneur et un background blanc pour le div #content Après, si tu veux que tes paragraphes en dessous soient en blanc aussi, ben tu sais ce qu'il te reste à faire _AT_micalement
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Au fait, ce que je voudrais est : j'aimerais que les marges gauche et droite restent noires et s'adaptent automatiquement en longueur en fonction de celle du contenu. Je m'explique : si le contenu est un article court, les marges s'y adaptent et restent noires jusqu'en bas de la page et c'est pareil si c'était un article long. Car ce que vous voyez là : le contenu est long, mais les marges noires s'arrêtent en plein milieu et ne vont pas jusqu'en bas de la page. Je ne sais pas si j'arrivais à me faire comprendre hehehe Merci !
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 (modifié) Bien, as-tu essayé la solution que je t'ai proposée ? Moi oui et ça fonctionne ... De rien .... Modifié 9 Février 2007 par KnockedMaster
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Tout d'abord merci pour ta réponse. Heuuu, je ne suis pas un expert en code, mais j'essaie de mettre le code là et essayer de marquer, d'après toi, ce qu'il faudrait modifier et tu me diras si c'était correct, pourrais-tu ? /*----------- structure de base -------------*/ #conteneur { width:960px; height-min:600px; margin:0 auto; text-align: left; padding-left:3px; padding-right:3px; background-image: url(images/fondc.jpg); ----------->il faut ajouter ici ce code : background-color:black; ? background-repeat: repeat-y; background-position: center; } #header { width:100%; height:68px text-align: left; } #menu { width:100%; height:20px; margin:0; padding:0; background-color:black; background-position:right; background-repeat:no-repeat; vertical-align:middle; } * html #menu { margin-top:-2px /* attribut spcifique IE */ } #menu li{ margin:0 5px; display:inline; } #menu a{ text-decoration:none; font-size:8pt; color:white; height:20px; line-height:20px /* centre verticalement le texte */ } * html #menu a{ line-height:18px /* attribut spcifique IE */ } #menu a:hover{ text-decoration:underline } #marge_gauche, #marge_droite { background-color:black; } #marge_gauche{ float:left; /* positionnement flottant gauche du conteneur */ width:110px; height:100% } #marge_gauche ul, #marge_gauche li { padding:0 } #marge_gauche ul{ list-style-type: none; margin:5px } #marge_gauche li{ line-height:15px } #marge_gauche a{ text-decoration:none; font-size:8pt; color:white } #marge_gauche a:hover{ text-decoration:underline } #marge_droite{ float:right; /* positionnement flottant droite du conteneur */ width:260px; height:100% } #img_mag{ width:122px; height:164px; background-image: url("images/structure/magazine.jpg"); margin:0 auto } #content { margin:0 294px 0 110px; padding:0; background:white; ---------------------------------------> le content est ici déjà blanc, non ? } #footer{ clear:both; /* fixe le pied de page en dessous des marges */ width:100%; text-align:center; font-size:7pt; border-top:1px solid #FFFFFF; padding-bottom:8px; background-image:url(images/bashorz.jpg); background-position:bottom; background-repeat:repeat-x; }
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 #conteneur { width:960px; height-min:600px; margin:0 auto; text-align: left; padding-left:3px; padding-right:3px; background-image: url(images/fondc.jpg); ----------->il faut ajouter ici ce code : background-color:black; ? background-repeat: repeat-y; background-position: center; } #content { margin:0 294px 0 110px; padding:0; background:white; ---------------------------------------> le content est ici déjà blanc, non ? } Tout à fait Pour le conteneur, tu peux même écrire background:#000 et enlever background-position et background-repeat, c'est plus court le content est dejà en #fff et c'est impec', il ne reste donc plus qu'à vois si tu veux laisser les <p></p> du dessous en noir ou si tu veux marquert une continuité avec le content ... De rien pour le coup de main, suis en train de bosser aussi et je sais que c'est parfois bien utile de trouver de l'aide à 2h00 du mat'
ghost Posté 9 Février 2007 Posté 9 Février 2007 Bonjour, Il y a comme un problème dans ton code, tu as 2 pages html dans une, 2 body, 2 html etc... Tu n'aurais pas des fois des problèmes d'includes en php ? Sinon, la solution proposée est corrrecte mais il semble que ton bloc #content ait un margin-right de 294px (pourquoi) qui va sur prendre 34 pixels de large la couleur noire aussi, il conviendrait de le réduire ce qui centrerait le contenu de ton bloc content aussi. Bon courage
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 Il y a comme un problème dans ton code, tu as 2 pages html dans une, 2 body, 2 html etc... Tu n'aurais pas des fois des problèmes d'includes en php ? Même pas vu @ mekasiat -> Si tu navigues avec Firefox, il y a deux extensions qui peuvent t'aider dans ce genre de "débuggage" : web developer et firebug à télécharger sur Geckozone. Les essayer c'est les adopter @+
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Hehehe, oui je sais que le code n'est pas propre du tout car à l'époque, j'ai payé une webmaster qui a fait certe du bon boulot, mais le code qu'elle a écrit n'est pas par contre correct. Et là si je voulais rectifier tout ça, ça va me coûter beaucoup d'argent et du temps. La refonte du site interviendra plus tard. Maintenant j'ai fait comme qu'a indiqué KnockedMaster et ça devient ça : http://www.essentialhomme.com/mode.php Et c'est le contenu qui s'arrête juste au dessus du footer Sinon pour Ghost : il faudrait réduire le margin-right à combien ? Hummm j'ai pas très bien saisi huhuhu Merci pour votre aide hehehe et le contenu du milieu se rétrécit en largueur maintenant :'( huhuhu Comment pourrais-je l'agrandir un peu en largueur ? et maintenant le contenu du milieu se rétrécit en largueur huhuhu :'(, comment pourrais-je l'agrandir en largueur svp ? ac ac ac
ghost Posté 9 Février 2007 Posté 9 Février 2007 Re, Tu ne peux pas rester décemment avec un code comme ça, tu as même dans ton html des balises <style></style>. C'est a se demander comment ton site arrive à s'afficher !
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 HAHAHA j'ai trouvé houraaaaaaaaaa !!!! oui je sais qu'il faut que je fasse quelque chose avec les codes de ce site. Même mon webmaster actuel s'incline devant un bordel pareil . De tte façon on va refondre le site donc...
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 Tu ne peux pas rester décemment avec un code comme ça, tu as même dans ton html des balises <style></style>. C'est a se demander comment ton site arrive à s'afficher ! Après relecture, suis tt à fait d'accord ... Hehehe, oui je sais que le code n'est pas propre du tout car à l'époque, j'ai payé une webmaster qui a fait certe du bon boulot, mais le code qu'elle a écrit n'est pas par contre correct. Et là si je voulais rectifier tout ça, ça va me coûter beaucoup d'argent et du temps. La refonte du site interviendra plus tard. Tu es assez sympa avec ton/ta webmaster ... et une refonte, c'est bcp bcp de boulot enfin, bon courage et bonne continuation -> dodo @+
ghost Posté 9 Février 2007 Posté 9 Février 2007 Re, Fais attention si ton centre est plus court que tes marges, ton background noir risque de remonter !!
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Je vous remercie pour toute votre aide. Je voudrais demander à Ghost une dernière question avant d'aller au dodo : comment faire pour faire descendre un peu le contenu centre pour qu'il ne soit pas au dessus comme ça par rapport au footer ? Et bonne nuit à KnockedMaster hehe
ghost Posté 9 Février 2007 Posté 9 Février 2007 (modifié) Re padding-bottom: 50px; par exemple pour chaque colonne et pour ton centre. <edit> pour te donner une idée e la tâche à accomplir http(:)//validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.essentialhomme.com%2Fmode.php</edit> Tu devrais passer color : #fff et background: #000; à ton footer car ça ferait "mieux" et auusi car tes liens au survol deviennent invisibles Modifié 9 Février 2007 par ghost
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Je suis désolé Ghost, mais comment ça se fait que ça devient comme ça ? http://www.essentialhomme.com/tech.php grrrrrrrrrrr !! par contre lorsque j'ajoute padding-bottom: 50px; sur la marge gauche, droite et conteneur, c'est carrément toute la page qui remonte et une espace noire s'ajoute en sous du footer (contact....) ce qui fait remontrer toute la page
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Bon c'est un bordel , hehehe, je vais me coucher en attendant je remets l'ancienne version du site et on verra dans la journée. Merci beaucoup beaucoup et à demain hehehehe bonne nuit tout le monde
ghost Posté 9 Février 2007 Posté 9 Février 2007 Bonjour, Le padding sur colonne droite, colonne gauche et content pas sur conteneur.
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Bonjour tout le monde, Mon webmaster n'est toujours pas rentré huhu. Quelqu'un pourrait me dire comment faire, cette fois-ci, pour adapter le contenu central et le faire descendre car là il s'arrête en plein milieu à son tour huhu :'( exemple : http://www.essentialhomme.com/tech.php Merci
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Bonjour KnockedMaster, Ca va ? Je pense que j'aurai besoin encore de ton aide ici hihihihi
KnockedMaster Posté 9 Février 2007 Posté 9 Février 2007 Re-Mekasiat, Dis donc, si tu veux j'ai de chouettes bouquins sur le html (pour commencer) je plaisante ... pour répondre à ta question, si tu enlevais déjà la ribambelle de <br /> (sauts de ligne) qui poussent ton footer dans le bas du doc ? Pour obtenir ce genre de résultat, mieux vaut utiliser des propriétés css ... _AT_micalement Je n'avais pas vu ton message de bienvenue ... Merci je vais bien c'est toi qui as l'air un peu pâlot ... je comprends vu l'état de ton code . On a vu des homicides pour moins que ça
ghost Posté 9 Février 2007 Posté 9 Février 2007 Bonjour, Ton code est HS, essaye d'enlever de ta page d'include tous ces <br><br>........<br> Et trouves ton codeur et mais lui la tête dedans! Si tu peux nous faire passer le code php d'une de tes pages
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 hahahaha, elle est disparue. Et celui actuel est parti en Asie pour une semaine :'(, les autres ne savent meme pas ce qũest un code lol Tu veux n'importe quelle page php GHOST ?
mekasiat Posté 9 Février 2007 Auteur Posté 9 Février 2007 Ok, vous auriez une crise cardiaque en voyant ça hehehe Alors il y a deux pages distinctes, la première est en php qui règle l'ensemble de la page et la deuxième est la page d'elle meme : <?php include "include/nav_head.php";?><body><div id="conteneur"><?php include "include/header_menu.php";?><div id="marge_gauche"> </br> <p class="titre_rub"><b>Tech</b></p> <ul> <li class="rub_prin"><b>NOUVEAUTES</b></a> <ul> <li><a href="tech.php?page=vezzo">AEG Vezzo</a></li> <li><a href="tech.php?page=logitech">Wireless DJ Music System</a></li> <li><a href="tech.php?page=lacie">LaCie Ora-Ito</a></li> <li><a href="tech.php?page=mitsubishi">Mitsubishi HC1100</a></li> <li><a href="tech.php?page=nokia5300">Nokia 5300</a></li> </ul> </li> <li class="rub_prin"><b>REVIEW</b></a> <ul> <li><a href="tech.php?page=ed1">Les gadgets du futur (1)</a> </ul> </li> <li class="rub_prin"><b>ZOOM</b></a> <ul> <li><a href="tech.php?page=smart">Smart Fortwo</a> <li><a href="tech.php?page=porsche">Le culte de Porsche</a> <li><a href="tech.php?page=ipod">Habillez votre Ipod</a> <li><a href="tech.php?page=cars">Les plus belles voitures de 2006</a> <li><a href="tech.php?page=access">Accessoriser vos gadgets</a> </ul> </li> <li class="rub_prin"><b>ARCHIVES</b></a> <ul> <li><a href="tech.php?page=archive">Archives Nouveautés</a> </ul> </li> </div><?php include "include/marge_droite.php";?><?php if (!isset($_GET['page'])) $page= 'vezzo'; else $page= $_GET['page']; switch($page){ case 'vezzo': include ('pages/tech/new/vezzo.html');break; case 'logitech': include ('pages/tech/new/logitech.html');break; case 'lacie': include ('pages/tech/new/lacie.html');break; case 'mitsubishi': include ('pages/tech/new/mitsubishi.html');break; case 'nokia5300': include ('pages/tech/new/nokia5300.html');break; case 'ed1': include ('pages/tech/preview2007/ed1.html');break; case 'smart': include ('pages/tech/zoom/smart/smart.html');break; case 'porsche': include ('pages/tech/zoom/porsche/porsche.html');break; case 'porsche2': include ('pages/tech/zoom/porsche/porsche2.html');break; case 'ipod': include ('images/tech/ipod/ipod.html');break; case 'access': include ('images/tech/access/access.html');break; case 'camera': include ('images/tech/access/camera/camera.html');break; case 'ipod2': include ('images/tech/access/ipod/ipod2.html');break; case 'laptop': include ('images/tech/access/laptop/laptop.html');break; case 'psp': include ('images/tech/access/psp/psp.html');break; case 'telephone': include ('images/tech/access/tel/telephone.html');break; case 'cars': include ('images/tech/cars/cars.html');break; case 'cars2': include ('images/tech/cars/cars2.html');break; case 'archive': include ('pages/tech/archive.html');break; case 'nokia': include ('pages/tech/archive/nokia.html');break; case 'flashbag': include ('pages/tech/archive/flashbag.html');break; case 'divita': include ('pages/tech/archive/divita.html');break; case 'archos': include ('pages/tech/archive/archos.html');break; case 'motorola': include ('pages/tech/archive/motorola.html');break; case 'news1': include ('pages/tech/archive/news1.html');break; case 'news2': include ('pages/tech/archive/news2.html');break; case 'news3': include ('pages/tech/archive/news3.html');break; case 'news4': include ('pages/tech/archive/news4.html');break; case 'news5': include ('pages/tech/archive/news5.html');break;} if(isset($_GET['page']) && $_GET['page']!='archive'){?><p style="border-top: dashed 1px #CCCCCC ; padding-top:10px; margin-top:5px;; padding-bottom:15px; padding-left: 0px; margin-left:140px;" > <a href="tech.php?page=archive" target="_parent"><b>Archive news gadgets</b></a></p> <?php}include "include/credits.php";?></div></body></html> et la page d'elle même est en html : <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>AEG Vezzo Le Dect Vador</title><meta content="Le téléphone dect Vezzo d'AEG" name="description"><meta name="keywords" content="téléphone, dect, vezzo, aeg"><meta content="FR" name="content-language"><meta name="Last-modified" content="Lundi 25 décembre 2006"></head><body><div id="content"> <div> <img src="images/tech/news/news2/titre_aeg.gif"/> </div><BR><b>Par la rédaction</b><BR>Lundi 25 décembre 2006<BR><a onClick="window.open('styles/images/structure/tell.php', 'nom_interne_de_la_fenetre', config='height=320, width=500, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');"><img src="styles/images/structure/envoi.gif" alt="" style="border:none 0px #FFFFFF;"/> <u>Envoyer cette page à un ami</u></a><BR><BR> <CENTER><img src="images/tech/news/news2/aeg.jpg"/></CENTER><p><BR> On connaît l’excellent design et la qualité irréprochable des produits de la marque danoise B&O, c’est au tour de la société AEG de nous étonner avec ce téléphone DECT haut de gamme, le Vezzo.<BR> Entièrement noir et doté de lignes épurées, ce téléphone à l’épaisseur incroyablement fin 1,4 cm pour 138 g a tous les atouts pour se marier à merveille à votre environnement high-tech et moderne. <BR>Son écran en couleurs personnalisable dénote étonnamment sur ce fond noir laqué. <BR>Désormais, téléphoner n’est plus pour vous une corvée, c’est un plaisir à la fois sonore et tactile.<BR><BR><b><u>AEG VEZZO</u></b> <BR>69,90€ l’unité ou 119€ les deux.<!-- phpmyvisites --><a href="http://www.phpmyvisites.net/" title="phpMyVisites | Open source web analytics" onclick="window.open(this.href);return(false);"><script type="text/javascript"><!--var a_vars = Array();var pagename='';var phpmyvisitesSite = 1;var phpmyvisitesURL = "http://essentialhomme.com/visits/phpmyvisites.php";//--></script><script language=javascript src="http://essentialhomme.com/visits/phpmyvisites.js"></script><noscript><p>phpMyVisites | Open source web analytics<img src="http://essentialhomme.com/visits/phpmyvisites.php" alt="phpMyVisites" style="border:0" /></p></noscript></a><!-- /phpmyvisites --> </body></div></html> Oupsssss !!!! Edit captain_torche : merci d'utiliser les balises CODE et CODEBOX, respectivement pour les codes courts et longs.
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant