Problème CSS apparence graphique

Disia · 3 Juillet 2008

Salut les amis

J'essaie de faire un petit site pour m'amuser et apprendre

J'ai un problème d'apparence... je ne sais pas si ça vient de mon CSS et de mon image (je crois que c'est plus le code) alors j'aimerais votre aide

Le problème c'est que les lignes noires et la zone blanche continuent au dessus et au dessous de de la zone.... et moi bah je veux pas

Je crois que je dois vous montrer mon CSS alors voici

Bloc de code:

body {
	width: 783px;
	margin: 0 auto;
}

img { border: 0; }
div.clear { clear: both; }

/* chapeau */
h1 {
	width: 783px;
	height: 264px;
	background: url('images/head.jpg') no-repeat;
	margin: 0 auto;
}

/* le menu */
div#left {
	width: 195px;
	float: left;
	margin-left: 14px !important;
	margin-left: 7px;
}

div#left div {
	width: 195px;
	margin: 0;
	background: url('images/bg_menu.png') repeat-y;
}
div#left div div.foot {
	width: 195px;
	margin: 0;
	padding-bottom: 10px;
	background: url('images/ft_menu.png') no-repeat bottom;
}
div#left div div.foot ul {
	list-style-image: url('images/puce.png');
	font: bold 12px Verdana;
	color: #FF43AA;
	margin: 10px 0 10px 30px;
	padding: 0;
}
div#left div.stats div.foot ul {
	list-style-image: none;
	list-style-type: none;
	margin: 10px 0 10px 0;
	padding: 0;
	text-align: center;
}
div#left div div.foot ul li {
	margin: 3px 0 3px 0;
}
div#left div div.foot ul li span {
	font: normal 11px Verdana;
	color: #00e8ff;
}
div#left div div.foot ul li a {
	color: #FF43AA;
	text-decoration: none;
}
div#left div div.foot ul li a:hover {
	color: #FF43AA;
	text-decoration: underline;
}
div#left div.categories h2 {
	width: 195px;
	height: 32px;
	margin: 0;
	background: url('images/cats.png') repeat-y right;
}
div#left div.stats h2 {
	width: 195px;
	height: 32px;
	margin: 0;
	background: url('images/stats.jpg') repeat-y right;
}
div#left div.partenaires h2 {
	width: 195px;
	height: 32px;
	margin: 0;
	background: url('images/part.png') repeat-y right;
}

/* contenu */
div#right {
	width: 550px;
	float: right;
	margin-right: 14px !important;
	margin-right: 7px;
}
div#right div.video {
	width: 550px;
	background: url('images/bg.jpg') repeat-y;
}
div#right div.video div.foot {
	width: 548px;
	padding-bottom: 25px;
	background: url('images/ft.jpg') no-repeat bottom;
}
div#right div.video div.foot h2 {
	width: 550px;
	height: 31px;
	margin: 0;
	padding: 20px 0 0 0;
	background: url('images/video.jpg') no-repeat;
	font: bold 12px Verdana;
	color: #FF43AA;
	text-indent: 330px;
	
}
div#right div.video div.foot div.text {
	width: 500px;
	margin: 0 auto;
}
div#right div.video div.foot div.text img.img1 {
	float: left;
	margin-right: 5px;
}
div#right div.video div.foot div.text p.description {
	text-indent: 15px;
	background: url('images/puce.png') no-repeat 0 3px;
	font: normal 12px Verdana;
	color: #FF43AA;
}
div#right div.video div.foot div.text img.right {
	float: right;
}
p#footer a {
	text-decoration: none;
	color: #FF43AA;
}
p#footer a:hover {
	text-decoration: none;
	color: #FF43AA;
}

h3 {
	color: #FF43AA;
	font: normal 9px Verdana;
	text-align: center;
	position: center;
}

Merci:rose::rose::rose:

Anonyme · 3 Juillet 2008

Ça serait plus facile avec une version du site en ligne

momo-fr · 3 Juillet 2008

Pas très clair, de quelle zone parles-tu ? :siffle:

Disia · 3 Juillet 2008

Je sais pas encore mettre en ligne je débute tout juste la dedans:rose::rose:

La zone dont je parle :

Merci

Anonyme · 3 Juillet 2008

Ben oui mais on ne peut rien dire comme ça. Utilise un programme pour copier les fichiers par ftp sur l'espace donné par ton FAI.

momo-fr · 3 Juillet 2008

Si je comprend bien tu as fais une image du bandeau supérieur de ton site, cette dernière est sans doute en backgroung du bloc "header" qui comporte un fond "blanc" + 2 "borders" de 3 ou 4 pixels noirs.

Le principe c'est de découper le bandeau du bloc en dessous (fond blanc + 2 filets noirs), tu fais ton visuel avec les filets dans le bandeau (filets qui suivent la forme supérieure) et tu donnes les bonnes caractéristique au bloc contenu en dessous du bandeau, les deux sont l'on au dessous de l'autre sans marges verticales.

Par exemple :

Bon, on peu y arriver autrement, mais le principe c'est que le bandeau lui comporte la partie "haute" du visuel avec la découpe et le reste en dessous juste du blanc et 2 filets droite/gauche noirs.

C'est assez clair ?

Disia · 3 Juillet 2008

gloup gloup a dit:
Ben oui mais on ne peut rien dire comme ça. Utilise un programme pour copier les fichiers par ftp sur l'espace donné par ton FAI.

Tsssss tssss:rose::rose: Je ne voulais pas le dire mais.... c'est un site pour adultes disons et.... je ne crois pas qu'un lien vers un site avec cette thématique soit le bienvenu ici:rose::rose::rose:

momo-fr :

Tu veux dire séparer les deux images ? Mais c'est déjà fait, j'ai une image "lesite.png" et une autre "fondmenu.png" et ce que je ne comprends pas.... c'est que l'image "fondmenu.jpg" continue son chemin au dela de l'image titre "lesite.png" et occasionne cet effet pas très joli qui apparait en haut, en bas, entre deux colonnes et même sur ma zone centrale....

Je suppose que ca vient du code mais je ne comprends pas où

Merci en tous cas c'est tres gentil

momo-fr · 3 Juillet 2008

Comment veux-tu que l'on comprenne ta structure avec une feuille de styles, toute l'imbrication et la notion parent/enfant sont quasi invisibles (et j'ai pas trop le temps à la littérature CSS). Tu peux monter le squelette sans contenu et nous montrer le comportement, là on peut t'aider à débrouiller le truc mais là...

Anonyme · 3 Juillet 2008

Un site de Q? C'est embêtant quand il faut demander des renseignements hein?

Mais là désolé, comme dit momo-fr, sans page html (même bidon) pas possible de t'aider

Disia · 3 Juillet 2008

Désolée:rose: donc je dois montrer le code de ma page html ?
J'ai normalement enlevé tout le contenu adulte :

Bloc de code:

<!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" >

	<head>
	
<TITLE>:)</TITLE>
<META NAME="DESCRIPTION" CONTENT=":)">
<META NAME="ABSTRACT" CONTENT=":)">
<META NAME="KEYWORDS" CONTENT=":)">
<META NAME="ROBOTS" CONTENT="index, follow" />
<META NAME="REVISIT-AFTER" CONTENT="10 days" />
<META NAME="RATING" CONTENT="ADULT" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->


    </head>

	<body>

 <BODY BGCOLOR="#85D5FE">
		
		<h1><!-- Titre en image --></h1>
		
		<div id="left">
			
			<div class="categories">
			<div class="foot">
				
				<h2><!-- Titre en image --></h2>
				
				<ul>
					<li><a href="index.html">Accueil</a></li>
				</ul>
				
			</div>
			</div>
			
			<div class="partenaires">
			<div class="foot">
				
				<h2><!-- Titre en image --></h2>
				
				<ul>
				
				    <li><a href="http://www.rien.com">Rien</a></li>
				    
			    </ul>
				
			</div>
			</div>
			
			<div class="stats">
			<div class="foot">
				
				<h2><!-- Titre en image --></h2>
				
				<ul>
				<a href="http://www.xiti.com/xiti.asp?s=374962" title="WebAnalytics">
<script type="text/javascript">
<!--
Xt_param = 's=374962&p=index';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="http://logv3.xiti.com/rcg.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="80" height="15" src="http://logv3.xiti.com/rcg.xiti?s=374962&p=index" alt="WebAnalytics" />
</noscript></a>
				</ul>
				
			</div>
			</div>
			</div>
		
		    <div id="right">
			<div class="video">
			<div class="foot">
				
				 <h2>
				 </h2>
				
			<div class="text">
				
				 <h3>
				 
				 
				 <center><img src="images/espace.jpg"></center>
				 <center><img src="images/espace.jpg"></center>
    
			         </h3>
			     
				<h3>
				
				<p id="footer">Copyright © 2008 - <a href="http://rien.com">rien</a>
					
				</h3>
					
				</div>
				
			</div>
			</div>
			
		</div>
		
		<div class="clear"></div>
				
	</body>
</html>

Merci encore:rose::rose:

Problème CSS apparence graphique

Disia

Membre actif

Anonyme

Invité

momo-fr

Ancien Aveyronnais

Disia

Membre actif

Anonyme

Invité

momo-fr

Ancien Aveyronnais

Disia

Membre actif

momo-fr

Ancien Aveyronnais

Anonyme

Invité

Disia

Membre actif

Sujets similaires