[Résolu]Deux blocs...Une aide Alsacréations... Mais ça ne marche pas!

Bonjour à tous !

J'ai un petit souci... J'ai une page assez simple à mettre en place, mais les CSS ne semblent pas m'aimer ...

Voici en gros la page :
Un bandeau en haut, un menu en-dessous (tout en longueur), et une page divisée en deux parties : une pour les images, une pour les textes.
Voici le code associé :

<div id='all' align='center'>

	<div id='haut'>
(une simple image)
	</div>
	
	<div id='menu'>
(le menu est en flash)
	</div>
	
	<div id='corps'>
		<div id='texte'>
		Blablabla...
		</div>
		<div id='images'>
		Ici il y aura donc les images...
		</div>
	</div>
		
</div>

Le souci avec cela, c'est que malgré l'aide d'Alsacréation, je n'ai pas réussi à faire en sorte que les images et le texte soit face à face !!! J'ai préféré faire avec deux DIVs pour faciliter la tâche (avec une seule j'ai failli y rester ^^), mais finalement j'ai toujours un problème... la div image s'affiche en-dessous de celle texte...

Voici le CSS que j'ai fait :

#haut {
	background-image:url(files/portfolio.jpg);
	width:725px;
	height:109px;
	border: solid;
	border-width: 1px;
	border-color: #E1E1E1;
	border-bottom-color: #FFFFFF;
	}
	
#menu {
	width:725px;
	height:26px;
	border-left:solid;
	border-right:solid;
	border-width:1px;
	border-color: #E1E1E1;
	}
	
#corps {
	width:725px;
	border-right: solid;
	border-left: solid;
	border-bottom: solid;
	border-width: 1px;
	border-color: #E1E1E1;
	}

#texte {
	width:475 px;
	top: 135 px;
	left: 0px;
	float: left;
	background-color: #AF0F0F;
}

#images {
	width:250 px;
	left: 475 px;
	top: 135 px;
	float: left;
	background-color: green;
}

(les background-color c'était juste pour bien voir mes DIV).

Merci d'avance si vous pouvez m'aider...
Au plaisir de vous lire ^^ !
Modifié par Clemdups (19 Jan 2006 - 18:11)

Bonsoir et bienvenue!
Que de nouveaux "Alsanautes" pour ce début d'année!
Pour mettre ton image au dessus de ton texte il suffit de remonter ton div dans le html.
Tu as pas mal de chose a corriger dans tes css.
Voila ton code COMMENTé :

le html

<div id='all' align='center'>    utilise les " plutot que les ' ("all") la syntaxe align=center est a eviter, convertir en CSS
	<div id='haut'>
(une simple image)
	</div>
	<div id='menu'>
(le menu est en flash)
	</div>
	<div id='corps'>
	    <div id='texte'>
		Blablabla...
		</div>
		<div id='images'>            Tu n'as pas besoin de mettre ton img dans un div :  ecris plutôt <img id="images".../ >
		Ici il y aura donc les images...
		</div>
	</div>
</div>

la CSS corrigée et allégée

#haut {
	background:url(files/portfolio.jpg);  /*background suffit
	width:725px;
	height:109px;
	border: 1px solid #E1E1E1;           /*propriété racourci           
	border-bottom-color: #FFF;          /*code racourci
	}
#menu {
	width:725px;
	height:26px;
	border-left:solid;
	border-right:solid;
	border-width:1px;
	border-color: #E1E1E1;
	}
#corps {
	width:725px;
	border-right: solid;
	border-left: solid;
	border-bottom: solid;
	border-width: 1px;
	border-color: #E1E1E1;
	}
#texte {
	width:475px;            /* ne pas mettre d'espaces avant les pixels!
	top: 135px;             /*les postion (top,right,bottom,left) n'ont aucuns effets sans positionnement autre que static.
	left: 0;
	float: left;
	background: #AF0F0F;
}
#images {
	width:250px;
	left: 475px;                /*les postion (top,right,bottom,left) n'ont aucuns effets sans positionnement autre que static.
	top: 135px;
	float: left;
	background: green;
}

Modifié par Hermann (19 Jan 2006 - 01:28)

Salut et merci pour ta réponse
Et surtout pour les corrections... C'est vrai que j'ai toujours tendance à trop écrire (voire mal écrire... hélas )

Sinon une petite question pour quelque chose que je ne comprends pas : pourquoi des " plutôt que des ' ? Je sais, je suis chiant, j'ai pris l'habitude des ' (après avoir perdu celle des " pour je ne sais quelle raison ).

Par contre, tu n'as pas bien compris ce que je voulais... Je veux que l'image soit en face de mon texte... En voici une illustration ici : http://chevaliers5.free.fr/ex.jpg

En suivant ton conseil pour l'image, je me retrouve avec le code suivant dans mon HTML :

<div id="all">

	<div id="haut">
(mon header graphique)
	</div>
	
	<div id="menu">
(mon menu)
	</div>
	
	<div id="corps">
		Blablabla
		<img id="images" src="files/essai.jpg">
		Blabla
	</div>
		
</div>

Est-ce bien comme cela que tu l'entendais ?

Merci encore

Salut,
Ok ok...
bon alors voila ton code arrangé avec un style en ligne à mettre dans le head ou ta css:
Pour que ton image vienne se placer a droite de ton texte tu dois lui donner la propriété float:right, ainsi ton paragraphe qui est un élément de type block et donc générant un retour chariot a la fin, viendra se placer a gauche de ton image.

Pour ta question sur les " je ne sais pas mais c'est la syntaxe exacte.

<div id="all">
	<div id="haut">
(mon header graphique)
	</div>
	<div id="menu">
(mon menu)
	</div>
	<div id="corps">
               <img style="float:right; margin-left: 14px" src="files/essai.jpg" alt="">     /* ne pas oublier le alt
		<p>Blablabla</p>             /*Mettre le texte dans un paragraphe (question de structuration et de semantique...)
	</div>
</div>

Modifié par Hermann (19 Jan 2006 - 13:35)

Salut
Merci encore !
Pour le <p>, je sais, je l'avais mis comme ça juste pour l'exemple...

Je me disputais avec les "float" depuis hier en effet, mais ça marchais pas parce qu'en fait il fallait mettre la balise <img...> AVANT le <p>... Sinon ça marche pas (je comprends pas pourquoi d'ailleurs)...

Raaaah, tout ça pour ça, j'enrage
Mais au moins ça m'a permis d'être éclairé sur quelques points...

Merci pour tout, tant sur la rapidité que sur la qualité des réponses ! C'est vraiment admirable une communauté aussi sympathique
Je reviendrai

Me reste plus qu'à mettre le [RESOLU] si j'ai bien lu

Edit : désolé pour le "s" Entre hier et aujourd'hui je suis tombé au moins 5 fois sur votre adresse sans le "s" qui stipule bien de ne pas l'oublier... Hélas, je suis assez étourdi
Modifié par Clemdups (19 Jan 2006 - 19:04)

Merci

Et AlsacréationS, pour info.