Probleme de positionnement

[doomer2]

Je viens de faire un essai avec le modele de alsacreations afin de positionner 2 cadres arrondis cote a cote sur ma page.

Le probleme d'une part et que sous firefox un blanc entre l'image titre et le contenu et de même entre le bas du cadre et le contenu.

Second probleme, je n'arrive pas à positionner 2 cadres arrondi cote à cote, il se mettent l'un en dessous de l'autre.

L'adresse du site site en css pour ceux qui ont une petite idée.

[Dan]

Salut Doomer,

J'ai eu le même problème en XHtml strict, et j'ai résolu cela en donnant une "line-height" plus faible. Essayes avec différentes valeurs.

Dan

[doomer2]

line-height se positionne dans quelle balise car je ne l'utilise pas et je ne connais pas cette propriété ?

[LaurentDenis]

Second probleme, je n'arrive pas à positionner 2 cadres arrondi cote à cote, il se mettent l'un en dessous de l'autre.

Reprenons tranquillement:

#menuhaut{
background-color:transparent;
float:left;
position:absolute;
left:195px;
top:90px;
}

... Float et position:absolute sont incompatibles (le dernier écrase le premier). Enlever le float qui ne sert à rien.

.horizontal ul {
list-style-type:none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */
}

... ne peut pas s'appliquer à <ul class="horizontal">, puisque le sélecteur CSS signifie "les ul qui sont dans un conteneur de classe horizontal", et non "les ul de classe horizontal". Le sélecteur doit s'écrire "ul.horizontal" ici.

Plus directement, mettre ces styles dans un #menuhaut ul (les ul qui sont dans un #menuhaut)

.horizontal li { float: left;} /* on aligne les listes sur la gauche */

...Un flottant ne peut pas flotter sans propriété width spécifiée (et pas width:auto évidemment, puisque c'est l'équivalent d'une propriété width absente). Donc il manque un width:...

On y verra déjà plus clair après ces corrections

[doomer2]

Merci beaucoup pour ces modifications, vous êtes vraiment un champion et cela à l'air de fonctionner correctement sous IE et Firefox il ne reste juste qu'un probleme de positionnement verticale du menu à ajuster pour qu'il soit sur la même hauteur sur les 2 navigateurs.

Mais, si je ne vous embête pas trop un de mes problemes etait de positionner les 2 cadres tout en bas de la page afin d'avoir une zone actualites, une zone forum , etc ... avec des cadres arrondis.

[Monique]

line-height se positionne dans quelle balise car je ne l'utilise pas et je ne connais pas cette propriété ?

<{POST_SNAPBACK}>

line-height est une propriété CSS

Tu peux voir un exemple de son utilisation dans cette discussion.

[LaurentDenis]

Mais, si je ne vous embête pas trop un de mes problemes etait de positionner les 2 cadres tout en bas de la page afin d'avoir une zone actualites, une zone forum , etc ... avec des cadres arrondis.

<{POST_SNAPBACK}>

Manquant de temps hier, je m'étais arrêté au menu. Passons aux <dl> et à leurs coins arrondis:

Côté structure HTML, une mise en garde : les listes de définition <dl> ne sont pas destinées à créer une pseudo-structure de sections dotées de titres, mais des couples termes - éléments de définition.

Utilisées comme des <div><h...><p></div, elles sont le plus souvent abusives du point de vue du sens, n'apportent aucun gain sémantique réel, et se révèlent moins expoitables que de véritables titres (pour établir une table ds matières du document, pour naviguer de titre en titre...)

Mieux vaudrait reprendre ce code avec de simples <div> conteneur (div est fait pour ça: ajouter du style et de la structure) et des titres <h...>

Cela dit, le problème d'espace entre les bords arrondis et le contenu des blocs vient simplement des marges par défaut des paragraphes:

dd p {
margin: 0;
}

règlera le problème.

D'une manière générale, au moins lorsqu'on débute en CSS, il est plus pratique d'utiliser en tête de feuille de style:

* {
margin: 0;
padding: 0;
}

plutôt que d'appliquer ces propriétés au body ou à html, body en se fiant à l'héritage par les éléments contenus dans html ou dans body.

Enfin, pour placer les deux blocs l'un à côté de l'autre:

dl {
width: 45%; /* dimensions et positions modifiables à loisir */
left: 10em;
top: 50em;
}

... n'a aucun effet et ne peut pas en avoir. Les propriétés left et top ne peuvent être utilisée que pour un élément en position absolue, fixe (ou relative, mais c'est une autre histoire). Ici, une position:absolue ou fixe rendraitla mise en page très périlleuse. Un simple float:left convient. Ce qui donne:

dl {
width: 40%; /* largeur réduite pour éliminer le problème de box-model IE */
float: left;
margin: 0 1em;
}
hr {
clear: both;
visibility: hidden;
}

<dl>
...
</dl>
<dl>

<hr />

Un séparateur <hr /> est ajouté après les éléments flottants et doté d'une propriété clear:both pour forcer le contenu à reprendre le flux en tenant compte de la hauteur des flottants. (Sinon, un flottant n'est pas pris en compte dans le calcul de la hauteur de son conteneur, et le pied de page viendrait se placer à côté des flottants, au lieu d'être en dessous.

Enfin, je te conseille surtout la lecture de quelques articles de base sur le positionnement CSS, avant d'exploiter des modèles prêts à l'emploi qu'il est le plus souvent difficile de personnaliser sans erreur:

- Passer aux feuilles de style

- Initiation au positionnement CSS : 1.flux et position relative

- Initiation au positionnement CSS : 2.position float

- nitiation au positionnement CSS : 3. position absolue et fixe

Modifié 3 Novembre 2004 par LaurentDenis

[doomer2]

Aprés avoir fait vos modifications dans mon css, mon prbleme de positionnelemnt de mes boites actualités cote à cote n'est toujours pas réglé malgré de nombreux essais. Je pense que le css est correctement écrit pourtant.

Là, je trouve cela bizarre tout de même . Si vous avez une solution. J'essaie de chercher encore

Modifié 3 Novembre 2004 par doomer2