28221 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de positionnement de DIV

Bonsoir à tous,

Voila je souhaite refondre un site qui est visible ici http://kwa29.free.fr/Sofibra/index2.html
Mais pour etre dans les normes je souhaite abandonner les tableaux pour ma mise en page
Hé voila le résultat visible ici http://kwa29.free.fr/Sofibra/index3.html
G essayé diverses solutions avant de poster evidemment comme les margin, float, line-height, position, .... mais rien ni fais soit cela me plante ma mise en page du footer soit cela ne marche pas
Je vous poste le html utilisé

<body class="c-pastel">
	<div id="x-menu-3">
		<div id="x-box-1">
		<h1>r&eacute;server un h&ocirc;tel</h1>
      <h2>en express</h2>
      <h3>Id&eacute;e : liste al&eacute;toire de 2/3 hotels avec <a href="un%20petit%20lien">liens vers otedis</a></h3>
		Si chacun ne ressemble à aucun autre, tous ont pourtant un point commun que vous ne manquerez pas de constater :
		la même envie de vous apporter du sourire, du confort et du professionnalisme.
		</div>
		
		<div id="x-box-2">
		<h1>Des instants pleins de vie...</h1>
		 	<h3>Voici ce que chacun des hôtels que nous vous présentons ici souhaite vous offrir...</h3>
			<h2>[Recherche par r&eacute;gion][Recherche par ville]</h2>
			<br />
			<img height="116" src="images/carte_off.gif" width="119" alt="Cliquer ici" />
         <br />	 
		 Un petit texte normal pour voir ce que cela donne osi
            <form action="lala.php">
			 <select> 
			  <option value="More than 5 years.">Votre choix ...</option> 
			  <option value="search">aix-en-provence</option> 
              <option value="search">brest</option> 
              <option value="search">Dijon</option> 
              <option value="search">Dol-de-bretagne</option> 
              <option value="search">Le Mans</option> 
			</select>
            </form>		
			
			<a href="http://www.croix-rouge.fr/index/partner_campagne.html">
			<img src="http://www.croix-rouge.fr/goto/images/banners/crf_campagne_468x60.gif" width="468" height="60" alt="Cliquez ici" /></a>				
		</div>
		
		</div>		
	   <div id="x-footer">
<img src="images3/mail_bas_gauche.gif" alt="Aucune image..." class="bando_gauche" />
<a href="http://www.hotel-sofibra.com/" title="Cliquer ici pour revenir à l'accueil"><img src="images3/mail_bas_droit.gif" class="bando_droite" alt="Sofibra - Groupe hôtelier - Océania" /></a>
<img src="images3/ligne_bleu.gif" alt="Aucune image..." class="bando_centre" />
</div>
	
	<div id="x-footer-errata">
<a href="" title="Plan du site">plan du site</a> | 
<a href="" title="Mentions legales">mentions l&eacute;gales</a> | 
<a href="" title="Crédits photos">cr&eacute;dits photos</a>	
	
	<br />SOFIBRA &copy; 2002 -2005
	<a href="http://jigsaw.w3.org/css-validator" title="CSS Validator"><img src="images2/css.gif" alt="Aucune image..." /></a>	
	<a href="http://validator.w3.org/check/referer" title="X-HTML Validator"><img src="images2/xhtml.gif" alt="Aucune image..." /></a>
	<br />&nbsp;
		</div>	
</body>
</html>

Ainsi que les fichier CSS visible ici
couleurs.css http://kwa29.free.fr/Sofibra/images3/couleurs.css
base.css http://kwa29.free.fr/Sofibra/images3/base.css

Ma question est la suivante : Comment rèussir à positionner les 2 divs pour avoir la meme chose que sur la page index2.html ????

D'avance merci pour toutes reponses.... Smiley biggrin
Modifié par Kwa29@louest (28 Feb 2005 - 16:42)
Je ne vois pas de question !

Je n'ai pas lu tes 100 lignes de code HTML, ni tes 352 lignes de code CSS. Personellement, ça me décourage, pour plusieurs raisons. La page est en ligne, je peux y accéder avec mes propres outils (Web Developper Bar pour Firefox, par exemple) et le problème n'est pas ciblé.

Bref, vire-moi tous ces retours de lignes doubles dans le CSS, cible un peu ton problème et pose une question ! Sinon, personne n'aura ni l'envie ni la possibilité de t'aider. On veut bien, mais si on ne connaît pas le problème!

@+, HoPHP
Yes yes pas de pb je rectifie le tire en simplifiant le code incriminé et en reformulant mieu ma question..
Merci pour le coup de pouces
Maintenant, un élément de réponse:

Intéresse-toi aux flottants.

Commence par appliquer 
x-box-1 {
    float: left;
}
Ce sera déjà un bon pas en avant !

Ensuite, au boulot ! Smiley lol

@+, HoPHP
Comme mis plus haut
a écrit :

G essayé diverses solutions avant de poster evidemment comme les margin, float, line-height, <b>position</b>, .... mais rien ni fais

et biensur le float mais cela fous mon design en lair (nb: le bas se retrouve en haut)...
Merci pur ta reponse... je continue à chercher...
Je me suis peu etre mal exprimé mais la solution proposé par HoPHP avais déjà été utilisé et pour vous en convaincre g mis en ligne la version avec le float: left

D'ailleur o passage le float:left puis sur la x-box-2 un float:right ne marche pas mieux.... Smiley bawling Smiley bawling
On va bien trouvé ce qui ne va pas mais pour l'instant je fais choux blanc
Kwa29@louest a écrit :
Je me suis peu etre mal exprimé mais la solution proposé par HoPHP avais déjà été utilisé et pour vous en convaincre g mis en ligne la version avec le float: left


Non, ta version comporte une erreur je ne sais où. L'ajout d'un simple float:left à la volée donne la mise en page voulue. Tu peux t'en assurer en ajoutant simplement le style en ligne directement dans le code HTML:

<div id="x-box-1" style="float: left;">
Et pourtant cela reviens exactement au meme. Je viens de faire la modif sur le serveur et cela ne change rien.
Logique d'ailleur que ce soit en css fichier ou direct dans le html cela na aucune incidence sur le design (ca reviens o meme kwa !!!)

Merci pour ta reponse mais cela n'est pas encore bon.... Smiley ravi on va y arriver je le sens
Heu... Je commence à comprendre, là, en effet. Relis le message de HoPHP.

Tiens, je te le remets:

HoPHP a écrit :
Maintenant, un élément de réponse:

Intéresse-toi aux flottants.

Commence par appliquer 
x-box-1 {
    float: left;
}
Ce sera déjà un bon pas en avant !

Ensuite, au boulot ! Smiley lol

@+, HoPHP


Il ne t'as pas dit: voilà la solution toute cuite. Il t'a donné une piste à suivre et le premier pas à faire.

Maintenant que ton x-box-1 flotte et que ton x-box-2 se place à côté de lui, l'étape suivante est de travailler les marges de x-box-2 (essaye par exemple un margin-left: 160px).

Et je précise: Attention, je te donne une piste, pas ta page finie

(Ou alors, autre hypothèse plausible, tu testes dans un navigateur où ta page provoque un bug. En tous cas, le chemin indiqué est le bon dans IE Win, Firefox, Opera, ce qui est déjà une bonne base...)
Modifié par Laurent Denis (28 Feb 2005 - 16:13)
Kwa29@louest a écrit :

Logique d'ailleur que ce soit en css fichier ou direct dans le html cela na aucune incidence sur le design (ca reviens o meme kwa !!!)


Pour info, si, cela peut avoir une énorme incidence, en cas de conflit entre des styles (ce qui est plus fréquent qu'on ne croit quand on débute) : les styles en ligne (attribut style) ont une priorité systématiquement plus élevée que les styles incorporés (élément style) et que les styles externes (fichiers CSS externes).
Bon, OK. Encore une piste Smiley lol 
clear:both;
Choisis sur quelle balise il te faut l'appliquer Smiley lol

@+, HoPHP
En effet Laurent Denis. Merci bien d'avoir appuyé sur ce point car en effet cela à une incidence certaines.
Après essai, il est vrai de dire qu'il faut jouer avec les pixel pour avoir ce que je souhaite.
En espérant que selon la résolution cela ne change rien. Dans la logique non car si on fais du xhtml c bien pour s'afranchir de tous ca (resolution, navigateur,...)
Je met donc le [Résolu] sur le sujet car pour moi après quelques heures cela devrait marcher.
Merci à tous pour votre participation.
Modérateur
Kwa29@louest a écrit :
En espérant que selon la résolution cela ne change rien. Dans la logique non car si on fais du xhtml c bien pour s'afranchir de tous ca (resolution, navigateur,...)


En fait, écrire les pages en xhtml ne garantie aucunement que ton site passera dans toutes les résolutions. Tu peux très bien faire une page valide xhtml strict, mais si tu as mis ton interface large de 1200px, ca ne passera pas dans une résolution 1024x768.

Au lieu d'espérer que ca passe partout ton interface, tu devrais l'essayer au moins en 800x600 et en 1024x768, c'est les résolutions les plus fréquentes. Smiley cligne
Modifié par Merkel (28 Feb 2005 - 17:03)
Sujet clos
Aller à