18041 sujets

Questions générales et questions de débutants

Positionnement CSS3 sans tableau

Bonjour bonjour tout le monde.
Voilà je suis débutant en positionnement CSS3 et je bute sur l'utilisation de la propriété inline-block.

J'aimerai créer un tableau 2x2 sans utiliser table juste en css

<div id="haut_gauche">
	gfhfgh
</div>
<div id="haut_droit">
	hfgrserf
</div>
<div id="bas_gauche">
	rggrjkuu
</div>
<div id="bas_doite">
	kuyyukkukukkyjttjytjt
</div>


voilà pour le code html et voilà pour le css:

body {
	margin:auto;
}

#haut_gauche {
	width: 50%;
	border:solid 1px;
}
#haut_droit {
	width:50%;
	margin: 0 0 0 10px;
	display:inline-block;
	border:solid 1px;
}
#bas_gauche {
	width: 50%;
	border:solid 1px;
}
#bas_doite {
	width: 50%;
	border:solid 1px;
}
Administrateur
etoon a écrit :
Voilà je suis débutant en positionnement CSS3 et je bute sur l'utilisation de la propriété inline-block.

Bonsoir,

En fait, inline-block n'est pas du CSS3, mais du CSS2.

Ton problème est dû à un espace généré entre les blocs (un espace nommé "whitespace") et qui s'ajoute dans ton calcul. Le total fait donc plus que 50% + 50%

(De plus, les borders s'ajoutent elles aussi à la largeur des boites.)

Toutes les explications ici : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Bonne chance Smiley smile
Modifié par Raphael (04 Oct 2013 - 23:00)
Non rien à faire décidément je n'arrive pas à faire 2x2 blocs... Désolé

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<style>
		html {font-size: 62.5%;}
		body {
	        margin: 0;
	        padding: 10px 50px;
	        background: #F1EFE2;
	        font-size: 2em;
		}
		h1 {
			margin-top: 20px;
			margin-bottom: 40px;
			color: #789;
			text-align: center;
			text-shadow: 1px 1px #fff;
		}

		#main {
	    	width: 100%;
	    	background: #cde;
		}
		#main p {
    		display: inline-block;
			*display: inline; zoom: 1; /* ie6 ie7 hack */
    		vertical-align: top;
    		width: 200px;
    		background: #abc;
    	}
		#main .one {
    		background: #abc;
    	}
    	#main .two {
    		background: #fab;
    	}
    	#main .three {
    		background: #efa;
			display: block;
			margin: 0px 0px;
    	}
    	#main .four  {
    		background: #afb;
			display:block;
    	}
		
	</style>
	<title>white-space et inline-block</title>
</head>
<body>
<h1>white-space et inline-block</h1>

<div id="main">
	    <p class="one">Lorem Elsass ipsum réchime amet</p>
		<p class="two">kartoffelsalad wie baeckeoffe dolor auctor, flammekueche jetz gehts los</p>
		<p class="three">rossbolla schpeck Heineken yeuh. gal hopla</p>
		<p class="four">choucrojhyyjjjjjjjjjjjjjjute !</p>
    </div>

	
</body>
</html>
salut,
si tes données HTML sont véritablement des données tabulaires alors il serait plus judicieux d'utiliser un réel tableau HTML. Si cependant ce n'est que de la mise en page, il y a différentes manières de procéder. Tu pourrais aussi passer par un "display:table-cell".
Pour faire quand même avec un "inline-block" et avec ton exemple, comme cela t'a été expliqué, il existe des espaces entre tes <div> dans ton code qui se répercutent sur le rendement. Ajouté à cela les bordures qui s'ajoutent aux dimensions, cela fausse tes calculs.
Pour le dernier point, tu peux éviter ça en changeant le modèle de boîte appliqué en passant la propriété "box-sizing" à "border-box". Tu peux aussi feindre les bordures avec un "box-shadow".

	<div></div><!--
 --><div></div><!--
 --><div></div><!--
 --><div></div>



div {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display:inline-block;
	vertical-align:top;
	width:50%;
	height:100px;
	border:1px solid;
}

ou alors

div {
	display:inline-block;
	vertical-align:top;
	width:50%;
	height:100px;
	box-shadow:0 0 0 1px #000;
}
Sujet clos
Aller à