petit problème d'alignement

7 juin 2006 à 21:56:50

Bon voilà je commence à peine mon 2ème site que je tombe déjà sur 2 problèmes d'alignement. Donc c'est surrement tout con mais si je bloque

Voici mon début de site et design
le site

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design test" href="css2.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<div id="top_menu">
<img src="images/ssbm5.png" alt="bannière"</a>
</div>

<div id="right_menu">
<img src="images/logo.jpg" alt="logo" class="logo">
 
<a href="lien"> <img src="images/bouton_tournois.png" alt="tournois" class="bouton"</a> 
<a href="lien"> <img src="images/bouton_contacts.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_joueurs.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_archives.png" alt="tournois" class="bouton"</a> </a> 
</div>

<div id="corps">

Bienvenue sur mon nouveau site consacré à SSBM !! 
Vous y trouverez des informations sur les tournois en cours,
les classements,les références des joueurs 
ssbm et blaablal bablablablabl ablab
balbal blablabalbal balbalbal ablablablabalb albalbalbal balbalbalbalba lbalbalabalb



Bon et maintenant je vais vous chanter quelquechose, ca s'appel "Cendrillon", du groupe Téléphone !



Cendrillon, pour ces vingt ans, est la plus belle des enfants 
Son bel amant, le prince charmant, l'emmène sur son cheval blanc 
Elle oublit le temps, dans son palait d'argent, tralalalalalala 



Et pour le plaisir une dernière musique ... pour remplir surtout 
"My Friends" des RED HOT CHILLI PEPPERS !!



My friends are so depressed 
I feel the question 
Of your loneliness 
Confide..., 'cause I'll be on your side 
You know I will, you know I will 

X Girlfriend called me up 
Alone and desperate 
On the prison phone 
They want... to give her 7 years 
For being sad 


</div>

<div id="pied_de_page">

Copyright Drako 2006

</div>

</body>
</html>

a img
{
border: none
}

body
{
margin: auto;
background-color: rgb(160,177,202);

background-image: url("images/degradé.jpg");
background-repeat: repeat-x;
}

#corps
{
background-color: white;
margin-left: 2%;
margin-right: 180px;
padding: 10px;
border: 1px solid black;
margin-top: 15px;
}

#corps p
{
color: black;
font-family: comic-sans-ms, arial;
font-size: 15px;
padding: 5px;
margin-left: 10px;
margin-right: 10px;
}

.p1
{
border: 1px dashed black;
background-color: rgb(239,241,255);
}

#top_menu
{
margin-left: 2%;
margin-right: 2%;
margin-top: 10px;
color: rgb(109,162,219);
font-size: 15px;
text-align: center;
}

.logo
{
position: absolute;
right: 2%;
top: 10px;
}

#right_menu
{
color: rgb(109,162,219);
background-color: rgb(239,241,255);
margin-right: 2%;
width: 121px;
float: right;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
position: absolute;
right: 2%;
top: 10px;
}

.bouton
{
position: absolute;
right: 9%;
}

#pied_de_page
{
color: rgb(109,162,219);
background-color: rgb(239,241,255);
padding: 5px;
padding-left: 20px;
margin-left: 2%;
margin-right: 2%;
margin-top: 15px;
margin-bottom: 15px;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}

La bannière

J'aimerais rattacher ma bannière au menu,
mais vu qu'il faudrait allié les 2% d'espace et 121px de largeur ...

Le menu

Pour le menu j'aimerais également le rataché cette fois ci au pied de page.
J'ai penssé faire une sorte de block qui engloberais le corps et le menu pour ca
mais je ne vois pas trop comment faire.

Merci pour les réponses si réponses il y a !

edit: ne lisez pas ce qu'il y a dans le corps, c'est pour remplir et voir le design :-°

jp949

8 juin 2006 à 6:38:46

pour la banniere je vois pas trop ce que tu veux faire si tu veux que le menu et la banniere soient colles plusieurs solutions agrandir la banniere , diminuer largeur du corprs .
pour le menu et le footer tu n'as que la solution d'un rendu visuel cree par une image imitant ton menu et placée en background-position:right; d'un bloc qui englobe toute ta page

Chaodrim

8 juin 2006 à 13:07:17

coucou

déjà si je peut me permettre, je croi qu'il y as des truc pas normaux dans tout le haut de ton script :euh:

, je vais m'expliquer

Citation : Drako

<div id="top_menu">
<img src="images/ssbm5.png" alt="bannière"</a>
</div>

<div id="right_menu">
<img src="images/logo.jpg" alt="logo" class="logo">
 
<a href="lien"> <img src="images/bouton_tournois.png" alt="tournois" class="bouton"</a> 
<a href="lien"> <img src="images/bouton_contacts.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_joueurs.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_archives.png" alt="tournois" class="bouton"</a> </a> 
</div>

chez moi tout ca n'est pas clair, premièrement, dans ton id top-menu, ta balise "img" n'est pas fermée, par contre tu ferme une balise "a" (donc lien) que tu n'as pas ouverte o_O, regle donc déjà ce problème en:

ou alors si vraiment tu veut un lien sur la bannière

comme ca:

Ensuite, regarde bien ton id right-menu, il y as des erreur de la même nature dedans

, regarde:

Citation : Drako

<div id="right_menu">
<img src="images/logo.jpg" alt="logo" class="logo">
 
<a href="lien"> <img src="images/bouton_tournois.png" alt="tournois" class="bouton"</a> 
<a href="lien"> <img src="images/bouton_contacts.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_joueurs.png" alt="tournois" class="bouton"</a> </a> 
<a href="lien"> <img src="images/bouton_archives.png" alt="tournois" class="bouton"</a> </a> 
</div>

aucune de tes balises "img" n'est fermées, par contre tu ferme deux fois tes balises "a" o_O

donc ce que je peut te conseillé dans un premier temps c'est de corriger tout ca, ensuite tu y veras plus clair, quelque fois, des erreures de script comme ca créer des problèmes de design

, sans compté que tu ne passe pas au scan de validation de ton script

voilà pour le moment ensuite on veras ok?

Je recrute une équipe pour le Projet Nightyllium. Si interessé :D ?

Drako

8 juin 2006 à 13:08:14

Pour la bannière finalement je me suis débrouillé donc c'est bon.
Par contre pour ton explication sur le menu ca m'a l'air d'être ca mais je ne comprend pas bien le code que je dois faire.

Chaodrim

8 juin 2006 à 13:15:41

Citation : Drako

je ne comprend pas bien le code que je dois faire.

bouge pas on vas arranger ca

voilà ca sa devrait aller

ensuite, au lieu de mettre 15000 
essaye de mettre un maximum de "margin" ou de "padding" dans ton css sa seras mieu je pense

Je recrute une équipe pour le Projet Nightyllium. Si interessé :D ?

Drako

8 juin 2006 à 13:29:48

merci beaucoup ! Je vais tester ca tout de suite

ps: quand je demandais des précision c'était avant de voir ton post pour les malentendu

edit: Bon voilà j'ai corrigé mes erreurs de code, je savais qu'il y en avais vu que j'ai un peu bidouillé ça vite fait en changeant toutes les 10 min d'idées de design et avec les reprises à tout va ça a donné ca

Mais même en changeant tout je précise qu'il n'y a eu aucune modif sur le design.

Reste le problème du menu, je ne comprend toujours pas comment appliquer la méthode de jp949.

Chaodrim

8 juin 2006 à 19:42:32

ok, maintenant que tu as fait les changement au moin ton script est plus... enfin, il est mieu quoi^^
pour la bannière mdr, c'est tout con^^ tu peut essayer d'enlever simplement le margin-top de 10 px que tu as mit sur le top-menu et mettre plutot margin-top:0px;

voilà essaye ca sa devrait aller mieu, fait pareil sit u as mis des contrainte directement à ta bannière

Je recrute une équipe pour le Projet Nightyllium. Si interessé :D ?