28173 sujets

CSS et mise en forme, CSS3

[résolu] Sans dessus-dessous

Bonjour,

Débutant en développement web je me suis lancé dans l'univers css en souhaitant - des plus naïvement - que tout irait bien Smiley smile

De recherches en farfouilles il m'est arrivé de frôler du bout des doigts quelques solutions bienheureuses, mais il advient toujours un moment où tout s'embrouille !

J'en oublie cependant de vous présenter mes biens modestes soucis qui s'illustrent à l'adresse suivante :

http://test.amiralys.com/

Sous IE 7 (n'ayant pas le 6 je ne sais vraiment ce à quoi m'attendre), le site est grosso modo dans mes attentes. En fait, à droite du <div> orange comprenant "Matériel Agricole et Espaces Verts" se trouve un autre <div> coloré en vert et comprenant un futur cadre de recherche.

Mon pb est, vous l'aurez compris, de faire apparaître ce div "vert" à sa place. J'ai tenté plusieurs solutions mais sans résultat, il semblerait... timide ?

En positionnement absolue il n'apparait plus et placé dans le flux de la page il se décale d'autant vers le bas que la hauteur du div orange (occasionnant ainisi un décalage global).

Sous Firefox 2, c'est la dégringolade, le "container" ne laisse pas apparaître ses contours, certains div se décalent (pb de gestion du padding ?).

Bref, vous l'aurez compris, de votre aide et votre sagesse grand besoin j'ai !

Merci.
Sig.
Modifié par Sig. (24 Apr 2007 - 11:30)
<html>
<head>
<title>Jean-Bouvier.com | Matériel Agricole & Espaces Verts</title>

Pas besoin d'aller chercher plus loin la cause principale de tes soucis : tu n'as pas de Doctype, ta page est donc interprétée par chaque navigateur à sa sauce, plutôt que selon les mêmes normes.

Potasse cet article :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Corrige ta page en fonction. Corrige également les erreurs de syntaxe HTML et CSS s'il y en a (utiliser les outils de validation du W3C). Une fois que tout ceci sera fait, on sera sur des bonnes bases, et on pourra recommencer à parler de positionnement CSS. Smiley cligne
Modifié par Florent V. (23 Apr 2007 - 15:52)
Salut,

Ta page HTML n'a pas de Doctype, du coup le navigateur ne sait pas quelle version de HTML il faut utiliser. De plus, le Doctype peut influencer sur les comportement de certains éléments de la page.
Ici ton conteneur global fait 1000px (pas terrible pour les 800x600), ta colonne de gauche fait 280px et ton contenu fait 720px. En faisant flotter les div à gauche, tu te disais peut-être que ca allait rentrer pile dans l'espace. C'était sans compter sur les padding et margin de tes blocs.

En jouant sur ces marges, tu devrais réussir à bien caller les blocs.

Par contre je te conseilles de reprendre tes bases en HTML... Pour preuve, ton menu de gauche est complétement dépourvu de sémantique logique :


<div class="menu">
	Accueil
	<br />Présentation générale 
	<br />Nos magasins 
	<br />Agricole
	<br />    > New Holland 
	<br />    > Elevage  
	<br />    > Fenaison
	<br />    > Cultures 
	<br />Espaces verts 
	<br />Annonces 
	<br />Inscription à notre NewsLetter
	<br />Contactez nous						
</div>


Pour te mettre dans le bon sens je dirais juste qu'un menu de ce type est une liste non ordonnée...
Bonjour à vous deux et merci pour ces réponses,

Concernant la definition du Doctype, c'est en effet un oubli ridicule Smiley cligne
J'ai pu modifier les divers padding et ça m'a l'air pas mal du tout sous IE7.

Concernant Firefox, le header semble être passé en arrière plan ?

Ps : en ce qui concerne le menu, il me permettait juste d'avoir un rendu visuel de la hauteur prise. Il ne s'agit en aucun cas du véritable menu prévu à cet emplacement Smiley cligne

Pour la taille de 1000, c'est qu'à la base le site est prévu en 1024*768 et non en 800*600.
Sig. a écrit :
Pour la taille de 1000, c'est qu'à la base le site est prévu en 1024*768 et non en 800*600.

Dommage que le site ne soit pas adaptable à toutes les résolutions (il y a un tutoriel sur ce sujet sur Alsacréations, ça vaut peut-être le coup d'y jeter un oeil Smiley smile ). Il y a tout de même 10-15% d'utilisateurs en 800x600.

De plus, si tu veux que ça soit compatible 1024x768, 1000px c'est trop large. Faire le pari que la barre de défilement et les bordures de la fenêtre tiendront dans les 24px restant, quels que soient le système d'exploitation, le gestionnaire de fenêtre et les règlages de l'utilisateur... c'est plutôt risqué. Sans parler du fait que les utilisateurs ne maximisent pas systématiquement la fenêtre (par exemple sur Mac, où il est presque impossible de donner la largeur totale du bureau à la fenêtre du navigateur, mais aussi sur Windows parfois...).

Une dimension plus sure est 980px de large. 990px si on veut pousser, mais pas plus.

N'oubliez pas que tous les utilisateurs n'ont pas les mêmes logiciels, systèmes d'exploitation, règlages et habitudes d'utilisation que vous.
Ah !

oui en effet Smiley smile

Je m'occupe de ça de suite, concernant firefox vous auriez une solution ?
Olà,

Je ne comprends pas ce que m'indique la page de validation des commentaires Smiley decu

Et concernant l'affichage Firefox, aurai-je placé une balise non prise en compte pour que le header passe en arrière plan ?

Dois-je placer en position absolue le div du corps afin qu'il laisse apparaître toute la partie haute ?
Bonjour,

Commence par mettre ta balise (remarque les double quotes autour des attributs http-equiv et content) : 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
entre 
<head></head>
.

Pas mal d'erreurs devraient disparaître comme par magie ... Smiley cligne

Bonne continuation.
Romain
Smiley smile

Merci.

Avec rectif, il m'indique encore 2 erreurs que voici :

Error Line 38 column 25: invalid comment declaration: found name start character outside comment but inside comment declaration.
<!----------------------CORPS------------------------>

Error Line 70 column 53: invalid comment declaration: found name character outside comment but inside comment declaration.
<!----------------------FOOTER----------------------->

Où pourrai-je trouver des informations sur la manière d'écrire des commentaires directement valides ?
Essaye d'ajouter un espace avant et après le contenu de tes commentaires ; comme suit :

<!---------------------- CORPS ------------------------>

<!---------------------- FOOTER ------------------------>
Ben ouais quoi, c'est pas comme si les commentaires HTML avaient une syntaxe normalisée qu'il serait préférable de respecter... Smiley rolleyes
This Page Is Valid HTML 4.01 Transitional!


Merci bicoups Smiley smile



Ne reste que le pb de compatibilité avec Firefox 2 ainsi qu'avec Safari même si c'est moins gênant pour le second.
De même si vous avez des liens qui expliquent quelles sont les balises qui fonctionnent bien avec tout ce petit monde et celles qu'il faut absolument éviter.
a écrit :
Il ne faut pas de suite de tirets consécutifs à l'intérieur d'un commentaire SGML.


a écrit :
Ben ouais quoi, c'est pas comme si les commentaires HTML avaient une syntaxe normalisée qu'il serait préférable de respecter... Smiley rolleyes


Je sors ... Smiley confused (en même temps jamais essayé de faire ce genre de choses avec les commentaires).
yodaswii a écrit :
Je sors ... Smiley confused (en même temps jamais essayé de faire ce genre de choses avec les commentaires).
Quelques coups de fouet suffiront. Smiley lol
Sig. a écrit :
Ne reste que le pb de compatibilité avec Firefox 2 ainsi qu'avec Safari même si c'est moins gênant pour le second.

C'est le problème de la bordure du conteneur global qui n'apparait pas ? M'est avis que tu auras exactement le même avec Opera, Konqueror, etc. Bref, tous les navigateurs qui ne sont pas Internet Explorer pour Windows.

Tu as semble-t-il un problème de dépassement de flottants. Tous les blocs enfants de ton conteneur global sont flottants (beaucoup trop de flottants, d'ailleurs... normalement, un ou deux flottants à tout casser ça devrait suffire pour ce type de mise en page), et du coup sortent du flux. Résultat : ton conteneur global n'a plus de contenu, et a donc une hauteur de 0px. D'où la ligne bleue de 2px de haut tout en haut de la page.

Explications et solutions :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Modifié par Florent V. (24 Apr 2007 - 10:35)
La solution la plus appropriée semble être l'ajout d'un "spacer" dans ce cas là. J'ai testé avec l'overflow mais des barres de défilement horizontales et verticales apparaissaient sous IE et FF.

Merci pour vos réponses, et pour les liens. Le prochain site sera un peu plus conforme un peu plus tôt Smiley cligne

Sig.
Sig. a écrit :
La solution la plus appropriée semble être l'ajout d'un "spacer" dans ce cas là. J'ai testé avec l'overflow mais des barres de défilement horizontales et verticales apparaissaient sous IE et FF.

Pas avec un overflow: hidden.
Sujet clos
Aller à