28172 sujets

CSS et mise en forme, CSS3

Structure pour un site

Bonjour,

Je débute avec les css et j'essaie de faire une structure pour un site mais sans succès.
Pourriez-vous m'aider ?

Une image valant mieux qu'un long discours, je joins une image du résultat que j'aimerais obtenir ; je copierai également mon code actuel.

upload/29443-site.gif

Je serais déjà heureux avec les 9 div correctement positionnées (le fait que certaines soient extensibles, voir doubles flèches, serait un must mais ce n'est pas le plus important) mais même ça je n'y arrive pas Smiley confused . 


<body>

<div id="global">

<div id="haut_logo">1
</div>
<div id="haut_menu">2
</div>
<div id="haut_coin_droit">3
</div>
<div id="milieu_menu_gauche">4
</div>
<div id="milieu_contenu">5
</div>
<div id="milieu_bordure_droite">6
</div>
<div id="bas_coin_gauche">7
</div>
<div id="bas_bordure">8
</div>
<div id="bas_coin_droit">9
</div>
      
</div>

</body>




html, body {
	height: 100%;
	margin: 0;
}

body {
	padding: 0;
}

#global {
	position: absolute;
	min-height: 100%;
	width: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#haut_logo {
	float: left;
	width: 100px;
	height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#haut_menu {
	position: relative;
	left: 100px;
	top: 0px;
	width: auto;
	min-width: 100px;
	height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#haut_coin_droit {
	float: right;
	width: 100px;
	height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#milieu_menu_gauche {
	float: left;
	width:100px;
	height: auto;
	min-height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#milieu_contenu {
	position: relative;
	left: 100px;
	top: 100px;
	width: auto;
	min-width: 100px;
	height: auto;
	min-height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#milieu_bordure_droite {
	float: right;
	width: 100px;
	height: auto;
	min-height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#bas_coin_gauche {
	float: left;
	width: 100px;
	height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#bas_bordure {
	position: relative;
	left: 100px;
	width: auto;
	min-width: 100px;
	height: auto;
	min-height: 100px;
	background-color: #FFF;
	border: 1px solid;
}

#bas_coin_droit {
	float: right;
	width: 100px;
	height: 100px;
	background-color: #FFF;
	border: 1px solid;
}


Je vous remercie d'avance pour votre aide ou vos conseils.
Bonjour,

Ce découpage se base t-il sur la structure logique des contenus qu'il accueille ou bien est-ce un découpage arbitraire basé sur un graphisme particulier ?

Je peux me tromper mais je crois que tu essayes reproduire avec des blocs une mise en page en tableau avec découpage d'images.
Les noms des div sont représentatifs de leur contenu. Cependant, il est vrai que le site original a été créé il y a pas mal d'années, et sur base d'une maquette réalisée avec photoshop et convertie en tables, elles-mêmes "converties" en frames (voire iframe pour le contenu). Bref, un vrai beau bazar que je dois remanier sans pour autant changer le design ou même l'agencement des différents contenus Smiley confus
Sujet clos
Aller à