CSS t'y donc possible ?

Beuarh tous,

Je suis dans ma journée “postons à tout va”… Et ce coup ci c’est back to CSS.
Je débute en la matière et j’ai lu quelques articles sur www.openweb.eu.org , notamment celui concernant le remplacement des tableaux par l’utilisation de feuilles de styles.
Ca m’a l’air extrêmement goûtu mais j’ai quelques questions et pas la patience d’attendre. Donc j’en appelle à “ceux qui savent”…

La question est toute bête… Imaginons une page sur laquelle nous avons une entête, un pied de page, un menu, et un contenu. Imaginons ensuite que nous avons un fichier HTML écrit sans considération de positionnement. Ce qui pourrait donner :

...
...
...
... Maintenant, la question est : puis-je, avec du CSS, jongler comme un petit fou avec mes pour placer tout comme je veux où je veux quand je veux si je veux ? Autrement dit, si je veux que le pied de page soit en haut, l'entete à droite, le menu à gauche et le contenu dans l'espace... y a moyen de moyenner ? J'ai déjà à peu près vu comment faire du positionnement en horizontal (cf. [url="http://www.openweb.eu.org/articles/initiation_float/"]http://www.openweb.eu.org/articles/initiation_float/[/url]) en utilisant les float qui permettent de retirer l'info du flux pour tout ce qui concerne left & right. Y a t'il une technique équivalente pour top & bottom ?

Merciiiiiiiii
Antoine

oui avec les CSS tu peux positionner comme tu veux. L’id est juste le nom que tu donnes a ton DIV, ensuite, si tu veux le mettre a Tombouctou, meme s’il s’appelle Greenwich, t’as le droit.

Mmmmm

Non, pour enlever un bloc du flux il faut le positionner en absolu.

Le problème si tu te bases sur les floats et les clear c’est que l’ordre de tes divs va jouer sur leur positionnement.

Enfin… de toute façon ça n’a de l’importance que quand on veut faire 30 sites différents avec le même code html.

A ce sujet: http://www.csszengarden.com

Moi j’aime beaucoup les css et je fais que ça plus séparation contenu / forme… si t’as des questions vas-y je serais heureux de trouver de nouveaux problèmes : )
Ce message a été édité par nolan le 28/11/2003

Oui, il y a moyen, les CSS, c’est surpuissant (mais si).

Il te faudra utiliser des techniques de positionnement, qu’elles soient relatives (agencement “souple”) ou absolues (tu redimensionnes ta fenêtre, l’agencement ne change pas, tu auras des barres de défilement là où il faut).

Par exemple, en positionnement absolu :

#menu { position:absolute; top:10px; left:10px; (reste des propriétés) }

Ca te positionnera le menu en haut à gauche, à 10px du bord, quelles que soient les positions et dimensions des autres blocs.

Tu n’es pas obligé de tout positionner, tu positionnes certains éléments, et les autres s’intercaleront entre, bref, faut un peu jouer avec le tout, et c’est peut-être pas évident, mais une fois que tu y as touché, tu ne peux plus t’en passer et construire une mise en page avec des tableaux devient une hérésie

Bref, pour plus d’info : des tonnes d’URL sur les CSS layouts without tables.

[quote]Enfin… de toute façon ça n’a de l’importance que quand on veut faire 30 sites différents avec le même code html.

Ben justement à terme c’est ce que je vais devoir faire.
Bon, là je commence à avoir un début de résultat probant, mais c’est pas parfait.
En l’occurence, dans mon HTML mes sont dans le désordre. Je cherche à faire le truc le plus simple (pour le moment ) :

“entete”
“menu” “contenu”
“pied”

Pour le moment, j’ai fait un conteneur pour l’ensemble, j’ai laissé un padding en “em” pour l’entête et collé le reste ensuite. Mais j’ai quand même un petit bout de l’entete qui vient grignoter le menu et le contenu.
Dites moi si je me trompe, mais à priori, à ce stade, je suis condamné à bosser au pixel près ? Ce qui ne m’arrange pas du tout si je considère que le contenu de mes divs est inconnu et variable en taille…

Voici le code CSS :

#container
{
 padding-top:1.0em;
}

#entete
{
 position:absolute;
 top:0em;
 width:100%;
 background-color:#0000FF;
}

#menu
{
 width:25%;
 background-color:#00FF00;
}

#contenu
{
 width:75%;
 background-color:#FF0000;
 float:right;
}

#pied
{
 position:relative;
 bottom:0em;
 width:100%; 
 background-color:#00FFFF;
}

Suis un peu paumé là…
Mais ça va viendre, je le sens

alors le motto c’est « give me pixels or give me death »

Mais tu n’est pas obligé de spécifier à chaque fois la propriété
width… en fait c’est plus sources d’embêtements qu’autre chose
(surtout en js mais c’est un autre sujet)

je poste un truc classique que j’ai fait: http://217.117.49.160/blog2/ et http://217.117.49.160/myblog/pages/

le premier à la sémantique la plus simple et la plus logique tandis que le deuxième doit pouvoir être entièrement skinné

(mais c’est le même backend) (touchez pas aux meubles hein)

Gabuzoneuh,
t’as chopé le lien où? tu fréquenterais pas aussi le chan par hasard?
Ce message a été édité par nolan le 28/11/2003

A la limite, qu’on me confirme juste un truc :
On reste toujours dépendant de l’ordre dans le flow HTML à moins d’utiliser des position:absolute. Donc si j’ai du contenu à afficher et à organiser en blocs (div), et que je ne connais pas sa quantité (taille), je suis obligé de prendre en compte l’ordre dans mon code HTML pour le positionnement des blocs…
Autrement dit, les CSS c’est top mais il reste quand même une dépendance vis à vis du HTML…

J’ai bon ?

[quote]A la limite, qu’on me confirme juste un truc :
On reste toujours dépendant de l’ordre dans le flow HTML à moins d’utiliser des position:absolute.
Donc si j’ai du contenu à afficher et à organiser en blocs (div), et
que je ne connais pas sa quantité (taille), je suis obligé de
prendre en compte l’ordre dans mon code HTML pour le positionnement des
blocs…
Autrement dit, les CSS c’est top mais il reste quand même une dépendance vis à vis du HTML…

J’ai bon ?[/quote]oui : )

Mais à moins de faire du positionnement de 10 blocs ce n’est
généralement pas un problème… les css et l’html c’est pour du texte et
de l’info, pas des maquettes d’affiches ; )

De toute façon si c’est un gros site ton contenu est mouliné par du
code serveur donc… tu remodèles l’html de ton gabarit serveur en conséquence de manière à ce
que sa sémantique colle et tu laisses la css s’occuper du reste… un
changement de design? tu changes ton gabarit serveur pour qu’il mouline
l’html le plus simple possible et soit toujours mis en forme par la css

Css zen garden est un très bon exemple de ce qu’on peut faire aved des
css et de l’html à la sémantique structurée… cependant le code est
html est “bloated” comme on dit.
Ce message a été édité par nolan le 28/11/2003

[quote][quote]A la limite, qu’on me confirme juste un truc :
On reste toujours dépendant de l’ordre dans le flow HTML à moins d’utiliser des position:absolute.
J’ai bon ?[/quote]oui : )

Mais à moins de faire du positionnement de 10 blocs ce n’est généralement pas un problème… les css et l’html c’est pour du texte et de l’info, pas des maquettes d’affiches ; )

De toute façon si c’est un gros site ton contenu est mouliné par du code serveur donc… tu remodèles l’html de ton gabarit serveur en conséquence de manière à ce que sa sémantique colle et tu laisses la css s’occuper du reste… un changement de design? tu changes ton gabarit serveur pour qu’il mouline l’html le plus simple possible et soit toujours mis en forme par la css

Css zen garden est un très bon exemple de ce qu’on peut faire aved des css et de l’html à la sémantique structurée… cependant le code est html est “bloated” comme on dit.
Ce message a été édité par nolan le 28/11/2003[/quote]Cruelle déception… J’ai commencé à découvrir les vraies possibilités des CSS hier soir et je m’étais envolé dans un élan d’enthousiasme… et plouf à la flotte.
Mébon, je vais pas me plaindre outre mesure, y a déjà de quoi se faire plaisir. Je vais effectivement faire comme tu dis : macro-maquette en HTML (genre top, middle, bottom) et ensuite micro-maquette en CSS.

Le truc c’est que ça sera un site pour une boite d’édition qui publie environ 10 magazines par mois. Mon job c’est de faire un portail avec un site pour chaque revue. Grosse base de données sur les articles (en cross-reference entre les revues), gestion dynamiques des éditos pour les rédac-chefs et éventuellement d’articles dédiés “net” pour les auteurs, newsletter, forum, etc, etc.

Les mecs avec qui je bosserai sont des accros de XPress et de la “maquette libre”. Va falloir composer avec ça et leur éliminer le plus de contraintes possibles.
Ajoutons à tout ça qu’ils n’ont aucune culture du web et encore moins d’Internet en général… Y a du challenge comme j’aime là

Au moins, je suis fixé maintenant.

Antoine

mmmm héhé

est-ce que tu as entendu parlé du xml surtout d’xslt?

edit:

Pour tes amis graphistes habitués à xpress… dis toi que l’html est bien plus puissant que le papier pour fournir du contenu: redimenssionnement dynamique, animation et interactivité… tu peux personnaliser le contenu suivant plusieurs paramètres (titres importants, importance du texte etc…)… De toute façon le contenu sera fourni via un cms non? c’est lui qui est met en forme via gabarit donc… la mise en page customisée pour chaque article ça devient du page par page (mais c’est chouette)
Ce message a été édité par nolan le 28/11/2003

[quote]mmmm héhé

est-ce que tu as entendu parlé du xml surtout d’xslt?[/quote]
Oui oui je connais xml/xslt mais c’est pas l’objectif premier du portail que de mettre des articles en ligne. C’est plutôt le contraire, juste les informations à propos des articles pour que les visiteurs commandes les revues en ligne.
J’avais évidemment pensé à ça en premier (quand je n’avais pas les spécification “marketing” du portail) étant donné la souplesse de la chose, mais au bout du compte PHP/MySQL + HTML/CSS/JavaScript devraient faire la solution technique idéale, y compris en terme d’évolutivité.

En revanche, il devrait y avoir des articles complets et dédiés au net sur certains sites. Mais ça sera au coup par coup, donc…

Antoine

Tant qu’on y est j’ai un question.
Je suis en train de bosser les CSS. (l’integrateur habituel est en mission à l’exterieur, du coup c’est Bibi qui s’y colle, je prefere faire le code de l’application derrière).
J’aimerai que mes input box soit plus petite, il me semble que c’est possible, mais comment ?

[quote]Tant qu’on y est j’ai un question.

Je suis en train de bosser les CSS. (l’integrateur habituel est en
mission à l’exterieur, du coup c’est Bibi qui s’y colle, je prefere
faire le code de l’application derrière).
J’aimerai que mes input box soit plus petite, il me semble que c’est
possible, mais comment ?[/quote]
tout les inputs d’un formulaire particulier:

#formid input{width: 50px;height:14px;border: 1px solid black;}

ou

une classe pour les inputs que tu veux:

.classforinput {width:50px;height:14px;border: 1px solid black;}

attention, ton boutton envoyer est aussi une balise input et le
comportement differe suivant ie/gecko… tu dois spécifier la taille
de la police: font-size:12px; pour tout tes inputs ou ton boutton
en particulier.

note: tu peux aussi changer la police et la taille de la police du texte qu’on entre dans les boites
Ce message a été édité par nolan le 28/11/2003

Merci Nolan, ca marche nickel !

Je peux aider sur :[ul]
[li]Servlet/JSP/Struts[/li][li]PHP/MySQL/PostgreSQL[/li][/ul]Ce message a été édité par ecestari le 28/11/2003

[quote]Gabuzomeuh (m, pas n, merci), t’as chopé le lien où? tu fréquenterais pas aussi le chan par hasard?[/quote]Aucune idée d’où j’ai trouvé “The Fixor Has (…) Links”. Ca fait des mois que je l’ai dans mes bookmarks. Ptêtre une de mes nombreuses recherches sur les CSS ou via un site via un autre site, bref.

Mais non, je ne fréquente pas le chan