Probleme de menu html/css [Résolu/Fermé]

Signaler
Messages postés
423
Date d'inscription
lundi 28 février 2011
Statut
Membre
Dernière intervention
24 février 2014
-
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,
J'ai un problème avec ma mise en page, je souhaite que lorsque je survole un des mes menu rond, un autre rond apparait dessus (qui se superpose).
Le soucis c'est que je n'arrive pas au lieu que le rond soit par dessus il est en dessous et même avec un z-index ça ne fonctionne pas..
Je débute en HTML et CSS (C'est la base et c'est un peu pathétique mais bon :))

Voilà ce que j'ai.. :

http://www.hostingpics.net/viewer.php?id=360893Capturedcran20131027193930.png

Ce que je souhaite :

http://www.hostingpics.net/viewer.php?id=184122Capturedcran20131027194025.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Le doctype contient les normes du code de votre page web -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fred Turner : Au source de l'utopie numérique</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="Fred Turner : Au source de l'utopie numérique" />
<meta name="keywords" content="fred turner, steward brand, au source de l'utopie numérique, LSD, drogue, numerique, reseau, hippies, 60s" />
<meta name="generator" content="Fred Turner : Au source de l'utopie numérique (www.fredturner-btsprevert.com)" />
<meta name="author" content="Jonathan Haddad"/>
<meta name="owner" content="www.jonathanh.com"/>
<meta name="robots" content="index, follow, all" />
<meta name="revisit-after" content="2days" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>

<body> <!-- La partie body contient tous les éléments de contenu -->

<div id="global"> <!-- On ouvre un bloc contenant des éléments divers -->
<div class="bandeau">
<div class="logo">
<img alt"Logo" src="img/logo.jpg" />
</div>
</div>
</div> <!-- #global -->

<div id="nav">

<div id="citation">
<p>« Nous devons tout aux hippies ! »</p>
</div>

<ul>
<li><a href="Bio.html"><img alt="logo" src="IMG/bio.png"/></a></li>
<li><a href="Precurseur.html"><img alt="logo" src="IMG/precurseur.png"/></a></li>
<li><a href="Internet.html"><img alt="logo" src="IMG/internet.png"/></a></li>
<li><a href="Reseau.html"><img alt="logo" src="IMG/reseau.png"/></a></li>
</ul>
</div>

</body> <!-- On referme la partie body -->
</html> <!-- On referme la page web -->

@charset "utf-8";

body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;}

/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 0;color: black;background: white;}
ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */

table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/* Font */

@font-face {
font-family: 'timesregular';
src: url('times-webfont.eot');
src: url('times-webfont.eot?#iefix') format('embedded-opentype'),
url('times-webfont.woff') format('woff'),
url('times-webfont.ttf') format('truetype'),
url('times-webfont.svg#timesregular') format('svg');
font-weight: normal;
font-style: normal;

}

/* BackGround */

body{

background-color:#6eb650;

}
#global{
display:block;
margin-left:auto;
margin-right:auto;
}
/* Header */

.bandeau{
height:90px;
width:100%;
background-color:#FFFFFF;
display:block;
}

.logo{
width:72px;
height:42px;
top:25px;
left:50px;
position:absolute;
}

/* Body */

/* Citation */

p {
font-family: Times,Georgia,Serif;
margin-bottom: 100px;
margin-left:60px;
font-size: 44px;
font-style: italic;
}

.circle {
float:left;
margin-right:25px;
}

#nav {
margin-top:150px;
margin-left:350px;
height:162px;
}

li {
margin-right:25px;
}

#nav li {
display: inline;
}

a:hover{

}


2 réponses

Messages postés
423
Date d'inscription
lundi 28 février 2011
Statut
Membre
Dernière intervention
24 février 2014
92
http://img15.hostingpics.net/pics/351565Capturedcran20131027194436.png

Peut-être si c'est plus clair pour le html
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
569
Bonjour

comme tes images de menu sont intégrés à la page html tu fais ca (sans CSS)


<a href="lien.htm"><img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'"></a>

image1.png est celle qui est affichée
image2.png est celle qui s'affiche au survol de la souris