Nouveau gabarit

Bonjour,
Ce message fait suite à une remarque que l'on m'a faite hier, qu'il était impératif que je refasse le code de la structure de mon site, avant de m'occuper du contenu. Je m'éxecute donc, mais j'ai besoin de votre aide
Alors pour commencer, je m';occupe du menu de gauche : je souhaite que les images s'affichent les unes au dessus des autres, mais sans espacement... Or sous Firefox, il y a des espaces entre les images.
(je parle de cet emplacement : )

    <div class="bg_menus_gray">
    <p><img src="/img/2006/separateur_bi.gif" alt="" /></p>
    <p><img src="/img/2006/flux_rss.gif" alt="Flux RSS" /></p></div>

Les styles correspondants sont :

.bg_menus_gray {
background : url(/img/2006/bg_univers.gif); 
width : 126px; 
} 
.bg_menus_gray p {
padding : 0; 
margin : 0; 
} 
.bg_menus_gray img {
border : 0; 
} 

.
Comment éviter ces espaces verticaux sous FF ?


Par ailleurs, je souhaiterais réintéger le contenu de mon header, mais je ne sais pas comment m'y prendre pour le découper, étant donné que certains éléments on une dimension variable (mises en pages événementielles etc).

Je pensais à cette solution, placée entre <div id="header"> et </div> :

<div style="float:left;">LOGO+ENCADREMENT</div>
<div style="float:right;">BOITE DE CONNEXION</div>

Mais comment intégrer la partie centrale ?

D'avance merci pour vos précisions.
Modifié par le_fleau (28 May 2006 - 16:23)

Salut

Heureux de voir que tu a pris décision de repartir a zéro

Mais il ne faut pas aller plus vite que la musique

Evite d’utiliser de positionnement absolu (tu peux tous les supprimer pour l’instant)

Utilise le div #conteneur pour tous englober entête et menu inclus
Et met le div #gauche en float : left ;
Et un margin-left:150px ; a #centre



(Pour info je serais en ligne la plus grande partie de la soirée)

un

img {display:block;}

ne résoudrait pas le problème ?

Tu veux aller plus vite que la musique

Ta structure ne pas optimale et tes images font partie du contenu

Et tu verra qu'an utilisant une structure propre tous et plus facile

A+

Le post précédent n'était pas de moi ^^
Je suis en train de faire ce que tu m'as dit
Modifié par le_fleau (27 May 2006 - 19:33)

Merci beaucoup pour ton aide
Bon, alors le résultat est en ligne, mais, il y a plusieurs points :
> Inclure le header dans le conteneur me pose problème, parce que j'aimerais ne pas avoir de bordure autour du header. Or le conteneur à une bordure. Y a t-il une solution ?
> Je souhaiterais que la barre de recherche s'affiche au dessus des colonnes #gauche et #centre. Les modifs que j'ai faite ont changé cela.
> Pour #droite, j'ai remplacé le positionnement absolu par un float:right. Je ne sais pas si j'ai bien fait, mais c'était pour que l'affichage soit correct.
Modifié par le_fleau (28 May 2006 - 16:23)

Excuse moi j'avais mal regardé

Pour les images, cela vient du fait que les images se placent (bord du bas) sur la ligne de base du texte. Les images sont considérés comme des caractères, en quelque sorte, et n'ont pas de queues comme les lettres p, q, g, j, etc. De plus, suivant la hauteur de ligne, il peut y avoir un espace minimal réservé.

Les deux principales solutions :

blablabla img {vertical-align: bottom;}

blablabla img {display: block;}

Je ne sais pas trop laquelle est la meilleure. Pour ma part, j'utilise le passage en mode bloc lorsque je veux gérer très précisément mes images (vu que je sais mieux gérer les blocs que les éléments en-ligne, mais c'est une limitation personnelle).

le_fleau a écrit :

> Inclure le header dans le conteneur me pose problème, parce que j'aimerais ne pas avoir de bordure autour du header. Or le conteneur à une bordure. Y a t-il une solution ?

Oui tu va recrée un div (avec le non de ton choix) qui englobera dans cette ordre

Div droite
Div searchbar
Div gauche
Div centre

le_fleau a écrit :

> Je souhaiterais que la barre de recherche s'affiche au dessus des colonnes #gauche et #centre. Les modifs que j'ai faite ont changé cela.

Va être corriger par l’ordre des div

le_fleau a écrit :


> Pour #droite, j'ai remplacé le positionnement absolu par un float:right. Je ne sais pas si j'ai bien fait, mais c'était pour que l'affichage soit correct.

Oui il le fallais tu commence a comprendre

Retire le width dans #header et le #mainmenu, il prendront automatiquement la largeur du conteneur

A+

Merci, voilà qui est fait. Ca donne effectivement le résultat souhaité. La structure convient elle pour pouvoir passer à la suite ?

voila

il manque juste un clear: both; dans le footer
pour avoir un pied qui le soit vraiment

après on s'occupe de la suite (miam-miam couscous)

lol, Bon appetit, et merci beaucoup pour ton aide
Alors ce que j'ai fait, c'est que j'ai inclu le div #footer (où j'ai ajouté clear:both;) dans le #content, pour que la bordure descende jusqu'en bas. Sous IE il y a un petit décalage dans le texte par contre, c'est assez bizarre, je n'ai pas fait attention s'il y était tout à l'heure.

De retour

Pour ton décalage c'est un bug de IE un

#centre {
 _height: 1%;
zoom: 1;
}

Dans un CSS conditionnel corrigera le défaut
Modifié par gege71 (27 May 2006 - 21:55)

Voilà qui est fait. Ca marche. Pour la condition, j'ai utilisé du PHP.
Modifié par le_fleau (12 Jan 2009 - 13:31)

pour ton image gauche voila une soluce

#header a * {
	display:block;
	height: 82px;
	float: left;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#header a #img_g {
	width: 10px;
	background-image: url(structure_new_fichiers/gauche_logo.gif);
}
#header a #img_d {
	width: 32px;
	background-image: url(structure_new_fichiers/separ_logo.jpg);
}

	<div id="header">
		<a href="../home/home.html">
			<span id="img_g"> </span>
			<img src="structure_new_fichiers/logo_relief.gif" alt="HomePage" />
			<span id="img_d"> </span>
		</a>
	</div>

Si tu ne comprend pas quelque chose en chemin surtout demande, le but est que tu voie le fonctionnement

Edit : Ne pas oublier de corriger le chemin des images

A+
Modifié par gege71 (27 May 2006 - 23:11)

Oui, je comprends Mais la question que je me pose, c'est pourquoi utiliser des span avec les images en background, et non pas les images directement ?
Le problème c'est que j'ai oublié un truc. Il ne devrait pas y avoir de background de fond pour #header, pour pouvoir garder la transparence des coins. Ce que je ferais, ce serait rajouter un div en float:left après le logo avec le background. Mais est ce la bonne solution (désolé d'être aussi exigeant )
Sinon, je voulais aussi remercier mpop et elver pour le img { display:block; }, effevctivement, c'était une bonne solution
Merci à tous pour votre aide

le_fleau a écrit :
Oui, je comprends Mais la question que je me pose, c'est pourquoi utiliser des span avec les images en background, et non pas les images directement ?

C’est une question d’accessibilité dans la mesure du possible !

Les images de décoration se mettent via le CSS ( elles ne perturbe pas les navigateur en mode texte)
Et les images de contenu via le HTML (ne pas oublier le alt qui est censé exprimer le contenu de l’image ex : pour ton image gauche Logo Cityloisir )

le_fleau a écrit :

Le problème c'est que j'ai oublié un truc. Il ne devrait pas y avoir de background de fond pour #header, pour pouvoir garder la transparence des coins. Ce que je ferais, ce serait rajouter un div en float:left après le logo avec le background. Mais est ce la bonne solution (désolé d'être aussi exigeant )

Un div entre logo gauche et login droite, et inclure le dessin central (dans un span) oui ça peux être une bonne solution

A+

Alors, ce que j'ai fait, c'est que j'ai du rajouter pas mal de div dans le header. Au final, j'obtiens un résultat proche de ce que je recherchais, si ce n'est que c'est mort pour les logos de taille variable, puisque j'ai tout dû définir au pixel près. Tant pis, je reformatterais mes logos. Sinon, est ce correct sur le plan sémantique ce que j'ai fait ? Merci encore pour votre aide.


Je vais maitenant essayer de "remplir" le header.
Modifié par le_fleau (12 Jan 2009 - 13:32)

Voici une solution qui garde les logos de taille variable et sans être au pixel

Attention a l'ordres des div

  <div id="header">
	  <a href="http://www.cityloisir.com/home/home.html"><span id="img_g"></span>
	  <img src="structure_new_fichiers/logo_relief.gif" alt="Logo CityLoisir"><span id="img_d"></span></a>
	  <div id="img_end"></div>
	  <div id="logbox">LOGIN</div>
	  <div id="headcenter"><img src="structure_new_fichiers/head_perso.gif" alt=""></div>
  </div>

#header a * {
	display:block;
	height: 82px;
	float: left;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#header a #img_g {
	width: 10px;
	background-image: url(http://www.cityloisir.com/img/common/gauche_logo.gif);
}
#header a #img_d {
	width: 32px;
	background-image: url(http://www.cityloisir.com/img/separ_logo.jpg);
}
#logbox {
float:right;
width: 125px;
height:82px;
background : url(http://www.cityloisir.com/img/bg_header_logo.jpg); 
}
#headcenter {
	height:82px;
	text-align:center;
	background : url(http://www.cityloisir.com/img/bg_header_logo.jpg);
	margin-right: 130px;
	margin-left: 210px;
}
#img_end {
	float:right;
	width: 14px;
	height:82px;
	background-image: url(http://www.cityloisir.com/img/2006/droite_logo.gif);
}

Autre chose perso je trouve que si ton site était centré se serait plus esthétique
Essaye pour voir

body {
	color : #333333;
	font-size : 10px;
	font-family : Verdana, Arial, helvetica, sans-serif;
	background : url(http://www.cityloisir.com/img/bg2006.jpg) repeat-x;
	text-align: center;    /* pour Bug IE*/
}
#conteneur {
	width : 830px;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;   /* remise en place suite text-align: center dans body*/
}

Oui, je suis d'accord avec toi, centré, c'est plus joli
Cependant, pour le problème du logo, j'ai un bug sous IE ... Mais sinon, c'est pas grave, je peux remettre la version faite "au pixel"... C'est pas très gênant, puis c'est peut être plus simple ?!
En tous cas, merci pour ton aide qui est d'une grande utilité ! Je commence à être un peu moins paumé

Vais aller un peu faire dormir les yeux (sinon ) et je m'y remettrais demain ... (enfin tout à l'heure...)
Modifié par le_fleau (28 May 2006 - 16:23)