28172 sujets

CSS et mise en forme, CSS3

Problème espace design

Bonjour à tous,
Jai un problème, je n'arrive pas à supprimer l'espace en bas de mon design.
J'avais également un espace entre le haut de ma page et mon design mais j'ai pu le supprimer en remplaçant:

<body topmargin="5" bgcolor="#D1D1D1"> par
<body topmargin="0" bgcolor="#D1D1D1">

J'aimerais savoir s'il n'existerait pas un script pour également supprimer l'espace qui se trouve sous mon design.
Voir site: site

J'aimerais donc supprimer cet espace ci: http://img329.imageshack.us/img329/2734/alsaft8.jpg


Merci
Modifié par Thibaud89 (22 May 2008 - 16:08)
Bonjour,

Toi, tu devrais te pencher sur les CSS.
Les attributs HTML que tu utilises (topmargin, bgcolor) sont dépréciés, et sont à remplacer par les propriétés CSS équivalentes (et heureusement plus puissantes).
Et on utilisera les styles externes (dans un fichier externe, par exemple un styles.css) plutôt que les styles inline insérés directement en valeur de l'attribut HTML style.

Edit: ah oui, et aussi se pencher sur les bases de HTML, sur ce à quoi devrait ressembler une base de page HTML bien formée, etc.

Bon, pour tout dire: ya du boulot. Smiley cligne
Modifié par Florent V. (25 Mar 2008 - 22:38)
Salut,

Essaye les propriètés suivantes : 


padding-bottom:0px;
margin-bottom:0px;


a++
Désolé mais j'ai essayé comme tu m'as dis mais soit je le fait mal soit çà ne va pas.
J'ai procédé comme suit:
J'ai mis entre <head> et </head>: 

<style type="text/css">
body {
padding-bottom:0px;
margin-bottom:0px;
}
</style>

Cela n'à rien arrangé.
Y a-t-il une autre manière de procéder ?

Merci

EDIT: A Benjamin D.C.: c'est fait Smiley cligne
Modifié par Thibaud89 (29 Mar 2008 - 16:04)
re,

Si tu a utilisé ceci :
a écrit :
<body topmargin="0" bgcolor="#D1D1D1">


tu pourrai essayer aussi de mettre cela :

<body topmargin="0" bottommargin="0" bgcolor="#D1D1D1">


tchouss ++
De mon côté sous Firefox un simple 
body {
	margin: 0;
	padding: 0;
}
règle le problème. On peut alors supprimer l'attribut topmargin utilisé dans le code HTML, il devient inutile (car redondant).

Bien sûr ce code CSS doit s'appliquer à la page générale et pas à la page appelée par une iframe.

Voilà pour ce problème précis (du moins si les autres navigateurs ne sont pas plus capricieux. Par contre, il y a un problème plus global de qualité du code (HTML et CSS peu maitrisés, et donc rendu très peu fiable d'un navigateur à l'autre). Apprendre HTML et CSS ne serait pas du luxe... mais ça dépendra des enjeux (s'il s'agit uniquement de réaliser ce site, un apprentissage complet sera sans doute excessif).
J'ai essayé dans un autre site que j'ai fait et çà marche mais pas dans celui-ci.
Ce que j'ai fait:
J'ai créer une feuille de style css (qui se nomme "format.css") et j'y ait mit le code suivant que tu m'as donné:

body {
	margin: 0;
	padding: 0;
}


ensuite, et ce sur toutes mes pages, j'ai ajouté entre les balises <head> et </head>:

<link href="format.css" rel="stylesheet" type="text/css">


En résumé, j'ai donc:
Ma page index se présente donc comme ceci:

<html>
<head>
<title>Page d'accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="format.css" rel="stylesheet" type="text/css">
</head>
<body padding-bottom="0" margin-bottom="0" bgcolor="#D1D1D1">
<center>
<img src="images/bananimee.gif" height="149" width="1024"><img src="images/barrebouton.jpg" height="41" width="1024"><img src="images/zonetexte.jpg" height="791" width="1024"><img src="images/baspage.jpg" width="1024" height="43">

<iframe src="page.htm" style="position: absolute; width: 940px; height: 845px; z-index: 2; left: 220px; top: 155px;" name="visu" id="visu" frameborder="no" scrolling="no"></iframe>

</center>
</body>
</html>


et une feuille de style (format.css) dans laquelle se trouve:

body {
	margin: 0;
	padding: 0;
}


Mais quand j'actualise le résultat, rien ne change... Smiley decu
Modifié par Thibaud89 (29 Mar 2008 - 20:43)
Thibaud89 a écrit :
Mais quand j'actualise le résultat, rien ne change...

Alors il y a sans doute une erreur dans la manière dont tu appelles ta feuille de styles. Je pourrais t'en dire plus en voyant la page, mais sur la page en ligne (lien que tu as indiqué dans ton premier sujet) je ne vois pas un seul <link href="format.css" rel="stylesheet" type="text/css">. C'est normal?

En tout cas je peux te garantir que c'est censé marcher. La modification faite «à la volée» avec Firebug marche correctement.
Florent V. a écrit :

mais sur la page en ligne (lien que tu as indiqué dans ton premier sujet) je ne vois pas un seul <link href="format.css" rel="stylesheet" type="text/css">. C'est normal?


Oui c'est normal, je ne l'ai pas remise en ligne.
Je vais quand même regarder s'il n'y a pas effectivement une erreur dans la manière dont j'appelle la feuille de styles.

Merci encore pour votre aide.
Non, j'ai regardé et je ne vois vraiment pas où est le problème.
En fait, je ne pense pas que mon problème vienne de la feuille de style car çà marche pour la "marge supérieure". Mais le problème subsiste pour la "marge inférieure".
Pourrais-tu regarder svp.
J'ai tout mis sur internet.

l'adresse:
site
Modifié par Thibaud89 (22 May 2008 - 16:09)
Thibaud89 a écrit :
Je viens de faire vérifiez ma page (...)
et ils mettent qu'il y a un problème dans l'écriture de ceci et tout s'expliquerait mais je ne vois pas où ?
<link href="format.css" rel="stylesheet" type="text/css">

Je ne vois pas d'erreur signalée concernant cette ligne, qui me semble correcte (en HTML 4.01).

Par contre tu as un problème avec tes styles. Le fichier format.css contient:
body {
	margin-right: 0 cm;
        margin-top: 0 cm;
}

Les deux lignes sont fausses (il ne faut pas d'espace entre la valeur et l'unité). Tu peux les corriger ainsi: 
body {
	margin-right: 0cm;
        margin-top: 0cm;
}
ou tout simplement ainsi: 
body {
	margin-right: 0;
        margin-top: 0;
}


Mais quid de la remise à zéro de margin-bottom? De plus, suivant les navigateurs l'espace de 8px entre le bord de la fenêtre et le contenu vient:
- soit d'un body {margin: 8px;};
- soit d'un body {padding: 8px;}.

Pour tout bien remettre à zéro, il faut donc utiliser: 
body {
	margin: 0;
	padding: 0;
}

C'est bien le code que je t'avais donné, et que tu disais avoir mis dans ta feuille de styles format.css. Visiblement, ce n'est pas le cas.
cela ne fonctionne toujours pas.
A mon avis, ton code est bon mais il y a sans doute quelque chose d'autre qui ne va pas.

mon site:
site

la feuille de style:
site
Modifié par Thibaud89 (22 May 2008 - 16:10)
Bah chez moi ça fonctionne avec Firefox 3, Firefox 2, Opera 9 et Konqueror 3.5.
Ensuite, je me rend compte que ça ne fonctionne correctement qu'en résolution 1280px de large, à cause d'une mauvaise utilisation du positionnement absolu. Je te conseille de réduire la largeur de la fenêtre du navigateur, c'est assez saisissant.

Conseils en vrac:
- Option 1: apprendre HTML et CSS de manière systématique et rigoureuse en reprenant depuis la base (parce que là c'est vraiment pas acquis...).
- Option 2: confier le travail à un professionnel.
Ok, moi j'utilise IE 7 c'est peut-être pour çà.
Je vais essayé de comprendre le problème à partir de la résolution 1280px

Encore merci pour tous ces renseignements et l'aide que tu m'as apporté.

A+
Sujet clos
Aller à