Nouveau gabarit

(reprise du message précédent)

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)

Oui, toujours le même, ce coup dans sa version opposée (pour info : "Three Pixel Jog")
Ce code va corriger le bug

#headcenter {
	margin: 0px 130px 0px 210px;
	text-align:center;
	background : url(http://www.cityloisir.com/img/bg_header_logo.jpg);
}
#headcenter span {
	background : url(http://www.cityloisir.com/img/common/head_perso.gif) no-repeat center top;
	height: 82px;
	display: block;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
}
#headcenter span img{
	margin-top: 63px;
}

<div id="headcenter">
	<span>
		<img src="http://www.cityloisir.com/img/cannes/bando_actu.gif" alt="Info Actu" title="Cannes 2006 : du 17 au 28 Mai" />
	</span>
</div>

Assez bosser pour un samedi,
Moi aussi j’ m’en va m’coucher

A+

Me voilà de retour. Merci pour tout ! Effectivement, ta parade marche.
Quant à moi je me suis essayé à intégrer le formulaire de login, en essayant de m'inspirer de ce que tu avais fait. Le résultat me convient, à ceci prêt qu'il y a une marge indésirable de 1px qui apparait sous "Espace Membres" sous FF. Peut-on le supprimer ? J'essaye aussi de remettre l'image "inscription" à côté du bouton "Ok", mais l'image prend pour hauteur 82px... (j'ai mis le code en commentaire).
Je vais m'attaquer au footer.
Modifié par le_fleau (28 May 2006 - 15:00)

Petite modif pour éviter l'héritage

<div id="header"><a href="..//home.html"><span id="img_g">....

Devient

<div id="header"><a href="../home.html" id="logo_gauche"><span id="img_g">....

#header a * devient #logo_gauche *
#header a #img_g devient #logo_gauche #img_g
#header a #img_d devient #logo_gauche #img_d

Css a rajouté pour ne pas avoir de bordure

#logbox img {
	border : 0px;
}

A+
Modifié par gege71 (28 May 2006 - 16:57)

Petit info il faut savoir que tu peux linké sur un ID

<a href="#top">……</a> tu peux mettre <a href="#header">……..</a> ça évite les <a name="top"> </a>

A+

Merci beaucoup , j'ai fait les modifs Ca marche bien, sauf pour le problème de "Espace membres".
Sinon, pour le footer, j'ai du mal à m'en sortir, j'ai essayé avec deux <div style="float:left">, mais ça ne marche pas.
J'ai aussi attaqué le menu gauche. Et là j'ai un petit bug avec IE qui me saute des lignes après chaque </li>
Modifié par le_fleau (12 Jan 2009 - 13:32)

Pour tons menu
Et un bug IE de plus (merci Microsoft)

.bg_menus_blue ul *{
	_height: 1%;zoom: 1;
}

En conditionnel feras l’affaire

Quelle marge te gène dans "Espace Membres" ? (Petit dessin)

Que veut tu faire dan ton footer ? (Petit dessin aussi)

A+


Edit : Pour info le résulta est nickel sous FF 1.5 , IE 6 & 7, Opera 8.5, Netscape 7
Modifié par gege71 (28 May 2006 - 18:26)

Merci, en fait je n'ai pas percuté mais c'était le même bug qu'hier. Merci pour l'astuce Sinon pour le footer, j'aimerais reprendre celui de la version actuelle, avec le lien vers le haut de page en plus.

Et pour le petit problème de marge sous FF, voici l'illustration :

pour ta marge

modifie

#logbox p {
margin : 1px;
padding : 0;
}

deviens

#logbox p {
	margin-bottom: 1px;
}

un footer dans ce style ?

    <div id="footer">
			<div id="footer_begin"><a href="#header">
				<img src="structure_new_fichiers/go_top.gif" alt="Haut de Page" title="Haut de Page"></a>
			</div>
		<div id="footright" >
			<img src="structure_new_fichiers/logo_small.gif" alt="Logo CityLoisir Petit" title="Retourner à l'accueil"></div>
		<span class="txt">
			<a href="#">Mentions légales</a>  |  
			<a href="#">Conditions d'utilisation</a>  |  
			<a href="#">Contacter le webmaster</a>  |  
			<a href="#">Partenaires</a>  
		</span>
		<span class="txt">
			CityLoisir.com - Un site K|six Stüdio- Tous droits réservés - Site enregistré à la CNIL sous le numéro 875376
		</span>
		<span>
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="structure_new_fichiers/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31" width="88"></a>
			<a href="http://jigsaw.w3.org/css-validator/">
				<img style="border: 0pt none ; width: 88px; height: 31px;" src="structure_new_fichiers/vcss.png" alt="Valid CSS!"></a>
		</span>
	  	<div id="footer_end">  </div>
     </div>

#footer {
background-color : #FFFFFF;
clear: both;  
}
#footer span {
	display: block;
	margin-right: 121px;
}

#footer .txt {
	background-color : #FFFFFF;
	text-align: center;
	display: block;
	line-height: 20px;
}
#footer_begin {
	background-color : #E0E0E0;
	border-bottom : 1px solid #c0c0c0;
	border-top : 1px solid #c0c0c0;
	display: block;
	height: 15px;
}
#footer_begin img {
	display: block;
	border-left: none;
}
#footer_end {
	background-color : #0099CC;
	height:5px;
	border-top : 1px solid #c0c0c0;
	clear: both;
}

A+

Merci, le résultat est en ligne. Cependant avec IE il y a deux bugs ! (marre de ce navigateur !). Quand on passe avec la souris dans le footer, le texte s'efface, et les #footer_begin et #footer_end, la hauteur est plus importante que 5px... Désolé

le_fleau a écrit :

Quand on passe avec la souris dans le footer, le texte s'efface

Pour moi RAS !

le_fleau a écrit :

et les #footer_begin et #footer_end, la hauteur est plus importante que 5px...

Et un bug IE de plus (sous IE les element ont au minimum une hauteur de texte) donc mettre le texte a 0

line-height: 0;

le_fleau a écrit :

Désolé

Tu n'a pas a etre desoler des bugs de microsoft
par contre un petit tour dans la FAQ

A+

Merci, mais la solution que tu proposes ne change malheureusement rien.
Sinon j'ai réattaqué le menu horizontal, inspiré du modèle proposé sur Alsacréations. Bon, je l'ai personnalisé, mais il y a un petit bug sous IE (où alors je me suis mal débrouillé), c'est que quand les sous menu s'affichent, ça me décale l'ensemble du menu. Est il possible que ce décalage n'apparaisse plus ? Par ailleurs, quand je me mets en mode "border-box" sous FF [activable dans l'onglet CSS de la barre d'outils WebDevelopper], il me rogne le bas des images. Peut on aussi corriger ce bug, car j'ai déjà vu des navigateurs sous certaines versions de Windows qui me le faisaient.
J'aimerais également dans le footer que le logo Xiti soit affiché comme dans le footer (aligné à droite). J'ai essayé de mettre un float:right; à l'image mais ça n'a pas marché :s
Merci pour votre aide
Modifié par le_fleau (12 Jan 2009 - 13:33)

Salut

Pour Xiti
il faut mettre le <span id="xiti-logo"> avant <span id="logos">

#footer #xiti-logo {float: right;}

pour menu (A quoi sert le div #menu ??? il y a deja #mainmenu !...)

#menu {

}

#menu dd {
position:absolute;
display: none;
border: 1px solid gray;
width:150px;
}

devrais faire l'affaire

pour mode "border-box" sous FF
pour moi RAS

Effectivement, pour le menu ça fonctionne. J'ai supprimé comme tu m'as dit, j'ai supprimé #menu. Sous IE, il y a juste un petit truc, la structure du site bouge au survol des liens... encore un bug d'IE Pour Xiti aussi ça a fonctionné, mais pas pour footer_begin et footer_end.
J'ai aussi résolu mon problème de disparitions du footer sous IE avec ça :

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

...
Par ailleurs, je me pose aussi une question, comment intégrer dans #headcenter les extremités du bandeau bleu clair. Il faudrait les mettre dans des <span> je pense, puisque c'est du design. Mais comme le span d'à côté fait 300 pixels. Donc les extremités ne seraient pas à côté des logos. Voici de quoi je parle (entourés en rouge) :
Merci
Modifié par le_fleau (29 May 2006 - 20:59)

pour ton lignes de footer

	height : 5px;
	line-height: 0px;
	font-size: 0px;

Pour #headcenter le plus simple serait de mettre directement les image a la suite
Les mettre des span, serait mieux mais c’est de nombreuse complication pour pas grand-chose

A+