Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Menu vertical CSS et texte sur fond de page.
Bonjour à tous,
En créant mon site perso en CSS, j'ai un problème.
Sur un fond de page, J'ai mis un menu vertical à gauche en css (feuille de style externe).
Je dois maintenant insérer une page de texte à droite du menu vertical, sur le fond de page. Je n'y arrive pas. Le texte se mélange au menu...
Pouvez-vous m'aider. Je suis un débutant.
Je peux joindre la feuille de style et le code html si vous me le demandez
Salut,
Qu'entends tu par "mélange" ?
peux-tu joindre une copie d'écran (par exemple)
Yan.
Bonsoir devyan,
Le texte (une page A4)que je tente de coller se met entre les blocks du menu vertical et ne s'insère pas à droite de ce même menu. As-tu une solution?
Merci.
Salut,
Sans la totalité du code (xHTML & CSS), il sera dur de t'aider.
Le mieu serait de fournir ton code, ou une page en ligne (voir un schéma de ce que tu souhaite obtenir).
Il y a de nombreuses façons de faire cela...
Pensez à utiliser les ressources disponibles en Dev. Web :
(x)HTML : Cours (X)HTML / FAQ (X)HTML
CSS : Cours CSS / FAQ CSS / Galerie CSS
Javascript : Cours / FAQ / Sources
Mon site : Développeur Web Freelance
Hiron,
Voici les codes xHTML et CSS.
Voici la feuille de style menu.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mapage</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="stylesheet" type="text/css" href="varape.css" />
</head>
<body>
<div id="menu">
<div class="box">
<a href="#nogo">Accueil
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Votre page de réception </span> </a> </div>
<div class="box">
<a href="#nogo">Nous connaître
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Nos loisirs, nos activités. </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
</div>
</body>
</html>
J'ai collé mon texte aprés BODY...#menu {
width:225px; /*100px*/
text-align:center; /*center*/
position:relative; /*relative*/
position:fixed;
/*margin:2em auto; */
}
.box {
position:relative; /*relative*/
}
#menu a, #menu a:visited { /*configuration des blocks menu*/
/*text-decoration:none;*/
background-color:#E8312D;
color:#FFFFFF; /*ffff*/
display:block;
width:200px; /*88px*/
height:28px; /*16px*/
font-weight: bold; /*test gras*/
font-size:16px; /*14px*/
border:0px solid #fff; /*1px solid #fff (espacement vertical entre les blocks)*/
padding: 12px; /*5px*/
}
* html #menu a, * html #menu a:visited {
width: 225px; /*200px*/
height:28px; /*28px*/
width:88px; /*88px*/
height:28px; /*16px*/
}
#menu a span { /* blocks secondaires*/
display:none;
}
#menu a:hover { /*encadrement des block au survol*/
border:1px solid #ccc; /*000*/
}
#menu a:hover span.left, /* boutons de'encarement de texte*/
#menu a:hover span.right { /* boutons de'encarement de texte*/
display:block; /*block*/
position:absolute; /*absolute*/
height:0; /*0*/
width:0; /*0*/
/*overflow:hidden; /*hidden*/
border-top:8px solid #fff; /*#fff */
border-bottom:8px solid #fff; /*#fff */
}
#menu a:hover span.left { /* espacement horizontal de la gauche desboutons d'encarement du texte*/
left:13px; /*5px*/
top:15px; /*5px*/
border-left:8px solid #c00;
}
#menu a:hover span.right { /* espacement horizontal de la droite des boutons d'encarement du texte*/
left:210px; /*87px*/
top:15px; /*5px*/
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px; /*8px*/
height:20px; /*16px*/
w\idth:0; /*0px*/
h\eight:0; /*opx*/
}
#menu a:hover span.lk { /*définition des blocks explication*/
display:block;
position:absolute;
left:225px; /*120px*/
top:0; /*0px*/
padding:10px; /* 5px*/
width:250px; /*100px*/
background-color:#CCFFFF; /*définition couleur de fond blocks explication*/
/*background-color:#fff; /*fff*/
color:#000; /*000*/
border:1px solid #E8312D; /*1px solid #234*/
}
xhtml
Qu'ai-je oublié ?
Salut,
Je pense que ton problème vient du fait que le menu a "position:fixed".
Il suffit pour éviter le recouvrement de placer le reste du contenu de la page dans un cadre (DIV) ayant une marge (margin ou padding selon ton cas) à gauche de la largeur du menu. (dans ton cas au moins 225px)
Répondre avec citation
Partager