mise en page CSS

broadcastor · 21 Août 2005

Salut le Hub, voilà

j'ai, d'une part un petit probleme de mise en page CSS, et d'autre part, je profite de ce post pour vous demander votre avis général sur le site en question.

Alors, j'ai mis en ligne une petite capture de ma maquette sous Toshop pour que vous puissiez avoir une petite idée du resultat final que je voudrais avoir(sympa l'hebergement Lycos gratuitn'est ce pas, mais c'est provisoire :-) . L'idée que je voudrais mettre en place est de faire corespondre chaque rubrique du site à une couleur, comme on voit celà assez regulierement.

Je dois egalement précisé que je suis de l'ancienne ecole, c'est à dire que le tableless est tout nouveau pour moi, j'ai parfois bien envie de faire <tabl......stop j'arrete promis!

En ce qui concerne les problemes que je rencontre:

->ma decoupe en div doit pas etre bonne,ou alors jai pas mis les bons attributs, parce que le probleme est que dans mon bloc ou sera mon contenu principal, qui se decoupe en 3sections verticales (left, central et right), les blocs s'alignent à partir de là ou se terminaient le suivant. EN dautre terme, alors que tous devrait etre aligné haut, le 2e bloc est aligné sur la fin du 1er, et le 3e est aligné sur la fin du 2e, enfin on voit facilement le hic avec la page . ALors j'ai bien essayé de bidouillé la css pour avoir ce que je veux mais sans succès, je me perd un peu !

- Chose que je n'ai pas encore essayé d'implémenter, mon menu horizontal. Je dois faire une liste <li>, ou autre chose? TOut en sachant que le texte de chaque bouton doit nécessairement etre sur le bouton et non en texte html en raison de l'ondulation. DOnc je ne sais pas trop comment doit etre la Css pour faire

VOilà mes deux premiers problemes, soyez certains qu'il y en aura d'autre, en attendant je vous remercie d'avance si vous pouvez me filer un petit coup de main!

PS: n'hesitez pas a me donner votre avis général sur le site, tant en terme d'esthétisme, dergo, de code,...

jeanpierre949 · 21 Août 2005

Salut,

pour tes blocs essaie la propriete "display:in line;"

pour la liste a puce il n' y a pas de probleme que tu mettes du texte ou une image entre les balises <li>bouton</li>

broadcastor · 21 Août 2005

merci jeanpierre, pour ta reponse,

j'ai essayé en local "display:in line;", sans resultat. J'ai essayé de le mettre dans mon bloc content, dans left, dans right, idem.

Dudu · 21 Août 2005

Bonsoir,

la syntaxe correcte est display:inline; sans espace

Çà devrait passer beaucoup mieux.

broadcastor · 21 Août 2005

euh jai essayé inline mais ça marche pas plus en fait, j'ai meme un petit souci en plus pour le bloc de droite comme vous pouvez le voir ici .

C'est pas une histoire de relative, absolu ou je ne sais quoi??

Dudu · 21 Août 2005

euh jai essayé inline mais ça marche pas plus en fait

Une règle CSS prévaut sur une autre si elle placée plus bas dans la feuille.

#central {
	display:inline;
	position:  	relative;
	width:    	678px;
	left:70px;
	top:0px;
	display:in line;
}

Donc je persiste. C'est inline et non in line.

C'est pas une histoire de relative, absolu ou je ne sais quoi??

Non non non, rien à voir.

Les position:absolute et position:relative sont à manipuler avec moultes précautions.

Pour ce que tu veux faire, tu n'en a pas besoin

edit

Pour ceux qui ne sont pas copains avec les publicités meetic en format poster, une astuce:

Désactiver le JS + ajouter un ? à la fin de l'URL.

Modifié 21 Août 2005 par Dudu

broadcastor · 21 Août 2005

Oups dsl pour le "in line", je pensais les avoir tous supprimé. J'ai donc mis les inline, sans que ça ne marche pour autant........grrrrr

Les position:absolute et position:relative sont à manipuler avec moultes précautions.
Pour ce que tu veux faire, tu n'en a pas besoin

celà signifie que je peux les enlever? J'ai un peu la tres mauvaise habitude de mettre le triple d'attribut qu'il ne faut....

en tout cas merci deja pour l'aide que vous m'apporter

Dudu · 21 Août 2005

Oui tu peux les enlever, çà ne devrait pas changer grand chose.

Par contre, une petite erreur dans la CSS

	border-top-width:: 	 Opx;

C'est un O (comme Olivier) que tu as écrit. Et non un 0

broadcastor · 21 Août 2005

Apres avoir enlever les relative, et ajouter un peu de contenu, voila ce que ça donne , toujours pas bon.......je perds pas espoir pour autant!

broadcastor · 24 Août 2005

Salut, je rebidouillé un petit peu ma CSSdans tous les sens, c'est pas tellement mieux mais je vois pas trop ce qui fait que ce n'est pas bon. Si quelqu'un a eu une idée ou voit un truc pas normal, qu'il n'hesite pas!

la page en question

Sarc · 24 Août 2005

Salut !

Le display:inline sur un div n'est à mes yeux du moins pas une bonne solution... En fait, tous les éléments à l'intérieur du div joueront sur le display, et tu n'auras jamais ce que tu voudras...

Pour que le div central soit à droite du div appelé "left", il faut également mettre le h1 en display inline... Si tu fais ça, et que tu mets une bordure au div central, regarde ce que ça donne : toutes les lignes du div auront une bordure !

Bref, cette propriété n'est pas une bonne solution !

Pour moi, tu devrais jouer avec les float...

#header {
	position:    relative;
	background: 	 url(images/interface/bandeau.jpg);
	width:   	 818px;
	height:    185px;
	margin:    0px auto;
}

#left {
	float:left;

}

#central {
	text-align: justify;
margin:0 150px 0 120px;
}


#right {
float:right;

}


#footer {
	position:    relative;
	background: 	 url(images/interface/bas.gif);
	width:   	 818px;
	height:    59px;
	margin:    0px auto;
	color: #FFFFFF;
}

Ensuite, dans ton code HTML, tu mets la div right avant la div central, pour que tout soit à la même hauteur !

<div id="left">Texte de gauche</div>
<div id="right">Texte de droite</div>
<div id="central">Texte central</div>

C'est pas la seule solution, peut-être pas la meilleure, mais elle a le mérite de marcher un peu mieux que de mettre des display inline...

Tu peux en fait enlever tous les position:relative de ta feuille de style, inutiles, et même virer la div content qui n'a pas l'air d'être très utile...

Par contre, avec la méthode des float, il faudra que le contenu central soit toujours plus grand que le contenu des côté pour que ça ne pose aucun souci, sinon il faudra bidouiller encore un peu

e.MiLoU · 24 Août 2005

Exactement sarc, j'allais le dire

Pour le problème des plus petit plus grand: ceci

div#central
{
 height: 500px;
}
html>body div#central
{
 height: auto;
 min-height: 500px;
}

Vive microsoft et son navigateur attardé!

broadcastor · 25 Août 2005

OKI c'est top cool, j'ai suivi les conseils de Sarc, à savoir mettre des floats:left, et j'ai également supprimé mon bloc content qui ne servait effectivement à rien; j'ai rajouté un clean:both au footer. Le résultat est niquel, c'est du copie conforme photoshop, merci beaucoup.

Un détail cependant, j'ai toujours ma bordure extérieure autour de ma page; j'ai bien tenté border-top-style, border-top-width, rien n'y fait, grrr.

A oui j'oubliais, inutile d'aller voir la page pour constater des améliorations, j'ai fait les modifs en local (site local sur une machine, et ma connexion vient d'un autre PC, sans que je puisse passé les infos de l'un à lautre, différent OS).

Maintenant je me lance dans mon menu. Comme je l'expliquais dans mon premier post, ma particularité vient du fait que je peux utiliser que des images, en raison du texte incurvé. Ma question est donc de savoir si je dois définir une liste, ou bien s'il est possible de faire autrement?

merci le hub

Dudu · 25 Août 2005

Salut,

Maintenant je me lance dans mon menu. Comme je l'expliquais dans mon premier post, ma particularité vient du fait que je peux utiliser que des images, en raison du texte incurvé. Ma question est donc de savoir si je dois définir une liste, ou bien s'il est possible de faire autrement?

Oui bien sûr fais une liste.

Mais tu seras certainement obligé de ruser avec des images de fond, c'est la seule possibilité pour ton projet :unsure:

broadcastor · 29 Août 2005

Me revoici avec la construction de mon site. Bon ben je crois que j'ai reussi a faire le menu que je voulais. Bon j'ai peur que vous me tapiez sur les doigts parce que si on n'affiche pas les images on ne peut plus naviguer, mais j'ai pas vu dautres solutions pour etre honnete.

Je suis toujours en train de chercher pour supprimer cette diablesse de bordure superieure, et elle a toujours le dessus pour le moment....

voici la page

merci

Modifié 29 Août 2005 par broadcastor

Dudu · 29 Août 2005

Salut,

Pour ton menu, tu devrais écrire du vrai texte dans les balises <li> plutôt que des espaces insécables. Car en mode texte, on a des liens 'vides' (mauvais pour le référencement + les internautes handicapés)

Pour les masquer, encapsule-les dans des balises <span></span> de la manière suivante:

<div id="menu">
			<ul>
				<li> <a id="actualites" href="../actualites/actualites.php" accesskey="1" title="actualité"><span>Actualités</span></a></li>
				<li> <a id="presentation"  href="../apresentation/presentation.php" accesskey="2" title="présentation"><span>Présentation</span></a></li>
				<li> <a id="projets" href="../projets/projets.php" accesskey="3" title="projets"><span>Projets</span></a></li>
				<li> <a id="conseils" href="../conseils/conseils.php"  accesskey="4" title="conseils"><span>Conseils</span></a></li>
				<li> <a id="annonces"  href="../annonces/annonces.php"  accesskey="5" title="annonces"><span>Annonces</span></a></li>
				<li> <a id="contact" href="../contact/contact.php"  accesskey="6" title="contact"><span>Contact</span></a></li>
			</ul>
		</div>

ensuite dans ta CSS

#menu li a span { 
visibility:hidden;
}

Quant à la bordure supérieure, je ne suis pas sûr de bien comprendre ce dont tu parles: il s'agit de la bordure tout en haut de la page ?

Dans ce cas, modifies ceci dans ta CSS

#container {
	position:    relative;
	border-top: none;
	border: 1px;
	border-style:  solid;
	border-color:  	#60979F;
	width:    	816px;
	margin:    0px auto;

}

et transforme-le comme ceci

#container {
	border: 1px;
	border-style:solid;
	border-color:#60979F;
	border-top: none;
	width:816px;
	margin:0px auto;	
}

çà devrait passer

broadcastor · 29 Août 2005

Merci bcp dudu, ça marche niquel, c'est exactement ce que je voulais. Par contre, j'ai toujours pas resolu le pb des <li>, qui suivent tous la redefinition general alors.

J'ai aussi voulu validé la page, j'ai une erreur à la DTD visiblement, mais là encore apres avoir tenté 2-3bidouilleries, pas de changement......

broadcastor · 5 Septembre 2005

Slt,

alors mon site s'affiche plutot impeccablement bien sous FF, mais sous IE cest le gros binz:

le menu d'abord, qui ne saffiche tout simplement pas sous IE, page valide, ça fait plaisir....

J'ai egalement des problemes de cache, et mes images saffichent bien lentement, aussi bien sous IE que FF. Est ce que le probleme peut venir du fait que je n'ai qu'une CSS que je modifie en php, ce qui ralentit un peu laffichage de tout ça?Aurai je mieux fais d'en faire autant que j'ai de rubriques???

Est ce que mon menu tel que je lai fait ne devrait pas etre repenser au profit de la solution magique du bacground-position qui se decale?

Voila dans un premier temps

voici le site

Connexion

mise en page CSS

Sujets conseillés

broadcastor

jeanpierre949

broadcastor

Dudu

broadcastor

Dudu

broadcastor

Dudu

broadcastor

broadcastor

Sarc

e.MiLoU

broadcastor

Dudu

broadcastor

Dudu

broadcastor

broadcastor

Veuillez vous connecter pour commenter

Parcourir

Activité