Dans mon nouveau design mes boutons se placent pas normalement

Sujet résolu

14 avril 2006 à 17:41:46

Slt a tous, alors je suis en train de préparer un nouveau désign pour mon site internet, je l'ai fais avec photoshop.
Mon site maintenant

http://snake91.free.fr/Nouveau%20dossier%20(2)/ : Mon site bientot
Comme vous pouvez le voir il y a un petit (TRES GROS) problème avec mes bouton de mon menu.
Image utilisateur

Comme je pense vous l'avez compris, j'aimerais que le bouton sois casé entre le menu (je susi pas très claire la :euh:

)

Citation : Code HTML

</head>
<body>
<div id="en_tete">

</div>

<div id="menu"> 
<ul class="menu">
<li><a class="menu_style" href="accueil.php">Accueil</a></li>
<li><a class="menu_style" href="news.php">News</a></li>
<li><a class="menu_style" href="livreor.php">La Team</a></li>
<li><a class="menu_style" href="contact.php">Photos</a></li>
<li><a class="menu_style" href="admin.php">Vidéos</a></li>
<li><a class="menu_style" href="accueil.php">Musiques</a></li>
<li><a class="menu_style" href="news.php">Bannières</a></li>
<li><a class="menu_style" href="livreor.php">Livre d'or</a></li>
<li><a class="menu_style" href="contact.php">Liens</a></li>
<li><a class="menu_style" href="admin.php">Contact</a></li>
</ul>
</div>

<div id="corps">

</div>

<div id="pied_de_page">

</div>

Citation : Code CSS

body
{
width: 800px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-image: url("ruch2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}

#en_tete
{
width: 800px;
height: 200px;
background-image: url("banniere3.gif");
margin: auto;
background-repeat: no-repeat;
margin-bottom: 20px;
}

#menu
{
float: left;
width: 150px;
background-image: url("grand_menu.gif");
height: 590px;
background-repeat: no-repeat;
padding-top: 20px;
}

.menu
{
list-style-type : none;
}

a.menu_style
{
background-image: url("bouton.gif");
width: 110px;
height: 40px;
text-decoration: none;
line-height: 50px;
display: block;
background-repeat: no-repeat;
font-family: "Times New Roman", serif;
font-size: 12px;
font-weight: bold;
color: black;

}

#corps
{
height: 580px;
width: 630px;
background-image: url("grand_corps.gif");
background-repeat: no-repeat;
float: right;

}

Voili voilou j'espère avoir bien expliqué (:'( :honte:)
Aidez moi svp

strucky

14 avril 2006 à 18:18:44

Salut,

Comme je sais pas trop ce que tu veux obtenir, j'ai ajusté comme ce qui me parait le mieux.

.menu
{
padding: 0 20px;
list-style-type : none;
}

a.menu_style
{
background-image: url("bouton.gif");
width: 110px;
height: 40px;
text-decoration: none;
line-height: 40px;
display: block;
background-repeat: no-repeat;
font-family: "Times New Roman", serif;
font-size: 12px;
font-weight: bold;
color: black;
text-align: center;
}

snake91

14 avril 2006 à 18:30:13

Alors la chapo merci c'est génial ca marche!

Euh sa marche presque! je viens de remarké que sur IE sa ne fonctionne pas :s qqn a une idée?

Alors la je viens de découvrir un 2eme probleme:
ici
J'aimerais que le texte sois dans le cadre (je compte mettre un overflow vertical mais je sais pas comment placé tous ca dans le code!

Citation : Code HTML

<div id="corps">

<h1 class="titre_sk8roller">Sk8 & Roller</h1>

<p>
<strong>Bienvenue dans mon nouveau site Internet!</strong><br />
    Mon site est ouvert depuis le 1er janvier 2006, comme cela fait pas longtemps qu'il existe,
ça serait sympa de votre pars d'en parler à toutes personnes qui aime ou apprécie le skate et le roller,
pour que le site prenne vie et puisse subsister, merci d'avance de votre compréhension.<br/>
<br/>
J'ai mis en place un <a href="http://livredor.hiwit.org/index.php?idsite=9023&zone=e">livre d'or</a> donc ça serai cool de lacher un petit commentaire, ou des suggestionn des critiques
pour amméliorer le site :-) !<br/>
Sinon il y a un <a href="http://sond.hiwit.org/index.php?idsite=4612&zone=b">sondage</a> assez important pour moi donc ça serait cool de votre part d'y répondre s'il vous plaît.<br/>
Si vous souhaitez que certaine musique de votre choix soit mise sur le site <a href="mailto:sk8roller@free.fr">contactez nous</a>, et nous verrons si votre choix est disponnible, merci d'avance.
Si vous souhaitez communiquez avec nous par msn, envoyez un e-mail et nous verrons ce que l'on peut faire.<br/>
</p>
<p>
Après un petit sondage pour un forum, nous vous donnons les résultats: 16 OUI pour le forum et
9 NON contre le forum. Nous allons y réfléchir pour savoir si il va vraiment y avoir des personnes qui
y participeront et si ça vos la peine!
</p>

<h2>A propos de ce site ?</h2>
<p>    Ce site s'adresse un peu à tout le monde, mais surtout aux fans de Skate et de Roller.<br/>
Dans ce site nous vous présenterons des vidéos de Skate et de Roller <strong>AMATEUR</strong>, c'est à dire que ces
vidéos ne sont faites que par des personnes en pleine apprentissage du skate et du roller et qu'ils présentent
leur vidéos pour faire partager leur sport. Je précise aussi que nos moyen son minime ce qui veut dire que les
vidéos ne seront pas de qualités <strong>DVD</strong>!</p>

<p><strong>Je vais toujours essayer de faire en sorte que le site soit mis à jour au moin une fois par semaine ou plus!</strong></p>
<p>Sinon je vous souhaites une bonne visite, une bonne année 2006 à tous et une bonne santé! Bonne visite dans notre petit site et pour tout problème ou suggestion
ou même pour nous dire un petit mot adressé nous un petit e-mail :-)!</p>

</div>

Citation : Code CSS

#corps
{
height: 580px;
width: 630px;
background-image: url("grand_corps.gif");
background-repeat: no-repeat;
float: right;
}

Voila svp aidez moi!

strucky

14 avril 2006 à 19:02:59

J'ai regardé.

#corps
{
height: 580px;
width: 570px;
padding: 0 30px;
background-image: url("grand_corps.gif");
background-repeat: no-repeat;
float: right;
overflow: auto;
}

Mais je crois qu'il va falloir que tu rajoutes un bloc div dans ton corps, car tu constatera que même en mettant un padding top et bottom ton texte apparait tout de même sur la partie qui ne représente pas le mur.

Donc rajoutes ce bloc dans le html et ensuite donnes lui des marges égales à la partie verte, et appliques le overflow à ce bloc.

snake91

14 avril 2006 à 19:07:36

Le problème des padding c'est que sa fonctionne mal sur IE donc deja mon 1er probleme nest pas regle :s

strucky

14 avril 2006 à 19:14:40

Ah oui en effet, j'avais pas ragardé avec IE :-°

snake91

14 avril 2006 à 19:15:14

lol vraiment dmg parce que s'était bien trouvé! je pensais pas que j'aurais autan de mal pour changer de design!