[css]divers problemes d'affichage

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [css]divers problemes d'affichage

eagle84

Bonjour a tous :hello:
j'ai quelques problemes avec un de mes nouveaux sites : http://www.aminecherkaoui.com/

1er probleme :
j'aimerais que le centre prenne tout l'espace jusqu'au footer et que ca marche sur ie et firefox j'ai essayer plusieurs tentatives en mettant un height:100%; sur la classe centre, mais ca depasse le footer :s

2eme probleme :
les hoover s'affichent correctement sur firefox mais pas sur ie.

3eme probleme :
j'aimerais mettre une image sur la partie droite, comment puis je faire ca?

les css et le code utilisés :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site Perso</title>
<style type="text/css">
* {padding: 0; margin: 0;}
html, body {
height: 100%;
font: 0.9em "Trebuchet MS", helvetica, sans-serif ;
background: #33333 ;
}
#header {
width: 790px;
margin: 0 0;
height: 109px;
background-color: #99CCCC;
}
/* Le centre que j'aimerais qu'il prenne toute la page sans depasser le footer */
#centre {
background-color:#9999CC;
position: relative;
width: 790px;
}
/* Mon Pied de page */
#pied {
height: 30px;
width: 790px;
position: absolute;
bottom: 0;
background-color: #99CC99;
text-align: center;
}
/* les images de mon header ainsi que les hover */
#header1 {
background-image: url(images/theme_01.gif);
height: 109px;
width: 296px;
float:left;
padding-left:0 px;
padding-right:0 px;
border: 0px;
}
#header2 {
background-image: url(images/theme_02.gif);
height: 109px;
width: 123px;
float: left;
}
#header3 {
background-image: url(images/theme_03.gif);
height: 109px;
width: 72px;
float: left;
}
#header3:hover {
background-image: url(images/theme_03_o.gif);
height: 109px;
width: 72px;
float: left;
}
#header4 {
background-image: url(images/theme_04.gif);
height: 109px;
width: 169px;
float: left;
}
#header4:hover {
background-image: url(images/theme_04_o.gif);
height: 109px;
width: 169px;
float: left;
}
#header5 {
background-image: url(images/theme_05.gif);
height: 109px;
width: 130px;
float: left;
}
#header5:hover {
background-image: url(images/theme_05_o.gif);
height: 109px;
width: 130px;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div id="header1"></div>
<div id="header2"></div>
<div id="header3"></div>
<div id="header4"></div>
<div id="header5"></div>
</div>
<div id="centre">
ca c le centre qui ve pas s'arreter ...
</div>
<div id="pied">
le footer
</div>
</body>
</html>

merci bien

---------------
Feed-Back

Publicité

xtof_83

Freeride Spirit

Sur IE 6 et avant le :hover marche que sur les a, donc fait en sorte d'avoir cette configuration HTML pour faire un effet hover.

Pour le centre :
C'est pas possible ce que tu veux avoir....
Si tu veux le bas tout en bas (absolut)... ben le centre aura que la taille du contenu.
Sinon tu enléve le absolut, tu auras le centre coller avec le bas...Mais le bas, sera à la hauteur de la fin du centre...

Sinon tu peux un peu tricher, tu englobles tout, est tu mets la couleur du fond de centre...

Pour l'image je sais pas ce que tu veux?

Code :

<div id="header">
<div id="header1"></div>
<div id="header2"></div>
<div id="header3"></div>
<div id="header4"></div>
<div id="header5"></div>
</div>

C'est nul, archi nul

un menu c'est :

Code :

<ul>
<li>lien1</li>
<li>lien2</li>
<li>lien3</li>
</ul>

Et après tu styles

Message édité par xtof_83 le 07-03-2007 à 17:54:05

eagle84

salut et merci pour tes nombreuses reponses, j'ai pas eu encore l'occasion de tester tout ce que tu ma di mais voila ou j'en suis:
je vien d'ajouter les "a" comme tu me la specifier, mais rien ne saffiche a present:

exemple sur la partie css :
#header5 a {
background-image: url(images/theme_05.gif);
height: 109px;
width: 130px;
float: left;
}
#header5 a:hover {
background-image: url(images/theme_05_o.gif);
height: 109px;
width: 130px;
float: left;
}
sur la partie affichage (html) je specifie :
<div id="header5"></div>
ou
<div id="header5 a"></div>
ca change rien rien ne saffiche?

je vien de faire une maj www.aminecherkaoui.com

eagle84

yop yop j'ai trouver une solution pour les hover :
en css:
a.header3 {
en html
<a class="header4" href="#"></a>
Merci

xtof_83

Freeride Spirit

Bon c'est pas encore ça, mais ça se précise...

eagle84

hello xtof,
j'ai apris quelques trucs et j'en ai profiter pour alléger le code et les choses qui ne sont plus necessaire.
je vien de mettre le site a jour, (un ctrl+f5 peut etre necessaire pour voir la nouvelle version)

FORUM HardWare.fr

Programmation

HTML/CSS

[css]divers problemes d'affichage

Sujets relatifs
IE et Firefox...pb à l'affichage	recuperer le tableau affichage des données de mysql (dans easyphp) ?
Accelerer exécution boucle en désactivant l'affichage	[Divers]activeX sans popup de confirmation
affichage aléatoire d'images de format différents	[CSS] Problèmes entre liens images et liens textes
Différence d'affichage Firefox/IE ??	Probléme Affichage de texte à l'écran
probleme d'affichage avec internet explorer	[Divers] Technos graphiques web
Plus de sujets relatifs à : [css]divers problemes d'affichage

Page générée en 0.044 secondes