#block {

float: right;

width: 280px;

margin: 15px 0 0 0;

padding: 0 1em 0 1em;

background:#000000;

}

#blocksample {

float: right;

bottom: 0;

width: 150px;

height: 150px;

background: url(images/sample.jpg) bottom right no-repeat;

padding: 10px;

color : #fff;

}

#blockmenu {

position: relative;

float: top left;

width : 280px;

margin : 0 0 20px 0;

}



#blockmenu ul {

margin-left : 0;

padding-left : 0;

list-style-type : none;

}



#blockmenu a {text-decoration : none;

display : block;

padding : 3px;

width : 274px;

border-bottom : 1px solid #eee;

background : #ecd8d8;

color : #666;

}



#blockmenu a:link, #navlist a:visited {

color : #666;

background : #c68a8a;

}



#blockmenu a:hover {text-decoration : none;

background : #c68a8a;

color : #fff;

}

#block p {

position: relative;

float: top left;

text-align: left;

}

Teruteru a écrit :
J'ai énormément de mal avec le relatif, je me demande toujours par rapport à quoi c'est relatif lol.

Teruteru a écrit :
Cette fois-ci j'avais voulu tenter les float, parceque je me demandais si c'était une bonne chose de tout placer en absolu...

Teruteru a écrit :

En fait j'ai déjà lu plein de choses sur le positionnement, mais je voudrais avoir l'avis de quelqu'un qui maîtrise vachement bien pour savoir ce qui est le mieux (float ? absolute ? relative ? ou autre chose ? lol).

Teruteru a écrit :
Ah mais j'admets tout à fait avoir des lacunes lol
Sinon je serais pas là lol !!!

Teruteru a écrit :
...
je ne connais pas "display" à part pour les menus.
comment on s'en sert pour positionner ?

Teruteru a écrit :
Ben en clair je veux que mon image s'affiche en bas dans mon block, et que le menu et le texte se placent au dessus.
Mais pour ça je voudrais ne pas avoir à toucher au code html.
Je veux que le code html soit fixe, que seules les feuilles de style changent.
C'est fou ça je pensais que ce serait aussi simple de positionner à la verticale qu'à l'horizontale, mais vraiment je n'y arrive pas !
C'est à croire que c'est impossible sans toucher au code html...

je ne connais pas "display" à part pour les menus.
comment on s'en sert pour positionner ?

<div id="block">



<div id="blocksample">

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



<h2>Lorem ipsum</h2>

<h3>dolor</h3>



<div id="blockmenu">

<ul>

<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>

<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>

<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>

</ul>

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



<p><!img class="sample" src="images/sample.jpg" alt="" /!>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis.

<br>

Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant.

</p>



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

#block {

float: right;

width: 280px;

margin: 15px 0 0 0;

padding: 0 1em 0 1em;

background:#000000;

}



#block p {

position: relative;

float: top left;

text-align: left;

}



#blockmenu {

position: relative;

float: top left;

width : 280px;

margin : 0 0 20px 0;

}



#blockmenu ul {

margin-left : 0;

padding-left : 0;

list-style-type : none;

}



#blockmenu a {text-decoration : none;

display : block;

padding : 3px;

width : 274px;

border-bottom : 1px solid #eee;

background : #ecd8d8;

color : #666;

}



#blockmenu a:link, #navlist a:visited {

color : #666;

background : #c68a8a;

}



#blockmenu a:hover {text-decoration : none;

background : #c68a8a;

color : #fff;

}



#blocksample {

float: right;

margin: 50% 0 50px 0;

width: 150px;

height: 150px;

background: url(images/sample.jpg) bottom right no-repeat;

padding: 10px;

color : #fff;

}

html, body {

margin : 0;

padding : 0;

}



body {

font : 73% Arial,  Helvetica, "Trebuchet MS", Arial, Tahoma, sans-serif;

background : #fff;

}



#boite1 {

width: 150px;

height: 150px;

background : #000;

}



#boite2 {

width: 150px;

height: 150px;

background : #f3f2ee;

}

<head>

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

</head>



<body>





<div id="boite1">

</div>



<div id="boite2">

</div>





</body>

</html>

html, body {

margin : 0;

padding : 0;

}



body {

font : 73% Arial,  Helvetica, "Trebuchet MS", Arial, Tahoma, sans-serif;

background : #fff;

}





#block {

width: 280px;

background: #f3f2ee;

}



#boite1 {

position: relative;

top: 150px;

width: 150px;

height: 150px;

background : #000;

}



#boite2 {

position: relative;

bottom: 150px;

width: 150px;

height: 150px;

background : #CCC;

}

<head>

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

</head>



<body>



<div id="block">





<div id="boite1">

</div>



<div id="boite2">

</div>





</div>





</body>

</html>

html, body {

margin : 0;

padding : 0;

}



body {

font : 73% Arial,  Helvetica, "Trebuchet MS", Arial, Tahoma, sans-serif;

background : #fff;

}





#block {

width: 280px;

padding: 10px;

background: #f3f2ee;

}



#block p {

text-align: left;

}



#boite {

width: 150px;

height: 150px;

background : #000;

}

<head>

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

</head>



<body>



<div id="block">





<div id="boite">

</div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 

in reprehenderit in voluptate velit esse cillum dolore eu fugiat 

nulla pariatur. Excepteur sint occaecat cupidatat non proident, 

sunt in culpa qui officia deserunt mollit anim id est laborum.</p>





</div>





</body>

</html>

#boite1, #boite2 {

	width: 150px;

	height: 150px;

	float: left;

	position: relative;

}



#boite1 {

	background : #000;

	top: 150px;

}



#boite2 {

	background : #f3f2ee;

	left: -150px;

}

#boite1, #boite2 {

	width: 150px;

	height: 150px;

}



#boite1 {

	background : #000;

	position: absolute;

	top: 150px;

}



#boite2 {

	background : #f3f2ee;

}

Teruteru a écrit :
ça doit être une histoire de pourcentages mais je n'y connais pas grand chose.

#global {

	width: 980px;

	margin: 0 auto;

	display: table;

}



#boite1 {

	background: #ccc;

	border-top: 1px solid #ccc; /*/ pour la fusion des marges */

}



#boite2 {

	background: #f3f2ee;

	display: table-caption;

}

<div id="global">

	<div id="boite1">

		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>

	</div>

	<div id="boite2">

		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>

		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>

	</div>

</div>

Teruteru a écrit :
Par contre je n'ai pas bien compris ce que tu veux dire par tout le monde n'a pas forcément accès aux css (typiquement les utilisateurs de lecteurs d'écran)

Je ne sais pas ce que c'est ?

Teruteru a écrit :
ça pourrait ne pas fonctionner chez certaines personnes ?