[Resolu] Petit soucis d'allignement de blocs

bonjour à tous....je travaille sur mon premier site et je me trouve face à un soucis de fond d'écran, ou bien de positionement de blocs (c'est des supositions)



comme vous pouvez voir sur la capture d'écran, mon bloc de droite ne joint pas la partie supérieure...et c'est assez moche non?? Alors voici la partie du code css concernant la "structure"(je ne sais pas si ça ce dit comme ça) des blocs :

#en_tete
{
border: 7px double rgb(111, 239, 147); padding: 3px; width: 800px; height: 100px; }
#logo
{
width: 800px; height: 100px;
}
.menu
{
font-family: Times New Roman,Times,serif; text-align: center; border: 7px double rgb(111, 239, 147);margin-top:3px; padding: 3px; float: left; position: static; background-image: url(file:///C:/Documents%20and%20Settings/MARS/Bureau/site/images/menu.jpg); background-repeat: no-repeat; height: 1000px; width: 200px;
}
#acceuil_corps {
height: 940px; width: 600px ; background-position: center; margin-left: 223px ; background-image: url(file:///C:/Documents%20and%20Settings/MARS/Bureau/site/images/fondrosesroses.jpg); background-repeat: no-repeat;
}
.pied_de_page
{
height: 50px; width: 580px; border: 7px double rgb(111, 239, 147); margin-left: 222px; padding: 6px 3px 3px 3px; text-align: center; background-color: white;
}

merci d'avance...et en même temps si vous voulez me donner conseils ou bien votre impression sur le reste je suis preneur...
Modifié par mars (20 May 2006 - 18:11)

Salut,

Pour commencez, est-ce que tu pourrais mettre le code que tu fournis entre les balise [ code]ton code[ /code] (sans les espaces au debut) afin qu'il soit afficher plus clairement.

Ensuite, concernant ton problème, il y a un petit problème concernant ton menu. En effet, tu le déclares en float left mais également en position static c 'est à dire positionner dans le flux normal. Il y a donc une onctradiction entre ces deux modes de positionnement. Peut être que ton problème de décalage est dû à cela. A tester .

Sinon, pour la mise en page de ta feuille de style, je te conseille de ne pas mettre tout sur la même ligne. Cela devient parfois illisible, ettu auras surement du mal à t'y retrouver une fois tout les styles déclarés.

Ensuite pour la définition d'un background, tu n es pas obligé de spécifier le chemin de l'image en absolue. Tu peux tout à fait mette url(./mages/menu.jpg) par exemple à la place de url(file:///C:/Documents%20and%20Settings/MARS/Bureau/site/images/menu.jpg);. Cela t'évitera également d'avoir des problème lors de la mise en ligne de ton site car le répertoire /MARS/Bureau n'existera pas.

Voila, j'éspère que cela t'aidera .

Bonjour,
j'ai un petit problème avec la mise en page des blocs css. Mon code est ci-dessous.

#marge_gauche { float:left; position:relative; height:100%; width:10%; background-color:green;}
#conteneur{ float:left dashed; position:relative; margin-left:10%; WIDTH:760px; height:600px; background-color:red;}
#marge_droite { float:right; margin-top:-600px; position:static; height:100%; width:10%; background-color:blue;}

Je suis en train d'implémenter un blog et j'aimerai afficher mes 2 marges (gauche et droite) et au milieu le conteneur! Le problème est que suivant la taille de la fenetre Internet le conteneur est plus ou moins à la bonne taille. Je voudrai qu'il mesure au maximum 760px et le reste soit comblé par les marges. Si on rétréci la page, il faut d'abord diminuer la taille des marges avant de dimunuer la taille du conteneur!
J'espère avoir été assez clair ...
Merci d'avance

ymhotepa a écrit :
Salut,

Pour commencez, est-ce que tu pourrais mettre le code que tu fournis entre les balise [ code]ton code[ /code] (sans les espaces au debut) afin qu'il soit afficher plus clairement.

C'est fait et voici le code un peu plus propre:

#en_tete {
border: 7px double #6fef93;
padding: 3px;
width: 800px;
height: 100px;
}
#logo {
width: 800px;
height: 100px;
}
.menu p {
font-style: oblique;
font-size: 150%;
}
h3 {
font-weight: bold;
text-decoration: blink;
font-size: 250%;
color: #60f7ce;
}
.menu {
border: 7px double #6fef93;
padding: 3px;
font-family: Times New Roman,Times,serif;
text-align: center;
margin-top: 3px;
float: left; position: static;
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
height: 1000px;
width: 200px;
}
#acceuil_corps {
height: 940px; width: 600px;
background-position: static;
margin-left: 223px;
background-image: url(images/fondrosesroses.jpg);
background-repeat: no-repeat;
}
.pied_de_page {
border: 7px double #6fef93;
padding: 0px 3px 3px;
height: 50px;
width: 580px;
margin-left: 222px;
text-align: center;
background-color: white;
}

Comme tu peux voir, j'ai enlevé static...et
ça ne change rien... le corps ne vient toujours pas se positioner contre l'entête..alors cela vient-il du fait que ma structure xhtml est:
1 entête
2 menu
3 corps
dois je faire
1 entête
2 corps
3 menu ??? mais dans ce cas ce serait le menu qui ne collerait pas contre entête...rahhhh je comprend pas là !!!!!!
Modifié par mars (19 May 2006 - 19:14)

nicolas64 a écrit :
Bonjour,
j'ai un petit problème avec la mise en page des blocs css. Mon code est ci-dessous.

#marge_gauche { float:left; position:relative; height:100%; width:10%; background-color:green;}
#conteneur{ float:left dashed; position:relative; margin-left:10%; WIDTH:760px; height:600px; background-color:red;}
#marge_droite { float:right; margin-top:-600px; position:static; height:100%; width:10%; background-color:blue;}

Je suis en train d'implémenter un blog et j'aimerai afficher mes 2 marges (gauche et droite) et au milieu le conteneur! Le problème est que suivant la taille de la fenetre Internet le conteneur est plus ou moins à la bonne taille. Je voudrai qu'il mesure au maximum 760px et le reste soit comblé par les marges. Si on rétréci la page, il faut d'abord diminuer la taille des marges avant de dimunuer la taille du conteneur!
J'espère avoir été assez clair ...
Merci d'avance

je te conseille de te renseigner sur les designs extensibles... c'est il me semble la solution à ton problème... mais je ne saurait en dire plus...du moins pour l'instant (d'ici quelques jours peut être)
bon en espérant que ça te mette sur la voie.....
Modifié par mars (19 May 2006 - 17:02)

mars a écrit :
Comme tu peux voir, j'ai enlevé static...et
bawling ça ne change rien... le corps ne vient toujours pas se positioner contre l'entête..alors cela vient-il du fait que ma structure xhtml est:

Je viens de tester ta feuille de style avec cette structure html,

    <div id="en_tete">blablablablablabla</div>
    <div class="menu">
     <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
     </ul> 
    </div>
    <div id="acceuil_corps"><p>blablablablablablablabla</p></div>
    <div id="pied_de_page"><p>blablablablablabla</p></div>

... et tout fonctionne correctement. Les blocs sont alignés correctement.
Te serais t il possible de mettre un exemple en ligne pour voir exactement à quoi ressemble ta page?

Pour finir, petit conseil. Il est plus courant d'utiliser la propriété background au lieu de la propriété background_image car cela te permet de regrouper les propriétés background-position, background-color et background-repeat. L'ordre exacte est :
background : couleur url() repeat position
Modifié par ymhotepa (19 May 2006 - 17:39)

a écrit :
Pour finir, petit conseil. Il est plus courant d'utiliser la propriété background au lieu de la propriété background_image car cela te permet de regrouper les propriétés background-position, background-color et background-repeat. L'ordre exacte est :
background : couleur url() repeat position

merci pour l'info et je m'en vais tester le reste

bon voila j'ai apliqué les conseils mais bon voila c'est pire....:


cette image est composée de 2 morceaux (partie haute et basse de la page)
1: l'écart est toujours la
2: maintenant est apparu un décalage bizzare entre le corps et le bas de page
3: le bas de page ne passe plus sous le menu + énorme décalage entre fin du menu et du corps
bon je suis repassé à ma configuration ultérieure mais je reste toulours avec mon problème 1
alors voila je vous donne un peu plus de code...peut être quelque chose m'aurrait échapé bon le css c'est 4 mess avant voici le html :

<body style="direction: ltr;">
<div id="en_tete">
<img id="logo" alt="LOGO" src="logo.jpg"></div>
<div class="menu">
<div class="menu_galleries">
<h3>Galleries</h3>
<p> <a href="mariage.html">Mariage</a> <br>
<br>
<a href="baptemes.html">Baptème</a> <br>
<br>
<a href="deuil.html">Deuil</a> <br>
<br>
<a href="fetes.html">Fêtes</a> </p>
</div>
<div class="menu_autres">
<h3>Autres</h3>
<p> <a href="contact.html">Contact</a> <br>
<br>
<a href="plan.html">Accès</a> <br>
<br>
<a href="Citations.html">Citations</a> <br>
<br>
<a href="????.html">Donnez votre avis</a> <br>
<br>
<a href="interflora.html">Commandez avec Interflora</a>
<br>
<br>
<a href="florajet.html">Commandez avec Florajet</a> </p>
</div>
</div>
<div style="" id="acceuil_corps">
<p> Bienvenue, <br>
Nous espérons vous faire passer un moment de plaisir, <br>
La vie est belle, joyeuse, parfois triste, <br>
les fleurs sont là pour célébrer tous
ces moments <br>
<q> La vie est une fleur. L'amour en est le miel.</q> <br>
Victor Hugo</p>
</div>
<div class="pied_de_page">
Copyright MAYA FLEUR ET ART 2006‚
tous droits réservés.<br>
Toute reproduction totale ou partielle est interdite sans l'accord des
auteurs.
</div>
</body>

Bonjour,
alors petit oublli hier...les bordures...hé bien surprise elles tombent bien...(je sias pas trop ce que ca veut dire)



en tout cas si j'aplique une bordure, la bordure du corps vient se positioner sur la bordure de l'entête..mais sans bord impossible...je n'y arrive pas...alors que dois-je faire??

Et j'aimerais lorsque j'aurrais mieux compris tout ça passer à un design étirable: remplacer les px par des em et des %...(avec l'utilisation de l'astuce pour fond img étirable :
http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable[/url]
Si cela dois changer en quelque sorte ma facon d'aborder mon probleme ou bien si je dois revoir ma structure ben merci de me le dire
Bon hé bien merci déja à tous pour votre soutien et merci d'avance pour la suite.... (je tiens à disposition mes connaissances sur l'utilisation des newsgroups et autres petites choses se raportant à free (mode routeur, wifi, freeplayer,...) (en PM bien entendu, ce n'est pas le sujet de ce forum ))
Modifié par mars (20 May 2006 - 13:20)

Salut,

Je crois avoir trouvé pourquoi il y a un décalage entre ton bloc en_tete et ton bloc acceuil_coprs. Cela est dû à la marge supérieur du paragraphe présent dans le cadre central. En effet, l'élément p possède par défaut des marges haute et basses non nulles. Ainsi la position de ton bloc acceuil_coprs est déterminé par celle de son contenu c'est à dire le bloc p. Voici un petit lien qui t'en dira plus et surtout plus clairement que moi sur le modèle de boîtes.

Ainsi pour résoudre ton problème, il suffit de supprimer la marge supérieur de ton paragraphe. Dans ce cas là, tous les paragraphes auront une marges haute nulle.

Par contre, je ne comprend pas pourquoi lorsque l'on ajoute une bordure cela permet de prendre en compte la marge haute dans le bloc acceuil_corps . Ca serait une question à poser aux grands manitoux du css .

Enfin, concernant ton code html, je te conseille de faire un petit tour du côté des tutoriaux d'alsa pour apprendre à utiliser les bonnes balises pour créer ton document html. Par exemple, pour ton menu, il est préférable d'utiliser les balises ul, li, ol car elle représentent exactement la structure d'un menu.
Voici un exemple pour ton menu avec les balises précédentes

 <div id="menu">
   <h3>Galleries</h3>
   <ul id="menu_galleries">
    <li><a href="mariage.html">Mariage</a></li>
    <li><a href="baptemes.html">Baptème</a></li>
    <li><a href="deuil.html">Deuil</a></li>
    <li><a href="fetes.html">Fêtes</a></li>
   </ul>
  
   <h3>Autres</h3>
   <ul id="menu_autres">
    <li><a href="contact.html">Contact</a></li>
    <li><a href="plan.html">Accès</a></li>
    <li><a href="Citations.html">Citations</a></li>
    <li><a href="????.html">Donnez votre avis</a></li>
    <li><a href="interflora.html">Commandez avec Interflora</a></li>
    <li><a href="florajet.html">Commandez avec Florajet</a></li>
   </ul>
 </div>

De plus, essaye d'utiliser en priorité les id plutot que les class pour identifier tes éléménts. Voici une petit explication du pourquoi.

Voila, j'éspère t'avoir aidé .

merci ymhotepa,
j'avais mal compris la défénition d'id et class, je pensait que l'on devait utiliser class aussi si l'élément était répété dans une autre page...donc ca y est c'est corrigé
sinon pour l'utilisation de liste, c'est ce que j'ai fait au départ, et ça m'as posé des soucis (du mal à faire disparaitre les puces, à faire un espacement entre les liens, et d'autres...) alors j'ai décidé de ne pas l'utiliser...alors est-ce vraiment mal?? si c'est conseillé de changer ben je vais m'y mettre


Et pour finir: MERCI !!!!! j'ai la réponse tant cherchée c'est bien p qui était la cause......