Aller au contenu

Marge qui s'adapte à la longeur de la page

mekasiat

Par mekasiat
dans Le Webdesign

 Partager

Sujets conseillés

mekasiat

mekasiat

Posté
Posté (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é par mekasiat
Lien vers le commentaire
Partager sur d’autres sites
KnockedMaster

KnockedMaster

Posté
Posté

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 :P 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

Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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 !

Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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;

}

Lien vers le commentaire
Partager sur d’autres sites
KnockedMaster

KnockedMaster

Posté
Posté
#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' :whistling:
Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
KnockedMaster

KnockedMaster

Posté
Posté
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 :wacko: @ 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 ;) @+

Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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 !

Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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... :)

Lien vers le commentaire
Partager sur d’autres sites
KnockedMaster

KnockedMaster

Posté
Posté
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 :whistling: enfin, bon courage et bonne continuation -> dodo :P @+
Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté (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é par ghost
Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
KnockedMaster

KnockedMaster

Posté
Posté

Re-Mekasiat,

Dis donc, si tu veux j'ai de chouettes bouquins sur le html (pour commencer) :P:P:P

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 :sick::sick::sick: . On a vu des homicides pour moins que ça ;)

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
mekasiat

mekasiat

Posté
  • Auteur
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...