Sujet Précédent Sujet Suivant

Probleme de menu html/css

Résolu/Fermé
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 - 27 oct. 2013 à 19:43
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 28 oct. 2013 à 14:57
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{
	
}
A voir également:

2 réponses

Réponse 1 / 2
AnthraxProd Messages postés 423 Date d'inscription lundi 28 février 2011 Statut Membre Dernière intervention 24 février 2014 112
27 oct. 2013 à 19:46
http://img15.hostingpics.net/pics/351565Capturedcran20131027194436.png

Peut-être si c'est plus clair pour le html
0
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
28 oct. 2013 à 14:57
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
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses