28220 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,

je voudrai savoir si je peux remplacer le javascript en gras ci-dessous par du css. Merci de vos conseils.

<div class="container">

<ul id="nav">
	
	
	
	
		
<li><a href="intro.jpg" target="liens">
intro<a href="intro.jpg" target="liens"></a></li>

<dl>			
		<dt onmouseover="javascript:show('smenu1');"><li><a href="page1.htm" target="liens">
moi<a href="page1.htm" target="liens"></a></li></dt>
			<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
				<ul>
					
					</ul>
			</dd>
	</dl>

<li><a href="mg2/index.php" target="liens">
photos<a href="mg2/index.php" target="liens"></a></li>
<li><a href="forum/" target="liens">
forum<a href="forum/" target="liens"></a></li>	
<li><a href="contact.htm" target="liens">
newsletter<a href="contact.htm" target="liens"></a></li>
<li><a href="frenchgesture.htm" target="liens">
gesture<a href="frenchgesture.htm" target="liens"></a></li>
	<li><a href="blog/" target="liens">
blog<a href="blog/" target="liens"></a></li>



</ul>
		

</div>

<p>
    [b]<script language="JavaScript">
function iFrameHeight() {
if(document.getElementById && !(document.all)) {
h = 
document.getElementById('iframename').contentDocument.body.scrollH
eight;
document.getElementById('iframename').style.height = h;
}
else if(document.all) {
h = document.frames('iframename').document.body.scrollHeight;
document.all.iframename.style.height = h;
}
}

    </script>
<iframe name="liens" onLoad="iFrameHeight();" src="intro.jpg" scrolling="no" 
scroll="auto" id="iframename" marginwidth="0" marginheight="0" 
frameborder="0"  style="width:100%;" height=800></iframe>[/b]
</p>

<div id="pied"><p  align="center"><a href="mailto:arnauld@gmail.com?subject="><span style="font-size:8pt;">mail arnauld</span></a>&nbsp;&nbsp;<span style="font-size:8pt;">&nbsp;&nbsp;&nbsp;</span><a href="http://www.arnauld.fr/radioblog/index.php" onclick="window.open(this.href, '_blank', 'resizable=0, location=0, toolbar=0, scrollbars=0, height=300, width=222'); return false;" title=""><span style="font-size:8pt;">radio arnauld</span></font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



</div>
</div>
</div>

</body>


mon site web www.arnauld.fr
Modifié par Olivier (06 Jul 2005 - 13:08)
Salut,

tu pourrais utiliser l'attribut 'expression' qui est plus que pratique pour gérer ce genre de dimensionnement par javascript, mais ce n'est supporté que par Internet Explorer à partir de la version 5 ...

Ce qui te donnerais un style pour ta iframe du genre :


#iframename {
height : expression(document.body.offsetHeight  - 50 + "px") ;
}


Quand même bien pratique les fonctionnalités introduites par Microsoft nan ? Smiley smile
merci, et en css est-i possible d'obtenir le même résultat ? Ce que je crains, ce sont les gens qui n'acceptent pas les javascripts, du coup, la hauteur de l'iframe ne fonctionne plus et ça fout tout mon site en l'air...
Modérateur
Bonjour arnob,

Serait-il possible que tu nous explique pourquoi tu utilise un iframe pour ton interface ? Peut-être qu'il serait plus judicieux de s'en débarasser.
Bien, merci tout d'abord.

J'utilise un iframe car je trouve plus sympa et logique d'appeler le contenu dans le contenant, cela permet aux visiteurs de trouver très vite ses repères lors de la navigation et visuellement c'est moins confus.

Ensuite, il y a 6 mois je ne connaissais rien à la construction de sites web, donc j'ai fait avec les moyens du bord, c'est à dire internet.

Aujourd'hui je me rends compte que les javascripts peuvent être bloqués, donc j'essaye de me tourner vers les css pour remplacer ce problème de hauteur automatique du conteneur.

J'aimerais juste que l'on m'explique comment remplacer l'iframe (avec hauteur automatique qui s'adapte au contenu) avec du css.
Si tu ne veux pas utiliser de javascript, alors il va falloir que tu replanche sur la mise en page de ton site. Tu trouvera par exemple sur AlsaCréations de trés bons modèles de mise en page ici

Car c'est vrai que normalement tu devrais tout de même pouvoir donner la hauteur que veut pour ta iframe sans avoir à la dimensionner via du javascript.

Maintenant comme Merkel le dit, il serait peut-être judicieux de ne pas en utiliser. C'est un choix bien particulier que celui d'utiliser une iframe. Ca entraine un tas de complications pour la compatibilité avec les anciens navigateurs et surtout c'est trés mauvais pour lé référencement.

Enfin je ne pense pas que le taux d'utilisateur qui désactive le javascript soit enorme, peut-etre moins de 1% (malgré que je ne connaisse pas le vrai pourcentage), donc en dernier recours tu peux tout de même l'utiliser pour positionner ton site.

Mais encore une fois le positionnement par javascript doit être le dernier recours pour tes mises en pages, et est normalement utiliser dans des cas d'une extrème complexité !
Modérateur
AntiStatic a écrit :

Enfin je ne pense pas que le taux d'utilisateur qui désactive le javascript soit enorme, peut-etre moins de 1% (malgré que je ne connaisse pas le vrai pourcentage), donc en dernier recours tu peux tout de même l'utiliser pour positionner ton site.


En fait, j'ai toujours entendu dire que c'était plus de 10% des utilisateurs.

Arnob, si possible, pourrais-tu nous montrer ton site, question de voir exactement quelle solution pourrait bien s'adapter à ton problème ? Je ne suis même pas sûr de saisir le concept du iframe là-dedans et du Javascript. Le iframe s'allonge selon le contenu ? Y'a-t-il une scrollbar ? Pourquoi ne pas laisser le contenu dans le flux de la page ? Bref, voir ton site et son interface pourrait mieux nous situer face à ce que tu veux réaliser.
je précise aussi qu'il vaut mieux le voir avec IE, quelques bugs avec firefox... la hauteur de l'iframe reste fixe avec firefox, je ne sais pas pourquoi.
Modifié par arnob (06 Jul 2005 - 21:08)
ba c'est plutot un beau site ! Et j'insiste la dessus : tu gagnerais en référencement à ne pas utiliser de iframe. Donc a méditer Smiley cligne
hé ben 10% des utilisateurs sans javascript ... rien que ca Smiley smile ca me parait un peu beaucoup comme on dit !!

<edit>
C'est marrant mais sur 2 de mes sites pour lesquels j'ai les stats de javascript désactivés renseignés ca me donne 0,50% et 0,75% de javascript désactivé !

2 sites grands publics sur la base de 200 à 500 visiteurs uniques jour, ce qui me parait plus corresponde à la réalité ...
</edit>
Modifié par AntiStatic (06 Jul 2005 - 21:29)
Modérateur
Tout dépend des sites en question. Un site pourrait très bien avoir 20% de visiteurs sans Javascript, tandis qu'un autre moins d'un 1%. Mais en moyenne, semble-t-il, on s'est accordé pour dire que c'était 10%.

C'est surement imprécis et non-basé sur des statistisques effectuées par des entreprises spécialisées (peut-être que si ?).

Ceci dit, cela ne me surprendrait guère que 10% des utilisateurs ont désactivés leur Javascript ou qu'il ne soit pas supporté par leur navigateur. Je ne crois pas que le Javascript soit sur les téléphones cellulaires et beaucoup naviguent avec ca.

L'idéal lorsqu'on conçoit un site c'est de se dire que 100% des visiteurs ont désactivé le Javascript. De cette façon, ton site est assuré de ne pas dépendre de cette technologie pour bien s'afficher ou fonctionner.
Modifié par Merkel (06 Jul 2005 - 21:55)
Modérateur
Arnob, j'ai beaucoup de mal à voir l'intérêt d'un iframe dans ton site. Vraiment, j'y arrive pas...

Vaudrait peut-être songer à le faire exploser, ca l'améliorerait la qualité de ton site et du même coup, ca réglerait tes problèmes d'accessibilité (javascript et compagnie).
Modifié par Merkel (06 Jul 2005 - 21:57)
C'est vrai aussi que j'ai du mal à voir l'intérer de ta iframe Arnob, et je rejoins l'avis de Merkel sur ce coup, mais bon on va pas insister trop non plus Smiley cligne

Par contre pour le coup des 10% sans javascript Merkel, perso ca me parait enorme ! C'est vrai qu'il n'y a pas de règles concernant la cible des sites mais je pense que sur des sites grands publics une telle proportions ne pourrait être atteinte.

Dommage effectivement que l'on pas plus de réelle stats la dessus car sur la dizaine d'outils de stats que je connais seul un la propose ! Après c'est sur que si on compte dans les 10% annoncés les téléphones portables, les PDA, et la TV par Internet alors tout reste possibles Smiley smile

On compte les minitel aussi ? Smiley smile
Administrateur
Les particuliers qui désactivent JS pour des raisons de sécurité ne représentent pas 10% (parce que les nioubs complets de l'informatique et de l'internet sont de plus en plus nombreux, mécaniquement la proportion baisse)

Mais par contre, il y a de nombreux salariés dont l'administrateur système de la boîte a désactivé JS sur tous les postes sans qu'il soit possible de le réactiver (sauf à avoir envie de se faire taper très fort sur les doigts au 1er problème) et qui surfent du boulot. Et ça, c'est 5, 10 ou 5 000 navigateurs sans JS d'un coup!
Bien, merci d'y avoir jeté un coup d'oeil.
Ce que j'aime bien avec l'iframe c'est le container qui s'adapte automatiquement à la longueur du document appellé.

Donc, comment puis-je faire pour :

- remplacer l'iframe

-faire en sorte que les documents appellés par le menu s'ouvre dans un container et ce dans la page principale

-que le container s'adapte automatiquement à la longueur du document (donc pas de deuxième scrollbar)

-que le tout soit compatible IE et Firefox (j'ai des problèmes avec Firefox)

Voilà, c'est beaucoup de choses à la fois. Si toutes ces conditions ne peuvent réunies je peux toujours faire une page par doc avec le header et le footer, mais bon....
Smiley smile
a écrit :
faire en sorte que les documents appellés par le menu s'ouvre dans un container et ce dans la page principale


Il ne faut justement pas faire ce genre de chose !

Chaque page doit être autonome , et donc à chaque fois on recharge la totalité de la page.

Si c'est juste une question de facilité (mise à jour par exemple), tu peux passer par une solution php par exemple.
Il se peut aussi que je n'arrive pas à voir comment réaliser mon site en css, mais bon, je réflécis demain à tête reposée. Merci de votre aide en tout cas.
TriadPtale a écrit :
faire en sorte que les documents appellés par le menu s'ouvre dans un container et ce dans la page principale


Il ne faut justement pas faire ce genre de chose !

Chaque page doit être autonome , et donc à chaque fois on recharge la totalité de la page.

Si c'est juste une question de facilité (mise à jour par exemple), tu peux passer par une solution php par exemple.

donc tu me conseillerais de faire chaque page avec header, container et footer pour chaque menu ????
Mon approche était la suivante.

C'est comme un livre, on garde la couverture et les pages se trouvent à l'intérieur, plutôt que de lire des feuilles volantes. Mais bon un site web n'est pas un livre...
Pages :