Forum d'entraide PHPFrance

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 : Tout sélectionner

/* 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 : Tout sélectionner

<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%

mon code html :

Code : Tout sélectionner
<div id="global">  <?php include("_includes/php/header.php"); ?>  <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>  <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>

D'abord, évite d'employer l'attribut align (surtout si tu codes en (X)HTML Strict) : tu peux le remplacer par son équivalent en CSS.

Ensuite, ton code HTML peut être amélioré du point de vue du balisage sémantique, et ce afin d'éviter que tu ne choppes la "divite chronique".

Code : Tout sélectionner

<div id="global">
  <!-- Header --> 
  <h1 id="header">Header</h1>
  <!-- /Header -->
  <ul id="menu">
    <li>Concerts</li>
    <li>Video</li>
    <li>Contact</li>
  </ul>
  <!-- Include Page principale -->
  <div id="page">
    <h1>TITLE</h1>
    <div id="page_content">
      <h2>Présentation du groupe</h2>
      <p align="justify">blablablabla</p>
    </div>
  </div>
  <p id="footer">Mentions Légales</p>
</div>

Là, tu vois que le code est nettement plus léger et plus facile à maintenir et mettre à jour.
Et en CSS, pour la disposition d'ensemble :

Code : Tout sélectionner

/* Menu à gauche */
#menu {
  width: 40%;
  float: left;
}
/* Contenu à droite */
#page {
  margin-left: 40%;
}
/* Pied de page bien en-dessous */
#footer {
  clear: left;
}

Pour approfondir, rien de mieux que quelques lectures sur la mise en page sans tableaux, notamment une méthode de construction d'un design en 5 étapes et une autre pour des colonnes de même hauteur, ainsi qu'une autre lecture sur le positionnement en CSS et un livre sur les CSS.

Bonne lecture et bonnes emplettes de Noël !

waaaaa ca pour une reponse !

merci bien pour la documentation je vais me renseigner, en fait je cherche a avoir les même alignement pour des images de background histoire d'avoir quand même un alignement verticale pour la mise e nforme.

Donc je vais lire tout ca et je te dirais si je bloque a un moment ou a un autre.

merci

Pour l'alignement des images d'arrière-plan, regarde du côté de la propriété background-position.

Quant à l'alignement vertical, s'il s'agit d'aligner un bloc, tu peux lire ce tutorial.

S'il s'agit d'aligner verticalement un élément en ligne le contenu, plusieurs cas de figure se présentent :

le contenu tient en une seule ligne : on applique les propriétés height et line-height à son bloc parent, propriétés comportant la même valeur,
l'élément ou le contenu en ligne doit être aligné verticalement par rapport au contenu où à un autre élément en ligne : on utilise la propriété vertical-align: middle,
le contenu se trouve dans une cellule de tableau ou dans un élément auquel on applique la propriété display: table-cell (soit dit en passant, display: table-cell n'est pas reconnu par Internet Explorer) : vertical-align: middle également.

Pour illustrer cela :
Code XHTML

Code : Tout sélectionner

<p id="cas-1">Contenu avec hauteur de ligne</p>
<p id="cas-2">Du texte avec un <img src="chemin-vers-le-smily" alt="gros smily" /> centré verticalement</p>
<p id="cas-3">Un texte extrêmement long, du genre Lorem ipsum dolor sit amet...</p>
<table>
  <caption>Cas d'un tableau</caption>
  <thead>
    <tr>
      <th>Nom du site</th>
      <th>Spécialité</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alsacréations</td>
      <td>XHTML et CSS</td>
    </tr>
    <tr>
      <td>PHPFrance</td>
      <td>PHP</td>
    </tr>
  </tbody>
</table>

CSS

Code : Tout sélectionner

p, th, td {
  color: white;
  background: red;
}
#cas-1 {
  height: 2em;
  line-height: 2em;
}
#cas-2 img {
  vertical-align: middle;
}
#cas-3 {
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}
td {
  vertical-align: middle;
}

Ok en fait le systeme des table je ne l'utilise pas du tout, je fais uniquement en div pour comprendre comment ca se passe, ce qui me semble un poil plus compliqué que ce que je faisais avant.

Une page de ce type est réalisée en une heure facilement en HTML 4 mais en XHTML c'est autre chose.

Pour l'instant je cherche a faire une page en 3 parties :

- Le menu sur la gauche avec un background extensible jusqu'aux autres div
- La div principale contenant le texte qui' s'allonge en fonction du contenu
- Une div qui contien un element extensible sur la droite en fonction du contenu du milieu.

Ensuite placer ces elements et ajouter les menus et le reste.

Après moulte recherche ainsi que les liens que tu m'as donné j'ai compris qu'il faut mettre un height:100% sur la div extensible et mettre celle du milieu en display:block; pourtant rien a faire. J'ai essayer de les mettre en absolute ou relative de faire des test toujours rien.

Le probleme est que le global qui contient toute la page ne semble pas tout prendre même si les elements n'ont aucune propriété de type div.

Il est superflu d'appliquer un display: block à un div, puisque l'élément div est un élement de bloc par nature.

Pourrais-tu faire un croquis de ce que tu souhaites faire ?

Par quoi entends-tu "image de fond étirable" : une image qui se répète verticalement ?

Par quoi entends-tu "image de fond étirable" : une image qui se répète verticalement ?

Oui.

Par quoi entends-tu "image de fond étirable" : une image qui se répète verticalement ?
Oui.

Dans ce cas, background-repeat: repeat-y.

Pour en revenir à la maquette, voici une suggestion de structure XHTML :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
</head>
<body>
<div id="header">
  <h1><img src="chemin-vers-ton-image" alt="Header" /></h1>
  <ul>
    <li>Menu 1 - </li>
    <li>Menu 2 - </li>
    <li>Menu 3</li>
  </ul>
</div>
<div id="main">
  <ul id="menu-left">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
  <div id="content">
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
    <h3>Sous-sous-titre</h3>
    <p>Lorem ipsum dolor, etc.</p>
    <p>Lorem ipsum dolor, etc.</p>
    <h3>Sous-sous-titre</h3>
    <p>Lorem ipsum dolor, etc.</p>
    <p>Lorem ipsum dolor, etc.</p>
    <h2>Sous-titre</h2>
    <p>Lorem ipsum dolor, etc.</p>
    <p>Lorem ipsum dolor, etc.</p>
    <h2>Sous-titre</h2>
    <p>Lorem ipsum dolor, etc.</p>
    <p>Lorem ipsum dolor, etc.</p>
  </div>
  <p id="footer">Mes infos légales</p>
</div>
</body>
</html>

Et une suggestion de CSS :

Code : Tout sélectionner

/* Présentation du menu du header en une seule ligne, sans puces */
#header ul {
  list-style: none;
}
/* Avec suppression des marges pour chaque élément dudit menu, pour faire plus joli */
#header li {
  padding: 0;
  margin: 0;
  display: inline;
}
#menu-left {
  width: 40%;
  float: left;
}
#content {
  /* Image de fond répétée verticalement et placée à droite
  (et je fais l'économie d'un div) */
  background: url(url-vers-ton-image-de-fond) repeat-y right top;
  margin-left: 40%;
}
#footer {
  clear: left;
}

J'espère que les grandes lignes sont claires. En tout cas, n'hésite pas à t'inspirer des gabarits proposés par les tutoriaux d'Alsacréations dont je t'ai donné le lien.

Merci pour ta réponse,

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon Groupe</title>
<link rel="stylesheet" type="text/css" href="_includes/css/test.css" />
</head>

<body>

<div id="global">

	<div id="font_gauche"></div>
    <div id="menu_titre">LE GROUPE</div>
    <div class="menu_case">Concerts</div>
	<div class="menu_case2">Infos</div>
	<div class="menu_case3">Contact</div>
    <div  id="menu_font"></div>
    <div id="page">		<p align="justify">
			<br />
			scipit utatet ullan ver adigna feu feugiam, secte m			Ed ero coreet vel dit exero conullaor adiam iriusci ncipsus cidunt wis num vel irit wisit num vendre dolor sustion sequat autpatu msandit elit ullaorp eriustin ullaortie volortin henim iure min henim iriusto exeraessi tisit praesto od ting eugait ver sum zzrit, se magniam, quam, velis dolent wisis nostio odo ero dolorti onsequi eugait lumsandre dunt wis nostis dit iustrud ex eugait alit adipsum iriureet, conullut prat eum vel illa acidunt alit luptat vel utpatem ip ero consed el elenim velesent nim alit, sum delisim alit euguerostrud exerat.
			<br /><br />
			Min utpat landre cortion sequipit alit nulluptat. Duis delent luptati ncipis delit, si tincilla conulla facilit accum qui tem eliquam ipit, quis nisit nostrud modipit adigna am iliquat. Guer sit laorera esequat. Iduis eugue dolesto con henisi.
			<br /><br />
			Tat. To exer sent wiscipis alit lor autatis augiat nisit ex essequis et aliquat veniamc onsent wis dipisit volut in henit adignim quismod dignim iuscipit, sequate vel utpat velissit dolore deliqui sciduisci tis nonsendre ming etuer iure velestrud enibh er aliquat ut la feum vel iureriustrud tat landre tionsecte diat augue ercing eros doloreros ea feum vel in vulla consequam illa autatis dip eugait luptat, sum vel ing euipsus ciliqui blaorem quipisi.
			<br /><br />
			Ure faccums andipit incipit nis deliquisis aliquatet lore modolorero odio ea feui bla feugueros nibh erostionse consequip ex eugait lorper augiatet, suscilit ilisit, sequisl iurem iniam, consed magna consequisisi blam nosting essi.
			Am dit amet luptat iustie dolesto odolortis adigna feugait lorerci exer si et, quam, sum ipit alit velis atum quat. Duisit praessi.
			<br /><br />
			Putat volestrud essi tatis esed te magnibh ea commy nos erat lore dunt adit autet wismodo lumsandit dolenis nullandrem quip euip exerostrud exer ilis dolorero commy num quametu ercilisl enisim vercidunt praessequat amconsequisi blaor amcommodolum zzrilis ad tin vero con henisse commy nis aut velit, sum quat aut vulland rercilismod miniat acilla feuipisi.
			Cidunt prat illaor adipis nos essi.			Ed ero coreet vel dit exero conullaor adiam iriusci ncipsus cidunt wis num vel irit wisit num vendre dolor sustion sequat autpatu msandit elit ullaorp eriustin ullaortie volortin henim iure min henim iriusto exeraessi tisit praesto od ting eugait ver sum zzrit, se magniam, quam, velis dolent wisis nostio odo ero dolorti onsequi eugait lumsandre dunt wis nostis dit iustrud ex eugait alit adipsum iriureet, conullut prat eum vel illa acidunt alit luptat vel utpatem ip ero consed el elenim velesent nim alit, sum delisim alit euguerostrud exerat.
odo consenim del etum eliquatue digniatum del ilismoloreet lum endiat ver ad deliquat adip exeriurerci blam euis nim dolestrud elisi.
			<br /><br />
			Ustin ute tatummy niamcommy nostinibh eum aut ex er illuptat in volore do odolenim augue core ming esto odolortio conumsan veniatet, veros nisciniam veliquis num zzrit iuscincing eros euguero consed magna am amcore dolesse quatem iuscipis dolorem vullum doluptat lore feuisit lortinibh exer iliquat, venisis aci te faccum ver sit vel er irit amcortissim zzril ip ex esed dolore feu feumsandrem zzrit nonse velesse quissequat. Ecte elit utpat. 
			<br /><br />
			Putat volestrud essi tatis esed te magnibh ea commy nos erat lore dunt adit autet wismodo lumsandit dolenis nullandrem quip euip exerostrud exer ilis dolorero commy num quametu ercilisl enisim vercidunt praessequat amconsequisi blaor amcommodolum zzrilis ad tin vero con henisse commy nis aut velit, sum quat aut vulland rercilismod miniat acilla feuipisi.
			Cidunt prat illaor adipis nos essi.			Ed ero coreet vel dit exero conullaor adiam iriusci ncipsus cidunt wis num vel irit wisit num vendre dolor sustion sequat autpatu msandit elit ullaorp eriustin ullaortie volortin henim iure min henim iriusto exeraessi tisit praesto od ting eugait ver sum zzrit, se magniam, quam, velis dolent wisis nostio odo ero dolorti onsequi eugait lumsandre dunt wis nostis dit iustrud ex eugait alit adipsum iriureet, conullut prat eum vel illa acidunt alit luptat vel utpatem ip ero consed el elenim velesent nim alit, sum delisim alit euguerostrud exerat.
odo consenim del etum eliquatue digniatum del ilismoloreet lum endiat ver ad deliquat adip exeriurerci blam euis nim dolestrud elisi.
			<br /><br />
			Ustin ute tatummy niamcommy nostinibh eum aut ex er illuptat in volore do odolenim augue core ming esto odolortio conumsan veniatet, veros nisciniam veliquis num zzrit iuscincing eros euguero consed magna am amcore dolesse quatem iuscipis dolorem vullum doluptat lore feuisit lortinibh exer iliquat, venisis aci te faccum ver sit vel er irit amcortissim zzril ip ex esed dolore feu feumsandrem zzrit nonse velesse quissequat. Ecte elit utpat. 
			<br /><br />
			Putat volestrud essi tatis esed te magnibh ea commy nos erat lore dunt adit autet wismodo lumsandit dolenis nullandrem quip euip exerostrud exer ilis dolorero commy num quametu ercilisl enisim vercidunt praessequat amconsequisi blaor amcommodolum zzrilis ad tin vero con henisse commy nis aut velit, sum quat aut vulland rercilismod miniat acilla feuipisi.
			Cidunt prat illaor adipis nos essi.			Ed ero coreet vel dit exero conullaor adiam iriusci ncipsus cidunt wis num vel irit wisit num vendre dolor sustion sequat autpatu msandit elit ullaorp eriustin ullaortie volortin henim iure min henim iriusto exeraessi tisit praesto od ting eugait ver sum zzrit, se magniam, quam, velis dolent wisis nostio odo ero dolorti onsequi eugait lumsandre dunt wis nostis dit iustrud ex eugait alit adipsum iriureet, conullut prat eum vel illa acidunt alit luptat vel utpatem ip ero consed el elenim velesent nim alit, sum delisim alit euguerostrud exerat.
odo consenim del etum eliquatue digniatum del ilismoloreet lum endiat ver ad deliquat adip exeriurerci blam euis nim dolestrud elisi.
			<br /><br />
			Ustin ute tatummy niamcommy nostinibh eum aut ex er illuptat in volore do odolenim augue core ming esto odolortio conumsan veniatet, veros nisciniam veliquis num zzrit iuscincing eros euguero consed magna am amcore dolesse quatem iuscipis dolorem vullum doluptat lore feuisit lortinibh exer iliquat, venisis aci te faccum ver sit vel er irit amcortissim zzril ip ex esed dolore feu feumsandrem zzrit nonse velesse quissequat. Ecte elit utpat. 
			<br /><br />
		 </p></div>
    <div id="font_page"></div>
    <div id="footer"> - Mentions Légales - </div>
</div>

</body>
</html>

et le css :

Code : Tout sélectionner

/* Propriétées global de la page */
* { margin:0; padding:0; }
html { background-color:#B30A3B; }

/* Elements */
img{border:none;}
a{color:#FFFFFF; text-decoration:none;}
li {float: left; font:20px Arial;text-decoration:none; color:#FFFFFF;text-align:right;width:230px;margin-right:6px;}

#global{width:957px;; height:100%; border:solid 1px #000000; position:absolute; }

#font_gauche{width:25px; height:100%; background:url(../../_medias/img/font_site.gif);  float:left;}

#menu_font{width:222px; height:100%; background:#BDBDBD; float:left;}

#menu_titre{position:absolute;background:#BDBDBD; height:65px; width:222px;  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; position:absolute;margin-top:178px;}
.menu_case2{width:222px;background:#B30A3B;color:#FFFFFF;border-bottom:solid 1px #FFFFFF;margin-left:25px;font:12px Arial; position:absolute;margin-top:195px;}
.menu_case3{width:222px;background:#B30A3B;color:#FFFFFF;border-bottom:solid 1px #FFFFFF;margin-left:25px;font:12px Arial; position:absolute;margin-top:212px;}

#font_page{width:96px; height:100%; background:url(../../_medias/img/font_site.gif); margin-left:861px;}
#page{width:614px; background: #FFFFFF; float:left; }

#footer{height:12px; background:#7A7A7A;font:9px Arial;color:#000000;text-align:center; clear:both;}

Mais les div ne s'etendent pas comme j'aimerais ...

Oublie ton coup d'essai et recommence avec comme base ma suggestion de code XHTML et de CSS.

Oublie ton coup d'essai et recommence avec comme base ma suggestion de code XHTML et de CSS.

Oui j'ai regarder ton exemple il utilise l'image de fond comme base et rajoute les elements par dessus.

Mais sur la base que j'ai fait il y a 3 fonds, 2 avec image et 1 en couleur.

En fait c'est ce que j'aimerais obtenir et il semble que je sois a peu de choses près.

Aurait tu une idée quand a l'amélioration du code ?

Merci pour ces reponses

Déjà, tu peux mêler couleur de fond et image d'arrière-plan, ce qui donne, par exemple :

Code : Tout sélectionner

background: green url(url-de-ton-image) no-repeat;

L'image d'arrière-plan se superpose à la couleur de fond, cette dernière n'étant visible que si l'image utilise une couche de transparence (couche Alpha ou non) ou n'occupe pas tout l'espace du bloc concerné par un tel fond.

Donc j'utilise mon image de fond tout le temps et il faut y ajouter un calque alpha pour afficher la couleur de fond, si j'ai bien compris.

Mais comment mettre un calque alpha ? dans une div ?

Forum d'entraide PHPFrance

Les div qui s'alignent vertcialements

Les div qui s'alignent vertcialements

Re: Les div qui s'alignent vertcialements