Pb de bordures / Footer / Redimensionnement conteneur

Question

NioX

13 Feb 2007 à 18:29

Bonjour tout le monde !

C'est mon deuximeme post sur Alsacreations. Je suis en train de construire un template Joomla en XML et CSS. Au delà du fait que c'est un template Joomla, je suis confronté à plusieurs problèmes qui sont purement dus à mon manque de connaissance en CSS.
J'ai bien cherché sur le Net, sur le forum, mais je n'ai pas trouvé la réponse à mes problèmes. Celà fait 4 fois que je recommence ce template, je dois vous avouer que j'aimerai bien le finir ! lol

Alors voilà, vous pouvez trouver en cliquant sur le lien qui va suivre le template avec ses différents problèmes, à savoir :

- Un problème au niveau des menus sur la gauche : Le conteneur s'adapte et d'agrandit avec le contenu central mais pas en fonction de la longueur des menus et je ne sais absolument pas pourquoi. Les menus passent par dessus le footer ou alors le dernier menu (4) est tronqué et passe en dessous du footer.

- Certaines div ne sont pas en place quand j'utilise Maxthon (anciennement MyIE 2) alors qu'avec IE et Firefox, tout à l'air bien placé. (voir la capture sous Maxthon).

- Sous FireFox, les bordure de chacun de mes menu n'apparaissent pas, alors que sous IE, pas de pb...

- Le menu de pied de page se met tout en bas de la page sous FireFox, alors que j'aimerai qu'il soit juste en dessus de la zone principale, comme c'est le cas sous IE.

Voici le lien : Lien
Voici le lien de la capture sous Maxthon : Lien

J'aurai aimé aussi avoir votre avis de grand manitou du CSS sur la construction et la manière dont je m'y suis pris pour construire ce template (est ce que j'ai bien fait les choses, est ce que j'aurai du m'y prendre autrement ?...)

Voilà, je pense que c'est tout. Ca fait une semaine que je tourne en rond la dessus, je vais devenir fou Smiley langue

J'en appelles donc à vous et à votre savoir Smiley cligne

Voici mon code HTML :


 <!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>Document sans nom</title>
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./correct_png.js"></script>
</head>

<body>

<div id="conteneur">

<div id="header">

<div id="logo"></div>
<div id="recherche">RECHERCHE</div>
<div id="menu_top">MENU TOP </div>
</div>

<div id="main">

<div id="access">ACCESS</div>

<div id="pathway">PATHWAY</div>

<div id="gauche">
<div id="menu1" class="border">MENU 1 <br />

</div>

<div id="menu2" class="border"> MENU 2

</div>

<div id="menu3" class="border"> MENU 3
<br />

<br />
</div>

<div id="menu4" class="border"> MENU 4
<br />

</div>
</div>

<div id"centre">

<div id="contenu">

  </div>

</div>
</div>
<div id="footer"></div>
<div id="menu_pied">Menu de pied de page</div>
</div>
<div id="lignes1"></div>
<div id="lignes2"></div>
<div id="e"></div>
</body>
</html>

Voici ma CSS :


/* CSS Document */

body {

background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;

}

#conteneur {
z-index:2;
position:relative;
top:5px;
left:65px;
width:812px;
height:100%;

}

#header {

width:812px;
height: 116px;
background-image:url(../images/header.png);
background-repeat:no-repeat;

}

#logo {
position:relative;
top:13px;
left: 13px;
background-image:url(../images/logo_semm.png);
background-repeat:no-repeat;
width: 197px;
height:87px;

}

#recherche {

position:relative;
top:-61px;
left:575px;
background-color:#FF9900;
width:200px;
height:40px;

}

#menu_top {

position:relative;
top:-56px;
left:225px;
background-color:blue;
width:560px;
height:20px;

}

#main {
position:relative;
width:812px;
height:100%;

background-image:url(../images/back_conteneur.png);
background-repeat:repeat-y;

}

#access {

position:relative;
top:5px;
width:200px;
height:20px;
margin-left:10px;
background-color:green;

}

#pathway {

position:relative;
top:-15px;
margin-left:225px;

background-color:green;
width:560px;
height:20px;

}

#gauche {
float:left;
}

#menu1 {

position:relative;
top:5px;
margin-left:10px;
padding:10px;
width:178px;
height:100%;
min-height:100px;

}

#menu2 {

position:relative;
top:15px;
margin-left:10px;
padding:10px;
width:178px;
height:100%;
min-height:100px;

}

#menu3 {

position:relative;
top:25px;
margin-left:10px;
padding:10px;
width:178px;
height:100%;
min-height:100px;

}

#menu4 {

position:relative;
top:35px;
margin-left:10px;
margin-bottom:0px;
padding:10px;
width:178px;
height:100%;
min-height:100px;

}

.border {
border-style:solid;
border-color:#CCCCCC;
border:1px;
}

#centre {
float:right;
}

#contenu {

position:relative;
top:0px;
margin-left:225px;
padding:10px;
width:540px;
height:100%;
min-height:100px;
background-color:#CCCCCC;

}

#footer {

position:relative;
width:811px;
height:32px;
background-image:url(../images/cadre_bas.png);
background-repeat:no-repeat;

}

#menu_pied {

font-size:10px;
color:#FFFFFF;
position:relative;
width:811px;
height:32px;
text-align:center;
clear:both;
}

#lignes1 {
z-index:1;
background-image:url(../images/lignes.png);
background-repeat:no-repeat;
position:absolute;
left:-44px;
top:380px;

height:190px;
width:123px;

}

#lignes2 {
z-index:1;
background-image:url(../images/lignes2.png);
background-repeat:no-repeat;
position:absolute;
left:870px;
top:300px;

height:319px;
width:258px;

}

#e {
z-index:1;
background-image:url(../images/e.png);
background-repeat:no-repeat;
position:absolute;
left:870px;
top:100px;

height:482px;
width:267px;

}

J'ai supprimé le contenu des div pour ne pas reallonger le post, qui est déjà il me semble, bien long ! Smiley cligne

Merci beaucoup pour votre aide !

NioX =)
Modifié par NioX (13 Feb 2007 - 18:40)

Raphael

Administrateur

13 Feb 2007 à 18:34

Hello,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Problèmes".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

Je te suggère fortement de modifier ton titre Smiley cligne

NioX

13 Feb 2007 à 18:42

Ok

Merci pour ce conseil ! J'ai modifié le titre en espérant que ça soit plus explicite.

NioX

14 Feb 2007 à 15:40

Mon problème de bordure est résolu ! J'ai trouvé ce qui n'allait pas ! Pour ceux que ca intéresse, lorsque l'on met un padding ou un margin sur une div qui a des bordures, Firefox ne l'interprete pas de la même facon qu'IE et du coup, les bordures n'apparaissent pas.

Ma syntaxe CSS pour les bordures n'était pas bonne non plus.

Par contre, il reste toujours les autres problèmes et la je rame pas mal.

Personne pour un p'tit coup de pouce svp ? Smiley cligne

Modifié par NioX (14 Feb 2007 - 15:45)

NioX

14 Feb 2007 à 16:24

Bon, et bien apparemment tout mes problèmes sont résolus ! Smiley langue

J'ai modifié la CSS, mais je ne pourrait pas vous dire exactement comment j'ai fait et ca a marché sur IE ! (le conteneur s'est adapté, même en fonction du menu de gauche !! Smiley smile

)
Mais ca ne marchait toujours pas sous Firefox : Il fallait rajouter un float:left; sur la div main et la div footer ! Et là, miracle, je n'y croyais plus, mais si, ca a marché ! Tout est en place, c'est impec !

C'est bien n'empeche, j'ai fait les questions et le réponses ^^ lol

+++++ tout le monde !

Sujet clos

CSS et mise en forme, CSS3

Pb de bordures / Footer / Redimensionnement conteneur