28172 sujets

CSS et mise en forme, CSS3

N'afficher qu'une partie du contenu d'une page html avec css

Bonjour,

Je suis en train de réaliser une page html qui contient 31 citations et je cherche à faire en sorte de n'afficher que celle du jour avec css.

Un petit javascript me renvoi automatiquement vers mapage.html#citationDAY ce qui nous donne une adresse du type mapage.html#citation1 ou mapage.html#citation3 et j'arrive alors directement sur la citation du jour. Seulement j'aimerai avec CSS n'afficher QUE la citation du jour et ne pas afficher les autres en fonction de l'URL : mapage.html#citation1 n'affiche que la div citation1 et pas les autres et pareil bien sur pour mapage.html#citation3 qui n'affiche que la div citation3.

<script type="text/javascript" language="javascript">
<!--
var today = new Date();
var day = today.getDate();
window.location = "savon-a-culottes.html#insulte" + day ;
//-->
</script>


Ma page est structuré comme cela : 

<div id="savonculotte">
<div class="insulte" id="citation1">
<p class="titreSC">D&eacute;puceleur de nourrices</p>
<p class="soustitreSC">Fanfaron, vantard quant &agrave; ses exploits amoureux.</p>
<p class="descSC"><img src="/site_first/pages/1202-savon/img/BH.png" width="300" height="355" class="imgsac" />Autre expression synonyme (plus tardive) : &laquo; d&eacute;puceleur de femmes enceintes &raquo;.</p>
<p class="desc2SC">&laquo; Sermon joyeux d&rsquo;un d&eacute;puceleur de nourrice &raquo; 1572. Anciennes po&eacute;sies fran&ccedil;oises.</p>
</div>

<div class="insulte" id="citation3">

<p class="titreSC">Assassineur de morts</p>
<p class="soustitreSC">Fanfaron, bravache, bidonneur, bluffeur de premi&egrave;re.</p>
<p class="descSC"><img src="/site_first/pages/1202-savon/img/BH.png" width="300" height="355" class="imgsac" />&nbsp;</p>
<p class="desc2SC">&nbsp;</p>

</div></div>


Et voici les css : 

@charset "utf-8";
body {
	background-image: url(img/bg_savon.jpg);
	background-repeat:yes-repeat;
	width:100%;
	height:100%;
	
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#savonculotte {
	background-image: url(img/bg_savon.jpg);
	background-repeat:yes-repeat;
	margin-top:0px;
padding:50px;
	width:544px;
	background-position:center;
	float:left;
}

.insulte {margin-bottom:100px; display:none; }



.imgsac {margin-top:-100px; float:right;}

.titreSC {
	color: #fbc775;
	font-size: 30px;
	font-weight: bold;
}
.soustitreSC {
	color: #f4f2f2;
	font-weight: bold;
	font-size:16px;
	margin-top:-5px;
}
.descSC {
	font-size:15px;
	color: #ffffff;
	width: 550px;
}
.desc2SC {
	font-size:13px;
	width: 450px;
	color: #ffffff;
}


Si je veux que ça marche le 3 par exemple il faut que je rajoute le style suivant : 
#citation3 {margin-bottom:100px; display:block; }


Si la page appelée est mapage.html#citation3

Qu'en pensez vous ?

Merci
J'ai mis en ligne ma page pour vous montrer mon exemple ça sera peut être plus clair :

Si j'appelle ma page : http://www.sendoid.fr/first/sac/test/insultes.html

Le javascript va alors en fonction de la date du jour appeller la citation du jour, soit aujourd'hui le 25 :

http://www.sendoid.fr/first/sac/test/insultes.html#insulte25

Mais j'ai un scroll avec toutes les autres insultes que je ne souhaite pas afficher.

Ce que j'aimerai plutot ça donne directement :

http://www.sendoid.fr/first/sac/test/insultes2.html

Dans ce cas j'ai modifié le css ainsi :

ANCIEN

.insulte {margin-bottom:250px; display:block; }


NOUVEAU

.insulte {margin-bottom:250px; display:none; }
#insulte25 {margin-bottom:250px; display:block; }
On peut le faire en pure CSS (avec :target) ou en JavaScript, mais je pense que l'outil le plus adapté à la tâche est un langage côté serveur comme PHP.

Si tu ne peux pas le faire côté serveur, alors tu peux le faire en CSS avec :target, et ça donnerait ça :

.insulte { display: none; }
.insulte:target { display: block; }


Cependant n'oublie pas que le support de :target n'est pas assuré sous IE<9.

PS : j'adore le sujet de ton site !
Modifié par Kaelig (25 Feb 2012 - 19:33)
Sujet clos
Aller à