Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: derkomai le le 11-08-2011 a 22:48:32

Titre: plusieurs CSS
Posté par: derkomai le le 11-08-2011 a 22:48:32

Bonsoir à tous!

Je me demandait, voyant mes css exploser n'étant pas même à mi-chemin... est il possible d'avoir plusieurs css pour une même page?

si oui, est recommandé ou pas?

Parce que ça serais bien pratique de pouvoir mettre toutes les instructions de positionnement pour les div d'un coté, les propriétés pour tout ce qui est texte de l'autre...

Titre: Re:plusieurs CSS
Posté par: lukos le le 12-08-2011 a 10:36:07

C'est souvent le cas sur les gros sites ;)

Titre: Re:plusieurs CSS
Posté par: derkomai le le 12-08-2011 a 21:23:02

Merci!
j'ai fait quelques recherches sur le sujet, apparament, il suffit de mettre deux balises link à la suite, mais dans mon cas, ca ne marche pas, il prend la première css déclarée.

Code:

Titre: Re:plusieurs CSS
Posté par: Pad le le 12-08-2011 a 22:10:22

cela fonctionne bien d'après ce que tu as mis.... le problème doit venir des priorités qu'il peut y avoir sur la déclaration de certains styles css qui fait que le style est mal appliqué ! Quel est le contenu de tes fichiers css?

Titre: Re:plusieurs CSS
Posté par: derkomai le le 13-08-2011 a 10:15:10

Voici le contenu du premier, qui est pris encompte:

Code:

/*GazettePioux CSS*/

body{
background-image:url("../GP_graphismes/BG/gazetteBG.jpg");
background-attachment:fixed;
}
p{
color:#1b1464;
}
.btn0{
float:left;
margin-top:90px;
margin-left:18px;
}
/*-----------------------------------------Tables-----------------------------------*/

table.oiseau{
width:800px;
background-color:#1b1464;
color:#FFFFFF;
border-collapse:collapse;
}
td{
border:5px groove #ff6633;
}
td.photoID{
width:150px;
vertical-align:middle;
}

et le deuxième css est plus long et totalement ignoré à l'affichage

Code:

/*-----------------------------------------Divs-----------------------------------*/
#main{
position:relative;
   width:1024px;
   height:768px;
   margin-left: auto;
margin-right: auto;
   background-color:green;
   }

#pic{
   position:absolute;
   margin-top:20px;
   margin-left:20px;
   width:150px;
   height:150px;
   background-color:yellow;
}

#Htitle{
   position:absolute;
   margin-top:20px;
   margin-left:190px;
   width:664px;
   height:150px;
   background-image:url(../GP_graphismes/BG/gazetteSlice_Htitle.jpg);
}
#Hpub{
   position:absolute;
   margin-top:20px;
   margin-left:854px;
   color:white;
   width:100px;
   height:100px;
   padding:25px;
   background-image:url(../GP_graphismes/BG/gazetteSlice_Hlogin.jpg);
}

#LMstatement{
   position:absolute;
   margin-left:20px;
   margin-top:190px;
   width:170px;
   height:180px;
   background-image:url(../GP_graphismes/BG/gazetteSlice_LMstats.jpg);
   color:white;
}
#LMenu{
   position:absolute;
   display:table-cell;
   vertical-align:middle;
   margin-left:20px;
   margin-top:370px;
   width:140px;
   height:361px;
   padding:15px;
   background-image:url(../GP_graphismes/BG/gazetteSlice_LMenu.png);
   color:#1b1464;
   font-size:1.2em;
   font-family:"Kristen ITC",Serif;
   font-weight:bold;
}
#corpsconteneur{
   position:absolute;
   width:784px;
   margin-top:170px;
   margin-left:190px;
   background-color:yellow;
}
#corpscontent{
   float:left;
   width:784px;
   min-height:499px;
   padding:15px;
   background-color:white;
}
#Ffooter{
   width:814px;
   height:60px;
   margin-top:-10px;
   float:left;
   background-image:url(../GP_graphismes/BG/gazetteSlice_F.png);
}

Quand je met tout dans le premier fichier, ça fonctionne sans problèmes.

Titre: Re:plusieurs CSS
Posté par: Pad le le 13-08-2011 a 19:01:15

Et en inversant l'ordre de chargement des deux fichiers ?

Titre: Re:plusieurs CSS
Posté par: derkomai le le 13-08-2011 a 22:17:24

c'est toujours le premier déclaré qui est pris en compte, si je met le fichier avec les IDs de divs devant, les divs fonctionnent mais pas le reste. ???

Titre: Re:plusieurs CSS
Posté par: Pad le le 13-08-2011 a 23:12:32

et le reste de ton cote html c'est quoi ? car là je vois pas où pourrait se situer le soucis

Titre: Re:plusieurs CSS
Posté par: derkomai le le 14-08-2011 a 12:46:16

et ben! ^^ je vais sortir tout le code!
alors c'est plusieurs morceaux de pages que je remet à la suite, mais j'ai utiliser des require-once pour composer header/footer/menu...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<?php
mysql_connect("localhost","root","");
mysql_select_db("gazette_pioux");
?>
<head>
<title>La gazette des pioux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="GP_CSS" href="../00_mainpage/GP_CSS.css" />
<link rel="stylesheet" media="screen" type="text/css" title="GP_divCSS" href="../00_mainpage/GP_divCSS.css"/>
</head>

<body>
<DIV id="main">

   <div id="pic"></div>
   <div id="Htitle">
      <a class="btn0" href="../01_presentations/presentations.php"><img src="../GP_graphismes/BG/gazetteSlice_btn0.jpg" alt="presentations" title="presentations"></a>
      <a class="btn0" href="../02_elevage/elevage.php"><img src="../GP_graphismes/BG/gazetteSlice_btn1.jpg" alt="Elevage" title="Elevage"></a>
      <a class="btn0" href="../03_guide/guide.php"><img src="../GP_graphismes/BG/gazetteSlice_btn2.jpg" alt="Le guide du piou" title="Le guide du piou"></a>
      <a class="btn0" href="../04_pioux/pioux.php"><img src="../GP_graphismes/BG/gazetteSlice_btn3.jpg" alt="presentations" title="presentations"></a>
   </div>

   <div id="Hpub">
      <a href="http://www.oiseaux-mania.com/">link</a>
   </div>



<div id="LMstatement">hello </div>
<div id="LMenu">
   <p><a href="presentations_mesOiseaux.php">Mes oiseaux</a></p>
   <p><a href="presentations_mesInstallations.php">Mes installations</a></p>
   <p><a href="presentations_moi.php">Moi</a></p>
</div>

<div id="corpsconteneur">
<div id="corpscontent">
   Hello!</div>
<div id="Ffooter"></div>
</div>
</DIV>
</body>
</html>

Titre: Re:plusieurs CSS
Posté par: Pad le le 16-08-2011 a 15:22:11

met plutôt ça pour tes chargements de css (j'ai enlevé un 'title=""' après avoir testé et remarqué que c'était cela qui bloquait, maintenant pourquoi, je ne pourrais te dire...)

Code:

Titre: Re:plusieurs CSS
Posté par: derkomai le le 17-08-2011 a 18:16:23

Magnifique!

merci beaucoup! ^^