Forum Développeur - Administration serveur, programmation et base de données > Comment faire une Barre de titre en angle ?

Version complète : Comment faire une Barre de titre en angle ?

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

Lee

Mar 15 2005, 05:12 PM

Bonjour à tous,
Je suis débutant dans le domaine de l'xhtml et du css.
Donc je suis à la recherche d'esprit compétent

pouvant m'expliquer comment créer proprement quelque chose pouvant ressembler à ca (couleur texte + couleur sous le texte + l'angle)dans une css:
user posted image

aiepepito

Mar 15 2005, 05:51 PM

Du haut de ma faible expérience et de mes connaissances aussi restreintes soit elles j'en ferai une image que je mettrai en background

royto

Mar 15 2005, 06:01 PM

Salut alors voila comment j'ai fait

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

div {

background-color:#F7FAFF;

width: 250px;

border:1px solid #9CC2FF;

}

.titre {

background-image:url(elemMenu.jpg);

background-position:right;

background-repeat:no-repeat;

height:22px;

color:#044BB0;

font-weight:bold;

padding-right : 25px;

}

</style>

</head>

<body>

<div>

<span class="titre">Menu</span>

<ul>

<li>menu1</li>

<li>menu2</li>

</ul>

</div>

</body>

</html>

ci joint l'image a mettre en background

Lee

Mar 16 2005, 05:42 PM

Merci beaucoup

Cela m'a aidé énormément.
Encore merci

Lee

Mar 16 2005, 05:47 PM

QUOTE

Merci beaucoup

Cela m'a aidé énormément.
Encore merci :P

désolé j'ai oublié le code

donc dans ma CSs c'est comme ca :

CODE

div.bloc {

margin:10px 0px 0px 0px;

border:1px solid #9CC2FF;

background-position:right;

background-repeat:no-repeat;

background-color: #F7FAFF;

height:22px;

color:#044BB0;

font-weight:bold;

padding-right : 25px;

}

div.bloc h2 {

margin:0px 0px 5px 0px;

background-image:url("../images/styles/bleu/deco_angle_bleu2.gif");

background-repeat:no-repeat;

background-position:right;

background-color:#CFDEF1;

padding-right : 5px;

width: 250px;

font-size:13px;

}

div.bloc ul {

margin:0px 0px 5px 25px;

}

div.bloc li {

list-style-image:url("../images/styles/bleu/p_lien_bleu.gif")

}

div.bloc form {

margin:0px 0px 5px 0px;

}

div.bloc select {

background-color:#CFDEF1;

position: relative;

}

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.