Problème de construction en CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème de construction en CSS

bingojm

Salut.

Je suis novice et j'essaie de me mettre au CSS.
Je pense avoir compris le principe, mais je bloque sur certaines choses.
En effet, je suis en train de créer un site où les boutons du menu seraient inscrits (avec une écriture spéciale) sur une image qui serait mise en background. Il me faut alors un moyen précis pour faire correspondre des boutons "transparents" à l'image background. Ces boutons doivent quand même être placés verticalement et à intervales réguliers.
Pour ca, j'avais commencé à mettre l'image de la partie du menu (qui superposerait donc le background) et d'utiliser des zones réactives. De ce côté-là, je peux dire que c'est ok, tant sur Mozilla et IE, mais est-ce que j'utilise le meilleur moyen pour créer ces boutons-menu?

Maintenant, voici le vrai problème. J'ai eu beau chercher dans les forums, mais je n'ai pas trouvé solution à mon problème...
Lorsque que l'on clique sur un bouton du menu, son contenu doit s'afficher dans une autre div. J'utilise donc include php. Cela fonctionne. Mais cette div (ainsi que 3 autres) ne gardent pas leur place. Ils sont complètement décalé. Où est mon erreur SVP?
Je m'y prends peut-être très mal, mais j'ai vraiment besoin qu'on m'éclaire...

Voici le code:

Code :

<body>
<div id="container">
<div id="menu">
<img src="../../images/fond/menu.jpg" align="top" width="260" height="485" border="0" usemap="#Map">
</div>
<div id="visiteurs">...Compteur...</div>
<div id="connectes">...Compteur2...</div>
<div id="main">
<?php
if (!isset($_GET['page'])) $page= 'accueil';
switch($page)
{
case 'page1': include ('accueil.txt');break;
case 'page2': include ('village.htm');break;
}
?>
</div>
<div id="date">...date et heure...</div>
</div>
</body>
<map name="Map">
<area shape="rect" coords="48,455,149,482" href="http://www.test.be">
<area shape="rect" coords="55,415,144,445" href="http://www.test.be/fichiers/page1.php">
<area shape="rect" coords="57,372,254,405" href="http://www.test.be/fichiers/page2.php">
<area shape="rect" coords="55,332,220,363" href="http://www.test.be/fichiers/page3.php">
<area shape="rect" coords="54,290,204,320" href="http://www.test.be/fichiers/page4.php">
<area shape="rect" coords="52,247,184,279" href="http://www.test.be/fichiers/page5.php">
<area shape="rect" coords="47,207,150,239" href="http://www.test.be/fichiers/page6.php">
<area shape="rect" coords="43,165,125,198" href="http://www.test.be/fichiers/page7.php">
<area shape="rect" coords="36,121,203,155" href="http://www.test.be/fichiers/page8.php">
<area shape="rect" coords="14,19,94,51" href="http://www.test.be/fichiers/page9.php">
</map>

Et voici le CSS:

Code :

body, html {
margin: 10;
padding: 0;
}
body * {
margin: 0;
padding: 0;
text-align: left;
}
#container {
position: relative;
width: 895px;
height: 595px;
margin-left: auto;
margin-right: auto;
border: 1px solid #0E419A;
background-image:url(../../images/fond/adresses.jpg)}
#menu {
width: 260px;
height: 485px;
float: left;
margin-top:0;
padding:0;
}
#menu ul {
margin: 0 0 0 50px;
}
#menu ul li {
list-style-type: none;
padding: 0.35em 0.2em;
}
#menu ul li a {
font-size:25px;
color: #D1D9EC;
text-decoration: none;
padding: 0;
}
#main {
width: 563px;
height: 358px;
float: right;
margin: 38px 18px 0 0;
}
#connectes {
width: 80px;
height: 50px;
float: right;
margin: 125px 0 0 0;
}
#visiteurs {
width: 148px;
height: 50px;
clear: both;
float:left;
margin: 0 0 0 38px;
}
#date {
width: 148px;
height: 50px;
float:left;
margin: 0 0 0 38px;
}

Publicité

dartyduck

n00b AttitudE

t'as un lien pour qu'on voit de quoi ça a l'air ? ça sera plus facile de comprendre le contexte.

Message cité 1 fois

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

bingojm

dartyduck a écrit :

t'as un lien pour qu'on voit de quoi ça a l'air ? ça sera plus facile de comprendre le contexte.

Tout d'abord, merci pour le coup de main!!!
Voici un lien test mais avec les div remplis pour mieux voir le positionnement...
+/- correct sous IE (mais pas suffisant) et pas du tout avec Mozilla.
Voici:

Spoiler :

http://www.fisenne.be/fichiers/CSS/index3.php

dartyduck

n00b AttitudE

tout d'abord, je ne comprends pas pourquoi tu utilises des ul li dans ton css et pas dans ton code html. ça sert à rien d'en mettre dans le css dans ce cas.
Ensuite, plutot que d'utiliser une map, tu devrais justement utiliser les ul li avec des classes (une par bouton) pour ensuite fignoler les positionnement.
Enfin, effectivement, ton main est décalé. peut-etre parce que ton #connectes est en float:right;. Tu devrais regrouper #connectes et #visiteurs dans un div, et le mettre en float:left;
Je regarde avec mon pc pro avec IE6 et main est décalé. tu devrais préciser dans ton css le positionnement absolu ou relatif pour chaque div.

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

bingojm

Après conseils, j'ai évité la map. La situation a l'air de s'arranger.
Je dirais même qu'elle est ok avec IE mais pas avec Mozilla.
On en est pas loin, alors voilà...
C'est mon div #right qui pose problème. Je n'arrive pas à le placer à droite pour Mozilla. Je pense que je dois jouer avec les positions relative ou absolute, mais je dois avouer que je ne les différencie pas très bien (si toutefois c'est bien ca que je dois utiliser pour arranger ma situation?).

Voici mon CSS code actuel:
NB: j'ai placé des background de couleur pour mieux voir le résultat.

Code :

body, html {
margin: 10 0 0 0;
padding: 0;
}
body * {
margin: 10 0 0 0;
padding: 0;
text-align: left;
}
#container {
position: relative;
width: 895px;
height: 595px;
margin-left: auto;
margin-right: auto;
border: 1px solid #0E419A;
background-image:url(../../images/fond/adresses.jpg)
}
#menu {
width: 260px;
height: 365px;
float: left;
margin:0;
background-color:#336600;
}
#menu ul {
margin: 0 0 0 50px;
}
#menu ul li {
list-style-type: none;
padding: 0.35em 0.2em;
}
#menu ul li a {
font-size:25px;
color: #D1D9EC;
text-decoration: none;
padding: 0;
}
#accueil {
width: 895px;
height: 120px;
clear: both;
margin:0;
}
#accueil ul {
margin: 20px 0 0 15px;
}
#accueil ul li {
list-style-type: none;
display: inline;
}
#accueil ul li a {
font-size:25px;
color: #D1D9EC;
text-decoration: none;
padding: 0;
}
#right {
width: 633px;
height: 473px;
margin:0 1px 0 1px;
float: right;
background-color:#99FF00;
position:absolute;
}
#main {
width: 563px;
height: 358px;
background-color:#FFCC99;
margin:0;
float:right
}
#connectes {
width: 80px;
height: 50px;
background-color:#0033FF;
margin:0;
float:right;
}
#live {
width: 260px;
height: 100px;
float:left;
margin: 0;
clear: both;
}
#visiteurs {
width: 200px;
height: 50px;
clear: both;
float:left;
margin: 0;
background-color:#99FF00;
}
#date {
width: 200px;
height: 50px;
float:left;
margin: 0;
clear: both;
background-color:#663399;
}

Et voici le html:

Code :

<div id="container">
<div id="accueil">
<ul>
<li><a href="#" title="Accueil">Accueil</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="#" title="Accueil">Les membres</a></li>
<li><a href="#" title="Accueil">Village</a></li>
<li><a href="#" title="Accueil">Les dates</a></li>
<li><a href="#" title="Accueil">Les Photos</a></li>
<li><a href="#" title="Accueil">Divertissements</a></li>
</ul>
</div>
<div id="live">
<div id="visiteurs">visteurs</div>
<div id="date">date</div>
</div>
<div id="right">
<div id="connectes">hhsdf</div>
<div id="main">jhd</div>
</div>
</div>

dartyduck

n00b AttitudE

alors premiere chose : je ne suis pas sous FF sur ce pc, mais ton site il déchire grave sa mère !
Deuxieme chose : ton div right est une petite boite sans grande importance pour ton site, tu peux donc la positionner où tu veux sur ta page. Je te propose donc de la mettre en position absolute (explications : une boite en position relative se place par rapport à la boite qui la précède (suivant le code html). Une boite en position absolute se positionne par rapport au pixel supérieur gauche de son parent (la boite dans laquelle elle est imbriquée). On determine alors sa position soit en coordonnées (px, em, %...) soit en right, top, bottom, left = qqch.
Ainsi, elle sera positionnée de la meme facon sous IE et sous FF. Mais attention, il faut toujours privilégier les positions relative pour standardiser la mise en page d'un site. Mais pour ce qui est des petites boites indépendantes, ou des logos,... on peut exceptionnellement utiliser l'absolute.
Fin du cours de css.
et encore bravo pour ton site !

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

FORUM HardWare.fr

Programmation

HTML/CSS

Problème de construction en CSS

Sujets relatifs
Probleme programmation en C jeu de la vie	Solution à un problème de design
probleme sur scilab	probléme frame , include
Probleme Application.OnMessage	Problème : Requêtes sans résultat
Problème select	[PHP-GTK] Mais où est le problème ?
Problème d'encodage	Problème avec bouton on/off
Plus de sujets relatifs à : Problème de construction en CSS

Page générée en 0.071 secondes