28221 sujets

CSS et mise en forme, CSS3

bonjour a tous et bon dimanche,

je realise un site en css et c est vieux comme lemonde vous allez me dire mais je n arrive pas a regler les probleme acev ie et firefox ...
sous ie ca tourne et sous firefox decallage ??
est que trop de div dans les div ??
est ce une histoire de relative, absolue ??
merci de votre aide je suis paumé ;..j ai lu les ressources sur ce site mais suis pomée qd meme ...
http://masprod.club.fr/index.htm


merci pour votre aide..si vous pouvez me mettre sur la voie

sam.

EDIT par Raphaël :
- bonjour à toi Smiley smile
- merci de lire les Règles et d'utiliser les boutons de CODE pour les codes
- merci d'éviter de poster des codes de 3000km de long !!!! Donner une url plutôt

Modifié par Raphael (20 Feb 2005 - 14:27)
Peux tu utiliser les balises [ code] [/ code] pour mettre ton code (sans les espaces), et également penser à virer ce qui est pas très important, parce que là, ca fait BEAUCOUP de code à lire!

Pense également à venir te présenter
désolé ...
une erreur de debutant on va dire ...
suis tout nouveau ici et vais de suite me presenter ...
si y aquelqu un pour m aider ..
ce st vrai dans la precipitation j ai oublié le bouton code et de nettoyer un peu tout cela ...
sam. Smiley decu
bon j avance mais est ce la bonne direction ??
j ai mis les
.head1 .head2 .head3 
puis
.gauche 
et
.centre 
en position absolue ...
mais cela reste flou pour le conteneur centre et pour que ce conteneur reste etirable et que le footer suive juste derierre ..
en gros faut mettre les conteneurs principaux en absolute en callant tout au pixel pres ??
si vous pouvez m aider ???
y ti qqun pour venir a ma rescousse ?.?
sam.
Bonjour,

Il y un soucis avec ton code à la fin, c'est probablement ton compteur de visites qui rajoute des morceaux de code. Je te conseille aussi de mettre un doctype, dans bien des cas IE se comportera mieux.
Autre conseil il est préférable de faire tes tests avec un navigateur respectueux des normes comme Firefox ou Opera et ensuite voire ce que cela donne avec IE et faire les ajustements s'il y a besoin.

Pour ta page, tu n'as probablement pas besoin d'autant de divs, je te conseille de te limiter à 4 ou 5 id pour tes divs qui regrouperont les éléments de ta page, par exemple #entete, #menu, #contenu, #themes, #pied. En utilisant des vrai titres à la place des class="titre" tu simplifierais encore ton code.

A titre personnel je préfère utiliser des flottants (float) pour une telle mise en page plutôt qu'une position absolue.
Dans le principe:

#entete{}

#menu{}

#themes{
width:xxxpx;
float:left;}

#contenu{
margin-left:xxxpx;}

#pied{
clear:both}

Voir ce post entre autres:
http://forum.alsacreations.com/topic.php?fid=4&tid=576&p=2
Et quelques autres en utilisant la recherche.
merci igor,
a écrit :
Il y un soucis avec ton code à la fin, c'est probablement ton compteur de visites qui rajoute des morceaux de code.

en fait je n ai pas de compteur de visite ?.
Coté navigateur je faisais l inverse j ai tout fait sous ie et sans en regardant dans Firefox que J ai vu la catastrophe ...pour quoi optimiser dabord sous Opera ou Firefox et ensuite IE ??y a t il une raison particuliere a cela ??
Bon par contre je viens de lire l article dans se site sur le coté pratique et l interet de la position absolue ...c est pour cela que je voulais essayer ...
Le clear:both ca sert a quoi exactement ??
je te remercie pour ta reponse et me replonge ds tout cela ...
merci IGOR
sam
a écrit :
pour quoi optimiser dabord sous Opera ou Firefox et ensuite IE

IE est très laxiste, au contraire des navigateurs plus respectueux des normes, donc en testant d'abord dans ces derniers, en codant avec rigueur on s'assure des pages identiques sur la majorité des navigateurs, alors qu'avec IE d'abord on s'aperçois qu'il y a plein de chose à reprendre. Smiley cligne
Penses aussi au doctype dont l'absence n'est pas sans rapport avec différences d'affichage entre les navigateurs:
http://del.icio.us/Igor/dtd
http://forum.alsacreations.com/faq/#item39
a écrit :
Le clear:both ca sert a quoi exactement ??

C'est expliqué dans la faq : http://forum.alsacreations.com/faq/#item6 Cette propriété appliquée à un élément (#pied par exemple) permet de le forcer à se positionner à la suite du bloc flottant qui le précède, car un flottant sort du flux. Dons si ton contenu est plus court que ton bloc flottant, ton pied irait se positionné au milieu de ta page à la suite de ton contenu.

Bon courage
merci pour ta reponse complete igor Smiley cligne
j ai reglé le probleme du doctype ..
par contre penses tu qu avec ma mise en page avec des elements graphiques precis >> voir lemenu de gauche ... un menu flottant sera adaptable la dessus ??
merci pour tes liens aussi ...
j ai l impression que les CSS sont plus compliquées que prevu ..
Par contre, ce qui est delicat c est que l on optimise une page pour firefox puis on essaie de la faire tourner au mieux sous IE alors qu IE est encore aujourd hui le navigateur le plus utilisé ....
Qu attend IE pour se mettre a la page ??
merci pour ton aide et ta disponibilité ..
sam..
dans mon code quelle serait pour toi les div a eliminer pour simplifier tout cela ??
sam.
a écrit :
Par contre, ce qui est delicat c est que l on optimise une page pour firefox puis on essaie de la faire tourner au mieux sous IE alors qu IE est encore aujourd hui le navigateur le plus utilisé ....

Non on optimise pas pour Firefox ni pour un autre, on produit un code conforme pour tous les navigateurs.
Le mieux comme le disais Laurent Denis il y 2 minutes:

Laurent Denis a écrit :
Finalement, mieux vaut développer d'abord pour le validateur, puis pour les navigateurs cligne

http://forum.alsacreations.com/newreplies.php#p19503
ok ..
a écrit :
Finalement, mieux vaut développer d'abord pour le validateur, puis pour les navigateurs cligne

c est logique sans aucun doute mais commeny developper pour le validateur ..quelle est la marche a suivre ...comment peut on verifier son code pas a pas ??existe til des oultils pour cela ou est ce uniquement du cas par cas et du bidouillage ...?
sam
Coder avec rigueur et passer de temps en temps au validateur qui fourni des explications sur les erreurs soumises. Bien souvent une erreur en produit d'autres, en corrigeant pas à pas on y arrive... et petit à petit on ne reproduit pas les même erreurs.
Dans les ressources tu as plusieurs validateurs de code:
http://forum.alsacreations.com/topic.php?fid=7&tid=7

Attention toutefois, la validité formelle d'un code n'en n'assure pas sa qualité, c'est au concepteur d'utiliser les bons éléments pour le sens pour lequel ils sont faits.

En résumé, je pratique d'abord en codant correctement la partie html, en m'assurant de sa validité, de sa conformité avec le doctype que je choisi selon mes besoins. Ensuite j'évalue ma page et repère les regroupements que je pourrais opérer (entete, contenu, menu, pied) qui me donnent les id que je vais pouvoir utiliser. Je les applique à mon code html et je rédige ma feuille de style pour placer ces différents éléments dans ma page. Smiley ravi
encore merci ...
c est l apprentissage ....
je vais bosser sur tout cela et des que cela avance bien je reviens vous voir ...
merci de ton aide et bonne soirée,
sam.
IGor tu dis :
A titre personnel je préfère utiliser des flottants (float) pour une telle mise en page plutôt qu'une position absolue. 
Dans le principe:

#entete{}

#menu{}

#themes{
width:xxxpx;
float:left;}

#contenu{
margin-left:xxxpx;}

#pied{
clear:both}


ok sur le principe mias dans la pratique j ai forcement besoin d autres div qui servent de conteneur pour caler mon texte en haut, mon menu de gauche et mes photos dans le contenu texte ....?.
Ou alors y a un principe que je n ai vraiment pas saisi ??
saM
Administrateur
masprod a écrit :
IGor tu dis :

Salut,

Merci de ne pas utiliser les balises de CODE pour faire des citations Smiley smile
Il y'a un bouton "citer" qui est justement fait pour ça (en haut à droite du message à citer) Smiley cligne
désolé raphael ...
bonsoir raphael erreur de ma part voulais faire un citer et j ai fait un code ...
bonne soirée et merci pour avoir créé ce site bien utile pour un novice comme moi...
sam
a écrit :
ok sur le principe mias dans la pratique j ai forcement besoin d autres div qui servent de conteneur pour caler mon texte en haut, mon menu de gauche et mes photos dans le contenu texte ....?.
Ou alors y a un principe que je n ai vraiment pas saisi ??


Tu as des éléments qui se suffisent à eux-mêmes, les éléments de type bloc.
Si tu as par exemple un menu constitué d'une liste tu peux de dispenser de l'entourer d'une div, ul étant déjà un élément de type bloc.
Il suffit de donner les bonnes marges (margin et padding) pour les agencer la où tu le souhaites.
La structure des balises : bloc et en-ligne
merci Igor,
j avais lu cet article tres interessant ..
par contre en ce qui concerne le placement de photos ou d element graphiques particuliers y a que les div conteneur comme solutions ??
merci //
sam/
a écrit :
... en background peut-être?

a dit mister Igor.
mais si tu veux du texte d abord que cette image se cale juste apres le texte quelque soit la longueur de cekui ci t es bien obligé de mettre un conteneur id ou class ??
dans le cas ou y a du texte puis image puis texte ...
c est la seule possibilité je pense ...
t en penses quoi ??
je commence a me melanger les pinceaux plus je comprends moins je comprends bon plus rien est clair arfff !!
sam/