18041 sujets

Questions générales et questions de débutants

Css, demande d'aide et de correction

bonjour, à partir d'un petit template j'ai voulu le personnaliser, mais je tombe sur deux gros problèmes que je n'arrive pas à résoudre:
- la "div" du menu de droite ne descen pas 'automatiquement' jusqu'au bas de la page et ça fait affreux ...
- (dans un deuxième temps): le menu horizontal de haut ne passe pas sous IE 6 et 7
Le lien de test se trouve ici :
http://refok.free.fr/pechecss/
Voici le code de la css qui me fait m'arracher les cheveux :
html {min-height: 100%;}
* {
	margin: 0;
	padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
		background: #c7ab84 url(img2/background.gif) /*repeat-x */top;
color: #444;
	font: normal 62.5% Tahoma,sans-serif;
}
p,code,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}
blockquote {
	background: url(img2/quote.gif) no-repeat;
	display: block;
	font-weight: bold;
	padding-left: 28px;
}
h1,h2,h3 {padding-top: 6px;}
/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
/* structure */
.container {
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 950px;

}
/* header */
.top {
	padding: 5px 10px 0;
}
.header {
	background: #FFF;
	font-size: 0.8em;
	height: 250px;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 950px;
}
.header h1{
	color: #ffffff;
	font-family:Georgia, "Times New Roman", Times, serif;
	padding:30px 0 0 10px;	
}
.header h2{
	color: #ffffff;
	font-family:Georgia, "Times New Roman", Times, serif;
	padding:50px 0 0 10px;	
}

.header .left {
	background: #B3C2C7 url(img2/header.jpg) no-repeat;
	font: normal 1.8em "Trebuchet MS",sans-serif;
	width: 950px;
	height:250px;
}
/* navigation */
.navigation {	
	background: #D9E1E5 url(img2/nav.gif);
	height: 41px;
	margin:0 auto;
	font: bold 13px sans-serif;
}

.navigation a {
	background: #D9E1E5 url(img2/nav.gif);
	border-right: 1px solid #ffffff;
	color: #456;
	display: block;
	float: left;
	font: bold 12px sans-serif;
	line-height: 41px;
	padding: 0 13px;
	text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}
/* main */
.main {
	background:#FFF0C2;
}
/* sub navigation */
.sidenav {
	float: right;
	width: 210px;
	background:#a8e5a7;
}

.sidenav h2 {
	color: #ffffff;
	font-size: 1em;
	line-height: 30px;
	margin: 0;
	padding-left: 12px;
	text-align:center;
}

.sidenav ul {
	padding: 0;
	border-top: 1px solid #EAEADA;
}

.sidenav li {border-bottom: 1px solid #EAEADA;}

.sidenav li a {
	font-size: 1.1em;
	color: #554;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}

.sidenav li a:hover {
	background: #ebf6e6;
	color: #654;	
}

.sidenav .image {
	width:210px;
}
.image {
	width:100%;
}

/* content */
.content {
	float: left;
	margin: 10px 0;
	padding: 0 16px;
	width: 700px;
}

.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}

.content li {
	list-style: url(img2/li.gif);
	margin-left: 18px;
}

.content p {font-family: "Lucida Sans Unicode",sans-serif; 	font-size: 13px;
}
.footer {
		border-top: 10px solid #FFF;
		background:#a8e5a7;
color: #FFF;
	font: bold 1em sans-serif;
	line-height: 40px;
	text-align: center;	
}
.footer p{
padding-top:20px;	
}

.footer a,.footer a:hover {color: #FFF;}

Certaines parties du code de la page index.html peuvent sembler provenir dailleurs et c'est tout à fait normal, c'est pour adapter ce 'template' à un cms, et c'est ici une version 'page unique en html et css' pour réussir à corriger ces problèmes.
Si je pouvais seulement faire descendre cette colonne de droite jusqu'en bas ce serait super, si ensuite l'on peut encore améliorer, voire nettoyer cette css ce serait le top !
à l'avance, grand merci à tous ceux qui voudront bien m'aider
@mitiés b g
a écrit :

Des colonnes factices devraient resoudre le problème

Smiley sweatdrop ben suis pas trop pour ce système ... et je pense plutôt qu'une correction de la css serait bien plus efficace ... et simple quand on s'y connaît, mais là j'avoue que je râme ...
@+ b g
...

Pour faire des colonnes de même longueur, soit tu utilise des colonnes factices, soit un tableau...

Que veux tu dire par correction de la CSS ?
a écrit :
Que veux tu dire par correction de la CSS ?

dans la css il doit être possible d'intégrer un codage pour adapter le taille de la colonne de droite quelque soit la page affichée ... non ?
@+
Non

Enfin... si avec display:table-cell; qui ne fonctionnera qu'avec très peu de navigateurs, donc qui n'est pas une solution viable actuellement.
à cause de quoi ?
il n' y a pas moyen de modifier cette css pour que cela fonctionne quitte à la refaire quasiment de A à Z .... ? Smiley biggol
@+
bg62 a écrit :
à cause de quoi ?

Parce que ce n'est pas interprété par certains navigateurs (IE pour ne pas le citer)

bg62 a écrit :
il n' y a pas moyen de modifier cette css pour que cela fonctionne quitte à la refaire quasiment de A à Z .... ? Smiley biggol

Je t'ai proposé une solution, qui est selon moi la plus simple à mettre en place et la plus robuste.
justement ... j'ai d'autres problèmes avec IE x... alors si je pouvais trouver un moyen de refaire cette css pour qu'elle soit compatible ce serait le top ! mais que mettre alors dans le codage ?
Salut,

bg62 a écrit :
mais que mettre alors dans le codage ?
Ben Laurie-Anne te l'a déjà dit non ? Est-ce que tu attends que quelqu'un t'écrive le code ? Si oui relire la règle 16 du forum.

Et concernant le menu en escalier dans IE il manque par exemple display:inline sur les éléments LI.
Modifié par Heyoan (08 Jun 2009 - 15:55)
Heyoan a écrit :
Salut,
Et concernant le menu en escalier dans IE il manque par exemple display:inline sur les éléments LI.

pour ce menu, dans la css j'ai ceci:

/* navigation */
.navigation {	
	background: #D9E1E5 url(img2/nav.gif);
	height: 41px;
	margin:0 auto;
	font: bold 13px sans-serif;
}

.navigation a {
	background: #D9E1E5 url(img2/nav.gif);
	border-right: 1px solid #ffffff;
	color: #456;
	display: block;
	float: left;
	font: bold 12px sans-serif;
	line-height: 41px;
	padding: 0 13px;
	text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}

j'ai mis ceci (en local) et cela semble fonctionner sur presque toutes les versions de IE :
.navigation li {display:inline;}

par contre pour le problème de la 'colonne' de droite ... là je suis complètement dépassé Smiley bawling si quelqu'un pouvait me donner ne serait-ce qu'un soupçon d'indication ...
@+
Modifié par bg62 (08 Jun 2009 - 16:36)
Tu as déjà eu plus "qu'un soupçon d'indication" :
Laurie-Anne a écrit :
Des colonnes factices devraient resoudre le problème


Edit: au passage c'est un bon réflexe de corriger les erreurs de validation. Pour commencer il ne faut pas modifier le doctype : garder 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sans rajouter de majuscules.
Modifié par Heyoan (08 Jun 2009 - 17:19)
j'ai corrigé quelques erreurs, celles qui restent sont celles qui ont générées par le codage du cms, et qui seront, je l'espère, corrigées lors de régénération de la page, donc là pas trop de soucis, mais je n'arrive toujours pas à trouver la faille dans la css concernant la colonne de droite qui ne veut pas aller jusqu'en bas et s'adapter aux différentes hauteurs possibles ... Smiley biggol là c'est vraiment le casse-tête !!!
@+
Sujet clos
Aller à