28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'aimerais savoir si il est possible de mettre en ligne un menu UL avec une image ? J'ai essayé plusieurs chose (sûrement les mauvaises) mais ça me met chaque fois mon image en-dessous de mon menu alors que j'aimerais que l'image soit à droite du menu Smiley sweatdrop

voici le code de ma page

a écrit :
<div>
<ul class="menuheader">
<li><a href="http://www.f1-pictures.com"><img src="http://www.f1-pictures.com/images/bt_acueil.jpg" srcover="http://www.f1-pictures.com/images/bt_acueil2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/forum/"><img src="http://www.f1-pictures.com/images/bt_forum.jpg" srcover="http://www.f1-pictures.com/images/bt_forum2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/chat/chat.php"><img src="http://www.f1-pictures.com/images/bt_chat.jpg" srcover="http://www.f1-pictures.com/images/bt_chat2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/livre_or/livre-d-or.php"><img src="http://www.f1-pictures.com/images/bt_livreor.jpg" srcover="http://www.f1-pictures.com/images/bt_livreor2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/liens/liens.php"><img src="http://www.f1-pictures.com/images/bt_liens.jpg" srcover="http://www.f1-pictures.com/images/bt_liens2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/a-propos-de-nous.php"><img src="http://www.f1-pictures.com/images/bt_apropos.jpg" srcover="http://www.f1-pictures.com/images/bt_apropos2.jpg"></a></li>
</ul>
</div>
<div>
<img src="http://www.f1-pictures.com/images/hist_f1_03.jpg">
</div>


Merci d'avance

A+
Modifié par Cochonou (28 Jun 2006 - 22:54)
Pas sûre d'avoir compris. Tu aimerais créer un menu horizontal avec ta liste <ul> ? Si c'est le cas, il faut, dans ta feuille de style, changer les propriété de tes <li>.

display: block;
float: left;
Re,

J'ai essayer de m'en inspirer, ça va dans le bon sens, mais j'ai encore un petit problème. Mon image, au lieu de se mettre à droite de mon menu c'est mise en arrière plan de mon menu Smiley sweatdrop illustré ci-dessous.

upload/7275-header.JPG

Voici les codes concernant cettes parties :

Page :
<div id="menuheaderimage">
<ul class="menuheader">
<li><a href="http://www.f1-pictures.com"><img src="http://www.f1-pictures.com/images/bt_acueil.jpg" srcover="http://www.f1-pictures.com/images/bt_acueil2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/forum/"><img src="http://www.f1-pictures.com/images/bt_forum.jpg" srcover="http://www.f1-pictures.com/images/bt_forum2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/chat/chat.php"><img src="http://www.f1-pictures.com/images/bt_chat.jpg" srcover="http://www.f1-pictures.com/images/bt_chat2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/livre_or/livre-d-or.php"><img src="http://www.f1-pictures.com/images/bt_livreor.jpg" srcover="http://www.f1-pictures.com/images/bt_livreor2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/communaute/liens/liens.php"><img src="http://www.f1-pictures.com/images/bt_liens.jpg" srcover="http://www.f1-pictures.com/images/bt_liens2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/a-propos-de-nous.php"><img src="http://www.f1-pictures.com/images/bt_apropos.jpg" srcover="http://www.f1-pictures.com/images/bt_apropos2.jpg"></a></li>
<li><a href="mailto:webmaster@f1-pictures.com?subject=Concerne  www.f1-pictures.com"><img  src="http://www.f1-pictures.com/images/bt_contact.jpg" srcover="http://www.f1-pictures.com/images/bt_contact2.jpg"></a></li>
</ul>
</div>


CSS

.menuheader {
list-style-type: none;
margin: 0;
padding:0;
}
.menuheader li {
margin: 0px;
height: 28px; 
}
.menuheader a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuheader a:hover {
text-decoration: none;
}
#menuheaderimage {
float: right;
position: relative;
width: 698px;
height: 230px;
background: url(http://www.f1-pictures.com/images/hist_f1_03.jpg) left top no-repeat;
}


Pour ceux qui veulent en savoir plus, la page de test est toujours ici : www.histoiredelaf1.com/test/

Merci de votre aide

A+
Tu as un position: relative dont je ne vois pas l'interet imediat, ensuite si tu veux que ton image flotte par rapport au menu il ne faut pas imbriquer le menu dans le div image
Hello à tous,

C'est bon, j'ai réussi. En fait, je cherchais à modifier des templates existants et à trop me compliquer. Je suis repartis à réto en m'aidant d'un template du site afin de "mieux comprendre" le fonctionnement.

J'ai compris mon problème, c'est que j'avais trop en tête le système des tableaux. Merci à tous et peut être à bientôt pour d'autre question Smiley lol

A+