28173 sujets

CSS et mise en forme, CSS3

[RESO MICI]Probleme de CSS alignement et 2/3 trucs

voila ca fait 3 fois que je refais ma page index entierement il est 7h et j'en peux plus Smiley biggol

Je suis en train de preparer un site avec un fond en 3 images...rien de bien compliqué pourtant Smiley biggol et voila que j'arrive pas a caller tout ca.
*La partie centrale est censé s'allonger...elle s'allonge pas.
*En fin de page je place un mini menu rapide il est centré ca c'est bon mais et oui y'a un mais, il ne veut pas se logger a la fin de mon code entre mes balises c'est le ul id="petitmenu">

a écrit :

</div><!--fin center -->

<!-- Menu rapide en pied de page -->
<ul id="petitmenu">
<li><a href="index.php" target="_parent">Accueil</a> | </li>
<li><a href="index.php?page=plansite">Plan du site</a> | </li>
<li><a href="mailto:contact@frere-coen.fr?subject=Site_Frere-Coen.fr">Contact & Webmaster</a> | </li>
<li><a href="javascript:bookmarksite('Frere Coen - unofficial site', 'http://www.frere-coen.fr')">+ favoris</a> | Copyrights &copy; 2007 Frere-Coen.fr Site non-officiel. [<a href="index.php?page=adm">A</a>]</li>
</ul>
<!-- Fin du Menu rapide en pied de page -->

</div><!--fin footer -->
</div><!--fin header -->


de plus mon menu principal ne veux pas se mettre en haut j'ai bien tenté de le mettre dans une balise pour le position mais en vain ... voir ci dessous :

a écrit :

<body>
<div id="header">
<div id="footer">
<div id="center">
<!-- Menu PRINCIPAL -->
<ul id="menuprincipal">
<li><a href="index.php?page=edito">Edito</a> | </li>
<li><a href="index.php?page=biographies">Biographies</a> | </li>
<li><a href="index.php?page=fiches">Fiches des films</a> | </li>
<li><a href="index.php?page=allnews">Toutes les News</a> | </li>
</ul>
<!-- Fin du Menu PRINCIPAL -->


De plus ma partie "center" semble avoir des probleme avec l'alignement a moins que ce ne soit la balise "cadreappel" ou j'appel mes pages ? Smiley biggol

Je vous laisse biensur l'URL provisoire du site que vous voyez ca et les CSS Smiley smile

Je vous remercie d'avance la il fait 40° dans le bureau et le soleil se leve, vais me reposer en esperant avoir des nouvelles en revenant Smiley smile

Voila si tout mes menus sont simple et en ligne, c'est que ce site, je veux le valider entierement par W3C et le rendre totalement accessible du moins le plus possible. bon c'est un peux en chantier le bolot mais voila vous pourrez le trouver sur : http://coen.ankart.fr
Modifié par Ankart (06 Jun 2007 - 23:08)
Hello,

Je suppose que c'est l'heure très tardive, mais poster le code suivant et ne pas se dire qu'il y a un problème, c'est assez préoccupant :
<div id="header">
<div id="footer">
<div id="center">

Le bloc central est dans le pied de page qui est dans l'en-tête ? Smiley sweatdrop

Sinon, tu n'as pas de contenu dans ta page, même fictif. Difficile de travailler dans ces conditions.
Modifié par Florent V. (06 Jun 2007 - 09:45)
Cette mise en forme m'a toujours paru bizarre mais ce que je ne comprend pas c'est que j'ai utilisé la meme archi sur ce site http://ppc.ankart.fr et que cela marche a merveille ... autand sur IE7 que sur firefox2.

Comment expliquer cela ? sachant que seul les noms des balises changent.

on retrouve

a écrit :

<div id="divbody">
<div id="divbodybas">
<div id="divcentral">


qui correspond a :

a écrit :

#divbody {
width: 900px;
padding-top: 150px;
background: url(bgimg/haut.jpg) top no-repeat;
margin-left:auto; margin-right:auto;
}

#divbodybas {
background: url(bgimg/bas.jpg) bottom no-repeat;
margin-left:auto; margin-right:auto;
padding-bottom: 140px;
}

#divcentral {
padding: 140px;
background: url(bgimg/milieu.jpg) repeat-y;
margin-left:auto; margin-right:auto;
}

Modifié par Ankart (06 Jun 2007 - 12:36)
Bon d'accord, j'ai compris le schmilblik.

En gros, tu utilises trois divs imbriqués pour créer un bloc de largeur fixe avec des coins/bordures en images. Vu qu'aucun de ces blocs n'a de contenu qui lui est propre, il aurait été plus logique de les nommer ainsi :
<div id="global1">
	<div id="global2">
		<div id="global3">
			... Ici tout le contenu...
		</div>
	</div>
</div>

Mais passons...

De même, tu utilises des padding et des images de fond pour créer ton en-tête, ce qui fait que si on désactive les images de fond ou les CSS ou les deux, on n'a plus aucun contenu... mais passons également...

Si on garde cette structure avec trois blocs imbriqués contenant tout le contenu de la page, il faudra bien entendu mettre tout le contenu dans le dernier bloc, et ne rien mettre « entre » les blocs.

C'est pourtant ce que tu fais ici :
<div id="header">
	<div id="footer">
		<div id="center">
			... Ici presque tout le contenu...
		</div>
		<ul id="petitmenu">
			... Mais qu'est-ce qu'il fait là celui-là ? [biggol]
		</ul>
	</div>
</div>

D'où le problème.
Si on place ul#petitmenu dans div#center, c'est tout de suite mieux.
a écrit :

div id="header">
<div id="footer">
<div id="center">
... Ici presque tout le contenu...
</div>
<ul id="petitmenu">
... Mais qu'est-ce qu'il fait là celui-là ? Smiley biggol
</ul>
</div>
</div>


Ah ouai effectivement en le metant dans le center ca le met bien dans le center mais du coup comment le mettre dans le pied de page Smiley biggol

Sinon malgré cela, toujours un probleme de menu principal bien trop bas et donc le menu pied de page bien trop haut.

Par contre en evolution, la page s'etend bien maintenant Smiley murf

Deja merci pour cette premiere aide Florent Smiley ravi

P.S : j'ai mis a jour online toujours a l'url suivante http://coen.ankart.fr
Modifié par Ankart (06 Jun 2007 - 18:01)
Ankart a écrit :
Ah ouai effectivement en le metant dans le center ca le met bien dans le center mais du coup comment le mettre dans le pied de page Smiley biggol

Ben, le problème c'est que tu n'as pas de pied de page. Tu as juste trois blocs imbriqués pour de la décoration, prévus pour caser un contenu dans le troisième bloc et pas ailleurs.

Si tu veux un vrai pied de page, il va falloir modifier ta structure un minimum...
Par exemple :

- un seul bloc conteneur (fond gris) ;
- une image dans le code HTML pour l'en-tête (penser au texte alternatif...) ;
- un bloc pied de page qui viendra naturellement se mettre tout en bas du contenu (pour peu qu'il soit bien placé dans le code HTML) et qui aura une image avec les coins arrondis du bas.

Je te laisse tenter quelque chose comme ça ?
ouaip je vais essayer de revoir la structure comme ca je m'y colle de suite je post te tenir au courant.
je marque le post en resolu Smiley smile

pour info au gens qui aurait le meme probleme :

oublier ce system d'imbrication en carton Smiley biggol car vous ne dormirez que 3 heures la nuit prochaine sinon Smiley lol

alors :

tout betement creer les 3 balise independement, 1 header, center, footer en propriété relative at un margin: 0, 0;
un leger padding sur le center pour eliminer le surplus de la couleur de fond, et voila en plus c'est centrer et compatible IE7 / Firefox.

Et, un tou particulier merci a Florent pour ces apports de connaissances et son ecoute, de plus je le remercie d'avoir repondu a mon MP. hein raphael *sifflote* Smiley lol

donc resolut resultat (lien provisoire) http://coen.ankart.fr
Sujet clos
Aller à