28173 sujets

CSS et mise en forme, CSS3

Problème de positionnement de plusieurs images

Salut à tous !

Je découvre de façon très empirique l'univers des CSS et je suis bien heureux de tomber sur un site aussi complet que celui-ci !

Je me permet de poster car j'ai un problème de positionnement d'images qui me tracasse depuis 2 jours. Rien ne vaut un petit visuel, vous pouvez télécharger mon exemple ici:

http://www.inahya.com/test.zip


La chose se présente de la manière suivante:
J'ai une cellule qui fait 100% de hauteur sur laquelle vient se positionner une image d'acceuil centrée par rapport au naviguateur (en bordeau). En dessous de celle-ci, j'aimerai avoir 4 autres images qui seront le choix des langues (ADSl/bas debit et FR/En). Ca sera des roll-overs mais je n'ai pas encore inclu le javascript pour le moment. 2 sont alignées sur le côté gauche (grise et jaune) et les 2 autres sur le côté droit (bleue et verte).


Sous Dreamweaver, pas de problème, mais en pratique sous IE et Mozilla, j'ai mes 2 menus de droite (en bleu et vert) qui partent tout en haut. pas moyen de les positionner convenablement et je ne comprend pas pourquoi.

Si une personne bien veillante pouvait m'apporter une solution. Merci d'avance !!

P.S: Je mets le fichier sans les images si ça peut suffire à certains:

<!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>test</title>
<style type="text/css">
<!--

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  }
  
body{
	background: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	background-image: url(background.gif);
}

#big {
	width: 776px;
	height: 100%;
	min-height: 100%;
	background: #FFFFFF;
	position: relative;
    margin-left: auto;
    margin-right: auto;
	}
	

#logo{

	position:absolute;
    left: 50%; 
    top: 50%;
    margin-top: -218px; 
    margin-left: -186px; 
	}

#adsl_fr{

	position:absolute;
    left: 50%; 
    top: 50%;
    margin-top: 236px; 
    margin-left: -186px; 
	}

#adsl_en{
	position:absolute;
    left: 50%; 
    top: 50%;
    margin-top: 270px;
    margin-left: -186px; 
	}	
	
#56k_en{
	position:absolute;
	left: 50%;
	top: 50%;
	margin-top: 270px;
	margin-left: 120px;
	}

#56k_fr{
	position:absolute;
	left: 50%;
	top: 50%;
	margin-top: 236px;
	margin-left: 120px;
	}
	
-->
</style>

</head>

<body>

<div id="big">
		<img src="intro.jpg" alt="logo" name="logo" width="373" height="436" id="logo"/>
  		<img src="fr_g.gif" alt="Adsl_Fr" name="Adsl_Fr" width="74" height="17" id="adsl_fr"/>
  		<img src="fr_d.gif" alt="56k_Fr" name="56k_Fr" width="74" height="17" id="56k_fr"/>
		<img src="en_g.gif" alt="Adsl_En" name="Adsl_En" width="74" height="17" id="adsl_en"/>
		<img src="en_d.gif" alt="56K_En" name="56K_En" width="74" height="17" id="56k_en"/>
</div>
</body>
</html>

Modifié par Igor (24 Feb 2006 - 11:11)
Yo!
Faudrais que tu essais de simplifier ton code CSS il y a beaucoup de choses inutiles... Sinon pour ton pbleme essais id à la place de name... Tout de suite cela fonctionnera beaucoup mieu Smiley cligne .

++
Merci!

- Qu'est ce que je peux simplifier ?
- Les balises Name sont peut-être superflues (?) mais sinon t'as pas du dérouler complètement le scroller vertical Smiley cligne - car j'ai déjà mis les balises id (m'enfin quand même !!).

Sinon est-ce que ça ne résoudrait pas l'affaire avec des balises <span> plutot que des <div> pour les 4 mini-images concernées ?
En enlevant ce qui est superflux... Sinon pour les images t'avais raison j'avais mal regardé Smiley langue .
<!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>test</title>
<style type="text/css">
<!--
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
  padding: 0px;
	background-image: url(background.gif);
}

#big
{
	position: absolute;
	width: 776px;
	left: 50%;
	margin-left: -388px;
  background: #FFFFFF;
 text-align: center;
}

ul
{
 padding: 2px 0px 0px 201px;
 margin: 0px;
 list-style-type: none;
}

li
{
 float: left;
 margin-left: 2px;
 height: auto;
 width: 92px;
 text-align: center;
}

li#fr_h
{
  margin-left: 0px;
  background: #ff0;
}

li#fr_b
{
  background: #f00;
}

li#en_h
{
  background: #0f0;
}

li#en_b
{
  background: #0ff;
}

#big img
{
 margin-top: 2px;
}
-->
</style>
</head>
<body>
<div id="big">
  	<ul><li id = "fr_h">ADSL/Fr</li><li id = "fr_b">56k/Fr</li><li id = "en_h">ADSL/En</li><li id = "en_b">56k/En</li></ul><br/>
		<img src="intro.jpg" alt="logo" width="372" height="436"/>
</div>
</body>
</html>


++
Encore merci pour ton aide NuDD !!

Ce n'est pas ça que je cherche à faire mais plutot mais comme dans l'image que je joint à ce post.


upload/5329-exemple.jpg


De plus, ma cellule "big" fait 100% de haut (donc les balise "body" et "html" également) et je me demande si mes problèmes de positionnement ne viendraient pas de la en fait...

Je vais essayer de m'appuyer sur ce tu as déjà fait (je trouve curieux de faire ceci avec des balises de liste - m'enfin si ça marche ^^).

Il faut que j'y arrive (néanmoins toute aide est encore la bienvenue Smiley langue !).

K3ta
Modifié par K3tamiNe (24 Feb 2006 - 15:39)
essaye ceci

<!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>test</title>

<style type="text/css">

<!--

body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background:black;
	text-align:center;
}
#big
{
	margin:0 auto;
    background: #FFFFFF;
    border:1px dashed gray;			 
	width:372px;	  
	text-align:left;
}
ul
{
 margin: 0;
 list-style-type: none;
}

ul#adsl {
 float: left;
 height: auto;
 width: 92px;
}
ul#rtc {
 float: right;
 height: auto;
 width: 92px;
}
li { text-align: center;}
li#fr_h { background: #ff0;}
li#fr_b { background: #f00;}
li#en_h { background: #0f0;}
li#en_b { background: #0ff;}
#big img { margin-bottom: 2px;}
-->
</style>
</head>
<body>
<div id="big">
	<img src="intro.jpg" alt="logo" width="372" height="436"/>
  	<ul id="adsl">
		<li id = "fr_h">ADSL/Fr</li>
		<li id = "en_h">ADSL/En</li>
	</ul>
	<ul id="rtc">
		<li id = "fr_b">56k/Fr</li>
		<li id = "en_b">56k/En</li>
	</ul>
</div>
</body>
</html>
K3tamiNe a écrit :
Question: Faut-il que je passe plutôt par des tableaux pour les 4 vignettes d'en bas ?



Non, les tableaux sont réservés aux données tabulaires, pas à la présentation.
Bonjour,

glecocq a écrit :
Non, les tableaux sont réservés aux données tabulaires, pas à la présentation.


Bah... non, en fait, pas vraiment aussi franchement. Ah, ces fichues données tabulaires... Smiley cligne

Bref :
- solution CSS disponible, immédiatement réalisable, sans perte de temps, bien maîtrisée, se déclinant correctement partout => CSS
- solution CSS coûteuse à chercher, au résultat incertain ET solution tabulaire immédiatement disponible et ne compromettant pas l'accessibilité (se linéarise bien) => tableau de présentation à envisager.

K3tamiNe : selon le temps que tu peux y consacrer, creuse la solution CSS pour tes vignettes, ou celle d'un tableau simple. Sans idéologie ni hésitation Smiley cligne
Modifié par Laurent Denis (02 Mar 2006 - 18:18)
Sujet clos
Aller à