Bordure HTML/CSS
Tom
-
swoog42 Messages postés 1178 Statut Membre -
swoog42 Messages postés 1178 Statut Membre -
Bonjour à tous,
Je suis en train de réaliser un site et pour le moment je cherche comment mettre une bordure à partir de la moité de la hauteur de ma bannière d'en-tête. J'ai essayé avec des tableau sans grand résultat. Je suis persuadé que c'est réalisable avec des div... comment ?
Comme on dit, rien ne vaut un bon dessin; voilà ce que j'essaie de faire (bordure en rouge) :
http://yfrog.com/amchartegraphj
Voici mon code :
- html :
- CSS :
Merci d'avance ;)
Je suis en train de réaliser un site et pour le moment je cherche comment mettre une bordure à partir de la moité de la hauteur de ma bannière d'en-tête. J'ai essayé avec des tableau sans grand résultat. Je suis persuadé que c'est réalisable avec des div... comment ?
Comme on dit, rien ne vaut un bon dessin; voilà ce que j'essaie de faire (bordure en rouge) :
http://yfrog.com/amchartegraphj
Voici mon code :
- html :
<html>
<head> <!--"tête" de page -->
<title>Le 5e Bison-Accueil</title> <!-- titre de la page -->
<meta name="description" content="Site de la Compagnie de Réserve du 126e RI"/> <!-- description de la page -->
<meta name="author" content="Tom" /> <!-- auteur de la page -->
<style type="text/css"></style>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> <!-- lien vers le fichier css permettant de traiter la partie "forme" du site -->
</head>
<body> <!-- corps de la page -->
<div id="banniere" >
</div>
<div
class="bordure"
id="texte_defilant">
<marquee> Bienvenue sur le site non-officiel de la compagnie de réserve du 126e Régiment d'Infanterie</marquee> <!--Texte défilant sur une ligne-->
</div>
<div id="menu"> <!-- menu -->
<ul>
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="">Infos de la 5</a>
</li>
<li>
<a href="#">Qui sommes-nous ?</a>
<ul>
<li>
<a href="#">Le 126e RI</a>
</li>
<li>
<a href="#">La Réserve</a>
</li>
</ul>
</li>
<li>
<a href="#">Médiathéque</a>
<ul>
<li>
<a href="#">Photos</a>
</li>
<li>
<a href="#">Vidéos</a>
</li>
<li>
<a href="#">Documents</a>
</li>
</ul>
</li>
<li>
<a href="#">Vos questions</a>
</li>
<li>
<a href="#">Nous contacter</a>
</li>
<li>
<a href="#">Liens internet</a>
</li>
</ul>
</div>
</body>
<html>
- CSS :
/* Corps de la page*/
body
{
background-color:#6495ED;
color:#000080
}
/* Image d'en-tête */
#banniere
{
background-image:url("images/banniere.gif");
background-repeat:no-repeat;
width:850px;
height:256px;
margin-right: auto;
margin-left: auto;
}
#texte_defilant
{
color:#000080;
}
/* Menu */
#menu {
width: 200px;
margin: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
/* Liens vers les images du menu (souris hors du menu et souris sur le menu */
#menu li a:link, #menu6 li a:visited {
color: #8D9179;
display: block;
background: url("images/menu.gif");
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu6 li a:active {
color: #6C7250;
background: url("images/menu.gif") 0 -32px;
padding: 8px 0 0 10px;
}
.bordure
{
border-width:3px;
border-style:solid;
border-color:gold;
}
#corps
{
margin-left:140px;
margin-bottom:20px;
padding:5px;
color:#B3B3B3;
background-color:#626262;
background-image:url("motif.png");
background-repeat:repeat-x;
border:2px solid black;
}
#corps h1
{
color:#B3B3B3;
text-align:center;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height:30px;
background-image:url("titre.png");
background-repeat:no-repeat;
padding-left:30px;
color:#B3B3B3;
text-align:left;
}
Merci d'avance ;)
7 réponses
-
Tu créés une div, avec les attributs
#div_bordure_rouge { z-index: 0; border: solid red 3px; top: 100px; position: absolute; backgroung: transparent; }
Tous tes autres élements, tu leur mets un z-index à 1 par exemple.
Tu devrais etre pas mal... Il ne te reste qu'a adapter
(Mon code n'est pas testé, tu peux avoir des erreurs... a toi de voir ^^) -
Ok merci je vais tester ;). Faut-il inclure les différentes div banniere, menu etc... dans le div bordure dans le html ?
Encore merci ! -
non tu n'inclues rien dans le DIV bordure. tu le pose à la fin de ton code (ou au début, peut etre que ca marcherait mieux lol)
-
Non pas moyen, j'ai testé mais ni sur firefox ni sur IE et la même avec Chrome la bordure apparaît... Il commence à me titiller sérieux ce cadre !
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
-
Ça y est ce problème est réglé grâce au z-index merci à toi !!
Par contre je peste de nouveau (je sais je suis chiant xD) : mon menu chevauche une partie de l'image (délibérément). J'ai donc ajouté à mon menu le fameux z-index (à 1, l'image étant à 2). A partir de là je ne parviens plus à cliquer sur les liens du menu... J'ai pensé au float mais ça m'oblige à tout revoir dans mon css...
Quelqu'un aurai une solution ?
Encore merci ;) -
