28172 sujets

CSS et mise en forme, CSS3

Tutoriel erroné ?

Hi all Smiley smile

Je viens vous soumettre un petit problème que je rencontre avec un tuto d'alsacreations ( celui-ci en l'occurence : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Maitriser-le-positionnement-CSS-dans-toutes-les-situations#offres )

J'étais intéressé par cette mise en page à base de liste essentiellement à cause du rendu des 4 colonnes toutes de même hauteur et chacune avec une couleur de background différente s'étirant jusqu'en bas.

Seulement, si je n'ai rien manqué du tuto, je ne comprends pas absolument pas comment arriver à ce résultat Smiley murf

Si quelqu'un avait la bonté de m'éclairer ... Smiley cligne
Bonjour,

Le tutoriel n'est pas "erroné", il n'est peut-être juste pas clair pour toi. Smiley cligne
As-tu un bout de code à nous montrer? Un essai?
Bonjour,

Qu'est-ce que tu ne comprends pas dans cette partie du tutoriel ?

Aurais-tu une page en ligne de tes premiers essais ?
Hello Smiley biggrin

Voici une page de test :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	
	<head>
		<title>Essai</title>
		<style type="text/css">
			* {
				font-family: Verdana;
				padding: 0;
				margin: 0;
				border: 0;
			}
	
			ol {
				position:relative;
				margin: 0 10%;
				list-style:none;
				font-size: 12px;
			}
			
			h2 {
				font-size: 12px;
				font-weight: bold;
				padding: 1em;
			}
			
			ul {
				list-style: inside;
			}
		
			#decouverte, #start, #services {
				position:absolute;
				width:25%;
				height:100%;
			}
			
			#decouverte {
				background-color: cyan;
			}
						
			#start {
				right: 50%;
				background-color: yellow;
			}
			
			#services {
				left: 50%;
				background-color: red;
			}
			
			#power {
				margin-left: 75%;
				background-color: green;
			}
		</style>
	</head>
	
	<body>
		<ol>
			<li id="decouverte">
				<h2>Offre "Découverte"</h2>
				<p>
					Cette offre de bienvenue vous donne accès
					aux principales fonctionnalités du système:
				</p>
				<ul>
					<li>Tout le catalogue disponible</li>
					<li>Service accessible 24h/21</li>
				</ul>
			</li>
			<li id="start">
				<h2>Offre "Start"</h2>
				<p>
					Cette offre d'entrée de gamme vous donne accès
					aux principales fonctionnalités du système ainsi
					que quelques bonus:
				</p>
				<ul>
					<li>Tout le catalogue disponible</li>
					<li>Service accessible 24h/21</li>
					<li>Pas de frais d'activation</li>
					<li>Interface entièrement personnalisable</li>
				</ul>
			</li>
			<li id="services">
				<h2>Offre "Services+"</h2>
				<p>
					Cette offre très prisée vous donne accès
					aux principales fonctionnalités du système
					et aux nombreuses possibilités de partage:
				</p>
				<ul>
					<li>Tout le catalogue disponible</li>
					<li>Service accessible 24h/21</li>
					<li>Pas de frais d'activation</li>
					<li>Interface entièrement personnalisable</li>
					<li>Possibilité de téléversement</li>
					<li>Diffusion et stockage</li>
				</ul>
			</li>
			<li id="power">
				<h2>Offre "PowerUser"</h2>
				<p>
					Cette offre vous donne accès à l'ensemble
					des fonctionnalités du système pour une expérience
					utilisateur supérieure, avec entre autres:
				</p>
				<ul>
					<li>Tout le catalogue disponible</li>
					<li>Service accessible 24h/21</li>
					<li>Pas de frais d'activation</li>
					<li>Interface entièrement personnalisable</li>
					<li>Possibilité de téléversement</li>
					<li>Diffusion et stockage</li>
					<li>Création personnalisée de bibliothèques</li>
					<li>Espace alloué illimité</li>
					<li>Nombre d'alias illimté</li>
					<li>… et bien plus encore!</li>
				</ul>
			</li>
		</ol>
	</body>
</html>


Et voici le rendu que j'obtiens Smiley ohwell
Sujet clos
Aller à