Aller au contenu

Création de bordures personnelles

Kodenji

Par Kodenji
dans (X)HTML et CSS

 Partager

Sujets conseillés

Kodenji

Kodenji

Posté
Posté

Bonjour à tous. En testant un design pour mon site j'ai rencontré un petit problème avec la bordure que j'ai faite. En fait, selon la taille du bloc (plus y'a de texte ou moins y'en a), soit la bordure est trop grande, soit elle est trop petite.

Trop petit

Trio grand

Voila mon CSS (les bordures correspondent aux class left et right) :

/*CSS du site.*/

body {
width: 80%;
color: white;
position: absolute;
left: 10%;
background-color: #424242;
margin: 10%;
}


/* CSS concernant le corps de la page. */
#contenu {
width: 70%;
background-color: rvb(66,66,66);
position: absolute;
left: 15%;
padding: 40px;
text-align: justify;
}

#contenu .topleft {
width: 18px;
height: 12px;
background-image: url("topleft.png");
position: absolute;
top: 0px;
left:0px;
}

#contenu .top {
width: 95%;
height: 10px;
position: absolute;
top: 0px;
left: 18px;
background: url("top.png");
}

#contenu .topright {
width: 18px;
height: 12px;
background: url("topright.png");
position: absolute;
top: 0px;
right: 0px;
}

#contenu .left {
width: 18px;
height: 95%;
position: absolute;
left: 0px;
top: 12px;
background: url("left.png");
}

#contenu .bottomleft {
width: 18px;
height: 13px;
position: absolute;
left: 0px;
bottom: 0px;
background: url("bottomleft1.png");
}

#contenu .bottom {
width: 95%;
height: 13px;
background: url("bottom.png");
position: absolute;
left: 18px;
bottom: 0px;
}

#contenu .right {
width: 18px;
height: 95%;
position: absolute;
right: 0px;
bottom: 13px;
background-image: url("right.png");
}

#contenu .bottomright {
width: 18px;
height: 13px;
position: absolute;
right: 0px;
bottom: 0px;
background-image: url("bottomright1.png");
}

Merci.

Lien vers le commentaire
Partager sur d’autres sites
Kodenji

Kodenji

Posté
  • Auteur
Posté

Et bien oui, j'ai réussi ça marche, encore merci.

Par contre j'ai une autre petite question, j'ai fait un menu, un corps, et un footer. Le problème c'est que ce footer (qui est donc censé être en pied de page) se retrouve à la même hauteur que le carps et le menu, étant ainsi caché pas ceux-ci.

Vous conviendrez que pour un pied de page, c'est pas terrible. J'ai essayé plusieurs choses pour le descendre mais à chaque fois sans succès.

Je vous passe mon xhtml et mon css : 

/*    ////////////////////////////////////////////////////////
       //////////////////CSS DU SITE//////////////////////////
      ////////////////////////////////////////////////////////*/

body {
width: 100%;
color: white;
position: absolute;
background-color: #424242;
margin: 10%;
}

/*CSS concernant le menu gauche.*/
#menu {
width: 150px;
float: left;
position: absolute;
left: 0px;
background: url("topmenu.png") no-repeat top left;
text-align: center;
font-weight: bold;
}

#element_menu {
background: url("bottommenu.png") no-repeat bottom left;
padding-bottom: 20px;
}

.lien {
margin-left: 18px;
margin-right: 18px;
padding: 2px;
color: #ffffff;
text-decoration: none;
background: url("menu.png");
display: block;
}

#element_menu a {
text-decoration: none;
color: white;
}

#element_menu a:hover {
text-decoration: none;
color: white;
background: url("hovermenu.png") no-repeat;
}

#element_menu h3 {
text-align: center;
}

#menu2 {
width: 150px;
float: left;
position: absolute;
left: 0px;
margin-top: 200px;
background: url("topmenu.png") no-repeat top left;
text-align: center;
font-weight: bold;
}

#element_menu2 {
background: url("bottommenu.png") no-repeat bottom left;
padding-bottom: 20px;
}

#element_menu2 a {
text-decoration: none;
color: white;
}

#element_menu2 a:hover {
text-decoration: none;
color: white;
background: url("hovermenu.png") no-repeat;
}

#element_menu2 h3 {
text-align: center;
}


/* CSS concernant le corps de la page. */
#contenu {
width: 650px;
position: absolute;
left: 20%;
background: url("barehaut.png") no-repeat top left;
padding-top: 20px;
text-indent: 20px;
}

#cadre {
background: url("bottom1.png") no-repeat bottom left;
padding-bottom: 40px;
}

#cadre p {
margin: 0 30px 0 20px;
} 

/*CSS concernant le footer.*/
#footer {
width: 650px;
background: url("barehaut.png") no-repeat top left;
padding-top: 20px;
text-align: center;
}

#copy {
background: url("bottom1.png") no-repeat bottom left;
padding-bottom: 40px;
}

#copy p {
margin: 0 30px 0 20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="text.css" />
   </head>
   <body>
        <div id="menu">
      <div id="element_menu">
 	 <h3>Titre menu</h3>
        <a href="http://www.siteduzero.com" class="lien">Lien</a>
        <a href="http://www.siteduzero.com" class="lien">Lien</a>
     <a href="http://www.siteduzero.com" class="lien">Lien</a>
 	 </div>
     </div>
  <div id="menu2">
      <div id="element_menu2">
 	 <h3>Titre menu</h3>
        <a href="http://www.siteduzero.com" class="lien">Lien</a>
        <a href="http://www.siteduzero.com" class="lien">Lien</a>
     <a href="http://www.siteduzero.com" class="lien">Lien</a>
        <a href="http://www.siteduzero.com" class="lien">Lien</a>
 	 </div>
     </div>
   
        <div id="contenu">
         <div id="cadre">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin faucibus. Proin adipiscing, lacus sed pretium porta, urna est lacinia turpis, sed ultricies ligula pede ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eget sapien. Fusce vitae enim in arcu interdum aliquam. Aliquam purus. Nunc fringilla dapibus velit. Quisque ut mauris quis quam viverra posuere. Integer ligula nulla, luctus ut, tincidunt ac, posuere tempus, purus. Duis aliquet tortor quis felis.

Vivamus vel nunc. Phasellus consectetuer sodales massa. Donec sapien massa, molestie eu, pharetra nec, bibendum sit amet, velit. Praesent tristique tristique mauris. Phasellus arcu sapien, malesuada nec, gravida ac, tristique vitae, nulla. Nulla quam libero, pellentesque sed, volutpat nec, mollis eu, lectus. Curabitur risus. Nulla gravida viverra enim. Maecenas ipsum justo, euismod a, elementum et, luctus eget, massa. Phasellus elementum sodales metus. Phasellus velit mauris, pellentesque vel, vulputate a, luctus nec, nulla. Nunc in mauris. Suspendisse sollicitudin dictum dui. Aliquam ligula. Curabitur justo nisl, euismod in, euismod et, vulputate nec, arcu.
       </p>    
 	 </div>
     </div>
     
  
  <div id="footer">
          <div id="copy">
    <p>Copyright "Kodenji" © 2005-2006. Tous droits réservés, reproduction interdite.</p>    
 	 </div>
     </div>
    
        
   </body>
</html>

Merci encore une fois pour votre aide ^_^.

Lien vers le commentaire
Partager sur d’autres sites
TheRec

TheRec

Posté
Posté (modifié)

Cela provient du fait que la majorité de tes <div> ont l'attribut "position:absolute;" ...Et le <div id="footer"> ne l'a pas, il ne peut pas se positionner relativement aux autre <div> pour cette raison et le positionner en "absolute" ne t'aidera pas plus car je la hauteur de ton site sera variable et donc c'est assez dur de le positionner assez.

J'ai l'impression que tu souhaite center ton site sur la page, l'idéal sera d'utiliser une autre technique. Essaie de voir sur ce site : http://css.alsacreations.com/Faire-une-mis...site-web-en-CSS

Modifié par TheRec
Lien vers le commentaire
Partager sur d’autres sites
TheRec

TheRec

Posté
Posté (modifié)

Pas de problème, de rien :) Tu n'est pas obliger de former la position "relative" c'est la valeur par défaut pour les blocs.

Cette valeur n'est pas héritée par les blocs enfants, c'est à dire qu'il est nécessaire de la spécifier pour tous les blocs qui ne doivent pas être positionnés en "relative".

Modifié par TheRec
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...