28172 sujets

CSS et mise en forme, CSS3

Deux colonnes de texte et image au centre

Bonjour,

Le taulier a écrit :
...mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression.

Sujet déjà traité effectivement, et si la solution est si difficile à trouver, c'est sans doute que le media choisit n'est pas (du tout, encore...) fait pour cela, à l'instar du media print...

Anyway, quelques pistes de réflexion dans ce sujet suivre les liens et les conseils, il est parfois sage d'abandonner une idée en cours de route. Smiley cligne
Bonjour à toutes et à tous,

voici une solution basique. Attention, l'ordre des balises est importante.
<!doctype html>
<html>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title>test</title>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

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

<body>
	<div id="boite">
		<div id="col2">
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span id="bloc2"></span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
		</div>

		<div id="col1">
			bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span id="bloc1"><img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" alt="image"></span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
		</div>

		<br id="clear" />
	</div>
</body>
</html>

Et le code CSS associé :
div#boite {
		margin				: 100px auto 0 auto;
		padding				: 0 30%;
		background-color	: blue;
}

div#col1 {
		float				: left;
		background-color	: yellow;
		width				: 50%;
}

span#bloc1 {
		float				: right;
		width				: 100px;
		height				: 133px;
}

div#col2 {
		float				: right;
		background-color	: pink;
		width				: 50%;
}

span#bloc2 {
		float				: left;
		width				: 110px;
		height				: 133px;
}

img {
		display				: block;
		margin-top			: 2px;
		width				: 200px;
		height				: auto;
}

br#clear {
		clear				: both;
}


@+
Sujet clos
Aller à