Les div qui s'alignent vertcialements
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:
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:
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%
