Design extensible ....

alignement...

Sujet résolu

9 mai 2006 à 17:27:16

Salut tous les zéros

Je viens vous voir parce que j'ai créer un design extensible pour mon site mais une image ne s'aligne pas avec les autres.
Voici le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>FeNiX :: Starcraft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="FeNiX" href="fenix.css" />
</head>
<body>

<div id="ban_1"> </div>
<div id="ban_2"> </div>
<div id="ban_3"> </div>

</body>
</html>

Et le CSS :

body
{
margin: auto;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: left;
}

#ban_1
{
float: left;
background-image: url("design/ban_1.gif");
background-repeat: no-repeat;
margin-top: 0px;
height: 144px;
width: 471px;
}

#ban_2
{
background-image: url("design/ban_2.gif");
background-repeat: repeat-x;
margin-top: 0px;
margin-left: 471px;
margin-right: 345px;
height: 144px;
width: auto;
}

#ban_3
{
float: right;
background-image: url("design/ban_3.gif");
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0;
height: 144px;
width: 345px;
}

Et enfin le site : http://fenix.bw.free.fr/test2/test/

Donc le problème est que l'image de droites (ban_3.gif) devrait être bien alignée par rapport aux deux autres et aussi que ce n'est pas vraiment compatible avec IE (entre les 2 premières images il y a une barre noir

).

Merci d'avance

Regnareb

9 mai 2006 à 17:32:20

Mdr, comment veux tu afficher une image de 1024px, sur une page qui fait moins de 1024px de large ?

Je pense que ça doit venir de la.

Essaye en enlevant environ 10px sur ban_3 pour faire le test

Edit... ah finalement... "design extensible"

Mais je pense que c'est ca, ta troisieme image va sous la deuxieme car il n'y a pas assez de place.

TimPetricola

9 mai 2006 à 18:07:36

J'ai essayé mais ca ne change pas la taille mais ca décale l'image : si je diminue la largeur, il met décale l'image vers la droite (elle sort donc de la fenêtre et si je diminue la largeur; l'image va vers la gauche . Mais en aucun cas elle revient a la normale.
Voila ce que j'ai mis (suivant ton conseil) :

#ban_3
{
float: right;
background-image: url("design/ban_3.gif");
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
height: 144px;
width: 300px;
}

Regnareb

9 mai 2006 à 21:39:43

J'ai vu que tu as utilisé ce tutorial :
http://www.siteduzero.com/tuto-3-4010-1-faire-un-design-extensible.html

Relis-le... tu as fait une erreur
Indice, une phrase avec ce sigle :

Oui je suis sadique

TimPetricola

10 mai 2006 à 11:42:36

Merci j'ai trouvé j'avais pas placé mes div dans le bon ordre :lol:

J'avait trouvé avec un autre code mais ca ne marchait pas sous Opera. LE seul problème c'est que maintenant ca ne marche plus sous IE.

Si quelqu'un sait comment je peut faire pour que ca marche aussi sous IE : c'est pas de refus

Donc revoila les codes :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>FeNiX :: Starcraft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="FeNiX" href="fenix.css" />
</head>
<body>

<div id="ban_1"> </div>
<div id="ban_3"> </div>
<div id="ban_2"> </div>

<div class="titre_menu"> </div>
</body>
</html>

body
{
margin: auto;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: justify;
}

#ban_1
{
float: left; /* La première partie sera à gauche*/
width:471px; /* On définit la largeur de l'image */
height: 144px; /* On définit la hauteur de l'image */
background-image: url("design/ban_1.gif");
background-repeat: no-repeat;
}

#ban_2
{
width:100%; /* Se répétera sur toute la largeur de l'écran */
height: 144px;
background-image: url("design/ban_2.gif");
background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
}

#ban_3
{
float: right; /* La dernière partie est à droite */
width:345px;
height: 144px;
background-image: url("design/ban_3.gif");
background-repeat: no-repeat;
}

Et le lien : http://fenix.bw.free.fr/test2/test

strucky

10 mai 2006 à 11:57:39

Salut,

Ton code ne va pas.
Et le tuto de cette page, c'est n'importe quoi :-°

Comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>FeNiX :: Starcraft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="FeNiX" href="fenix.css" />
</head>
<body>

<div id="ban">
<div id="ban_gauche"> </div>
<div id="ban_droite"> </div>
</div

<div class="titre_menu"> </div>
</body>
</html>

body
{
margin: auto;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: justify;
}

#ban
{
height: 144px;
background: url("design/ban_2.gif");
}

#ban_gauche
{
float: left;
width:471px;
height: 144px;
background: url("design/ban_1.gif") no-repeat;
}

#ban_droite
{
float: right;
width: 345px;
height: 144px;
background-image: url("design/ban_3.gif") no-repeat;
}

TimPetricola

10 mai 2006 à 12:06:53

Merci pour l'aide mais ta solution fait disparaitre la 3eme image sous IE, Firefox et Opera (les seuls navigateurs que j'ai essaué :-°

)

strucky

10 mai 2006 à 12:20:54

Ah, j'ai oublé d'enlever le background-image :

#ban_droite
{
float: right;
width: 345px;
height: 144px;
background: url("design/ban_3.gif") no-repeat;
}

Si tes images font exactement la taille de tes blocs, tu peux également enlever le no-repeat

jp949

10 mai 2006 à 12:55:05

ta tecnique fonctionne mais elle empeche d'editer quoi que ce soit dans #ban, si tu veux mettre un texte ou un formulaire de connexion ou autre c'est impossible.
pour que ce soit editable il faut positionner les 2 float en1er dans le code html et pour resoudre le probleme sur IE suffit de mettre margin-left:-3px; pour #bandroite et margin-right:-3px; pour #bangauche

strucky

10 mai 2006 à 13:08:15

Bah si,

On peut très bien mettre du texte après les deux flottants, je vois pas ce qui gène.

<div id="ban">
<div id="ban_gauche"> </div>
<div id="ban_droite"> </div>
Ici Je mets le texte que je souhaite
</div

TimPetricola

10 mai 2006 à 14:47:50

Merci trucky ca marche sous opera, IE et firefox