28220 sujets

CSS et mise en forme, CSS3

Double pb : scrollbar et largeur auto

Bonjour,

Voila je me suis basé sur le gabarit css suivant pour créer mon site. http://css.alsacreations.com/modeles/modele12.htm

J’ai néanmoins 2 problèmes qui se sont créés.
Dans la partie centrale j'ai deux div superposé un avec une image (qui fait mon arrière plan) et l'autre avec le texte qui est au dessus de l'image.
Mes deux pb sont les suivant :
Quand je mets width : auto pour le div de l’image et pour celui du texte les deux dépassent de ma page alors que ma page est elle-même dans un div avec width :100% et height : 100%. De plus, je veux que cette partie soit scrollable. Mais comment faire pour avoir un seul scoll et pour que l’image et le texte descende ou remonte en même temps.

Voila l’extrait de mon code css actuel (j’ai mis deux fois scroll : auto, bien sûr ça ne marche pas, mais je ne sais pas comment régler ce pb)


.haut {
width: 100%;
height: 126px;
background-color: #fff;
font-size: 36px;
padding: 10px;
}
.conteneur {       /*div qui contient l'ensmble de ma page*/
width: 100%;
height: 100%;
position: absolute;
}

.gauche {
position: absolute;
left: 0;
width: 220px;
height: 338px;
background-image: url(gauche.gif);
}

#arriere {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
margin-left: 220px;
overflow: auto;
padding : 10px;
height: 300px;
width : auto;
}

#texte {
position: absolute; /* dimension et positionnement du bloc conteneur du texte */
margin-left: 220px;
overflow: auto; 
padding : 10px;
height: 300px;
width : auto;
}

#arriere img {
width : 100%;
}

.bas {
width: auto;
height: 30px;
background-color: #fff;
color: #fff;
font-size: 12px;
padding: 0px;
}

Merci de votre aide.
Elo
Modifié par Elo44 (30 May 2005 - 15:34)
Peux tu mettres ton code HTML aussi ?
car j'ai l'impression que tu pourrais mettre #arriere et #texte ensemble avec #texte qui contiendrai en plus :
background-url: url(chemin/de/ton/image.jpg);
Voila mon code html.


...
<body>
<div class="conteneur">

<div class="haut">
<? include ('./_entete.html'); ?>
</div>

<div class="gauche"> 
<? include('fnath-menu.html') ?>
</div>

<div id="arriere">
<td background='./gif/frise_verticale.gif' width=6></td>
<img src='./jpg/test_fond.jpg'>
</div>

<div id="texte">
<?include($_GET['page'])?>
</div>

<div class="bas">
<? include ('./_pied.html'); ?>
</div>

</div>
</body>
</html>


Mais je ne pense pas que je puisse mettre mon image en background, car je veux que mon site s’adapte en fonction de la résolution de l’utilisateur. C’est pourquoi je me suis inspiré du code proposé par alsacreations qui permettait de créer un arrière plan étirable. (je l’ai modifié pour pouvoir insérer plusieurs paragraphes sans qu’il soit l’un sur l’autre). Mais la en fait, j’ai l’impression qu’il ne s’adapte plus.

Pour résumer ce que je veux c’est avoir mon image en fond qui s’adapte à la taille du div qui la contient. Mon texte qui se superpose à cette image, et le tout qui descend en même temps grâce à un scrollbar. En fait par rapport au gabarit que j’ai pris (voir premier post, je veux que mon texte et mon image s’adapte à la partie centrale).

J’espère que je suis assez clair.

Elo
Voilà ce que j'ai obtenu
Une image avec le texte par desssus qui bouge avec le scroll
Par contre sa fonctionne bien sous FireFox et compatible, par contre sous IE ça n'a l'air super ...

voici le code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html {
	height: 99%;
	width: 99%;
	margin: 0px;
	padding: 0px;
}

#fond {
	/*border: 1px solid green;*/
	position: absolute;
	width: 100%;
	height: 100%;
	/*width:auto;
	height: auto;*/
	z-index: -1;
}

#texte{
	/*border: 1px solid blue;*/
	position:absolute;
	/*height: 10000px;*/
	/*height: inherit;*/
	/*height: 100%;*/
	/*width: auto;*/
	/*overflow:auto;*/
}

#conteneur {
	/*border: 1px solid red;*/
	position:absolute;
	left: 10%;
	width: 800px;
	height: 600px;
	overflow: auto;
}
</style>
</head>
<body>
<div id="conteneur">
  <div id="texte"><img id="fond" src="./duron900.jpg"> DEBUT artie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste<br />
    e la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la laartie avec du contenu occupant le reste de la la <br />
	FIN</div>
</div>
</body>
</html>
Je viens de regarder ton code sur IE ça fonctionne Smiley smile . Ca ne marchait pas toi ?

Je vais essayer de comprendre comment tu as fait et je vais essayer de l'intégrer à mon site, je croise les doigt ... je reviens pour dire si ca marche.

En tout cas merci, c'est sympa de me venir en aide.
Elo
Premier bon point, ca passe nikel sur mon site et sous IE aussi.

Mais le problème est que je n'arrive pas à trouver comment faire pour que ça s'adapte aux différentes résolutions.

En effet si je garde le mêm code que toi, l'image s'adape en fonction de la taille qu'on choisit de mettre au "conteneur". Mais dans ce cas, il faut définir une taille fixe au "conteneur.

Moi j'aimerais que la taille de l'image s'adapte et qu'en plus la largeur du conteneur soit adaptable. Je sais je suis exigente, mais si c'est possible autant essayer de trouver la solution, même si j'y passe des heures Smiley confus .

J'ai essayer de modifier les width des différents div les mettre en auo, en 100% rien y fait, j'ai un peu de mal à trouver une logique parfois ...

Si vous pouvez me venir en aide, n'hésitez pas j'attend que ça ....

Merci.
Elo
Sujet clos
Aller à