class header css

johann.menguy · class header css

bonsoir, j'ai sur mon fichier css ce code:

Code:

body, th, td {
    background: #989898 url(images/img01.gif) repeat-x;
    background-attachment:fixed;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #0000000;
}

h1, h2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 197%;
}

h2 {
    font-size: 167%;
}

h3 {
    margin-bottom: 1em;
    text-transform: uppercase;
    font-size: 100%;
    color: #000000;
}

p, ul, ol {
    margin-bottom: 1.5em;
    line-height: 1.6em;
}

p {
}

ol {
}

ul {
    list-style: none;
}

ul li {
    padding-left: 10px;
    background: url(images/img16.gif) no-repeat 0px 10px;
}

a:link {
    color: #00e9e1;
}

a:hover, a:active {
    text-decoration: none;
    color: #F89934;
}

a:visited {
    color: #666666;
}

img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 10px 0;
}

img.right {
    float: right;
    margin: 0 0 10px 20px;
}

.byline {
    color: #CCCCCC;
}

.col-one {
    float: left;
}

.col-two {
    float: right;
}

.two-cols {
}

.two-cols .col-one, .two-cols .col-two {
    width: 250px;
}

/* Boxes */

.box-orange {
    background: url(images/img09.gif) repeat-x;
}

.box-orange .section {
    background: url(images/img11.gif) no-repeat right top;
    font-size: 100%;
    color: #FFFFFF;
}

.box-orange .section b {
    display: block;
    height: 23px;
    padding: 7px 0 0 10px;
    background: url(images/img10.gif) no-repeat;
}

.box-orange .content {
    padding: 20px;
}

.box-blue {
    background: url(images/img13.gif) repeat-x;
}

.box-blue .section {
    background: url(images/img15.gif) no-repeat right top;
    font-size: 100%;
    color: #FFFFFF;
}

.box-blue .section b {
    display: block;
    height: 23px;
    padding: 7px 0 0 10px;
    background: url(images/img14.gif) no-repeat;
}

.box-blue .content {
    padding: 20px;
}

.box-pink {
    background: url(images/img17.gif) repeat-x;
}

.box-pink .section {
    background: url(images/img19.gif) no-repeat right top;
    font-size: 100%;
    color: #FFFFFF;
}

.box-pink .section b {
    display: block;
    height: 23px;
    padding: 7px 0 0 10px;
    background: url(images/img18.gif) no-repeat;
}

.box-pink .content {
    padding: 20px;
}

/* Header */

#header {
    width: 960px;
    height: 92px;
    margin: 0 auto;
}

/* Logo */

#logo {
    float: left;
}

#logo h1, #logo h2 {
    float: left;
}

#logo h1 {
    padding-top: 40px;
    text-transform: lowercase;
    font-size: 34px;
    font-weight: normal;
}

#logo h2 {
    padding: 63px 0 0 3px;
    text-transform: uppercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}

#logo a {
    text-decoration: none;
    color: #000000;
}

/* Search */

#search {
    float: right;
    width: 400px;
    padding-top: 55px;
}

#search form {
}

#search fieldset {
    border: none;
}

#searchinput, #searchsubmit {
    font: bold 100% Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}

#searchinput {
    padding: 2px 5px;
    width: 198px;
    background: #FFFFFF url(images/img02.gif) repeat-x;
    border: 1px solid #FFFFFF;
}

#searchinput2 {
    padding: 2px 5px;
    width: 198px;
    background: #FFFFFF url(images/img02.gif) repeat-x;
    border: 1px solid #000000;
}

#searchsubmit {
    padding: 0 2px;
    background: #F4A652 url(images/img03.gif) repeat-x;
    border: 1px solid #000000;
    text-transform: lowercase;
}

/* Menu */

#menu {
    width: 960px;
    height: 30px;
    margin: 0 auto;
}

#menu ul {
    margin: 0;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: block;
    float: left;
    margin-right: 1px;
    padding: 0;
    background: #FFFFFF;
}

#menu a {
    display: block;
    float: left;
    background: url(images/img07.gif) no-repeat;
    text-decoration: none;
    color: #666666;
}

#menu a:hover {
    color: #1777B1;
}

#menu b {
    display: block;
    float: left;
    height: 23px;
    padding: 7px 20px 0 20px;
    background: url(images/img08.gif) no-repeat right top;
    cursor: hand;    
}

#menu li.active {
    background: #CFCECE url(images/img04.gif) repeat-x;
}

#menu li.active a {
    background: url(images/img06.gif) no-repeat right top;
    color: #C90404;
}

#menu li.active b {
    background: url(images/img05.gif) no-repeat;
}

/* Page */

#page {
    width: 960px;
    margin: 0 auto;
    padding: 30px 0 0 0;
}

/* Content */

#content {
    float: left;
    width: 520px;
}

#content2{
    
    width: 765px;
}
/* Feature */

#feature {
    margin-bottom: 20px;
}

/* Sidebar */

#sidebar {
    float: right;
    width: 420px;
}

#sidebar .col-one {
    width: 200px;
}

#sidebar .col-two {
    width: 200px;
}

/* Footer */

#footer {
    height: 100px;
    padding: 20px;
    background: #666666 url(images/imgbas.gif) repeat-x;
    border-top: 1px solid #999999;
}

#footer p {
    margin: 0;
    text-align: center;
    font-size: 85%;
}

mais je souhaiterais rajouté un emplacement en haut de page pour rajouter une image en tant que en-tête. De plus j'ai télécharger un menu css sur l'un de vos site ressources mais je ne sais pas ou et comment l'insérer dans ma feuille de style.Pourriez-vous me dire le code qu'il faudrait que j'ajoute et où svp.merci

Dernière modification par johann.menguy (10-05-2010 19:51:46)

Mister $$$ · 10-05-2010 19:38:19

c00lman · Re class header css

Salut,

Je dirais d'utiliser la class header que tu as et d'y ajouter ton image :

Code:

#header {
    width: 960px;
    height: 92px;
    margin: 0 auto;
    background:url(ton-image.png") no-repeat top;
}

Ensuite tu ajustes la taille de ton image de fond en fonction des valeurs de width et de height et vis et versa .

johann.menguy · Re class header css

merci ça fonctionne, mais

De plus j'ai télécharger un menu css sur l'un de vos site ressources mais je ne sais pas ou et comment l'insérer dans ma feuille de style.Pourriez-vous me dire le code qu'il faudrait que j'ajoute et où svp.merci

pourriez vous m'expliquer rapidement svp sachant que dans la feuille de style que j'utilise pour on site, j'ai déjà un menu.merci

c00lman · Re class header css

En admettant que je puisse te répondre (je n'ai pas les réponses à tout ^^), il faudrait avant tout que je sache si tu veux remplacer ton menu actuel ou si c'est pour en placer un second et à quelle endroit.

johann.menguy · Re class header css

c'est pour en placer un autre et juste en dessous du précédent et merci d'avance

Dernière modification par johann.menguy (11-05-2010 18:40:38)

c00lman · Re class header css

J'opterais donc pour ajouter ton second menu sous les lignes :

Code:

<div id="menu">
    <ul>
        <li class="active"><a href="index.php"><b>Accueil</b></a></li>
        <li><a href="partenaires.php"><b>Partenaires</b></a></li>
        <li><a href="contact.php"><b>Contact</b></a></li>

    </ul>
</div>

A toi de chercher dans ton code ou il est placé.
Puis en supposant que ton second menu utilise une class nommé #sous-menu que tu auras au préalable mise en place dans ton fichier css :

Code:

#sous-menu {
    width: 960px;
    height: 30px;
}
/*etc...*/

Tu places ensuite ton menu sous l'autre :

Code:

<div id="sous-menu">
    <ul>
        <li>+++</li>
        <li>+++</li>
        <li>++</li>
    </ul>
</div>

Annonce

#1 class header css du 10-05-2010 19:38:19

Code:

10-05-2010 19:38:19

#2 Re class header css du 10-05-2010 21:19:55

Re: class header css

Code:

#3 Re class header css du 11-05-2010 07:19:06

Re: class header css

#4 Re class header css du 11-05-2010 08:09:47

Re: class header css

#5 Re class header css du 11-05-2010 18:40:19

Re: class header css

#6 Re class header css du 11-05-2010 22:24:06

Re: class header css

Code:

Code:

Code:

Partenaires de « créer un site internet »