28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Empecher les marges fantômes en utilisant la balise div ?

Bonjour à tous et à toutes !!

Je retape actuellement toutes mes créations en valide xHTML et css 2.
Je subis un petit problème (le même sous Firefox que sous i.e.)

voila mon code css : 
.global {
				position:absolute;
				left: 50%;
				top: 0px;
				width: 800px;
				height: 600px;
				margin-left: -400px; /* moitié de la largeur */
				border: 1px solid #333;
				background-color: #eee;
			}

et mon code html : 
<div class="global">
			<div style="width:800px; height:101px; margin:0px; padding-top:0px; padding-left:0px">
				<div style="float:left;">
					<img src="images/logo.png" alt="" />
				</div>
				<div style="float:left;">
					<img src="images/name.png" alt="" />
				</div>
				<div style="float:left; width:245px; height:101px; background-image:url(images/3.png);"></div>
				<div style="float:left;">
					<img src="images/version.png" alt="" />
				</div>
			</div>

**Ici** Il y a un saut de ligne automatique.

			<div style="width:800px; height:40px; margin:0px; padding-top:0px; padding-left:0px">
				<div style="float:left; width:614px; height:40px; background-image:url(images/6.png);">
					<!--input*-->
				</div>
				<div style="float:left;">
					<img src="images/8.png" alt="" />
				</div>
				<div style="float:left;">
					<img src="images/9.png" alt="" />
				</div>
			</div>


Et moi, j'aimerais le supprimer ce saut de ligne.

Merci d'avance Smiley cligne

Bonne soirée !!
FluidBlow.

Je vous joint une petite image, ça sera plus clair :
upload/6498-template15.jpg
Modifié par FluidBlow (11 Nov 2006 - 23:04)
Bonsoir,

Y'a moyen d'avoir une page en ligne de ton site ? En général je me contente de tester chez moi à partir du code, mais là...
...j'accroche pas aux styles déclarés dans le balisage. Pourquoi ne pas mettre tout ça dans la feuille de style ?


Concernant ton problème, sans faire de test je n'en suis pas certain, mais c'est peut-être un lié à la fusion des marges (de blocs adjacents).

Un peu de lecture :

* textes traduit du w3c : http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins
* tests de mpop : http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html


Si tu trouves les blocs fautifs, ça se règle à coup de paddings ou bordures d'un pixel. Smiley cligne
Modifié par Smiley neko (17 May 2006 - 21:25)
Bonsoir,

je viens de l'uploader :http://fluidblow.free.fr/kits/Red%20face/html/index2.html

J'ai déja essayer de mettre à 0 les border ou les margin padding mais cela ne fonctionne pas, peut-etre m'y suis-je mal pris ??

Je vous redonne mon html en entier :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>VOTRE SITE.com</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<style type="text/css">
			body {
				color: #5a5a5a;
				font-size: 11px;
				font-family: tahoma;
				text-decoration:none;
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
			}

			.global {
				position:absolute;
				left: 50%;
				top: 0px;
				width: 800px;
				height: 600px;
				margin-left: -400px; /* moitié de la largeur */
				border: 1px solid #333;
				background-color: #eee;
			}
			
			.other {
				position:relative;
				margin-left: 0px;
				margin-top: 0px;
				margin: 0px 0px 0px 0px;
				padding-top: 0px;
				padding-left: 0px
				padding: 0px 0px 0px 0px;
				border: 0 0 0 0;
			}
		</style>
	</head>
	<body>
		<div class="global">
			<div style="float:left;">
				<img src="images/logo.png" alt="" />
			</div>
			<div style="float:left;">
				<img src="images/name.png" alt="" />
			</div>
			<div style="float:left; width:245px; height:101px; background-image:url(images/3.png);"></div>
			<div style="float:left;">
				<img src="images/version.png" alt="" />
			</div>
			<div style="float:left; width:614px; height:40px; background-image:url(images/6.png);">
				<!--input*-->
			</div>
			<div style="float:left;">
				<img src="images/8.png" alt="" />
			</div>
			<div style="float:left;">
				<img src="images/9.png" alt="" />
			</div>
			<div class="other" style="float:left; width:800px; height:23px;"><img src="images/10.png" alt="" /></div>
			<div style="float:left; width:800px; height:14px;"><img src="images/11.png" alt="" /></div>
			<div style="float:left; width:180px; height:294px; background-image:url(images/12.png);">
				...::: MENU ::....
				<br /><br />
				<div style="width:150px; height:250px; " class="scrollable">
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
					<a href="">-- Lien ici --</a><br /><br />
				</div>
			</div>
			<div class="other" style="float:left;">
				<img src="images/14.png" alt="" />
			</div>
			<div class="other" style="float:left; width:446px; height:294px; background-image:url(images/12.png);">
				<!--texte-->
			</div>
			<div class="other" style="float:left;">
				<img src="images/16.png" alt="" />
			</div>
			<div class="other" style="float:left; width:100px; height:294px; background-image:url(images/17.png);">
				<!--Pub-->
			</div>
			<div class="other" style="float:left;">
				<img src="images/18.png" alt="" />
			</div>
			<div style="float:left; width:800px; height:17px;"><img src="images/19.png" alt="" /></div>
			<div style="float:left; width:800px; height:71px;"><img src="images/20.png" alt="" /></div>
			<div style="float:left; width:800px; height:40px; background-image:url(images/23.png); text-align:center;">
				<img src="images/copyright.png" alt="" />
				<a href="http://fluidblow.free.fr"><img src="images/22.png" alt="" style="border:0;" /></a>
			</div>
		</div>
	</body>
</html>


Merci à tous de m'aider Smiley smile

Bonne soirée.
FluidBlow
Modifié par FluidBlow (17 May 2006 - 21:33)
Je répète sinon autrement ce que j'aimerais faire : je voudrais utiliser les balises div pour créer des lignes d'images, par exemple une image de 100x50 une autre à coté de 50x50 un background de 500x50 et de faire une autre ligne d'images les unes à coté des autres mais en dessous de la première ligne d'image par exemple une ligne d'image de 650x30 mais sans espace entre les deux lignes d'images

exemple en symbol

Premiere ligne d'images : __ _ _____
Deuxième ligne d'images : _________

et donc qu'il n'y ait pas d'espace entre le ligne 1 et la ligne 2.

Merci d'avance.
Bonsoir !
Fluidblow.
Hello Fluidblow,

Sans rentrer dans la discussion de la qualité de construction du code**, je crois me rappeller que j'avais été confronté à un problème similaire de marges fantomes.

A force de chercher, j'avais réalisé que cela venait des images.

J'avais trouvé une solution, qui à défaut d'être élégante, était efficace : 


img {display:block;}


A ajouter dans ton css global.

Bon courage,
Aymeric.

**PS : essaies quand même de faire des efforts dans ta construction css et évite de donner des styles dirèctement aux éléments dans la page. Smiley ohwell
Modifié par AymericJ (18 May 2006 - 09:16)
Il me semble avoir lu iln'y a pas si longtemps un article a propos d'un bug d'IE qui interprèterai des retours chariots entre des divs comme des espaces...
JulesB a écrit :
Il me semble avoir lu iln'y a pas si longtemps un article a propos d'un bug d'IE qui interprèterai des retours chariots entre des divs comme des espaces...


Ce n'est pas mon problème mais merci quand même ! Smiley smile

Je teste de suite la solution de AymericJ ! Merci à toi !
Modifié par FluidBlow (18 May 2006 - 17:09)
Ce qui est bizarre, c'est que ca le fait sous FF, le display : block sert normalement pour resoudre ce probléme sous IE, parce que celui ci laisse une marge inferieur pour les lettres tel que "p", "q" et autres lettre a "queues".
WAAAAAAAAAAAAOOOOOOOUUUUUUUUUWWWWWWW Smiley cligne Smiley smile Smiley biggrin Smiley eek Smiley lol Smiley langue Smiley ravi Smiley murf Smiley biggol AHhhhhh !!!!

C'est génial, sa fonctionne parfaitement merci beaucoup, en plus quelle rapidité !!

Merci encore à tous et surtout à AymericJ !!
FluidBlow.
Modifié par FluidBlow (18 May 2006 - 17:15)
TheReverendEVIL a écrit :
Ce qui est bizarre, c'est que ca le fait sous FF, le display : block sert normalement pour resoudre ce probléme sous IE, parce que celui ci laisse une marge inferieur pour les lettres tel que "p", "q" et autres lettre a "queues".



Oui, mais la le problème était bel et bien sous Firefox, ce qui m'étonnait vraiment !
Mais il n'y a plus de problème de toutes façons.
Content d'avoir été utile.

Tu peux donc mettre [RESOLU] dans le titre de ton sujet? Smiley cligne

Ce serait bien au passage de renommer le sujet du coups, pour un truc plus en rapport avec le problème réel.

++
Aymeric
FluidBlow a écrit :



Oui, mais la le problème était bel et bien sous Firefox, ce qui m'étonnait vraiment !
Mais il n'y a plus de problème de toutes façons.


Bizarre en effet...oO
Enfin, parfois, on des surprises, c'est ce qui fait les petites joies de la programmation. Smiley lol
TheReverendEVIL a écrit :


Bizarre en effet...oO
Enfin, parfois, on des surprises, c'est ce qui fait les petites joies de la programmation. Smiley lol


Les joies, mais aussi les "désarrois", car qui dit joies, dit décéptions Smiley cligne
Sujet clos
Aller à