28173 sujets

CSS et mise en forme, CSS3

Problème de construction en CSS

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: 


<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: 

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;}


Merci pour la dernière ligne droite...
Modifié par bingojm (16 May 2007 - 21:04)
Salut,

pour le menu je sais pas trop. j'ai vu le cas pour faire correspondre des liens sur une carte pour chaque cratères de mars.

avec des liens au positionnement imprevisible c'est surement une methode valable.

a écrit :

Ces boutons doivent quand même être placés verticalement et à intervales réguliers.


par contre la je suis plus sceptique...mais bon pk pas.

pour l'autre question le truc le plus simple que je soupçonne c'est que ton contenu des pages doit être trop grand pour ton div.
le moindre pixel qui rallonge une div placé en flottant a coté d'une autre et hop c'est le grand bazar.

edit: ah oui si c'est pas çà tu pourrais peut-être réédité ton message et indenter ton css car là c'est pas trés lisible. et a mon avis tu y gagneras toi même a le faire.

pascal
Modifié par CPascal (13 May 2007 - 22:26)
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.

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:

<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>
salut,

je vois deux possibilités pour resoudre ton placement a droite

1/ dans l'idée positionnement absolu je vais jusqu'au bout.

#right {
	width: 633px;
	height: 473px;
	margin:0 1px 0 1px;
	float: right;
	background-color:#99FF00;
	position:absolute;
             [b]
             left:260px;
             top:120px;[/b]
}


2/ dans l'idée positionnement float je vais jusqu'au bout.

je retire position:absolute de #right

et je mets les div menu et live à l'interieur d'un div left et #left { float:left; }

sinon tu as une succession de left left right => donc ton bloc right ne se met a droite que du div live et menu est au dessus.

pascal
Modifié par CPascal (15 May 2007 - 11:59)
Tout d'abord Pascal, merci!!!!
J'ai opté pour ta deuxième idée, c'est super!
Maintenant, il ne reste plus qu'un problème avant de remplir tout ca.
C'est que j'ai un espace qui reste avec mozilla entre le container et #accueil qui occupe toute la place du dessus. Tout est OK avec IE! Je ne sais pas si la solution se trouve dans les CSS des div ou dans les CSS des ul parce que si je supprime les ul et li dans le html, tout est nickel! Avec Mozilla, les ul se placent correctement au container mais c'est tous les autres div en dessous qui descendent...

Aussi, dernière petite chose. Y a-t-il moyen de centrer le container avec IE?

J'espère être clair... et encore merci!!!
Modifié par bingojm (16 May 2007 - 21:04)
Sujet clos
Aller à