Caler background et contenu

**eillon** · 16/09/2011, 11h43

Bonjour,

Je nage....

Je ne comprends pas ce qu'y ne va pas, j'ai beau faire et refaire, je m'y perd.
Je souhaite mettre un texte dans un cadre, mais je veux que celui-ci soit extensible en fonction du contenu.

Les exemples valent mieux que les paroles :

Tout est là

Je n'arrive pas à caler mes images avec les textes et garder mon corps extensible.

Ne vous fiez pas trop à mon contenu html et css, ils ont été modifié x fois mais sans trouver la solution.

Merci

**NoSmoking** · 16/09/2011, 14h32

Bonjour,

Je nage....

rasurres moi tu sais nager au moins

Je n'arrive pas à caler mes images avec les textes et garder mon corps extensible.

bon départ de faire la planche

Ne vous fiez pas trop à mon contenu html et css, ils ont été modifié x fois mais sans trouver la solution.

la par contre cela se gatte.

Bon trêves de plaisanterie
un fichier HTML, qu'il soit de test ou non, DOIT avoir une structure correcte ce qui n'est pas le cas dans ce que je viens de voir.
avec :
- un DOCTYPE
- un body
...c'est simplement mieux, d'autre écriture sont permises

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grenadine et ses petits.com</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

Du coté de la construction

concernant la DIV top :
...si tu mets une balise H1 dans une DIV il te faut mettre le margin de H1 à 0 ou alors augmenter la hauteur de la background-image, mais tu peux transferer le style de H1 dans la DIV, dans ce cas il te faut également préciser la position verticale du background.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#top{
  text-shadow: 2px 2px 4px #fff;
  font-size: 23px;
  font-weight: bold;
  /* ajout line-height */
  line-height : 40px;
  color: #e7549b;
  background: url(accueil_img/bg_top.png) no-repeat;
  /* ajouter top */
  background-position: top center;
}

concernant la DIV bottom :
...il te faut préciser une hauteur qui correspond à la hauteur de l'image du background, ici 28px et/ou mettre la position verticale de celle ci à bottom

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#bottom{
  background: url(accueil_img/bg_bottom.png) no-repeat;
  /* ajouter bottom */
  background-position: bottom center;
  /* hauteur de l'image */
  height : 28px;
}

concernant la DIV center :
...No problème !

Au final on obtiens un fichier qui ressemble à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grenadine et ses petits.com</title>
<style type="text/css">
 
#bottom{
  background: url(accueil_img/bg_bottom.png) no-repeat;
  /* ajouter bottom */
  background-position: bottom center;
  /* hauteur de l'image */
  height : 28px;
}
#top{
  text-shadow: 2px 2px 4px #fff;
  font-size: 23px;
  font-weight: bold;
  /* ajout line-height */
  line-height : 40px;
  color: #e7549b;
  background: url(accueil_img/bg_top.png) no-repeat;
  /* ajouter top */
  background-position: top center;
}
#center{
  text-shadow: 2px 2px 4px #ffffff;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  background: url(accueil_img/bg_center.png) repeat-y;
  background-position: center;
}
</style>
</head>
<body>
  <div id= "top" align="center">
    Titre
  </div>
  <div id= "center" align="center">
    <span>texte ou image</span>
  </div>
  <div id= "bottom" align="center">
  </div>
</body>
</html>

**eillon** · 16/09/2011, 14h55

Oh merci grand NoSmoking !

Que serais-je devenu sans toi.
Je sais nager, mais la fatigue aidant, j'aurais fini par me noyer.
En fait, mes plus gros soucis (en résumant) :

Hauteur des images
Positions bg_top et bg_bottom.

Quel sot je suis!
Comme si je ne le savais pas...
A la fois, c'est la première fois que je fais su css sur un fond extensible...

Merci encore.

**eillon** · 16/09/2011, 15h05

J'y pense, serait-il pas mieux de faire une div générale ou j'intègre le tout dedans afin de pouvoir tout déplacer en une fois ou de placer mon texte ou bon me semble en fonction de l'image à venir.

Texte à gauche, image à droite ou inversement...
Mais là, tout part en vrac

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grenadine et ses petits.com</title>
<style type="text/css">
 
 #top{
  text-shadow: 2px 2px 4px #fff;
  font-size: 23px;
  font-weight: bold;
  /* ajout line-height */
  line-height : 40px;
  color: #e7549b;
  background: url(accueil_img/bg_top.png) no-repeat;
  /* ajouter top */
  background-position: top center;
}
#bottom{
  background: url(accueil_img/bg_bottom.png) no-repeat;
  /* ajouter bottom */
  background-position: bottom center;
  /* hauteur de l'image */
  height : 28px;
}
#center{
  text-shadow: 2px 2px 4px #ffffff;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  background: url(accueil_img/bg_center.png) repeat-y;
  background-position: center;
}
.texte{
 float: left;
 width: 250px;
 margin-left: 15px;
 }
 .image{
 float: right;
 width: 250px;
 margin-left: 15px;
 }
</style>
</head>
<body>  
 
<div id= "cadre" align="center">
 
  <div id= "top">
    Connecteurs de poussettes
  </div>
  <div id= "center">
    <span class="texte">si je mets des images partout...<br />ça le fait ou pas ?</span>
	<span class="image"><a href="http://www.grenadineetsespetits.com" target="_blank" title="" alt=""><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" alt="coupon de r&eacute;duction premier age" border="0"></img></a></span>
  </div>
  <div id= "bottom">
  </div>
  </div>
</body>
</html>

En gros, comme ici et pareil pour le texte.

**NoSmoking** · 16/09/2011, 19h03

le plus simple serait de mettre une TABLE, aisance et compatibilité assurée, mais on peut également le faire avec des DIV, plus dans l'air du temps

, dont on aura pris soin de mettre le display en inline-block et qui feront environ la moitié de la DIV center.
de plus
- on placera celles de gauche en float:left
- on laissera celles de droite libre.
la déclaration CSS est donc pour toutes les DIV de la DIV center

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#center div{
  display : inline-block;
  text-align : center;
  width : 250px;  /* a ajuster eventuellement */
  height : 160px; /* a ajuster eventuellement */
}

pour les DIV de gauche il suffit de faire

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.left {
  float : left;
}

la construction de la page devient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id= "cadre">
  <div id= "top">
    Connecteurs de poussettes
  </div>
  <div id= "center">
    <div class="left">
      <ul>
        <li>Dwight D. Eisenhower</li>
        <li>Richard Nixon</li>
        <li>Gerald Ford</li>
        <li>Ronald Reagan</li>
        <li>George Bush</li>
        <li>George W. Bush</li>
      </ul>
  	</div>
    <div>
       <a href="http://www.grenadineetsespetits.com" target="_blank"><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" title="Oups !"  alt="Connecteurs de poussettes" border="0"></a>
    </div>
    <div class="left">
    	<a href="http://www.grenadineetsespetits.com" target="_blank"><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" title="Oups !"  alt="Connecteurs de poussettes" border="0"></a>
    </div>
    <div>
    	<a href="http://www.grenadineetsespetits.com" target="_blank"><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" title="Oups !"  alt="Connecteurs de poussettes" border="0"></a>
    </div>
    <div class="left">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </div>
    <div>
    	<a href="http://www.grenadineetsespetits.com" target="_blank"><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" title="Oups !"  alt="Connecteurs de poussettes" border="0"></a>
    </div>
    <div class="left">
    	<a href="http://www.grenadineetsespetits.com" target="_blank"><img src="http://www.grenadineetsespetits.com/img/p/118-431-thickbox.jpg" width="150" height="150" title="Oups !"  alt="Connecteurs de poussettes" border="0"></a>
    </div>
    <div>une vide obligatoire</div>
  </div>
    <div id= "bottom"></div>
  </div>
</div>

il est à noter que l'on DOIT IMPERATIVEMENT finir par une DIV droite, même vide, pour forcer la DIV center à s'étirer.

Le dernier point concerne la DIV cadre, avec la déclaration CSS suivante elle s'auto centrera

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#cadre {
  width : 525px; /* largeur de l'image de background */
  margin : auto;
}

Je pense qu'il existe d'autre méthode pour y arriver, mais quand on se noie on ne regarde pas la terre qui nous accueille, on se restaure puis on la cultive pour survivre! (*)

(*)mon dieu! il faut que je me repose

Caler background et contenu

HTML

Vue hybride

Discussions similaires

Partager

Partager