28173 sujets

CSS et mise en forme, CSS3

[Résolu]Placement de trois divs côte à côte

Salut,

Désolé de créer encore un topic, mais je galère vraiment en ce moment ...

Voilà alors çà peut paraitre bête, mais je bloque sur çà depuis déjà deux jours !

Pour commencer, voilà un schéma de ce que je veux faire :

http://img50.imageshack.us/img50/9505/schemaca0.png 



<!-- BEGIN new -->
 
<h2 class="titre_news">{TITRE}</h2>
 
<h2 class="date_news">{DATE}</h2>
</code>

<code type="html">
<img class="image_news" src="images/index/titre_news.png" alt="Alt perso" />




.titre_news {
display:block;
padding-top:0px;
height: 15px;
width:345px;
background-color:#000000;
left:30px;
top:0;
font-family:Arial, Verdana, Tahoma, Comic Sans MS, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
padding-left:15px;;
}
 
.date_news {
display:block;
float:left;
padding-top:0px;
height: 15px;
width:98px;
background-color:#b20c0c;
left:346px;
top:0;
font-family:Arial, Verdana, Tahoma, Comic Sans MS, sans-serif;
font-size:8pt;
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
padding-left:15px;
}
 
.image_news {
display:block;
position:absolute;
left:250px;
top:267px;
border:0px;
}






Alors j'ai plusieurs soucis :

- Sous FireFox, çà s'affiche comme il faut, le div rose (une image en ce moment), se colle bien au div vert. Mais sous IE, le div est décalé vers le haut, je ne comprends pas pourquoi, ni comment y remédier !

- Un autre souci, le div jaune, refuse de se coller à côté du div vert ...

Merci à ceux qui m'aideront, car là je bloque vraiment .. Smiley cligne


======================================================

J'ai déjà fait çà :

* Pour les balises Hn, le display block est inutile car ce sont déjà des balises block
* Mettre un margin-left à l'image pour la positionner en relatif
* Et mettre les titres en float:left (Avec le date_news en display:inline

Mais çà n'a pas marché, je l'ai peut-être mal fait ..
Modifié par antonin.design (27 Aug 2007 - 22:06)
Bonjour antonin.design, Smiley smile

Je constate effectivement que tu créés encore un topic, alors que 6 autres sont en attente d'être résolus Smiley ohwell

Il serait plus sage d'avancer progressivement dans ta quête ... c'est à dire en travaillant sur un problème à la fois. Smiley cligne

Ensuite, je t'invite à donner à ton sujet un titre plus évocateur car tout le monde ici (et ailleurs !) a un (voire plusieurs !) problèmes à régler ! Smiley confus
La précision facilite grandement la sélection et la recherche des sujets pouvant intéresser le futur lecteur ...
Voilà j'ai modifié le titre

Pour les topics, je pensais pas qu'il y en avait autant ! Ceux postés en juillet c'était à propos d'un projet maintenant terminé


Encore désolé Smiley confused Smiley confused
En supprimant "problème" (on se doute que le sujet fait l'objet d'un problème) il y aura encore plus de place pour préciser dans quel contexte tu as des difficultés à placer ton div ...

Essayer d'exprimer un problème c'est en partie le résoudre !

Concernant les sujets créés en juillet sur des projets terminés : sont-ils résolus ?
Car si tel est le cas, il manque quelque chose, non ?

Smiley cligne
Bonjour,

Arf, une petite piste quand même Smiley cligne 
<style type="text/css">
*{margin: 0; padding: 0;}
#conteneur{
width: 800px;
margin: 0 auto;
background: #fff;
border: 1px solid black;
overflow: hidden;
text-align: center;
}

#gauche{
width: 500px;
position: relative;
float: left;
overflow: hidden;
}

#rose{
background: pink;
width: 200px;
height: 100px;
float: right;

}

#vert{
clear: both;
background: lime;
width: 100%;
height: 100px;
}

#orange{
background: orange;
width: 300px;
height: 100px;
float: right;/* pour ie6-------------------*/
margin-top: 100px;
}
	</style>
</head>	
<body>
	<div id="conteneur">
		<div id="gauche">
			<h1 id="rose">h1</h1>
			<div id="vert">texte ici
			</div>
		</div>
		<div id="orange">Et encore là
		</div>
	</div>
Vero a écrit :
En supprimant "problème" (on se doute que le sujet fait l'objet d'un problème) il y aura encore plus de place pour préciser dans quel contexte tu as des difficultés à placer ton div ...

Essayer d'exprimer un problème c'est en partie le résoudre !

Concernant les sujets créés en juillet sur des projets terminés : sont-ils résolus ?
Car si tel est le cas, il manque quelque chose, non ?

Smiley cligne


Ok chef c'est fait Smiley cligne


ghost : merci Smiley smile

Mais en le mettant dans mon code, j'ai l'impression que je ne peux pas modifier la taille des éléments Smiley eek



Hop le lien : http://creadiz.free.fr

J'ai peur d'avoir mal fait quelque chose d'important au début, qui fasse que le reste ai des problèmes, enfin je me trompe peut-être Smiley ohwell
Modifié par antonin.design (27 Aug 2007 - 01:26)
antonin.design a écrit :

Ok chef c'est fait Smiley cligne


Bien sage !
Smiley cligne Smiley biggrin

Et puis tu verras à la longue : il n'y a pas de problèmes ... que des solutions !
Smiley lol
J'up un peu le post, j'ai décidé de tout reprendre à zéro le plus proprement possible.

Sauf que, j'ai un nouveau souci ... J'ai fait ma mise en page à partir d'un gabarit du site, sous FF aucun problème, par contre sous IE 6 (j'ai pas le 7), c'est du grand n'importe quoi ! Smiley biggol

La preuve : ***

Une idée de la source des ennuis ? Smiley sweatdrop


Merci Smiley biggrin



[EDIT2] En effet, le preoblème viens de la redirection, IE ne reconnait pas les <meta> de l'index Smiley ohwell
Modifié par antonin.design (27 Aug 2007 - 22:25)
Sujet clos
Aller à