28220 sujets

CSS et mise en forme, CSS3

Faire un SPAN avec du DIV

Bonjour à tous,

Je suis fasse à un problème d'alignement de box (étonnant !! Smiley biggrin ).
A admirer ici http://kwa29.free.fr/Sofibra/index3.html
Mon code HTML

<div id="x-menu-3">
		<div id="x-box-1">
		<h1>r&eacute;server un h&ocirc;tel</h1>
      <h2>en express</h2>
      <h3>Cliquer sur un hôtel pour réserver une chambre</h3>
      <a href="" title="Hotel ...">Hôtel Océania*** Centre à Brest</a><br />
      <a href="" title="Hotel ...">Hôtel Océania*** à Quimper</a><br />
      <a href="" title="Hotel ...">Hôtel Océania*** à Nantes</a><br />
      <a href="" title="Hotel ...">Hôtel Océania*** à Paris</a><br />
      <a href="" title="Hotel ...">Hôtel Mascotte*** à Aix en Provence</a><br />
      <a href="" title="Hotel ...">Hôtel Mascotte*** à Marseille</a><br />
      <a href="" title="Hotel ...">Hôtel Mascotte*** à Quimper</a><br />
      <a href="" title="Hotel ...">Hôtel Mascotte*** à Nantes</a>
		</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>		
		<table>
		<tr>
		<td><h2>[ Recherche par r&eacute;gion ]</h2></td>
		<td><h2>[ Recherche par ville ]</h2></td>
		</tr>		
		<tr>
		<td class="centrer"><img height="116" src="images3/carte_off.gif" width="119" alt="Cliquer ici" /></td>
		<td class="centrer"><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></td>
		</tr>				
		</table>
		</div>
		</div>

Mon code CSS

#x-box-1 {
   border-left: 					gray 1px solid;
	border-bottom:			gray 1px dotted;
	width:								180px;
	padding: 						5px;
float:left;
}
#x-box-2  {	
   border-left: 					gray 1px solid;
	border-bottom:			gray 1px dotted;
	width: 							500px;
	background: 				url('Edito_sofibra.gif') no-repeat center center;
	padding: 						5px;
 margin: 							0 auto;
	clear:									both;
}
#x-box-2 td  {		
	vertical-align: 			top;
	width: 							150px;
 }


Dites moi si je dis des betises :
Sachant que la balise est DIV les retours sont verticaux, mais avec du SPAN on obtient du inline.
Donc comment avoir du inline avec du DIV ??? en utilisant les floats.

De ce fait, qu'est ce que j'ai oublié de mettre dnas mon CSS pour avoir ce que je cherche
Essayer avec : float,both,inline,inline-block,....

D'avance merci pour toutes réponses.

PS : ne vous inquieter pas pour la validation je m'en occuperai quand le design sera terminé.
Modifié par Kwa29@louest (09 Mar 2005 - 18:00)
lut Smiley cligne

tu as oublié le point virgule après left

sinon des petites remarques vite fait Smiley cligne

1)tu pourrais utiliser un système de liste pour tes menus

2)dans ta x-box2 tes titres font h1, h3, h2

3)tu mets un alt="cliquer ici" mais pas de balise <a /> juste une image

4)tu doit avoir un autre bout de code on ne sait même pas quelle DTD tu utilise
Merci pour ta reponse.
Donc point par point :
1) il manque un point virgule mais cela n'a pas d'incidence sur le design, rectifié
2) mes titres sont h1h2h3, normal je pense mais tu pense à quoi quand tu me dis ca ??
3) normal
4) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Voili voila........ si tu veu je met le code complet mais je pense qu'il est plus simple et aussi plus lisible de ne mettre que le code concerné pour le soucis...

Et encore merci pour ta reponse knarf c très sympa Smiley ravi
Modifié par Kwa29@louest (09 Mar 2005 - 18:00)
Sujet clos
Aller à