Sylvain Trovalet
-
Compteur de contenus
98 -
Inscrit(e) le
-
Dernière visite
Messages postés par Sylvain Trovalet
-
-
Tu peux peut-être jouer sur la largeur de ton titre.
h1{
width : /* valeur en em ou px ou % */
} -
<script type="text/javascript">
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="inline";
} else if (document.all) {
document.all[id].style.display="inline";
} else if (document.layers) {
document.layers[id].display="inline";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->Tu peux déjà virer la ligne document.all
D'autre part ton menu ne marche pas si on désactive javascript, ce qui me parait plus important que ton "bug".
Pour faire mon menu je me suis inspiré de http://iubito.free.fr/prog/menu.php
-
Je crois (vu que tes extensions de page sont en html) qu'il faut utiliser javascript pour cela.
http://www.phpfrance.com/forums/ftopic1265...fd32ebbd1cc5c55
-
En fait tes images ne sont pas encore chargées (probablement dû à la lourdeur de l'animation Flash) et si tu patientes un peu sans rien faire elles aparaissent.
Il faudrait précharger tes images.
-
Merci
Et hop dans mes bookmarks
-
Je viens de regarder ton site et je ne suis pas d'accord.
<div class="texte">New-concept est un systeme avancé de gestion de site internet.<br />
Le but étant de ne pas avoir de code redondant, et de gagner du temps sur le développement en réutilisant le même code d'un site à l'autre. Pour avoir un maximum d'éfficience et de portabilité, le site est entièrement codé en respectant les standard du W3C, CSS2.0 et XHTML1.0strict. Les standard de code PHP sont également respectés. La séparation du design, du code et du contenu à également été respectée de manière à pouvoir intervenir sur l'un de ces composants sans modifier les autres.</div>Il s'agit ni plus ni moins que d'un paragraphe, donc si tu veux être plus sémantique (mais rien ne t'y oblige), tu devrais utiliser la balise <p>
-
le graphiste généralement créé sa page en 2D sans effet de zoom possible, de superposition, bref il travaille en général comme pour une sortie papier, notamment car l'utilisation de tables n'avait pas grande marge de manoeuvre.
C'est d'ailleurs pour montrer le pouvoir de CSS que csszengarden a été créé.
voici le genre de sites où je vais pour chercher de l'inspiration :
-
Logique que ça ressemble à un présentation en tableau puisque quand tu l'as imaginé dans ta tête tu pensais encore en terme de tableau (ce n'est pas une critique mais un constat). C'est pour ça que l'on trouve que les présentations via CSS sont peu originales en général.
-
-
ok j'ai trouvé
j'ai rajouté une largeur au conteneur et du coup tout s'affiche.
-
effectivement cela corrige mon problème, mais cela en créé un autre et je n'ai toujours pas de solution
Une des pages qui pose problème :http://www.ville-bais.fr/viepratique/
et la page qui explique le bug : http://www.evolt.org/article/comment/17/23899/
malheureusement la solution proposée avec les positions relatives et celle avec le zoom donne le bug avec l'image et le texte à droite.
Bref je n'arrive pas à m'en sortir.
En fait je vais faire quelques tests encore et si je ne trouve rien je vais remettre mon zoom et faire des petits paragraphes au lieu de longs paragraphes, car le bug sera ainsi mineur.
-
- Partie gauche en flottant de largeur 160px pour le menu
- Partie droite en flux sans largeur spécifiée.
Répétez après moi : Le contenu en flux suivant un flottant s'écoule naturellement à côté de celui-ci dans la totalité de la largeur disponible.
<{POST_SNAPBACK}>
D'accord sauf sous IE : voir la discussion texte à droite d'une image où IE sur un paragraphe très long ne revient pas à la ligne en dessous de l'image.
-
j'ai rajouté un display: block; dans ma classe mais ça n'a pas changé grand chose IE est toujours aussi récalcitrant tandis que mozilla et opéra sont oks
-
et si tu fais ça ?
fieldset
{
background-color: #0000CC;
} -
par contre sous IE en 800*600 j'ai un problème : le texte est bien à droite mais reste avec une colonne de même taille au lieu de continuer en dessous de l'image
je vous donne un url temporaire :http://www.ville-bais.fr/espacesdeloisirs/...lexesportif.php
-
Bon et bien finalement je me suis trompé, le float left marche bien.
<h2>Terrain de tennis</h2>
<img style="float: left;margin-right: 5px;" src="/images/complexesportif/apercutennis.jpg" width="375" height="281" alt="photo du complexe sportif">
<p>Dans un angle de cette aire de loisirs, un panneau de basket homologué vous attend pour découvrir
votre adresse au panier. Vous pouvez également pratiquer le tennis de table sur la table de ping-pong
d'extérieur.</p>
<p>Cet endroit agréable est ouvert à tous. Chacun peut venir
se détendre ou s'entraîner en respectant les autres. Le terrain de tennis extérieur n'est pas fermé à clé,
il est juste demandé aux personnes qui utilisent ce court d'avoir des chaussures
appropriées (pas de crampons). En cas d'attente, il vous est demandé de bien vouloir libérer le court
après une heure de jeu, afin que tout le monde puisse en profiter.</p>
<hr>en fait je crois que lors de mes premiers tests j'avais dû mettre un float right sur le texte, forcément ça marchait pas.
-
alors pour le float
si j'inverse et mets le texte à gauche et l'image à droite avec un float: right ok ça marche.
Mais l'inverse est faux, car le texte va par dessus l'image au lieu de s'adapter ou fait encore un autre truc mais .. bref ça marche pas..
Et l'autre essai que j'ai fait mais qui n'est pas bon
<img src="/images/complexesportif/apercutennis.jpg" width="375" height="281" alt="photo du complexe sportif">
<p style="display : inline;">Cet endroit agréable est ouvert à tous. Chacun peut venir
se détendre ou s'entraîner en respectant les autres. Le terrain de tennis extérieur n'est pas fermé à clé,
il est juste demandé aux personnes qui utilisent ce court d'avoir des chaussures
appropriées (pas de crampons). En cas d'attente, il vous est demandé de bien vouloir libérer le court
après une heure de jeu, afin que tout le monde puisse en profiter.</p> -
_AT_Laurent
Pour la mise en page 3 colonnes, j'avoue que je n'avais pas réussi à retrouver l'url
Mais comme j'avais fait des tests à partir de cet exemple j'ai voulu le ressortir (tout en mettant ma source d'inspiration).
C'est vrai que j'ai du mal à créer par moi-même, surtout si d'autres plus compétents que moi ont déjà cherché. Mais malgré tout si je l'avais mis de côté c'est que je cherchais tout de même un peu.
-
Je cherche à faire une mise en page avec une image à gauche suivi sur la droite d'un paragraphe, et voulant que ce paragraphe s'il est plus long que la hauteur de l'image continue en dessous de l'image.
Un exemple de ce que je cherche sur : http://www.eyrolles.com/
Dans la rubrique "À la Une" on aperçoit un livre puis sa description. Si la résolution est en 800*600 le texte s'adapte automatiquement.
J'ai cherché dans le code source et j'ai vu une classe Ilcouv mais je n'ai pas réussi à la trouver dans la CSS, et puis surtout c'est un problème à priori trivial (enfin pour certains, mais pas pour moi).
-
<div class="adresse"><img src="logo_graph/adresse.jpg" alt="adresse"/></div>
Pourquoi ne pas faire ça tout simplement ?
<img class="adresse" src="logo_graph/adresse.jpg" alt="adresse"/>
et refaire la CSS correspondante ?
-
exemple trouvé sur le site de Laurent Denis
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu 3 colonnes en float</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15">
<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
}
#gauche,#droite,#centre
{
margin: 1em 0;
}
#gauche
{
float: left;
width: 25%;
background-color: yellow;
position: relative;
right: 45%;
}
#droite
{
width: 25%;
background-color: yellow;
float: right;
}
#centre
{
float: left;
width: 45%;
height: 90%;
background-color: red;
position: relative;
left: 27.5%;
}
#pied
{
clear: both;
background-color: yellow;
}
-->
</style>
</head>
<body>
<div id="centre">centre </div>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="pied">pied</div>
</body>
</html>Dans ton site je trouve
/* bas de page
--------------------------------------------------------------*/
#footer {
width: 98%;
float:left;
font-size: 10px;
color:#999;
padding: 10px;
border-top: 1px solid #ccc;
margin-top: 20px;
}
#footer a {
color:#999;
}Et j'avoue ne pas comprendre le float : left;
Que se passe t'il si tu l'enlèves ?
-
La dégradation proposée par Laurent est d'autant plus minime qu'elle suppose que vous ne sachiez pas quel bloc sera le plus long des deux.
Dans la pratique, il arrive fréquemment qu'on puisse déterminer quel bloc sera le plus long, et si vraiment on ne peut pas on peut essayer de mettre le même background, ce qui sera transparent sur tous les navigateurs
-
A mon avis tu n'aura pas beaucoup de réponses car les frames sont de moins en moins appréciées. Ci-joint l'explication :
-
rajoute clear: both; dans ton footer
Mes sous menus ne s'effacent pas toujours
dans (X)HTML et CSS
Posté
Il est possible d'améliorer le menu, notamment en enlevant le javascript dans le HTML
http://pompage.net/pompe/separation/
C'est d'ailleurs une des choses que je pense faire bientôt pour le site suivant (enfin si j'en ai le temps).