28173 sujets

CSS et mise en forme, CSS3

Corps de page bcp trop large par rapport taille du site

bonsoir à tous!

voilà je suis chargée de créer un site de rencontre mais je me retrouve face à un problème que je n'arrive pas à regler. ca n'est pas un problème énorme mais c tout de même pas normal et je voudrais rendre un travail clean pour satisfaire mon client (c'est la première fois que l'on me confie la création d'un site!).

voici l'adresse temporaire où j'ai placé mes pages por que vous puissiez y jeter un oeil

Site Souffle d'ange

Le problème est que le corps de ma page est immense par rapport à la hauteur de mon site! (la barre de srcoll descend vraiment très bas, elle ne devrais même pas exister, cela est très flagrant dans la page index)

ca me fait ca depuis que j'ai mis comme fond un tableau (car mon fond est découpé en parties pour un chargement plus rapide) suivit d'une div "conteneuse", que j'ai placée en relative pour qu'elle vienne se positionner par dessus le tableau...

voici le code html d'une des pages les plus simple ( la page





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> A la rencontre de l&rsquo;autre</title>
<meta name="description" content=" Un concept de rencontre unique! Un souffle d&rsquo;ange dans votre vie!"/>
<meta name="DC.title" content=" Un concept de rencontre unique! D&eacute;couvrez le vite! " />

<link type="text/css" rel="stylesheet" href="css/style-validations-savoirplus.css" />
</head>







<body><div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
			<img src="fonds/fine-bande/fine-bande_01.jpg" width="269" height="41" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_02.jpg" width="481" height="41" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_03.jpg" width="50" height="41" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="fonds/fine-bande/fine-bande_04.jpg" width="269" height="114" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_05.jpg" width="481" height="114" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_06.jpg" width="50" height="114" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="fonds/fine-bande/fine-bande_07.jpg" width="21" height="13" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_08.jpg" width="169" height="13" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_09.jpg" width="40" height="13" alt=""></td>
		<td colspan="2">
			<img src="fonds/fine-bande/fine-bande_10.jpg" width="520" height="13" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_11.jpg" width="50" height="13" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="fonds/fine-bande/fine-bande_12.jpg" width="21" height="104" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_13.jpg" width="169" height="104" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_14.jpg" width="40" height="104" alt=""></td>
		<td colspan="2">
			<img src="fonds/fine-bande/fine-bande_15.jpg" width="520" height="104" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_16.jpg" width="50" height="104" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="fonds/fine-bande/fine-bande_17.jpg" width="21" height="328" alt=""></td>
		<td rowspan="2">
			<img src="fonds/fine-bande/fine-bande_18.jpg" width="169" height="328" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_19.jpg" width="40" height="28" alt=""></td>
		<td colspan="2">
			<img src="fonds/fine-bande/fine-bande_20.jpg" width="520" height="28" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_21.jpg" width="50" height="28" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="fonds/fine-bande/fine-bande_22.jpg" width="40" height="300" alt=""></td>
		<td colspan="2">
			<img src="fonds/fine-bande/fine-bande_23.jpg" width="520" height="300" alt=""></td>
		<td>
			<img src="fonds/fine-bande/fine-bande_24.jpg" width="50" height="300" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="169" height="1" alt=""></td>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="40" height="1" alt=""></td>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="39" height="1" alt=""></td>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="481" height="1" alt=""></td>
		<td>
			<img src="fonds/fine-bande/spacer.gif" width="50" height="1" alt=""></td>
	</tr>
</table>



<div id="principal_fine_bande">


<div id="soufledange"><a href="index.html"><img alt="retour &agrave; l'accueil rencontre" title="retour &agrave; l'accueil rencontre" border="0" src="images/accueil.gif" /></a></div>



<div id="flash">
  <object type="application/x-shockwave-flash" data="diaporama-flash/essai.swf" width="120" height="90">
    <param name="movie" value="diaporama-flash/essai.swf" />
    <param name="quality" value="high" />
  </object>
</div>




<div id="conteneur_texte">

<div id="texte"><br /><br /><br /><br />
L&rsquo;annonce est en cours de validation. 
Attention! la validation de cette annonce peut prendre jusqu'&agrave; quelques jours.
Vous recevrez un mail d&egrave;s validation par l'&eacute;quipe souffledange.
Merci de votre compr&eacute;hension.<br /><br /><div class="droite"><a href="#"><i>la suite...</i></a></div>
</div>
</div>





<div id="bloc2">
<table width="590" border="0" cellspacing="0" cellpadding="0">
    <tr>
	<td width="39"></td>
      <td width="110"><a href="service-rencontre.html">Conditions generales</a></td>
      <td width="60"><a href="contact.html">Contact</a></td>
      <td width="85"><a href="temoignages-de-rencontre.html">Temoignages</a></td>
      <td width="80"><a href="rencontre-partenaires.html">Partenaires</a></td>
      <td width="75"><a href="afilliation-rencontre.html">Afilliation</a></td>
      <td><a href="rencontre-qualite.html">Service</a></td>
      <td><a href="creation.html">Creation</a></td>
    </tr>
  </table>
  <br />
  <table width="590" border="0" cellspacing="0" cellpadding="0">
    <tr>
	<td width="39"></td>
      <td width="95"><a href="rencontre-amour.html">Rencontre amour</a></td>
      <td width="95"><a href="rencontre-amitie.html">Rencontre amitie</a></td>
      <td width="95"><a href="rencontre-celibataire.html">Rencontre projet</a></td>
      <td width="95"><a href="rencontre-femme.html">Rencontre femme</a></td>
      <td width="95"><a href="rencontre-serieuse.html">Rencontre serieuse</a></td>
      <td><a href="club-de-rencontre.html">rencontre</a></td>
      
    </tr>
  </table></div>
</div>
</div>
</body>
</html>





et voici le code de ma css:






body{
		margin-bottom:0px;
		margin-left:0px;
		margin-right:0px;
		margin-top:10px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
}



#principal_fine_bande{
		width:800px;
		height:600px;

		
}


#soufledange{
		position:relative;
		top:-535px;
		right:258px;
		width:149px;
		height:73px;
		padding:0 0 0 0;
}
#flash{
		position:relative;
		top:-498px;
		right:295px;
		width:120px;
		height:90px;
		padding:0 0 0 0;
}








#bloc2{
		position:relative;
		top:-398px;
		left:94px;
		width:590px;
		height:30px;
		font-size:8px;
		text-align:left;
}

#bloc2 a:link{
		color:#FFFFFF;
		font-size:8px;
		text-decoration:none;
}
#bloc2 a:hover{
		color:#FFFFFF;
		font-size:8px;
		text-decoration:underline;
}
#bloc2 a:visited{
		color:#FFFFFF;
		font-size:8px;
		text-decoration:none;
}
#bloc2 a:action {
		color:#FFFFFF;
		font-size:8px;
		text-decoration:none;	
}	




.droite{
		text-align:right;
		
}

.droite a:link{
		color:#523316;
		font-size:12px;
		text-decoration:none;
}
.droite a:hover{
		color:#523316;
		font-size:12px;
		text-decoration:underline;
}
.droite a:visited{
		color:#523316;
		font-size:12px;
		text-decoration:none;
}
.droite a:action {
		color:#523316;
		font-size:12px;
		text-decoration:none;
}


#conteneur_texte {
		top:-600px;
		position:relative;
		width:515px;
		left:100px;
		
}




#texte{
		color:#523316;
		text-align:left;
		font-size:12px;
		width:515px;
		height:190px;
		padding:0 0 0 0;
		top:400px;
}
#texte i{
		font-size:14px;
}

#texte a:link{
		color:#523316;
		font-size:12px;
		text-decoration:underline;
}
#texte a:hover{
		color:#523316;
		font-size:12px;
		text-decoration:underline;
}
#texte a:visited{
		color:#523316;
		font-size:12px;
		text-decoration:none;
}
#texte a:action {
		color:#523316;
		font-size:12px;
		text-decoration:none;
}



merci beaucoup pour votre aide!
magouya
Administrateur
Bonsoir magouya et bienvenue ici Smiley cligne

Puisqu'il ne s'agit pas d'une question de structure (HTML), mais de mise en page (CSS), je déplace dans le salon correspondant.

Bonne chance Smiley smile
Bonjour,

C'est l'effet normal de la position relative : la hauteur du conteneur est calculée en fonction de la position en flux de l'élément, avant son déplacement par la position relative.

Cela pourrait être évité en recourant à des positions absolues.

Cela dit, ce type de mise en page par superposition est très fragile et à éviter. Il suffit en effet d'une taille de caractère par défaut imprévue, ou d'un agrandissement des tailles de caractères, etc. pour que les textes ne se superposent plus à l'endroit prévu.
Modifié par Laurent Denis (05 Dec 2005 - 10:01)
hello, tout d'abord merci d'avoir répondu!!

mais alors quelle serait la solution?

car au départ j'avais mis mes images de fond "entières" appelées par la css.
mais la personne pour qui je fais le site trouve le temps de chargement du fond trop long (lorsque jai fait des essais en lignes, ca prenait 1 seconde avant que le fond n'arrive, c'est peu comme ca mais ca fait bizarre car le contenu texte apparaissait avant le fond...)

j'ai bien essayé de réduire la qualité de mes fonds (jusqu'à 30% de qualité sans image ready, mais ca n'est pas suffisant, et ca altère l'image.)

alors voilà je ne sais pas quelles sont les autres solutions!

moi je m'occupe de la partie HTML, et quelqu'un d'autre va s'occuper d'intégrer le PHP, y a t-il d'autres moyens d'appeler un fond en PHP? peut-on par exemple mettres les fonds en cache à l'avance??!!

Peut-etre peut-on trouver une solution de ce côté la?

merci de votre aide!
bonjour à tous!

Je sollicite à nouveau votre aide concernant mon site, mais pour autre chose cette fois (j'ai trouvé une sollution à mon précédent problème)
pour cette page:
http://users.rockweb.org/magouya/banniere/ames-soeurs.jpg

ma cliente voudrais que dès que l'on clique sur un profil, le bandeau en papier gris suive cette selection, et se positionne sur la ligne du tableau sélectionnée.

Je ne sais pas comment faire ca? sachant que je ne peu pas fair ca en flash!
Est ce que quelqu'un à une solution à me proposer? Smiley confused

merci beaucoup à bientôt!
alors jai trouvé quelque chose, mais jai encore un probleme.

voici mon code html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="css/essai-java.css" rel="stylesheet" type="text/css" />
</head>

<body><table width="540" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover='this.className="class1";' onmouseout='this.className="classoriginal";'>
    <td height="60">bonjour</td>
    <td>hello</td>
    <td>bomdia</td>
  </tr>
  <tr onmouseover='this.className="class1";' onmouseout='this.className="classoriginal";'>
    <td height="60">merci</td>
    <td>thanks</td>
    <td>obrigado</td>
  </tr>
</table>

</body>
</html>



et voici ma css;




.class1 {

background-image:url(../images/bandeau-selection540-60.gif);

}

.classoriginal {
}




mon probleme est que l'image qui apparait est coupé selon la taille de la cellule, alors qu'elle devrais faire toute la ligne du tableau...
je vais continuer de chercher, mais si quelqu'un peut me filer un petit coup de main! meri beaucoup!
Sujet clos
Aller à