Discussion :

[Agité]

Bonjour !

Etant en train de creer un petit site tout en div je me demandais comment se placaient les elements, en fait je creer déjà un header composé de plusieurs image avec un rollover puis ensuite de ma page principale.

Le site en dessous du header est composé d'un menu de navigation sur la gauche et de l'affichage sur la droite (site on ne peux plus classique !)

Malheureusement pour moi, les div ne sont pas du tout de mon domaine et je code quasi uniquement en tableaux, mais bon pour cette fois je voudrais un truc vraiment clean orienté XHTML.

Bref mon CSS ressemble a ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* Propriétées global de la page */
* { margin:0; padding:0; }
html { background-color:#B30A3B; }
#global{ width:957px; }
.spacer {
	visibility: hidden;
	margin: 0;
	clear: both;
	background-color: transparent;
	height: 1px;
}
 
/* Elements */
img{border:none;}
li {float: left; font:20px Arial; color:#FFFFFF;text-align:right;width:230px;margin-right:6px;text-decoration:none;}
 
/* Header et menu horizontale */
 
#header{ position:relative; float:right; width:957px; height:113px; }
#header_logo{ position:relative; float:right; width:249px; height:113px; background:#B30A3B; }
#header_image{ position:relative; float:right; width:708px; height:113px; background:#FFFFFF; }
#header_menu{ position:absolute; height:22px; margin-top:92px; margin-left:246px; z-index:1;}
#header_image1{ float:left; padding-right: 2px; }
#header_image2{ float:left; padding-right: 2px; }
#header_image3{ float:left; }
#menu_ul{list-style-type: none;}
.header_a{font:20px Arial; color:#FFFFFF; underline:none; }
 
/* Menu verticale */
 
#menu{width:247px;float:right;position:absolute;display:block;margin-top:113px;}
#menu_blank{{background-image:url(../../_medias/img/menu_nav/menu_blank.gif);width:25px;}
#menu_titre{height:65px; width:222px;background:#BDBDBD;margin-left:25px;text-align:center;font:20px Arial;color:#B30A3B;line-height:112px;border-bottom:solid 5px #B30A3B;}
.menu_case{width:222px;background:#B30A3B;color:#FFFFFF;border-bottom:solid 1px #FFFFFF;margin-left:25px;font:12px Arial;}
#menu_font{width:222px;background:#BDBDBD;float:right;}
 
/* Page principale */
 
#page{width:957px;float:right;position:absolute;display:block;border:solid 1px #000000;margin-top:113px;height:100%;}
#page_titre{font:24px Arial; color:#7A7A7A; background:#FFFFFF;float:left;margin-left:249px;padding-left:12px;height:65px;width:695px;border-bottom:solid 2px #BDBDBD;line-height:112px;}
#page_content{width:465px;margin-left:249px;background:#FFFFFF;padding-left:49px;padding-right:96px;;font:11px Arial;float:left;height:100%}
#page_blank{background-image:url(../../_medias/img/menu_nav/menu_blank.gif);background-repeat:repeat;width:96px;height:100%;}
.page_content_title{font:14px Arial;color:#B30A3B;font-weight:bold;}
 
/* Footer */
 
#footer{width:957px; height:12px; background:#7A7A7A;font:9px Arial;color:#000000;text-align:center; clear:both;}

et mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="global">
	<!-- Header --> 
	<?php include("_includes/php/header.php"); ?>
	<!-- /Header -->
	<div id="menu">
		<div id="menu_blank"></div>
		<div id="menu_titre">LE GROUPE</div>
		<div class="menu_case">Concerts</div>
		<div class="menu_case">Video</div>
		<div class="menu_case">Contact</div>
		<div id="menu_font"></div>
	</div>
	<!-- Include Page principale -->
	<div id="page">
		<div id="page_titre">TITLE</div>
		<div id="page_content">	<br />	<br />
			<span class="page_content_title">Présentation du groupe</span>		
				<br />	<br />
			<p align="justify">
			blablablabla
 
		 </p>
		</div>
		<div id="page_blank"></div>
				<div id="footer">Mentions Légales </div>
	</div>
 
</div>

mais ca ne marche absolument pas !!!

et plus j'avance plus je me perds entre les elements de div, les float, les display, et du coup ca fait un grosse bouillie de code avec plein de trucs inutiles.

Ce que je voudrais savoir c'est comment aligner l'element page_blank avec l'element page_content et de foutre mon footer en dessous avec le clear:both.

aligner aussi le menu_font aux 2 autres elements cité au dessus.

Bref si je comprends bien je fais déjà une div id global.

Dedans je met des absolute et normalement il doit tout aligner avec des height 100%

[mama07]

bonjour,

Il faut que tu enlèves les attributs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position

dans ta feuille de styles. Et si tu veux ton menu à gauche comme tu le dit dans ton post, tu doit le mettre en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float:left;

, pareil pour page.

Fait attention a comment tu imbriques tes div

Bon courage

[defcon_suny]

Salut,

Fait attention à l'utilisation des div... à l'origine ce sont des éléments de type "bloc" comme un <table>. Pour les éléments de type in-line, il existe les <span>.

Un autre exemple, pour ton menu, tu peux utiliser un élément <ul> et mettre les <li> en display:inline à l'aide de css.

ca va simplifier grandement ton code.

Un exemple de structure de page ici