Création de bordures personnelles

Kodenji · 31 Juillet 2005

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.

TheRec · 31 Juillet 2005

J'ai répondu à cela dans un autre topic...

-http://www.hexadec.ch/repository/roundedcorners/

Certaines choses ne sont pas de moi mais ça fonctionne c'est l'essentiel

Le sujet en question

Modifié 31 Juillet 2005 par TheRec

Kodenji · 31 Juillet 2005

Merci beaucoup ! J'ai tout essayé depuis ce matin et j'ai parcouru au moins 10 forum mais je n'avais pas trouvé !

C'est ceci qui m'a été le plus utile : http://www.alsacreations.com/articles/cadre/.

Je vais essayé ça tout de suite et encore merci :lol: .

Kodenji · 1 Août 2005

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 .

TheRec · 1 Août 2005

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é 1 Août 2005 par TheRec

Kodenji · 1 Août 2005

TheRec, je te redis merci :rolleyes: .

J'ai mis tpus mes blocs avec une position relative, le tout centrer et le footer est venu tout seul en bas.

Re merci .

TheRec · 1 Août 2005

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é 1 Août 2005 par TheRec

Connexion

Création de bordures personnelles

Sujets conseillés

Kodenji

TheRec

Kodenji

Kodenji

TheRec

Kodenji

TheRec

Veuillez vous connecter pour commenter

Parcourir

Activité