Correction css demande d'aide

Résolu
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   -  
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,
j'ai fermé le premier post à cause d'une intervention presque hors sujet et je renouvelle donc ...
gros, très gros besoin d'aide pour corriger une css !(merci donc si vous le pouvez de m'aider sur ce problème et sur rien d'autre !) car je suis obligé de republier un nouveau post pour des réponses quasiment hors sujet
le lien de la page html :
http://refok.free.fr/pechecss/
- premier gros problème : la colonne de droite que je voudrais voir aller automatiquement jusqu'au bas de page, quelque soit le contenu de la page, là je crise !!!!
- autre problème : le menu du haut qui ne passe pas sous certaines versions de IE ...
voici la css actuelle :
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;}

ne vous préoccupez pas trop d'autres évenyuels petis 'codes', il s'agit là d'une page html qui devrait servir à adapter le look au template d'un cms, mais pour ces deux gros points toute aide sera la (très) bienvenue !
grand merci à l'avance
@+ b g
A voir également:

3 réponses

Ozimandias Messages postés 505 Date d'inscription   Statut Membre Dernière intervention   46
 
Je te reréponds sur ce post (copier coller de l'autre):

Pour ton premier soucis, je ne vois qu'une solution, calculer avec un javascript la taille qu'il faut et la lui gaver en force.

Trouver la taille de la fenêtre puis la mettre en force sur le Div:
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"

if (document.body)
{
var haut = (document.body.clientHeight);
} 
else
{
var haut = (window.innerHeight);
}

document.getElementById['le id de ton div ici'].style.height.value = haut;

// fin du script -->
</script> 




Par contre il te faudra ajouter dans ton div: <div style="height:auto;" id="id de ton div">
Qu'est ce qui ne passe pas sur ton menu? j'utilise firefox et tout marche bien.
0
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
merci mais (à mon humble avis ...) rien à voir, je pense que si la css est correcte tout passera, c'est là le problème que je n'arrive pas à corriger !
@+
0
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
je viens d'essayer, mais effectivement, après intégration dans le template le JavaScript est très mal pris en compte ... j'en reviens donc à ma première question : comment réussir à modifier cette css ?
@+ b g
0