28220 sujets

CSS et mise en forme, CSS3

[clos] Mise en forme d'une liste

J'essaie de mettre en forme une liste un peu plus complexe que la liste basique <ul><li> avec les éléments suivants :

- année
- entreprise
- fonction

l'année est à 20px du bord, l'entreprise à 120px et la fonction en dessous de 'entreprise'.

Ce qui devrait donner une liste comme celle-ci (version firefox 1.0)

upload/3208-firefox.jpg

Alors j'ai eu beau trituré mon code dans tous les sens, ajouter des position: absolute ou relative, rien à faire je sèche...

Sur IE6 ça donne ça :

upload/3208-IE6.jpg


Et sous Netscape 7.0 ça :

upload/3208-netscape.jpg

Mon code HTML :

<div id="exppro">       
          		
         <h1 class="annee">2005</h1> 
         <h1 class="entreprise">Entreprise 8</h1>
          <p>Développeur PHP</p>

         <h1 class="annee">2004</h1> 
         <h1 class="entreprise">Entreprise 7</h1>
          <p>Intégrateur / Développeur</p>

         <h1 class="annee"></h1> 
         <h1 class="entreprise">Entreprise 6</h1>
         <p>Intégrateur Web</p>

         <h1 class="annee"></h1> 
         <h1 class="entreprise">Entreprise 5</h1>
         <p>Responsable Informatique</p>

         <h1 class="annee">2003</h1> 
         <h1 class="entreprise">Entreprise 4</h1>
         <p>Intégrateur web</p>

         <h1 class="annee">2002</h1> 
         <h1 class="entreprise">Entreprise 3</h1>
         <p>Intégrateur HTML</p>

         <h1 class="annee">2001</h1> 
         <h1 class="entreprise">Entreprise 2</h1>
         <p>Webmaster Assistant</p>

         <h1 class="annee">1991 - 2001</h1> 
         <h1 class="entreprise">Entreprise 1</h1>
         <p>Chargé d'Etudes et de Statistiques</p>
</div>


Le CSS :


#exppro h1.annee {
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin: 0 0 0 180px;
	padding: 0;
	 	
}
#exppro h1.entreprise {
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin: 25px 0 0 280px;
	padding: 0;
			
}
#exppro p {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	font-size: 12px;
	font-weight: bold;
	color: #999999;
	margin: 0 0 0 280px;
	padding: 0;
}


NB: pour les années où il ya plusieurs entreprises le titre "année" n'est pas répété.
Modifié par EricLB (02 Nov 2005 - 21:02)
Bonjour.

Ah, les joies de la mise en page sans tables!

J'ai fait tourné cette maquette sous IE et FF.

remarquer le "spacer"

<html>

<head>
<style>
* {margin:0;padding:0} /* une base "propre" */
div {border: 1pt solid black} /* pour y voir clair */

#exppro {font-family: Arial, Helvetica, sans-serif;color:navy;width:75%}

.fiche{background-color:#FAFAFA;width:400pt;[b]clear:left[/b]} 
/* clear:left pour FF */

.date{width:100pt;[b]float:left[/b];font-weight:bold}
.corps{[b]float:left[/b]}
.corps h1{font-size:12pt}
.corps p{font-size:12pt;color:silver}
.exppro{}
.spacer { [b]clear: both[/b];font-size:0} /* commentaires bien-venus */
</style>

</head>

<body>
<div>
<h1>Avant la liste</h1>
</div>
<div id="exppro">

<div class="fiche">
	<p class="date">2005</p>
	<div class="corps">
	<h1>Entreprise 8</h1>
	<p>Developpeur php</p>
	</div>
</div>

<div class="fiche">
	<p class="date">2004</p>
	<div class="corps">
		<h1>Entreprise 7</h1>
		<p>Intégrateur/Développement</p>
		<h1>Entreprise 6</h1>
		<p>Intégrateur Web</p>
		<h1>Entreprise 5</h1>
		<p>Responsable informatique</p>
	</div>
</div>

</div>
<!-- pour revenir à gauche sous FF -->
<div class="spacer">&nbsp;</div>

<div>
<h1>Après la liste</h1>
</div>
</body>

</html>


a écrit :
Le défaut du spacer est d'introduire dans le code HTML un contenu fictif à des fins de présentation… (Laurent DENIS)


Je n'ai pas netscape ni opera. Je dois encore avoir mosaic sur une disquette d'abonnement à compuserve. Mais bon...
Modifié par GeorgesM (12 Sep 2005 - 14:15)
Oui... mais ce que j'ai oublié de dire c'est que tout ça était généré par du PHP, les renseignements étant dans une table...

J'ai modifié un peu le code et ça donne ça :

HTML

<div id="exppro">       
         <h1 class="annee">2005</h1> 
         <h1 class="entreprise">Entreprise 8</h1>
         <p>Développeur PHP</p>

         <h1 class="annee">2004</h1> 
         <h1 class="entreprise">Entreprise 7</h1>
         <p>Intégrateur / Développeur</p>

         <h1 class="annee"></h1> 
         <h1 class="entreprise">Entreprise 6</h1>
         <p>Intégrateur Web</p>

         <h1 class="annee"></h1> 
         <h1 class="entreprise">Entreprise 5</h1>
         <p>Responsable Informatique</p>

         <h1 class="annee">2003</h1> 
         <h1 class="entreprise">Entreprise 4</h1>
         <p>Intégrateur web</p>

         <h1 class="annee">2002</h1> 
         <h1 class="entreprise">Entreprise 3</h1>
         <p>Intégrateur HTML</p>

         <h1 class="annee">2001</h1> 
         <h1 class="entreprise">Entreprise 2</h1>
         <p>Webmaster Assistant</p>

         <h1 class="annee">1991 - 2001</h1> 
         <h1 class="entreprise">Entreprise 1</h1>
         <p>Chargé d'Etudes et de Statistiques</p>
</div>


CSS

#exppro {
	clear: right;
	float: left;
	width: 465px;	
}
#exppro h1.annee {
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin: 25px 0 0 20px;
	padding: 0;			
}
#exppro h1.entreprise {
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin: [b]-16px[/b] 0 0 120px;
	padding: 0;			
}


Comme il n'est pas possible d'ajouter display: inline; aux balises <h> parce que sinon je ne pourrais pas indiquer de marge, j'ai choisi de donner une marge négative au 2° titre (soit 16px la taille d'une police de caractère)

Ca marche dans IE 5, 5.5 et 6, Netscape 7, Mozilla et Opera.

Mais est-ce juste de faire ça ?
Aucun avis sur la question ?

a écrit :

Comme il n'est pas possible d'ajouter display: inline; aux balises <h> parce que sinon je ne pourrais pas indiquer de marge, j'ai choisi de donner une marge négative au 2° titre (soit 16px la taille d'une police de caractère)

Ca marche dans IE 5, 5.5 et 6, Netscape 7, Mozilla et Opera.

Mais est-ce juste de faire ça ?

Sujet clos
Aller à