Sos css help please !!!
Bonjour,
Je suis novice sur le fofo ainsi que avec css et jai vu quelque exemple de site utilisant des effets css, comme changement de la taille de texte, changement de couleur d'une page web ainsi que une affichage (compacte ou étroite) bien sur toutes ces options sont laisser au choix de l'internaute.
les sites sur lesquels jai vu ces effets sont presque bcp mais les plus pertinents sont:
www.yahoo.fr et www.msn.fr
ma question c'est de comment pourvoir réaliser ces options d'affichage sachant que je suis entrain de préparer mon projet de fin d'étude (réalisation d'un site web dynamique d'un congrés internationale).
Merci de me lire, et merci pour votre précieuse aide.
Je suis novice sur le fofo ainsi que avec css et jai vu quelque exemple de site utilisant des effets css, comme changement de la taille de texte, changement de couleur d'une page web ainsi que une affichage (compacte ou étroite) bien sur toutes ces options sont laisser au choix de l'internaute.
les sites sur lesquels jai vu ces effets sont presque bcp mais les plus pertinents sont:
www.yahoo.fr et www.msn.fr
ma question c'est de comment pourvoir réaliser ces options d'affichage sachant que je suis entrain de préparer mon projet de fin d'étude (réalisation d'un site web dynamique d'un congrés internationale).
Merci de me lire, et merci pour votre précieuse aide.
Configuration: Windows XP Internet Explorer 6.0
9 réponses
-
tu as deux solutions veux-tu intégrer directement la css à ton code. Ou veux-tu un fichier indépendant?
-
Je pense qu'un fichier .css externe fera l'affaire en plus je veux pas compliquer trop les pages. l'essentiel pour moi et de réaliser une exemple simple avec les fonctionnalités cité ci-dessus, merci de m'expliquer commentcamarche.
-
Alors tu peux pas me passer un pti exemple sur l'exemple du choix de couleur et moi je termine les autres options seul, je t'envoie une message avec un doc avec plus de détaille sur ces options quand je termine.
-
Hello
Une question le choix interviens sur un lien ou quand le curseur de la souris passe dessus comment ? -
nn juste que l'internaute clique sur un lien, a voir l'exemple de www.yahoo.fr et www.msn.fr (options d'affichage).
-
ok alors
tes pages sont en php ?
si oui
un test simple peux aider
donc par exemple
<a href="?th='bleu'>theme bleu </a>
<a href="?th='rouge'>theme rouge</a>
dans ton fichier php de base au debut
<html>
<head>
<?php
if (isset($_GET['th'])
{
$th=$_GET['th'];
switch($th) :
case 'bleu':
echo ("<LINK rel='stylesheet' type='text/css' href='stylebleu.css'>");
break;
case 'rouge':
echo ("<LINK rel='stylesheet' type='text/css' href='stylerouge.css'>");
break;
case 'jaune':
echo ("<LINK rel='stylesheet' type='text/css' href='stylejaune.css'>");
break;
default:
echo ("<LINK rel='stylesheet' type='text/css' href='style.css'>");
break;
}
?>
</head> -
Contributeur@burnedsyndécidément qu'est-ce qu'on se croise !
-:oD
pour mettre en forme le code, c'est avec ce bouton.
merci
-
-
Contributeursalut,
le plus simple est de changer de feuille de style selon le choix de l'utilisateur.
tu peux le faire en Javascript (tutoriel chez A List Apart) ou en PHP
(tutoriels chez AlsaCréations ou développez.com).
et merci de solutionner les problèmes sur le forum et pas dans votre coin.
problème publique : solution publique.
-
Oui les pages sont en php, mais svp si ya quelqu'un pourrai nous donner un exemple complet, parexemple deux fichiers de style externe .css avec deux couleurs (bleu et vert) et une page qui contient deux liens bleu et vert pour appliquer ces deux effets. Aussi un petit question pourquoi si on change le couleur de fond la couleur de fond des tableaux change aussi ? a voir la page d'accueil de www.msn.fr
-
oui comme l'exemple de www.msn.fr les tableaux prennent la couleur de fond de la page. merci je t'attend à cette aprés midi et bonne journée.
-
Re :
Voici un ptit exemple ca mange pas de pain mais tu pourras comprendre le systeme
voici donc l'index.php
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>test page avec choix de thèmes (php et html,css)</title>
<?php
/* Ici on controle simplement
si la variable th existe au sein du tableau $_GET
*/
if (isset($_GET['th']))
{
/* Sachant qu'il n'est pas sage d'utiliser une variable externe
sans en controler rigoureusement la validité je te conseille de
faire tes test ici :) */
$th=$_GET['th'];
/* bien qu'il y aurait plein d'autre manière l'utilisation d'un
switch n'est pas mauvaise ici pour la simplicité de l'exemple */
switch($th)
{
case 'bleu':
echo ("<LINK rel='stylesheet' type='text/css' href='stylebleu.css'>");
break;
case 'rouge':
echo ("<LINK rel='stylesheet' type='text/css' href='stylerouge.css'>");
break;
default:
echo ("<LINK rel='stylesheet' type='text/css' href='style.css'>");
break;
} // Fin du switch
}//fin du If isset($_GET['th'])
else
{
/* ici on n'as pas la variable th (sans doute quelqu'un qui ne
veut pas jouer avec nos merveilleux style ,) ) */
echo ("<LINK rel='stylesheet' type='text/css' href='style.css'>");
} // fin du else
?>
</head>
<body>
<h3>Ici en cliquant sur les différents liens vous pouvez choisir votre
thème</h3>
<div class="titre">
Voici ici un titre
</div>
ici un tableau ci dessous
<table>
<th>COL 1</th><th>COL 2</th>
<tr><td><a href="?th=rouge">Theme Rouge</a></td><td><a href="?th=bleu">Theme Bleu</a></td></tr>
</table>
</body>
</html>
/code
Ensuite les différents css donc bleu rouge et normal
style.css
[code]
/* CSS Document style normal blanc et noir*/
body {
background-color: white;
font-family: Verdana;
font-size: 12px;
color : black;
margin:0px;
text-align : center;
overflow:auto;
}
.titre
{
position : relative;
margin: 20px auto;
text-align: center;
background-color:#000000;
color:#FFFFFF;
}
th
{
background-color:#4B4B4B;
color:#DDDDDD;
}
td
{
background-color:#C0C0C0;
color:#DDDDDD;
}
/code
Puis stylebleu.css
[code]
/* CSS Document style normal bleu*/
body {
background-color: white;
font-family: Verdana;
font-size: 16px;
color : black;
margin:0px;
text-align : center;
overflow:auto;
}
.titre
{
position : relative;
font-size: 16px;
margin: 20px auto;
text-align: center;
background-color:#0033CC;
color:#FFFFFF;
}
th
{
font-size: 20px;
background-color:#0066CC;
color:#DDDDDD;
}
td
{
background-color:#CC6666;
color:#DDDDDD;
}
/code
stylerouge.css
[code]
/* CSS Document style normal blanc et noir*/
body {
background-color: white;
font-family: Verdana;
font-size: 12px;
color : black;
margin:0px;
text-align : center;
overflow:auto;
}
.titre
{
position : relative;
margin: 20px auto;
text-align: center;
background-color:#ff0000;
color:#FFFFFF;
}
th
{
background-color:#CC3333;
color:#DDDDDD;
}
td
{
background-color:#CC6666;
color:#DDDDDD;
}
/code
Voila j'espère que comme cela c'est plus clair, il y a bien d'autre moyen d'y parvenir notament en js mais bon ...
dis moi quoi ;)
-
-
Merci je vais essayer avec ce script, aussi pour celui de la taille d'affichage du texte je lai déja eu, il ne reste que l'option d'affichage de la page (mode étroite et compact), en attendant veuillez accepter mes meilleures salutations.
