Problème Xhtml et Css

benoit_045 · March 3, 2011

Bonjour,

Voulant réalisé une bannière (header) pour mon site je me heurt a un problème : - je n'est pas de problème pour positionner mon header (image), dessus j'ais mis des "boutons"(image), la pas de problèmes ...

--> Mais l’orque je redimensionne la pge dans le navigateur -horreur- les boutons ne se déplace pas avec la bannière!!!

Voici les "codes" :

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" >
  <head>
  	<title>titre</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  </head>
  <body>
  	<div id="en_tete">
  	<div>
	<span style="position: absolute; top: 162px; left: 319px; width: 160px; height: 39px">
	<p><img src="header/headerc1.png"/></p>
	</span>
  	</div>

  	<div>
	<span style="position: absolute; top: 162px; left: 478px; width: 160px; height: 39px">
	<p><img src="header/headerc2.png"/></p>
	</span>
  	</div>

  	<div>
	<span style="position: absolute; top: 162px; left: 637px; width: 160px; height: 39px">
	<p><img src="header/headerc3.png"/></p>
	</span>
  	</div>

  	<div>
	<span style="position: absolute; top: 162px; left: 796px; width: 160px; height: 39px">
	<p><img src="header/headerc4.png"/></p>
	</span>
  	</div>

  	<div>
	<span style="position: absolute; top: 162px; left: 955px; width: 160px; height: 39px">
	<p><img src="header/headerc5.png"/></p>
	</span>
  	</div>

  	</div>


  	<div id="menu">

  	</div>

  	<div id="corps">

  	</div>

  	<div id="pied_de_page">

  	</div>
  </body>
</html>

Css :

body
{
  width: 1000px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ebebeb;
}
#en_tete
{
  width: 1000px;
  height: 197px;
  background-image: url("header/headerbeta1.png");
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

Voilà ...

eephyne · March 3, 2011

hum mauvaise section et quand bien même ça n'aurait pas vraiment sa place dans la zone dev.

benoit_045 · March 3, 2011

Je vois pas où le poster.

A part ici.

Jorodan · March 4, 2011

T'as peu de chance d'avoir de réponse... on est pas un forum d'entraide sur les technos web...

3rr0r404 · March 4, 2011

Déjà évite à tout prix de mettre des style dans ton code, préfère placer le tout dans un fichier css afin de t'y retrouver plus simplement ;)

Ensuite pour ton problème, mes notions de CSS sont bien loins mais je crois que ça vient de ta position "absolute"...

bloufworb · March 4, 2011

surtout que tu appel un fichier CSS dans ton stylesheet,

donc soit tu appel un CSS avec tout le CSS en un (ou plusieurs fichiers) soit tu fait tout dans ton html (mais je recommande aussi la première solution)!

a tu un url pour voir le problème (en matière j'ai envie de dire) ?!

il me semble d'ailleur que le "position: absolute; " n'est pas le meilleur moyen de placer des boutons !

width: 1000px;

conseil :pense aux petites résolutions ;)

BabaTheBeast · March 11, 2011

Moi c'est la première fois que je vois un body défini en largeur... ça me choque pas mal déjà.

Sauf si c'est une spécification récente en CSS (je suis pas forcément à jour) mais un body c'est ta page, tu peux pas lui balancer une taille car ça dépend de la taille de la fenêtre.

Déjà, refait ton design avec body normal, et inclus ton site dans une DIV qui elle peut avoir une taille fixe et des margin auto pour la centrer.

De plus, comme le dit SeinworB, 1000px n'est pas un standard. Faut taper un poil en dessous pour être sûr de s'afficher sur un standard web actuel préconisé en 1024 minimum. A cause des marges, bordures et menu déroulants des navigateurs, faut descendre encore un peu en dessous de 1000. En général, mes sites je les fait entre 920 et 980px de largeur fixe.

Si tu as un lien vers ton essai, avec les images, je peux y jeter un oeil. Là, juste avec le code c'est moins pratique.

benoit_045 · March 12, 2011

C'est bon j'ai résolu le problème :

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" >
  <head>
  	<title>**********</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  </head>
  <body>
  	<div id="en_tete">

  	</div>

      <div class=header_btn1>
     <a id="a1" href="home.html"><img src="header/headervide.png" alt="Entête" title="Retour sur la page d'accueil"/></a>
  	</div>

      <div class=header_btn2>
	<a id="a1" href="http://www.01.net"><img src="header/headervide.png" alt="Entête" title="******"/></a>
  	</div>

      <div class=header_btn3>
	<a id="a1" href="http://www.01.net"><img src="header/headervide.png" alt="Entête" title="****************"/></a>
  	</div>

      <div class=header_btn4>
	<a id="a1" href="http://www.01.net"><img src="header/headervide.png" alt="Entête" title="**************************"/></a>
  	</div>

      <div class=header_btn5>
      <a id="a1" href="http://www.01.net"><img src="header/headervide.png" alt="Entête" title="**************************"/></a>
  	</div>

      <div id="menu">

  <div class="element_menu">
  	<h3>Titre menu</h3>
  	<ul>
      	<li><a href="page1.html">Lien</a></li>
      	<li><a href="page2.html">Lien</a></li>
      	<li><a href="page3.html">Lien</a></li>
  	</ul>
  </div>

  <div class="element_menu">
  	<h3>Titre menu</h3>
  	<ul>
      	<li><a href="page4.html">Lien</a></li>
      	<li><a href="page5.html">Lien</a></li>
      	<li><a href="page6.html">Lien</a></li>
  	</ul>
  </div>

</div>

  	<div id="corps">


  	</div>

  	<div id="pied_de_page">

  	</div>
  </body>
</html>

Css :

body
{
  width: 1000px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ebebeb;
}
#en_tete
{
  z-index: 1;
  width: 1000px;
  height: 197px;
  background-image: url("header/headerbeta1.png");
  background-repeat: no-repeat;
  margin-bottom: 10px;
}
a, img 
{
  border:none;
}
a:active
{
  border:none;
}
.header_btn1
{
  z-index: 2;
  background-image: url("header/headerc1.png");
  position: relative; 
  top: -49px; 
  left: 99px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn2
{
  z-index: 2;
  background-image: url("header/headerc2.png");
  position: relative; 
  top: -98px; 
  left: 256px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn3
{
  z-index: 2;
  background-image: url("header/headerc3.png");
  position: relative; 
  top: -147px; 
  left: 415px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn4
{
  z-index: 2;
  background-image: url("header/headerc4.png");
  position: relative; 
  top: -196px; 
  left: 574px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn5
{
  z-index: 2;
  background-image: url("header/headerc5.png");
  position: relative; 
  top: -245px; 
  left: 733px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}

.header_btn1:hover
{
  z-index: 2;
  background-image: url("header/headerd1.png");
  position: relative; 
  top: -49px; 
  left: 99px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn2:hover
{
  z-index: 2;
  background-image: url("header/headerd2.png");
  position: relative; 
  top: -98px; 
  left: 256px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn3:hover
{
  z-index: 2;
  background-image: url("header/headerd3.png");
  position: relative; 
  top: -147px; 
  left: 415px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn4:hover
{
  z-index: 2;
  background-image: url("header/headerd4.png");
  position: relative; 
  top: -196px; 
  left: 574px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

}
.header_btn5:hover
{

  z-index: 2;
  background-image: url("header/headerd5.png");
  position: relative; 
  top: -245px; 
  left: 733px; 
  width: 160px; 
  height: 39px;
  background-repeat: no-repeat;
  margin-bottom: 10px;

bloufworb · March 13, 2011

top: -196px;

ça n'est pas normal de devoir rentrer des valeurs négatives!

width: 1000px;

beaucoup trop grand!! mais je me répète ! pense aux petites résolutions !

Au pire, ce qu'il y a au dessus n'est rien comparé a ce que je viens de voir...

d'après la façon dont tu a codé je pense croire que tu veut faire un genre de menu horizontal ...

et la ou tu m'a presque fait mourir d'une crise cardiaque, c'est au moment ou je me suis aperçu que tu a fait un "div" par onglet...

je t'arrète immédiatement, tu n'est pas du tout sur la bonne voie, le mieux c'est de faire un "div" conteneur et utiliser une liste "ul" puis encadrer tes liens par des "li" ! tu donne un "id" a ton "div" conteneur et des "class" a ton "ul" ... je ne vais pas en dire plus,mais va sur le site de http://www.alsacreations.com/ dans la partie "tutoriel CSS" tu a des exemple de menus de ce type, regarde leurs sources et tu comprendra rapidement le principe !

BabaTheBeast · March 16, 2011

Je confirme SeinworB, pas de div par menu mais une div de menu. Tout se gère en CSS sur du <ul><li>

benoit_045 · March 20, 2011

je t'arrète immédiatement, tu n'est pas du tout sur la bonne voie, le mieux c'est de faire un "div" conteneur et utiliser une liste "ul" puis encadrer tes liens par des "li" ! tu donne un "id" a ton "div" conteneur et des "class" a ton "ul" ...

Je ne comprend pas la façons dont tu procède, un petite exemple serait le bienvenu.

BabaTheBeast · March 22, 2011

Tu vas sur la plupart des sites récents et tu affiches le code source, tu verras ;)

En gros tu fais ça :

<ul>

<li>

<ul>

</ul>

</li>

</ul>

...

</div>

Et tu habilles en CSS les UL / LI / A etc....

En fouinant sur le net tu trouveras plein d'exemples concrets.

EDIT: désolé, j'ai mis des espaces pour bien présenter le code, mais ça remet tout en début de ligne...

Sign In

Problème Xhtml et Css

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived