Première page 100% CSS sans tables et en Strict !

On 25 avr, 09:30, Christian <reply.val...@fr.invalld> wrote:

kurtbosh a écrit :

> Bonjour,

> Voici ma Première page 100% CSS SANS TABLES et en html 4.01 Strict !

>http://www.grenault.net/photos/sqp_0126.htm

> Bon, je sais il n'y a rien dedans mais quand même, j"en suis fier !-)

> Et en plus, 100% traitement de texte !

> Le code pourrait sans doute être simplifié...

encore un petit effort pour supprimer ça :

<p class="interligne">&nbsp;</p>

et ça :

&nbsp;&nbsp;&nbsp;&nbsp;

;-)

--
Christian

Oui, ce n'est pas très élégant mais ça marche !

Je ne sais d"ailleurs pas par quoi les remplacer ?

"line-height" ne marche pas avec tous les navigateurs... et mettre un
div (avec un width) c'est un peu lourd aussi...

kurtbosh a écrit :

<p class="interligne">&nbsp;</p>

et ça :

&nbsp;&nbsp;&nbsp;&nbsp;

Oui, ce n'est pas très élégant mais ça marche !

Je ne sais d"ailleurs pas par quoi les remplacer ?

"line-height" ne marche pas avec tous les navigateurs... et mettre un
div (avec un width) c'est un peu lourd aussi...

pour les <p class="interligne"> :
tu as essayé en réglant le margin-top(/bottom) et le
padding-top(/bottom) de body et de tes <div>

sinon pour les &nbsp;, il vaudrait mieux mettre tes liens dans une liste
et styler tes <li>
(d'un point de vue accessibilité ça serait plus propre)

--
Christian

Bonjour.

"kurtbosh" <kurtbosh@gmail.com> a écrit dans le message
de news 8062633f-b52a-4aba-97f5-47a776e2f632@w40g2000yqd.googlegroups.com

Bonjour,

Voici ma Première page 100% CSS SANS TABLES et en html 4.01 Strict !

http://www.grenault.net/photos/sqp_0126.htm

Bon, je sais il n'y a rien dedans mais quand même, j"en suis fier
!-)

Oui, c'est assez joli, mais pourquoi aurait-il fallu une table ?
C'est là que le défi est intéressant: http://www.grenault.net/ ;-)

Au fait, pourquoi N&B dans les keywords ? :o)

Et en plus, 100% traitement de texte !

Quel outil ?

Le code pourrait sans doute être simplifié...

Ca c'est dommage:
&nbsp;&nbsp;&nbsp;&nbsp;
Saint Quay Portrieux : &icirc;le de la Comtesse (2009 - Canon G9) Guy
Renault (c)
&nbsp;&nbsp;&nbsp;&nbsp;

C'est plutôt avant le : qu'un espace insécable aurait sa place !!!
Pourquoi pas &copy; au lieu de (c) ?

Euh... Et ça ?
<a href="cantal76.htm" title="Photo pr&eacute;c&eacute;dente"><<</a>
&nbsp;&nbsp;
<a href="sqp_0109.htm" title="Photo suivante">>></a>Je parle des << et >>
bien sûr.

Donc vous avez fait ça à la main ou avec quel outil ? Etrange qu'il ait raté
ce détail.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

On 25 avr, 12:27, "Patrick 'Zener' Brunet"
<use.link.in.signat...@ddress.invalid> wrote:

Bonjour.

"kurtbosh" <kurtb...@gmail.com> a écrit dans le message
 de news 8062633f-b52a-4aba-97f5-47a776e2f...@w40g2000yqd.googlegroups. com

> Bonjour,

> Voici ma Première page 100% CSS SANS TABLES et en html 4.01 Strict !

>http://www.grenault.net/photos/sqp_0126.htm

> Bon, je sais il n'y a rien dedans mais quand même, j"en suis fier
> !-)

Oui, c'est assez joli, mais pourquoi aurait-il fallu une table ?
C'est là que le défi est intéressant:http://www.grenault.net/ ;-)

Au fait, pourquoi N&B dans les keywords ?  :o)



> Et en plus, 100% traitement de texte !

Quel outil ?

> Le code pourrait sans doute être simplifié...

Ca c'est dommage:
&nbsp;&nbsp;&nbsp;&nbsp;
Saint Quay Portrieux : &icirc;le de la Comtesse (2009 - Canon G9) Guy
Renault (c)
&nbsp;&nbsp;&nbsp;&nbsp;

C'est plutôt avant le : qu'un espace insécable aurait sa place !!!
Pourquoi pas &copy; au lieu de (c) ?

Euh... Et ça ?
<a href="cantal76.htm" title="Photo pr&eacute;c&eacute;dente"><<</a>
&nbsp;&nbsp;
<a href="sqp_0109.htm" title="Photo suivante">>></a>Je parle des << e t >>
bien sûr.

Donc vous avez fait ça à la main ou avec quel outil ? Etrange qu'il a it raté
ce détail.

--
Cordialement.

* Patrick BRUNET    www.ipzb.fr www.ipzb-pro.com
* E-mail: lien surhttp://zener131.eu/ContactMe

J'utilise SYN, un éditeur de texte en Open source. J'apprécie sa
coloration syntaxique. J'ai dû mettre un lien dessus dans mes liens
"Logiciels". A vérifier...

Je sais les autres pages sont à base de tables, mais je les apprécie
beaucoup pour leur universalité (y compris le XHML) !

Guy

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
kurtbosh ecrit ce qui suit en ce 25.04.2009 09:24 :

Bonjour,

Bonjour,

Voici ma Première page 100% CSS SANS TABLES et en html 4.01 Strict !

Dans une telle page, mettre des tables aurait été passible du peloton
d'exécution ! ;-)

Et en plus, 100% traitement de texte !

Même remarque que Patrick à propos des espaces insécables et du codage
des accentués.

Le code pourrait sans doute être simplifié...

Christian à raison à propos des liens et, évidemment, de l'utilisation
d' &nbsp; qui peuvent être avantageusement remplacés par des styles.
J'ajouterai à leurs remarques mon petit grain de sel : ton JS ne sert
strictement à rien pour les navigateurs qui se respectent ... ou ceux
qui ont désactivé JS. Si tu tiens malgré tout à le garder pour les
utilisateurs de MSIE, prends l'habitude d'écrire la déclaration (comme
tout le code html et les css en général) en minuscules : text/javascript.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

On 25 avr, 12:57, docanski <docanski_moraus...@euphonynet.be.invalid>
wrote:

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
kurtbosh ecrit ce qui suit en ce 25.04.2009 09:24  :

> Bonjour,

Bonjour,

> Voici ma Première page 100% CSS SANS TABLES et en html 4.01 Strict !

Dans une telle page, mettre des tables aurait été passible du peloton
d'exécution ! ;-)

> Et en plus, 100% traitement de texte !

Même remarque que Patrick à propos des espaces insécables et du cod age
des accentués.

> Le code pourrait sans doute être simplifié...

Christian à raison à propos des liens et, évidemment, de l'utilisat ion
d' &nbsp; qui peuvent être avantageusement remplacés par des styles.
J'ajouterai à leurs remarques mon petit grain de sel : ton JS ne sert
strictement à rien pour les navigateurs qui se respectent ... ou ceux
qui ont désactivé JS. Si tu tiens malgré tout à le garder pour le s
utilisateurs de MSIE, prends l'habitude d'écrire la déclaration (comm e
tout le code html et les css en général) en minuscules : text/javascr ipt.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne :http://armorance.free.fr/
Guide des champignons d'Europe :http://mycorance.free.fr/
La vallée de la Rance maritime :http://valderance.free.fr/
Les côtes du nord de la Bretagne :http://docarmor.free.fr/

Moi j'aime bien les &nbsp; car ils permettent un espacement constant
quelque soit la longueur des menus. Avec <li> ce ne sera pas le cas et
en plus en horizontal, cela pose des problèmes sur certains
navigateurs. Je pourrais remplacer je pense par <span class="espace"></
span> mais c'est aussi long...

Merci pour les conseils.

Guy

Oui, c'est assez joli, mais pourquoi aurait-il fallu une table ?
C'est là que le défi est intéressant:http://www.grenault.net/ ;-)

* Patrick BRUNET    www.ipzb.fr www.ipzb-pro.com
* E-mail: lien surhttp://zener131.eu/ContactMe

En voici la maquette :

http://www.grenault.net/maquette_css.htm

Certainement pas parfait !

Guy

Le 4/25/09 7:33 PM, kurtbosh a écrit :

Moi j'aime bien les &nbsp; car ils permettent un espacement constant
quelque soit la longueur des menus.

et à quoi servent les marges ?

Avec <li> ce ne sera pas le cas et
en plus en horizontal, cela pose des problèmes sur certains
navigateurs. Je pourrais remplacer je pense par <span class="espace"></
span> mais c'est aussi long...

Meuh non !
On laisse les LI (en proportionnel) se coller
et ce seront les A qui margeront (cette fois en fixe).
... ni insécable ... ni span ... rien que les css ! !

Pour 6 items en horizontal :

<ul id="menu">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
<li><a href="#">menu 6</a></li>
</ul>

#menu,
#menu li {
list-style: none;
margin: 0;
padding: 0;
background: #ccc;
}
#menu { border: 1px solid; height: 2.4em;}
#menu li {
float: left;
width: 16.66%
}
#menu a {
display: block;
background: #ffc;
text-align: center;
text-decoration: none;
color: #999;
border: 2px solid;
margin: 5px;
}
#menu a:hover { background: #ff0; color: #000; }

Merci pour les conseils.

Et pour 5 items :

<ul id="menu">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>

Il suffit de changer 1 ligne :

#menu li {
float: left;
width: 20% /* cette ligne à modifier */
}

--
sm

On 25 avr, 22:48, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

Le 4/25/09 7:33 PM, kurtbosh a écrit :



> Moi j'aime bien les &nbsp; car ils permettent un espacement constant
> quelque soit la longueur des menus.

et à quoi servent les marges ?

> Avec <li> ce ne sera pas le cas et
> en plus en horizontal, cela pose des problèmes sur certains
> navigateurs. Je pourrais remplacer je pense par <span class="espace"> </
> span> mais c'est aussi long...

Meuh non !
On laisse les LI (en proportionnel) se coller
et ce seront les A qui margeront (cette fois en fixe).
... ni insécable ... ni span ... rien que les css ! !

Pour 6 items en horizontal :

<ul id="menu">
   <li><a href="#">menu 1</a></li>
   <li><a href="#">menu 2</a></li>
   <li><a href="#">menu 3</a></li>
   <li><a href="#">menu 4</a></li>
   <li><a href="#">menu 5</a></li>
   <li><a href="#">menu 6</a></li>
</ul>

#menu,
#menu li {
   list-style: none;
   margin: 0;
   padding: 0;
   background: #ccc;}

#menu { border: 1px solid; height: 2.4em;}
#menu li {
   float: left;
   width: 16.66%}

#menu a {
   display: block;
   background: #ffc;
   text-align: center;
   text-decoration: none;
   color: #999;
   border: 2px solid;
   margin: 5px;}

#menu a:hover { background: #ff0; color: #000; }

> Merci pour les conseils.

Et pour 5 items :

<ul id="menu">
   <li><a href="#">menu 1</a></li>
   <li><a href="#">menu 2</a></li>
   <li><a href="#">menu 3</a></li>
   <li><a href="#">menu 4</a></li>
   <li><a href="#">menu 5</a></li>
</ul>

Il suffit de changer 1 ligne :

#menu li {
   float: left;
   width: 20%  /* cette ligne à modifier */

}

--
sm

Je ne savais pas faire ça !

Merci beaucoup Sam !

Guy

Le 4/26/09 6:54 AM, kurtbosh a écrit :

On 25 avr, 22:48, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

Pour 6 items en horizontal :

<ul id="menu">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>

(...)

Je ne savais pas faire ça !

C'est vrai que l'on arrive pas à faire ça dès le lendemain de la
première lecture de la liste des règles css ;-)

Merci beaucoup Sam !

De rien. (nota: "SAM" ou alors "Stéphane" !)

et, avec exactement le même HTML et les mêmes CSS,
pour transformer le menu horizontal en vertical,
il suffit de modifier très peu les CSS :

#menu {
border: 1px solid;
/*
height: 2.4em;
*/
width: 7em;
}
#menu li {
/*
float: left;
width: 16.66%
*/
}


La leçon suivante pour les menus s'appelle: "les portes coulissantes"
C'est pour y avoir une décoration par une image en fond d'item.

Normalement Google connait.

Pour en avoir une idée simplifiée de ce que c'est :
<http://stephane.moriaux.pagesperso-orange.fr/truc/bouton_3_etats_css>
ou:
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bouton_3_etats_css>

Bon dimanche.
(ici, brouillard et pluie :-( )

--
sm