28173 sujets

CSS et mise en forme, CSS3

[RESOLU] DIV & Alignement Horizontal

Bonjour à tous !!

Voici mon source :


      <div id="menu">
        <div id="ariane">
          <a href="/">Accueil</a> | 
          [(#REM) Rubriques mères]
  	      <BOUCLE_therub(RUBRIQUES){racine}{id_rubrique!=6}>
          <a href="#URL_RUBRIQUE">#TITRE</a> |  
          </BOUCLE_therub>
        </div>
        <div id="recherche">
        <form action="spip.php" method="get">
        <input name="page" value="recherche" type="hidden" />
        <input type="text" name="recherche" value="Rechercher" onfocus="this.value='';" />
        </form>
        </div>
      </div>


Mon CSS:


/* MENU */

#menu {
  border-top: solid 2px #7F9CBA;
  border-bottom: solid 2px #7F9CBA;
  width : 780px;
  background : #990066;  
}

/* ARIANE */

#ariane {
  border: solid 1px black;
  padding : 0 0 0 5px;
  width : 75%;
  color : white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}

/* RECHERCHE */

#recherche {
  border: solid 1px black;
  padding : 0 5px 0 0;
  width : 25%;
  text-align : right;
}

form {
  margin: 0;
  padding: 0;
}


Je souhaiterai aligner horizontalement mes DIV "ariane" et "recherche" dans "menu".

J'ai entouré les div de noir pour faciliter votre aperçu. La page est visible ici : http://www.dondusang-chantenay.fr/spip.php?page=base

Je précise que bien évidement j'ai testé tout ce qui était en mon pouvoir Smiley smile (float, display:inline, et j'ai même essayer d'agencer ça sous forme de liste comme pour un menu horyzontal...). En gros je sèche.
Modifié par Klesk (06 Nov 2007 - 23:03)
Alors j'ai pas trouvé tes "ariane" et "recherche" sur la page linkée, mais pour centrer un div horizontalement il y a des tutos (notamment sur alsacréations).

En gros je crois qu'il faut définir une width fixe et mettre margin-left et margin-right en auto.

A tester Smiley smile
Alors les div citées sont bien dans le source de la page linkée, d'autre part je ne cherche pas a centrer horizontalement mais à aligner horizontalement 2 DIV qui sont par défault positionnées verticalement les unes à la suite des autres.

Merci quand même d'avoir pris le temps de répondre.

Cdt.
Salut Klesk,

tu pourrais mettre ton div #ariane en float-left et mettre un margin-left au div #recherche Smiley cligne .
Merci JmC !! Smiley smile C'est loin d'être fini je repasse tout en div+css vu que le design se présente bien pour ce genre de choses Smiley smile , donc encore du boulot en perspective mais la finalité sera certainement rendue publique sur spip-contrib sous forme de squelette.

J'essaie de suite ta soluce Heyoan !! Smiley smile
Modifié par Klesk (06 Nov 2007 - 20:18)
Que dire de plus si ce n'est BRAVO Heyoan !! Smiley lol En ajustant un poil les dimensions c'est parfait sur ie6/7, opera 9.5 et firefox 2.0.0.9 windows. Je vais tester sous linux mais je pense que c'est bon !!

Mou HAHAHAHAHAHA Smiley lol
Re',
a écrit :
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

avec le DOCTYPE Strict, les balises <input> ne peuvent pas être mises directement dans <form>

Soit tu mets un DOCTYPE Transitional :
<!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" xml:lang="fr" lang="fr">

Soit tu places tes <input> dans un "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" Smiley cligne

A+
Modifié par Heyoan (06 Nov 2007 - 22:03)
Bon j'ai mis des <p></p> par contre je voudrais du coup neutraliser le saut de ligne avant et après mon champ, t'as une idée ??

Je précise que je ne l'ai que sous firefox et opera pas sous ie 6/7
Modifié par Klesk (06 Nov 2007 - 22:54)
OK c'est bon c'est résolu j'ai juste passé mon <p> en display:inline puisqu'il s'agit d'un élément de type block par défault et que donc il génère un saut de ligne avant et après (je précise pour les éventuels futurs chercheurs sur le forum Smiley smile )
Sujet clos
Aller à