Probleme de menu html/css

Résolu

AnthraxProd Messages postés 423 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 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{
	
}

Afficher la suite

A voir également:

Probleme de menu html/css
Menu déroulant excel - Guide
Editeur html - Télécharger - HTML
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide
Windows 11 menu démarrer classique - Guide

2 réponses

Réponse 1 / 2

AnthraxProd Messages postés 423 Date d'inscription Statut Membre Dernière intervention 112

http://img15.hostingpics.net/pics/351565Capturedcran20131027194436.png

Peut-être si c'est plus clair pour le html

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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

Discussions similaires

Mon PC marque press the esc key for startup menu

Votre réponse

Discussions similaires