Mise en forme possible avec CSS?

Bonjour,

je suis nouveau sur le forum.
j'ai bien parcouru différents tuto et ai essayé de les refaire,notamment le tuto pour réaliser une page sur 3 colonnes.

Je n'arrive pas à appliquer tout ça à mon projet.

j'ai mis une image pour vous expliquer mon problème. J'aimerais déjà savoir si ma mise en forme est réalisable en css.

!

Sur l'image, les blocs 1 et 2 doivent s'étirer horizontalement, le bloc flash étant centré sur l'écran, quelle que soit la résolution.
Les blocs 3 et 4 doivent s'étirer horizontalement et verticalement, vu que le bloc texte peut s'agrandir verticalement.

les blocs 1et2 contiennent une image répétée, les blocs 3 et 4 contiennent une autre image répétée (peut-être avec des dégradés).

Merci en tout cas de me dire si c'est faisaible!

A+

Merci aussi pour votre site et forum très très utile

bonjour

oui, ça me parait faisable.

tes blocs 1 et 2 contiennent-t'ils la même image de fond ? si oui, tu peux en faire un seul bloc sur toute la largeur et faire venir le bloc flash par-dessus.

si tu as besoin d'un coup de main plus précis, donne davantage de précisions : le code que tu as déjà fait, les images que tu comptes utiliser, mieux encore un lien vers la page en ligne...

merci de ta réponse verdan !

les blocs 1 et 2 contiennent la même image effectivement.
les blocs 3 et 4 contiennent une autre image mais identique pour eux deux (mais là pas possible de fusionner).

donc si je te comprends bien, j'aurais un div contenant l'image répétée (fusion de mes blocs 1 et2), un autre div pour le flash qui vient par dessus.

comment faire pour positionner les blocs 3, texte et 4 en dessous des 2 autres?

je vais faire une page et poster mon code.

quel code utilises-tu pour positionner un div sur un autre?

ha ok j'ai trouvé!

en fait je fais un div auquel j'applique le code suivant :

background-image: url(../images/fonds/1px-vertical-menu.png);
	background-repeat: repeat-x;

Et j'insère mon élément flash dans ce div, et je centre le flash.

Jusque là, c'est juste ?

il y a plusieurs possibilités, mais ici on pourrait faire comme ceci :

<div id="header">
<object etc. ton code flash></object>
</div>

#header{
background:url(ton_image.jpg) repeat-x;}

ton flash doit avoir un fond opaque pour cacher l'image de fond.

PS oui c'est juste ! tu as posté entretemps...
Modifié par verdan (14 Feb 2008 - 15:09)

bon, ça progresse !

j'ai refait une image de la structure:



j'ai ajouté un div GLOBAL pour contenir le tout afin de pouvoir centrer le div TEXTE. le texte ne s'aligne pas à gauche du div TEXTE, pourquoi?

Maintenant, il reste le plus déliquat: ajouter 2 div à gauche et à droite du DIV texte pour mettre les images de fond. Quelqu'un a une idée, je vois pas du tout comment faire! (je vais bidouiller en attendant!)

mon code css :

body {
margin: 0;
text-align: center; 
}
.global {
     margin-left: auto;
     margin-right: auto;
     width: 100%; /* largeur obligatoire pour être centré */
     }
.div1 {
	background-image: url(../images/fonds/1px-vertical-menu.png);
	background-repeat: repeat-x;
}
.div3 {
    width: 920px;

Merci encore pour tout!
Modifié par troubadour (14 Feb 2008 - 15:44)

attention car si tu mets text-align:center au body, le texte sera centré partout, il vaut mieux ne le centrer que là où c'est nécessaire...(cette propriété centre le texte ou les images, pas les div)

dans la mesure où tu prends un width:100 %, il n'est pas utile de centrer, donc ton global n'est pas utile du moins là. Si tu prends moins de 100% alors oui.

maintenant pour le div texte et ses "bas-côtés" :
Html

<div id="gauche">
<div id="droite">
<div id="centre>
ton contenu
</div>
</div>
</div>

CSS

#gauche{
background:url(../images/fonds/1px-vertical-menu.png) repeat-y;}
#droite{
background:url(../images/fonds/1px-vertical-menu.png) top right repeat-y;}
#centre{
width:ce que tu veux;
margin:auto;
text-align:ce que tu veux;}

yes merci!
j'ai fait comme tu me l'as indiqué, seulement je n'ai pas la mise en page que je voudrais:



les divs se mettent l'un en dessous de l'autre.

c'est pour ça que j'avais utilisé "center" pour le body....

tu as une idée?

Merci !

en l'absence de contenu, il faut pour pouvoir visualiser les div donner une hauteur artificielle en em. (sachant que lorsqu'il y aura du contenu c'est lui qui donnera sa hauteur à la div)

de plus, je ne vois pas tes images de fond et tu ne sembles pas avoir donné un width à #centre, ce qui est évidemment nécessaire pour qu'il n'occupe pas toute la largeur de page.

#gauche{
background:url(../images/fonds/1px-vertical-menu.png) repeat-y;}
#droite{
background:url(../images/fonds/1px-vertical-menu.png) top right repeat-y;}
#centre{
width:[#red]ce que tu veux= largeur de ton flash par exemple[/#];
height:20em;
margin:auto;
text-align:[#red]ce que tu veux[/#];}

dans le code HTML fais aussi bien attention de mettre les <div> et </div> comme ne les ai mises car si tu refermes différemment ça ne marchera pas: elles doivent être imbriquées et non successives.
Modifié par verdan (15 Feb 2008 - 14:57)

salut Verdan !

merci de ton aide ! j'étais absent ces jours et je m'y remets !

j'ai appliqué ton code.

pour les css :

.global {
     margin-left: auto;
     margin-right: auto;
     width: 100%; /* largeur obligatoire pour être centré */
     }
.div1 {
	background-image: url(../images/fonds/1px-vertical-menu.png);
	background-repeat: repeat-x;
}
.div3 {
	width:920px;
	margin:auto;
	text-align:left;
	height: 20em;
}
	
.gauche{
	background:url(../images/fonds/carree-haut.gif) repeat-y;
}

.droite{
	background:url(../images/fonds/carree-haut.gif) top right repeat-y;
}

et pour la page php :

<div class="gauche" id="gauche">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <
</div>
<div class="droite" id="droite">
  <p>&nbsp;</p>

</div>
<div class="div3" id="texte">
  <p>dfdfdfdfdfdf</p>
</div>

Mais c'est bizarre , à l'affichage de la page, j'ai le div de gauche à gauche, en dessous aligné à droite, le div de droite et encore en dessous le div centre...
je n'arrive pas à faire que tout soit sur une ligne...
Oserais-je encore abuser de ton aide ? Merci !

ha j'ai trouvé dans un autre sujet !

j'ai rajouté un div vide en fond de page, avec le code css suivant :

.repousse {

	background: none;

	clear: both;

	font-size: 0.01em;

}

troubadour a écrit :


et pour la page php :

<div class="gauche" id="gauche">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <
</div>
<div class="droite" id="droite">
  <p>&nbsp;</p>

</div>
<div class="div3" id="texte">
  <p>dfdfdfdfdfdf</p>
</div>

Mais c'est bizarre , à l'affichage de la page, j'ai le div de gauche à gauche, en dessous aligné à droite, le div de droite et encore en dessous le div centre...
je n'arrive pas à faire que tout soit sur une ligne...

ce n'est pas bizarre du tout : tes div se suivent alors que je t'avais dit de bien faire attention à les imbriquer !
Nb ce n'est pas utile de mettre class="gauche" + id="gauche" : l'un OU l'autre suffit dans ce cas.

si tu as réussi avec une div clear:both, c'est donc que tu as finalement utilisé des float ? et dans ce cas tu peux avoir des difficultés à avoir ton fond sur toute la hauteur lorsque le texte est moins long que dans la partie centrale. (mais sans avoir jamais vu les images en question, c'est un peu difficile à dire !)

rebonjour !
bon j'ai simplifié un peu mon design, je vais y aller progressivement avec ces CSS, vu mes connaissances basiques !

voici le code css :

.div1 {
	background-image: url(../images/fonds/1px-vertical-menu.png);
	background-repeat: repeat-x;
	margin : 0 ;
	padding : 0 ;
}
.div3 {
	margin:auto;
	text-align:left;
	width:920px;
	background-color: #FFFFFF;
	padding: 0;
}
.fond-texte {
	background-image: url(../images/fonds/fond-texte.gif);
	margin: 0;
	padding: 0;
}
.repousse {
	background-image: url(../images/fonds/1px-vertical-menu.png);
	background-repeat: repeat-x;
	height: 5em;
	margin : 0 ;
	padding : 0 ;

et le code pour une page exemple :

<div class="div1" align="center">
    FLASH
  </div>
  <div class="fond-texte">
    <div class="div3">
      <!-- InstanceBeginEditable name="EditRegion3" -->
        <p>&nbsp;</p>
    <!-- InstanceEndEditable -->
    </div>
  <div class="repousse" id="repousse"></div>	
  </div>
</div>

le problème : sous firefox, j'ai un espace entre le div fond-texte et le div repousse, mais pas sous IE.
j'ai justement rajouté les margin et padding mais sans résultat....

Merci de votre aide !