28172 sujets

CSS et mise en forme, CSS3

Contenu qui dépasse le reste de la page

Pages :
Je suis en phrase de test pour un site web et dans ma mise en page, je vois que le contenu dépasse le reste de la page lorsqu'il atteint un certain limite. J'ai déjà essayé de mettre le height en auto, sans rien et rien marche. Que puis faire ?

mon css:


body{
	background-color:#c5c4cc;
	
}
#wrap {width: 876px;margin:0 auto;position:relative;background-color:#FFFFFF;}

#banniere{
	background-image:url(img/banniere.jpg); 
	margin:auto;
	height:245px; 
	width:876px; 
	}
#banniere a{
	display:block;width:874px;height:200px;}
	
.menu {
  background-image: url(img/menu.png);
  background-repeat:no-repeat;
  width: 935px;
  height: 82px;
  position: relative;
  display: block;
  margin:0 auto;
  right:26px;
}
.menu ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  }
.menu ul li {
  float: left;
  margin: 0px;
  position: relative;
  margin:35px 31px;
  font-family:"Myriad Pro", Calibri;
  color:#FF0000;
  font-size:18px;
}
.menu ul li a{color:#ee1c8c;}
.menu ul li a:hover{border-bottom:dotted 8px white;}
.menu ul li.encours a{color:#891c56;} 
.menu ul li.encours1 a{color:#891c56;} 
.menu ul li.encours2 a{color:#891c56;} 
.menu ul li.encours3 a{color:#891c56;} 
.menu ul li.encours4 a{color:#891c56;} 



#bordure{
	background-color:#C5C4CC;
	height:798px;
	-moz-border-radius:10px 10px 10px 10px;
	margin:0 auto;
	position:relative;
	top:19px;
	width:800px;}
	
.contenu{-moz-border-radius:10px 10px 10px 10px;
	background-color:white;
	left:7px;
	margin:auto;
	position:absolute;
	top:9px;
	width:785px;}
#footer{background-image:url(img/menu.png);position:relative;;width:935px;height: 82px; top:-82px;left:-26px;}



Merci
Bonjour.
Il serait préférable que l'on ait également le code HTML sous la main pour pouvoir t'aider plus facilement.
Mais à vue d'oeil, je dirais que le problème vient du fait que, si .contenu est bien imbriqué dans #bordure comme je le pense, le problème vient du fait que .contenu est positionné de manière absolue, et que #bordure a une hauteur fixe.
Commence par remplacer le height: 798px; par min-height: 798px;, et remplace supprime le positionnement absolu de .contenu.

Et tu ne devrais pas abuser autant des propriétés de positionnement left, top, etc., et utiliser plutôt padding ou margin.
Merci bien pour ta réponse.

Tu pourras trouver le code html en faisant ctrl u sur firefox, tout le code est là dessus.
Salut,

Quelques remarques et questions.

Pourquoi mettre ton image "banniere.jpg" dans ta feuille de style ?

A priori je dirais qu'il s'agit... de la bannière de ton site (parce que n'ayant pas de lien vers ta page, on ne peut pas voir le code html). C'est donc un élément de contenu qui doit plutôt se trouver dans la page html. Ça te permettrait d'avoir un comportement de type block. D'ailleurs y-a-t-il une raison pour que la largeur et la hauteur ne soit pas la même sur #banniere et #banniere a ?

Le ; est inutile pour la dernière valeur. Pour le #wrap, #fff fonctionne aussi bien que #FFFFFF.

Dans ".menu ul li {font-family:...}", rajoute une famille générique comme sans-serif. Tout le monde n'a pas "Myriad Pro" et Calibri.

Tu peux simplifier ça :

.menu ul li.encours a{color:#891c56;}  
.menu ul li.encours1 a{color:#891c56;}  
.menu ul li.encours2 a{color:#891c56;}  
.menu ul li.encours3 a{color:#891c56;}  
.menu ul li.encours4 a{color:#891c56;}


par ça :

.menu ul li.encours a, .menu ul li.encours1 a, .menu ul li.encours2 a, .menu ul li.encours3 a,  
.menu ul li.encours4 a {color:#891c56}


Tout le monde n'a pas firefox (moi si mais bon), donc plutôt que ça :


-moz-border-radius:10px 10px 10px 10px;


Mets plutôt ça :


-moz-border-radius:10px;
border-radius:10px; /* Opéra 10.5 */
-webkit-border-radius:10px; /* Chrome et Safari */


Dans le footer, il y a un ; en trop "position:relative;;width"
alesson a écrit :
Merci bien pour ta réponse.

Tu pourras trouver le code html en faisant ctrl u sur firefox, tout le code est là dessus.
Je sais, merci. Smiley lol
C'est juste que c'est toi qui demande un coup de pouce, donc je trouvais logique que tu fasses l'effort de fournir le code. Smiley cligne 

<!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=utf-8" />
 <meta name="description" content="Votre agence de placement au pair in France. "/>
    <meta name="keywords" content="au pair, aupair, France, language course,live in France,study in France,"/>
    <meta name="copyright" content="International Student Agency"/>
    <meta name="author" content="Alesson Souza"/>
    <meta name="email" content="contact@aupairinfrance.com"/>
    <meta name="Distribution" content="Global"/>

<title>Au Pair in France- Welcome to our site Au Pair in France</title>

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

<body>
<div id="wrap">
<div id="banniere"><a href="index.html"></a></div>
<div class="menu">
<ul>
<li class="encours"><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="#">Become an Au Pair</a></li>
<li><a href="#">Host Families</a></li>
<li><a href="#">How to Apply</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="bordure">
<div class="contenu">
<h1>Welcome to our site Au Pair in France</h1>
<p><strong>Au Pair in France</strong> agency assures first class services both to you who want to become au pair and to French families who wish to welcome an <strong>au pair</strong> of English speaking.
  <br />
  <br />
  Nous offrons un <strong>service</strong> très personnalisé ( a personal service to our clients) grâce l’étude minutieuse des dossiers de candidature puis à l’entretien téléphonique approfondi. Ceci nous permet de connaitre parfaitement les attentes de chacune des deux parties ( for all parties )et réaliser ainsi des <strong>placements</strong> réussis ( careful matching and successfull placing) .
  <br />
  <br />
  <strong>Au Pair in France</strong> est à vos cotés tout au long du processus de<strong> placement au pair</strong>, depuis votre inscription à l’agence jusqu’à la fin du de ton<strong> séjour en France</strong>. (through out the stay in your family).
Notre leitmotiv : provoquer des rencontres réussies pour une cohabitation harmonieuse ?????</p>
</div>
</div>
<div id="footer">
<h6>Au Pair in France 2010 -All Rights Reserved-<br />
</h6>
</div>
</div>
</body>
</html>
Bonjour,

phpdoesnotcare a écrit :
C'est juste que c'est toi qui demande un coup de pouce, donc je trouvais logique que tu fasses l'effort de fournir le code. Smiley cligne
Sauf qu'en général on recommande plus une page en ligne que l'intégralité du code sur le forum...
J'ai réalisé quelques modifications, mais vous verrez bien que le contenu finit et la bordure continue. J'aimerais faire en sorte que la bordure grise s'arrête avec le contenu , la blanche. Comme sur la page d'accueil

Pour l'erreur voir le cote "about-us"

http://is-agency.biz/wordpress/
J'ai un petit soucis de menu également, toutes les entrées ne s'affichent pas sur une seule ligne, il te faut réduire les marges sur des éléments de ton menu. Avec des marges de 21px (au lieu des 31px indiqués), l'ensemble du menu se trouve sur la même ligne. A toi d'ajuster ces marges Smiley cligne

Concernant le contenu, il est positionné en absolu. L'élément parent ne tiendra donc pas compte de sa hauteur. En supprimant ce positionnement, tout rentre dans l'odre.
Modifié par octopus984 (03 May 2010 - 13:12)
Oui, j'ai relu la question et j'ai du coup édité mon message.

Il te faut supprimer le positionnement absolu de ton contenu (.post_content), ainsi que la hauteur minimum (min-height) de l'élément parent (#bordure).
j'ai fait quelques modifications, j'arrive pas à faire en sorte que la bordure grise soit un peu en bas que celle en blanc
Pages :
Sujet clos
Aller à