Problème css

[Gibou]

Alors voilà

Je veux faire un site dont la présentation avoisinerait celle-ci

En gros, je veux mon corps de page au milieu avec un calendrier des news à gauche et mon menu à droite.

Oui mais voilà, j'ai dompté le calendrier et le corps de page mais mon menu refuse d'obéir.

Bref, voilà ce que ça donne : cliquez ici

Donc, en haut à gauche, c'est une news avec le bas de page qui se finit normalement et le menu se met bien à droite mais EN BAS et non pas à côté des news.

J'ai toujours un peu galéré pour les mises en pages, perosnnellement je préfère développer des pages de 800 lignes de php mais bon, faut faire de tout

Je vous montre mon code html de cette page :

<!--centrage de tout ce bordel-->
<div id="all">

	<!--en tête-->
	<div id="baniere">
	</div>

	<!--menus totals-->
	<div id="menu">

  <!--calendrier-->
  <div class="calendrierfond" align="center">
 	 <?php
 	 require "calendrier.php";
 	 ?>
  </div>

  <!--reste-->
  <div class="basmenu">
  </div>

	</div>
	<!--fin menus-->

	<!--corps-->
	<div id="corpsfond">
  <?php
  if(!file_exists($page))
 	 {
 	 $_SESSION['404'] = $page;
 	 $page = "404.php";
 	 }
  require $page;
  ?>
	</div>

	<div id="basfond">
	</div>

	<div id="menudroite">

	<!--navigation-->
  <div class="navigationfond">
  <strong><font size=5>~Navigation~</font><hr><hr></strong>
  </div>
  
  <!--menus-->
  <div class="menusfond" id="lienmenu">
 	 <?php
 	 include"includes/menu.html";
 	 ?>
  </div>
	<!--fermeture du design de la page-->
	</div>

	<div id="footer">
          blablabla
	</div>

</div>

et le code css (désolé de vous submerger)

/*présentation page d'accueil*/

/*centrage de tout*/
#all
{
margin:auto;
margin-top:0px;
width:775px;
}

/*baniere*/
#baniere
{
margin-top:10px;
width:775px;
height:155px;
background-image:url("../design/defaut/baniere.gif");
background-repeat:no-repeat;
}

/*partie gauche*/
#menu
{
margin-top:0px;
float:left;
width:200px;
}

/*calendrier*/
.calendrierfond
{
background-color:#000000;
}

.menusfond
{
background-color:#000000;
}

/*corps de la page*/
#corpsfond
{
padding-left:10px;
margin-left:200px;
margin-top:0px;
width:390px;
text-align:center;
background-image:url('../design/defaut/fond.jpg');
}

/*bas du corps*/
#basfond
{
margin-left:200px;
margin-top:0px;
width:390px;
height:27px;
background-image:url('../design/defaut/bas.jpg');
}

/*menu de droite*/
#menudroite
{
padding-left:0px;
margin-left:610px;
margin-top:px;
width:165px;
text-align:center;
}

/*style du survolage des liens du menu de droite*/
#lienmenu a:hover
{
background-image:url(../images/croix.png);
background-repeat:no-repeat;
background-position:1% 50%;
padding-left:15px;
}

/*style des table du menu de droite*/
#lienmenu table
{
width:100%;
}

/*style des td du menu de droite*/
#lienmenu td
{
width:100%;
text-align:right;
height:20px;
}

/*style du survolage des sections du menu de droite*/
#lienmenu .sections:hover
{
background-image:url(../images/croix.png);
background-repeat:no-repeat;
background-position:1% 50%;
padding-left:15px;
}

/*style de la case navigation*/
.navigationfond
{
background-color:#000000;
height:50px;
text-align:center;
}

/*style du reste de la page*/
.basmenu
{
background-color:#505050;
}

/*footer*/
#footer
{
padding-top:3px;
margin:auto;
text-align:center;
margin-top:0px;
background-image:url(../design/defaut/footer.gif);
background-repeat:no-repeat;
height:70px;
width:775px;
}

Voilà voilà, merci infiniement à ceux ou celles qui auront la patiente de lire ça jusqu'au bout

Modifié 22 Août 2005 par Gibou

[Sarc]

Salut !

Ma tendance à être un peu faignant te demanderait si ce pourrait être possible que tu mettes la page en ligne, pour pouvoir modifier en temps réel, ça serait plus pratique que de regarder du code sur un forum

Tu peux uploader la page ?

Sinon, au passage, j'aime bien le :

<!--centrage de tout ce bordel-->

[Gibou]

Ok, je ferai ça ce soir, là je pars bosser, merci

[recherche_webmaster]

Sois gentil laisse la taille des mots s'agrandir au lieu de les bloquer avec une taille fixe dans la feuille des styles.

Perso je suis à 50 cm de l'écran et les sites avec des polices fixes je peux pas les lire.

[Dudu]

Bonsoir methodix

Sois gentil laisse la taille des mots s'agrandir au lieu de les bloquer avec une taille fixe dans la feuille des styles.

Perso je suis à 50 cm de l'écran et les sites avec des polices fixes je peux pas les lire.

Tu parles de quel site, là ?

La seule chose qui ait été presentée est une capture d'écran au format JPG: effectivement c'est un peu dur d'en n'agrandir seulement les textes mais c'est normal.

PS: avoir une taille de police définie en px dans la CSS ne m'a jamais empeché d'agrandir ou de rétrécir les textes. Sois gentil(le) d'utiliser un navigateur, un vrai

[recherche_webmaster]

je parle du premier lien laissé tout en haut

Je veux faire un site dont la présentation avoisinerait celle-ci

j'utilise IE ç'est un faux navigateur ? (je sais je sais c'est un navigateur qui a besoin d'une mise à niveau concernant le respect des consignes W3C.

Mais l'internaute lambda il ne sait même pas ce que c'est que le W3C)

Bon enfin c pas fondamental je changerais de navigateur pour visiter le site.

Modifié 23 Août 2005 par recherche_webmaster

[Dudu]

je parle du premier lien laissé tout en haut

Alors pourquoi parles-tu au webmaster de ce site en lui donnant des conseils alors qu'il n'est pas là ?

Le lien vers ce site est donné à titre d'exemple.

j'utilise IE ç'est un faux navigateur ? (je sais je sais c'est un navigateur qui a besoin d'une mise à niveau concernant le respect des consignes W3C.

Mais l'internaute lambda il ne sait même pas ce que c'est que le W33C)

Bon enfin c pas fondamental je changerais de navigateur pour visiter le site.

IE version Windows a besoin d'une mise à jour tant au niveau des standards (x)html & css, mais également au niveau de la sécurité. Ce n'est pas faute de le dire, je pense que tout le monde le sait

Que le grand public ne connaisse pas le w3c n'est pas vraiment un problème: c'est aux webmasters de le connaître.

Quand au W33C: seuls les 733T le connaissent

[recherche_webmaster]

Alors pourquoi parles-tu au webmaster de ce site en lui donnant des conseils alors qu'il n'est pas là ?

Bon bah je dis plus rien alors. Il avait l'air de vouloir faire pareil c'est tout.

Mais il y en a plein des sites comme ça qui "durcissent" les tailles de police, et place tout en position-absolute.

ça permet effectivement d'avoir une mise en page sur mesure. Mais dès que l'on s'éloigne des standards, que l'on passe en 800*600 ou que l'on veut agrandire les polices par exemple et bien la mise en page craque de partout. Ca le fait même sur des très gros sites.

Voilà l'idée sous-jacente, c'est bon à rappeler parfois.

Quand au W33C: seuls les 733T le connaissent

C'est quoi un 733T ?

Modifié 23 Août 2005 par recherche_webmaster

[Dudu]

Bon bah je dis plus rien alors.

[...]

Voilà l'idée sous-jacente, c'est bon à rappeler parfois.

Non, tu as raison de rappeler un peu d'accessibilité Juste que tu interpellais quelqu'un qui n'est pas sur le Hub..

Pour autant, un webmaster peut avoir moultes raisons de préférer les tailles en pixels (c'est mon cas), mais c'est un autre débat.

Pour en revenir à Gibou, un coup d'œil rapide sur le code donné ne me laisse rien présager de mauvais

Mais il sera plus effectivement plus simple de regarder tout çà sous forme de page html à visiter.

[TheRec]

C'est quoi un 733T ?

<{POST_SNAPBACK}>

En fait c'est plutôt "1337" à mon avis (733T signifie plutôt TEET...mais je vois pas), qui est une écriture "coddée" en chiffre pour dire leet (notez la ressemblance des lettres et chiffres) ... la consonnance en anglais est presque parfaite avec le mot "elite", qui signifie (que de suspens) : élite.

C'est un language utilisé pas les prétendus gourous du piratage etc... bref pas de quoi s'attarder... ça pourrait presque s'apparenter à du language SMS

Modifié 23 Août 2005 par TheRec

[Gibou]

Voilà la page demandée cliquez ici

Inutile de cliquer sur les liens du menu, j'ai pas uploadé les autres pages donc ça vous mettrait des erreurs ou, au mieux, vous redirigerait vers erreur 404

[Dudu]

TheRec: j'ai vu les 2 écritures, je suis plus habitué à 733T m'enfin bon..

Gibou:

1. Le menu de droite apparaît bien à droite.. mais en dessous de la partie centrale quand même
   Tu devrais passer son code HTML avant le corps, puis définir "float:right;" en CSS ensuite
   
   
2. Soit tu fais un design en tableaux soit tu le fais en CSS, mais là le charabia fait un peu étrange. Globalement, seul ton calendrier nécessite un tableau
   
   
3. Pourquoi un doctype xhtml1.1 ?? C'est un peu violent, coder sous ce doctype est un exercice assez périlleux. Et dans ton cas, désolé de te dire que tu es "en-dessous"
   
   
4. Proposer de télécharger une police pour voir ton site est une hérésie. Si chaque site faisait çà, combien de polices aurions-nous sur nos ordis?
   Perso, j'en ai déjà pas loin de 3 000 et je n'ai vraiment que faire d'une énième supplémentaire qui n'a certainement pas été designée par un professionnel suivant des critères de lisibilité, de print, de screen, d'œil, d'écart etc etc..
   Là, tu fais fuir tes éventuels visiteurs à coup sûr
   
   
5. idem pour la fuite de visiteurs quand on lit ton footer.
   Peux-tu me détailler pourquoi ton site est optimisé pour Firefox ? En posant la question autrement: pourquoi moi qui utilise Safari j'utilise un mauvais navigateur pour voir ton site ?
   
   
6. Remplaces les <td style="blablablablablabla"><em>V</em></td> de ton calendrier par des <td><em></em></td> tout simples.
   Et dans ta CSS externe, tu écris ton blabla devant une ligne "td.calendrierfond em"
   
   
7. "em" signifie "emphase" et "strong" signifie "forte emphase"
   Çà fait donc bizarre de lire çà: <strong><em>RAPPEL DES NEWS</em></strong>
   

Bonne soirée, bon courage

[Gibou]

ok ok so ...

1. C'est fait mais ya toujours un bug ... de plus j'avais déjà remraqué et ça se vérifie. le footer bugue quand on change les news (essayez le calendrier et vous verrez)
   
   
2. pour le style en tableaux, on m'a toujours dit que c'était une mauvaise technique et que c'était mieux en div ... faux ?
   
   
3. J'ai pris ce style sur le site du zero (assez connu dans ce domaine). Ce type de page est un exemple tiré des cours
   
   
4. C'est juste histoire de voir certains titres des galeries de screens de jeux videos dans la police utilisée dans le jeu, rien de bien méchant et pas obligatoire
   
   
5. lol le footer est une connerie, je ne balancerai pas ça, c'était juste pour plaisanter.
   Quant à l'optimisation pour firefox, je ne dis pas que c'est le seul valable, juste que si on aperçoit des bugs de mise en page, je rappelle que ce site est OPTIMISE pour firefox c'est tout (je pense surtout à IE)
   
   
6. ok, noté
   
   
7. J'avais compris que <strong> équivalait à <b> et <em> à <i> en xhtml, faux aussi ?
   

[Dudu]

pour le style en tableaux, on m'a toujours dit que c'était une mauvaise technique et que c'était mieux en div ... faux ?

Vrai et faux.

Les tableaux sont une mauvaise technique: Vrai

Mettre plein de <div> partout est une bonne technique: Faux

Il faut simplement appeler un chat un chat. Si tu souhaites écrire un paragraphe, utilises <p>, si tu souhaites introduire une liste dans ton texte, utilises <ul> et <li> (ou <ol> et <li> pour les listes ordonnées), si tu souhaites définir un titre, puis un sous-titre, puis un sous-sous-titre, utilises <h1> <h2> <h3> (jusqu'à 6) etc etc..

Les <div> servent juste à englober les différentes parties de la page (en-tête, corps, pied de page, menu). À mon avis, dépasser 4 ou 5 <div> sur une seule page, c'est recréer le problème des tableaux.

J'ai pris ce style sur le site du zero (assez connu dans ce domaine). Ce type de page est un exemple tiré des cours

Ben ils sont gentils sur le site du zero, mais coder en XHTML 1.1 est un vrai sport. Déjà il faut absolument l'envoyer en type MIME application/xhtml+xml, ensuite il y a tout un tas de restrictions quant au contenu (essaies passer ta page au validateur, tu vas comprendre le problème).

Copier-coller un doctype n'est pas l'adopter

J'avais compris que <strong> équivalait à <b> et <em> à <i> en xhtml, faux aussi ?

C'est archi-faux. C'est malheureusement une confusion savamment entretenue par certains sites qui se targuent d'expliquer le codage (x)html aux débutants (les fameux "tutoriels" ).

La seule chose vraie, c'est qu'un navigateur confronté à un <strong> va le rendre par défaut en gras. Et pour le <em> il va le rendre en italique.

Mais <em> ne vaut pas dire "italique" pour autant. Çà veut juste dire "emphase, mise en valeur"

Et <strong> ne veut pas dire "gras" mais "forte emphase"

Voilà

[Gibou]

ok, d'accord, je le saurai pour la suite, merci beaucoup pour ta patiente

Sinon, tu vois une autre raison pour ma mise en page ?

De plus ça découpe le design de mes news alors que j'ai mis une bordure au corps de page pour montrer que ya la place pourtant, je vois pas pourquoi ça la coupe ..

[Dudu]

Argh, je disais de passer le menu de navigation avant le corps, mais en fait je voulais dire avant le calendrier. Passe le en premier dans le code HTML (après le doctype et le <head> quand même hein ? )

Sinon, tu as un problème d'imbrication des balises dans les calendrier qui a tendance à tout fausser. Je pense que c'est la raison pour laquelle le footer délire quand on change de page

[Gibou]

Well well ...

Ca avance, ça avance

Bon, la forme y est. J'ai remplacé certains <div> par des <p> comme tu me l'as suggéré, "purifié" le code du calendrier, changé 2-3 trucs dans le css et voilà. http://nico.gibelin.free.fr/reposgiboutien

A celà : 2 bugs quand même (faut pas rêver)

1. sous IE, la présentation passe pas, le site est tout à gauche et le corps de page, tout en bas ... groumpf
   
2. le footer passe sous le menu de droite lorsque le corps de page est plus court que le dit-menu. voir ici)
   

Modifié 24 Août 2005 par Gibou