28220 sujets

CSS et mise en forme, CSS3

[Résolu] 3 DIV pour composer une interface

Bonjour à tous !
J'espère qu vous allez bien en ce 1er jour d'Aout.

J'ai fait une mise en page via css en m'appuyant sur un gabari (merci Alsa).
voir l'exemple

Dans la partie gauche (en rouge) j'aimerais intégrer cette interface décomposée en trois images upload/821-exemple.jpg

celle du haut est placée dans une DIV avec cette classe 
.nnews{
background: url(img/news_main.gif) no-repeat;
height:66px;
width:224px;
}


l'image du milieu se répète verticalement dans une seconde DIV en fonction du texte
.bg_petit_bloc{
background: url(img/bg_maincontent.gif) repeat-x;
width:224px;}


et celle du bas dans la troisième DIV avec l'image en fond
.bas_petit_bloc{
background: url(img/div_bas.jpg) no-repeat;
height:25px;
width:224px;
}


Du coup si vous avez suivi, et bien rien ne s'affiche correctement... Smiley sweatdrop
revoir l'exemple

Auriez-vous une petite idée du problème, merci d'avance?
Modifié par xgregx (02 Aug 2005 - 10:42)
Vous avez même pas une petite idée, ou un indice à me donner?
Modifié par xgregx (01 Aug 2005 - 14:17)
Salut,
Commence par passer les marges de tes div à 0
div.class1, div.class2, div.class3 {margin:0} ou div {margin:0} pour simplifier.
Les div sont des balises de type block qui peuvent laisser un espace au dessous.

Ciao
Aiu fait tu n'as pas forcement desoin de placer tes image haut et bas dans un div si elles ne se répètent pas, mais peut-être veux tu mettre du texte dessus?
Sinon tu ajoute la declaration display: block a tes image pour qu'elles se placent verticalement.
herman31 a écrit :
Aiu fait tu n'as pas forcement desoin de placer tes image haut et bas dans un div si elles ne se répètent pas, mais peut-être veux tu mettre du texte dessus?
Sinon tu ajoute la declaration display: block a tes image pour qu'elles se placent verticalement.


Non celle du haut et du bas ne se répête pas et il n'y aura pas, je pense, de texte dessus.
Je vois que ce sujet n'a vraiment pas la côte !
C'est peut être parce que la réponse est trop triviale...je ne sais pas...si c'est le cas, je suis surement passé à coté, je vais refaire des recherches...
@ bientôt
dominique a écrit :

Bonjour xgregx Smiley smile

Si tu t'appuis sur un tuto Alsa, ce sujet n'est pas à sa place, je vais le déplacer vers le salon Tutoriels et exercices Alsacréations : "Service Après Vente"

Eventuellement, donne le lien vers le tuto concerné qu'on puisse voir les différence avec ta création, stp ! Smiley cligne


Le tuto est ok mais c'est ce que j'en fais après, la mise en page à l'intérieur des bloc du coup le sujet est à sa place.
Je pense que c'est un problème de marges sous FireFox car sous i.e ça s'affiche correctement...

Smiley bawling
Bonjour xgregx Smiley smile

ok ! Excuse-moi, je le déplace dans CSS et mise en forme Smiley cligne

Une suggestion, il serait peut être plus facile de faire en sorte de ça s'affiche correctement sous firefox et ensuite azdapter à ie.
Sujet clos
Aller à