Bordure HTML/CSS
Tom
-
swoog42 Messages postés 1060 Date d'inscription Statut Membre Dernière intervention -
swoog42 Messages postés 1060 Date d'inscription Statut Membre Dernière intervention -
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 ;)
A voir également:
- Bordure HTML/CSS
- Bordure de page word - Guide
- Editeur html - Télécharger - HTML
- Bordure excel ne s'affiche pas ✓ - Forum Excel
- Ajouter bordure photo ✓ - Forum MacOS
- Espace en html ✓ - Forum HTML
7 réponses
Tu créés une div, avec les attributs
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 ^^)
#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 !
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 ;)
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 ;)
