Correction css demande d'aide

Résolu/Fermé
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 - 8 juin 2009 à 11:57
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 - 8 juin 2009 à 16:14
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 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
8 juin 2009 à 12:00
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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
8 juin 2009 à 12:03
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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
8 juin 2009 à 16:14
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