28173 sujets

CSS et mise en forme, CSS3

Quelque petit problème de finalisation de ma mise en page ?

Bonsoir,

Et oui encore moi ! Bon j'ai réussi à avoir à peu près ce que je voulais comme résultat !

Serait-il possible de jetter un petit coup d'oeuil sur le code css afin de corriger les petits détails, à savoir que lorsque que l'on agrandie de trop, les titres de menu dépasse ...

Aussi, je défini un style de puce dans le menu qui a comme id menu, mais lorsque je veux utiliser une autre sorte de liste qui se trouve aussi dans le menu, pas moyen ... Smiley bawling

Et il me reste aussi un petit problème, y a t'il un moyen de positionner la puce personalisée ?

La page peut-être consultée en ligne en cliquant ici !

Encore un grand merci à ceux qui m'on aidé et qui vont encore m'aider je l'espère Smiley biggrin

Voici le code :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>

<style type="text/css">
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 20px;
	padding: 0;
	background-color: #FEF7DC;
	height: 100%;
}

#conteneur {
	position: relative;
	width: 770px;
	margin-left: auto;
	margin-right: auto;
	background: url('http://philharcom.websanslimit.net/Design/menu-6.png') repeat-y 0 100px;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

#header {
	background-image: url('menu-1.png');
	width: 770px;
	height: 68px;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

#menuhaut {
	background: url('menu-2.png') 100% 100%;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	text-align: center;
	font-size: 1em;
	height: 24px;
}



#menu {
	position: absolute;
	left:0;
	width: 170px;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
}

#menu h1 {
	padding-left: 8px;
	margin: 0 0 0 0em;
	line-height: 2.2em;
	width: 162px;
	background: url('menu-3.png') repeat-y;
	border-bottom: 1px solid #000000;
	color: #ffcc00;
	font-weight: bold;
	font-size: 1em;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	background: url('menu-4.png');
	font-weight: bold;
	
	list-style-image: url('menu-puce.gif');
	list-style-position: inside;
}

#menu li.menu {
	line-height: 1.4em;
	font-weight: bold;
	border-bottom: 1px solid #000000;
}


#news ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-weight: bold;
	background: url('menu-6.png');
}

#news li {
	line-height: 1.4em;
	font-weight: bold;
	border-bottom: 0px solid #000000;
}

#centre {
	margin-left: 171px;
	border-left: 1px solid #000000;
	padding: 5px;
	background: #FFFFFF;
	height: 800px;
}


#pied {
	height: 21px;
	background-image: url('menu-7.png');
	text-align: center;
	border-top: 1px solid #000000;
}



#menu A:link {
	COLOR: #CE4116; TEXT-DECORATION: none
}
#menu A:visited {
	COLOR: #CE4116; TEXT-DECORATION: none
}
#menu A:hover {
	COLOR: #ff6600; TEXT-DECORATION: none
}

a.menu:link {
	font-weight: bold;
	COLOR: #CE4116;
	TEXT-DECORATION: none
}
a.menu:visited {
	font-weight: bold;
	COLOR: #CE4116;
	TEXT-DECORATION: none
}
a.menu:hover {
	font-weight: bold;
	COLOR: #ff6600;
	TEXT-DECORATION: none
}
</style>
</head>

<body>


<div id="conteneur">
	<div id="header"></div>
	
	<div id="menuhaut">
		<table><tr><td>
		<a class="menu" href="../Site/Accueil.php">
			<img src="../Design/bt-home.gif" align="absmiddle" border="0" />  Accueil</a>&nbsp;&nbsp;&nbsp;
			
		<a class="menu" href="../Forum/">
			<img src="../Design/bt-sign.gif" align="absmiddle" border="0" />  Forum</a>&nbsp;&nbsp;&nbsp;
			
		<a class="menu" href="../Site/Livre_dor.php">
			<img src="../Design/bt-sign.gif" align="absmiddle" border="0" />  Livre d'or</a>&nbsp;&nbsp;&nbsp;
			
		<a class="menu" href="../Contact/Contact.php">
			<img src="../Design/bt-mail.gif" align="absmiddle" border="0" />  Contact</a>&nbsp;&nbsp;&nbsp;
		
		<a class="menu" href="javascript:AjoutFavo()">Ajouter ce site dans les favoris</a>
		</td>
		</tr></table>
	</div>

	<div id="menu">
		<h1>L'orchestre</h1>

		<ul>
			<li class="menu"><a href="">Menu 1</a></li>
			<li class="menu"><a href="">Menu 2</a></li>
			<li class="menu"><a href="">Menu 3</a></li>
			<li class="menu"><a href="">Menu 4</a></li>
			<li class="menu"><a href="">Menu 5</a></li>
			<li class="menu"><a href="">Menu 6</a></li>
			<li class="menu"><a href="">Menu 7</a></li>
			<li class="menu"><a href="">Menu 8</a></li>
			<li class="menu"><a href="">Menu 9</a></li>
			<li class="menu"><a href="">Menu 10 &&&&&</a></li>			
			</ul>
		</ul>
		
		<h1>Médiathèque</h1>
		<ul>
			<li class="menu"><a href="">Menu 1</a></li>
			<li class="menu"><a href="">Menu 2</a></li>
			<li class="menu"><a href="">Menu 3</a></li>
			<li class="menu"><a href="">Menu 4</a></li>
		</ul>
		
		<h1>Le site</h1>
		<ul>
			<li class="menu"><a href="">Menu 1</a></li>
			<li class="menu"><a href="">Menu 2</a></li>
			<li class="menu"><a href="">Menu 3</a></li>
			<li class="menu"><a href="">Menu 4</a></li>
		</ul>
		
		<h1>Goodies</h1>
		<ul>
			<li class="menu"><a href="">Menu 1</a></li>
			<li class="menu"><a href="">Menu 2</a></li>
		</ul>
		
		<h1>News</h1>
		<ul id="news">
			<li class="news"><a href="">Soirée Blues/Funk avec All Funk Project au local le 20 Mai dès 20h00! <br />En savoir plus ...<br /><br />
			Les photos et vidéos du concert sont en ligne !<br />En savoir plus ...Menu 1</a></li>
		</ul>
	</div>
	  
	<div id="centre">
		partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
		partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
		partie avec du contenu occupant le reste de la largeur<br />

		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />
		partie avec du contenu occupant le reste de la largeur<br />

	</div>
	  
	<div id="pied">
		<table><tr>
		<td>Copyright © 2004 - 2006 Philhar' Comines <b>(Informations sur le copyright)</b></td></tr></table>
	</div>

</div>

</body>
</html>

Modifié par tonton flubb (18 May 2006 - 23:07)
Attention à la propriété height !
Avec un navigateur implémentant correctement les CSS, cette propriété a pour effet de figer la hauteur d'un objet, quitte à faire dépasser le contenu si celui-ci est plus long que la hauteur choisie.

#centre {
	height: 800px;
}

avec Firefox, Konqueror, Opera, Safari, etc., le texte déborde. Si l'effet voulu est d'avoir une hauteur minimale, on utilisera plutôt la propriété min-height.

Même chose pour la zone du menu : il faudrait qu'elle soit extensible en fonction de la hauteur du texte.
a écrit :
Attention à la propriété height !
Avec un navigateur implémentant correctement les CSS, cette propriété a pour effet de figer la hauteur d'un objet, quitte à faire dépasser le contenu si celui-ci est plus long que la hauteur choisie.


Oui c'est ce que j'ai remarquer sur Firefox.

a écrit :
Si l'effet voulu est d'avoir une hauteur minimale, on utilisera plutôt la propriété min-height.


J'ai cru comprendre que ce n'était pas compatible en dessous de IE 7 ?

a écrit :
Même chose pour la zone du menu : il faudrait qu'elle soit extensible en fonction de la hauteur du texte.


Si vous parler de la largeur du menu, c'est vrai qu'il faudrait mais justement j'aimerais bien éviter parce que je trouve qu'après il n'y a plus assez de place Smiley confus

Merci beaucoup !
Je parle de la hauteur du menu. Si on ne veut pas sacrifier la lisibilité du menu lors d'un agrandissement du texte, il faut que celui-ci soit un minimum extensible en hauteur. C'est à dire qu'il tire sa hauteur de celle de son contenu, et non pas d'une hauteur fixée artificiellement.

IE6 comprend height comme un min-height. La seule solution viable consiste à utiliser min-height, et à utiliser height pour IE uniquement, via un hack ou un commentaire conditionnel.

Bien entendu, il est toujours possible de se passer de ce genre de hauteurs minimales, en gardant un contenu (menu et contenu principal) à l'intérieur du flux du conteneur.
J'ai donc mis min-height et height comme ca la hauteur est respectée dans tous les cas.

J'ai aussi mis une hauteur relative dans le menu du haut pour que la hauteur de celui-ci s'agrandie en même temps que le texte. Je suppose que c'était de ça que vous parliez ?

Par contre j'ai encore un problème avec la largeur du menu de gauche quand on agrandie le texte.

Le texte dépasse, mais je veux pas que le menu puisse s'élargir.
Y a t'il un moyen de faire un retour à la ligne du texte, ou alors vaut mieux mettre une largeur relative pour le menu ?
Modifié par tonton flubb (19 May 2006 - 08:38)
Sujet clos
Aller à