Aller au contenu

Sujets conseillés

Posté (modifié)

Voila,

j'ai crée deux sites amateurs sur le meme modele, en utilisant le css.

1er

2eme

Et les liens, dans la barre de navigation ne marche pas. Pour l'instant, il n'y a pas d'url pour les liens. Mais il devrait quand même actualiser la page.

Edit : il s'affiche sous IE mais pas FF

Mon css 1ere page


a {
color: #ffffff;
font-size: 10pt;
}


.header {
background-image: url(images/titre.JPG);
width: 750;
height: 147;
left: 50%;
margin-left: 125px;
margin-bottom: 15px;
}


div.page {
width: 750
left: 50%;
margin-left: -375px;
}

#gauche {
position: absolute;
left:0;
width: 190;
}

#centre {
position: absolute;
}

.hautmenu {
background-image: url(images/Menu/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;
padding:0;

width: 190;
height: 26;
}

.fondmenu {
background-image: url(images/Menu/fond_menu.bmp);

font-family: Arial;
font-size: 10pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;

width: 190;
}

.basmenu {
background-image: url(images/Menu/bas_menu.bmp);

margin-left: 125px;

width: 190;
height: 26;
}


.hautcentre {
background-image: url(images/Centre/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

margin-left: 320px;

width: 560;
height: 27;
}

.fondcentre {
background-image: url(images/Centre/fond_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 320px;

width: 560;
}

.fondcentre li {
font-size: 10pt;
}


.bascentre {
background-image: url(images/Centre/bas_menu.bmp);

margin-left: 320px;

width: 560;
height: 27;
}

contenu 1ere page


<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

<body>

<div class="header">
</div>


<div id="gauche">

<div class="hautmenu">
<li>  Resultats</li>
</div>

<div class="fondmenu">
<li>  <a href="#">Ligue 1</a></li>
<li>  <a href="#">Coupes Nationales</a></li>
<li>  <a href="#">Coupes d'Europe</a></li>
<li>  <a href="#">Amateurs</a></li>
</div>

<div class="hautmenu">
<li>  Le Club</li>
</div>

<div class="fondmenu">
<li>  <a href="#">Effectif</a></li>
</div>

<div class="hautmenu">
<li>  Media</li>
</div>

<div class="fondmenu">
<li>  <a href="#">Resumés Video</a></li>
<li>  <a href="#">Buts Audio</a></li>
<li>  <a href="#">Chants de Supporters</a></li>

</div>

<div class="basmenu">
</div>

</div>

<div id="centre">

<div class="hautcentre">
<center>Accueil</center>
</div>

<div class="fondcentre">
       <u>Dernières Brèves</u>

<br/>
         <a href=>08/01/2006 - Le groupe contre Noisy-le-Sec</a>
<br/>
         <a href=>05/01/2006 - Victoire face à monaco</a>
<br/>
         <a href=>04/01/2006 - Le match aura lieu à Noisy-le-Sec</a>
<br/>
         <a href=>04/01/2006 - Le Groupe Contre Monaco</a>
<br/>
         <a href=>03/01/2006 - Le CNOSF fait pression.</a>
<hr width=50% color=#ffffff>
       <u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>

<li>         Jacques Santini a convoqué une liste de 16 joueurs pour affronter Noisy Le Sec :</li><br/>
<li>         Dans les buts : Cool, Hamel</li>
<li>         En Défense : Radet, Jaurès, Grichting, Coulibaly, Martin</li>
<li>         En milieu : Violeau, Cheyrou, Lachuer, Kahlenberg, Berson, Mathis</li>
<li>         En attaque : Pieroni, Luyindula, Genest</li>
</div>

<div class="bascentre">
</div>

</div>

</body>

</html>

Css 2eme page


a {
color: #ffffff;
font-size: 10pt;
}


.header {
background-image: url(images/titre.bmp);
width: 700;
height: 130;
left: 50%;
margin-left: 150px;
margin-top: 5px;
}


div.page {
width: 750
left: 50%;
margin-left: -375px;
}

#gauche {
position: absolute;
left:0;
width: 190;

margin-top: 10px;
}

#centre {
position: absolute;

margin-top: 10px;
}

.hautmenu {
background-image: url(images/Menu2/haut_menu.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;
padding:0;

width: 190;
height: 26;
}

.fondmenu {
background-image: url(images/Menu2/fond_menu.bmp);

font-family: Arial;
font-size: 10pt;
color: #ffffff;

list-style-type: none;
margin-left: 125;

width: 190;
}

.fondmenu li {
font-size: 10pt;
}

.basmenu {
background-image: url(images/Menu2/bas_menu.bmp);

margin-left: 125px;

width: 190;
height: 26;
}


.hautcentre {
background-image: url(images/Centre2/haut_centre.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

margin-left: 320px;

width: 560;
height: 27;
}

.fondcentre {
background-image: url(images/Centre2/fond_centre.bmp);

font-family: Arial;
font-size: 12pt;
color: #ffffff;

list-style-type: none;
margin-left: 320px;

width: 560;
}

.fondcentre li {
font-size: 10pt;
}


.bascentre {
background-image: url(images/Centre2/bas_centre.bmp);

margin-left: 320px;

width: 560;
height: 27;
}

contenu 2eme page


<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css"/>
</head>

<body>

<div class="header">
</div>


<div id="gauche">

<div class="hautmenu">
<li>  Le Groupe</li>
</div>

<div class="fondmenu">
<li>  <a href="#">Actu</a></li>
<li>  <a href="photos.html">Photos</a></li>
</div>

<div class="hautmenu">
<li>  Media</li>
</div>

<div class="fondmenu">
<li>  <a href="#">Chansons</a></li>
<li>  <a href="#">Paroles de Chansons</a></li>

</div>


<div class="hautmenu">
<li>  Partenaires</li>
</div>


<div class="fondmenu">
<li><a href="http://emerdeurpro.skyblog.com">  emerdeurpro</a></li>
</div>


<div class="hautmenu">
<li>  Photo de la semaine</li>

</div>


<div class="fondmenu">
<li><a href="java script: var tt=window.open('images/photo%20ordimessen/logo.jpg','','scrollbars=no,width=400,height=262,resizable=no');">
 <img src=images/photo%20ordimessen/logo_small.jpg></a></li>
</div>

<div class="basmenu">
</div>

</div>

<div id="centre">

<div class="hautcentre">
<center>Accueil</center>

</div>

<div class="fondcentre">
       <u>Dernières Brèves</u>
<br/>
         <a href=>09/01/2006 - Un nouveau DJ.</a>
<br/>
         <a href=>08/01/2006 - Un nouveau pianiste electrique.</a>
<br/>
         <a href=>07/01/2006 - Creation du Groupe Ordimessen</a>

<hr width=50% color=#ffffff>
       <u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>

<li>         <a href="#">Nous avons un nouveau DJ. Il s'appelle Mohamed.
</div>

<div class="bascentre">
</div>

</div>

</body>

</html>

Modifié par oxerrois
Posté

Salut,

ça s'actualise mais on ne voit pas bien que ce sont des liens ;)

N'oublie pas de mettre un doctype sur tes pages, c'est primordial:

si tu fais du HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

Si tu fais du XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Ensuite, pour tes liens, il faut utiliser les propriétés a:link, a:hover, a:visited :

a { //Prorpiétés des liens tels qu'ils apparaissent dans la page
color: #17397A;
text-decoration: none;  //pas de soulignement
}
a:hover { //propriété des liens quand on les survole
color: #17397A;
text-decoration: underline; //quand on survole les lien, ils se soulignent
}
a:visited { //Propriétés des liens déjà visités
color: #17397A;
text-decoration: none;
}

Bonne continuation :)

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
×
×
  • Créer...