28173 sujets

CSS et mise en forme, CSS3

[Résolu] Une div sur une autre div... possible ?

Bonjour !

Voilà, j’ai une petite question, car j’ai un problème qui me semble difficile à résoudre, mais je sais que sur Alsacréations tout est possible… alors… Je préfère demander avant d’essayer de le contourner Smiley cligne

Voici ce que j’ai : http://chevaliers5.free.fr/blocs.jpg
Enfin ce que j’ai… presque, le menu (vert) ne veut pas bien se mettre (il se met en bas), mais ce problème là je pense arriver à le résoudre.

Non ce que je me demandais surtout, c’est s’il était possible de rassembler les parties jaune et bleu clair ?? Sachant donc que si j’écris dans cette partie là, ça dépassera sur la partie bleue normale… mais ça c’est pas un problème. Seulement je me demande si c’est possible ou si je rêve… ?
(je précise : sur les navigateurs IE, Firefox, mais aussi sur Mac si possible, donc Safari et IE Mac... pfiouh)

Voici, au cas où, mon code CSS et HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Clementdussarps.net - PORTFOLIO</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="contenant">
	<div id="titre"></div>
	<div id="perso"></div>
	<div id="menu">menu</div>
	<div id="page">blabla</div>
</div>

</body>
</html>


Et le CSS actuel :


body {
	background: url(images/fond.gif);
	margin:0;
	padding:0;
}
#contenant { width:620px; 

}

#titre {
	background: url(images/titre.gif);
	height:91px;
	width:482px;
	float:left;
}

#perso {
	background: url(images/perso.gif);
	height:153px;
	width:138px;
	float:left;
}

#menu {
	background: #4F4F4F;
	height:28px;
	width:482px;
float:left;}

#page {
	background: red;
}

Modifié par Clemdups (27 Apr 2007 - 13:25)
Bonsoir Smiley cligne

Personnellement je ne sais pas le faire, créer une div qui aurais deux largeurs différentes ....

Même un tableau ne serait pas efficace.

Bonne chance !
Modifié par Super_baloo8 (27 Apr 2007 - 00:35)
Bonjour,

Je ne vois pas le but de la manip, si tu nous expliques peut être que quelqu'un pourra t'aider Smiley cligne
Le but c'est de faire que le jaune + bleu clair soit une seule et même page, càd que quand je mets du texte dedans il se mettent automatiquement comme il faut... Mais pour cela il faut dépasser sur le bleu normal.

Mais ça n'a en fait guère d'intérêt, après une nuit de sommeil je me rends compte... Smiley rolleyes Smiley confused
C'est plus par curiosité...
Clemdups a écrit :
Le but c'est de faire que le jaune + bleu clair soit une seule et même page, càd que quand je mets du texte dedans il se mettent automatiquement comme il faut... Mais pour cela il faut dépasser sur le bleu normal.

Sauf si le bloc bleu de droite est un flottant qui repousse le contenu texte de ton bloc jaune+bleu clair.

[b]HTML :[/b]
<div id="contenant">
	<div id="perso"></div>
	<div id="titre"></div>
	<div id="page">blabla</div>
</div>

[b]CSS :[/b]
#contenant {
	width:620px;
}
#perso {
	background: blue;
	float: right;
	height:153px;
	width:138px;
}
#titre {
	background: red;
	height:91px;
	overflow: hidden;
}
#page {
	background: yellow;
}

Si je n'ai rien oublié, ça devrait suffire...
Modifié par Florent V. (27 Apr 2007 - 11:03)
Sujet clos
Aller à