Bordure HTML/CSS

Fermé

Tom - Modifié par Tom le 22/03/2010 à 15:25
swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 - 23 mars 2010 à 22:46

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 :

<html>  

 <head> <!--&quot;tête&quot; 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 &quot;forme&quot; 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
Tableau html bordure sans css ✓ - Forum HTML
Espace html ✓ - Forum HTML
Bordure excel ne s'affiche pas ✓ - Forum Excel

7 réponses

Réponse 1 / 7

swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
22 mars 2010 à 16:59

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 ^^)

Réponse 2 / 7

Tom
Modifié par Tom le 22/03/2010 à 17:18

Ok merci je vais tester ;). Faut-il inclure les différentes div banniere, menu etc... dans le div bordure dans le html ?
Encore merci !

Réponse 3 / 7

swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
22 mars 2010 à 17:20

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)

Réponse 4 / 7

Tom
22 mars 2010 à 18:17

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

Réponse 5 / 7

swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
22 mars 2010 à 20:09

envoie ton code, je le modifierais ^^

Réponse 6 / 7

Tom
23 mars 2010 à 21:15

Ç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 ;)

Réponse 7 / 7

swoog42 Messages postés 1060 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
23 mars 2010 à 22:46

ya possibilité de voir ta page ?

Discussions similaires