positionnement recalcitrant

kayorn · 18 Août 2006

bonjour,

je ne parviens pas à trouver la manière de positionner le bloc3 autrement que par une valeur négative du top ou bien en abandonnant le float pour le positionnement absolute (j'aime pas car il y a des pb dans une fenetre redimensionnée)

voici la feuille

http://ridolfi.essai.free.fr/essai%20css/essai.css

voici la page d'essai

http://ridolfi.essai.free.fr/essai%20css/index.html

merci d'avance pour votre réponse

j'ai essayé mille liens pour trouver la soluce , rien à faire

merci

marcelman · 18 Août 2006

Essaie de faire 2 "colonnes" sur ta page :

Une colonne 1 qui a une largeur de 150px dans laquelle tu mets tes bloc2 et une colonne 2 qui prend le reste de ton conteneur.

en CSS :

.colonne1{
width:150px;
float:left;
}
.colonne2{
width:415px;
float:left;
}

et en html

<div class="colonne1">
  <div id="bloc2">...</div>
...
</div>
<div class="colonne2">
   <div id="bloc3">...</div>
</div>

Sans garantie du gouvernement... Mais j'ai fait un truc dans ce genre là qui semble fonctionner sur les pages que je dois prochainement mettre en ligne.

ghost · 19 Août 2006

Bonjour,

Oui 2 colonnes et ce soir comme je n'ai pas encore envie d'avancer mon job alors si ça t'est utile ...


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>problème menu</title>
 <style type="text/css">

#conteneur{
	width: 595px;
	margin: auto;
	background: #fff;
	border: 1px solid #3c3c3c;
}

#header {
	background-color: red;
	background-image: url(http://ridolfi.essai.free.fr/essai%20css/banniere.jpg);
	width:100%;
	height: 209px;
}

#bloc2 {
	float: left;
	width: 150px;
	background-color:green;
}

#bloc3 {
	float: left;
	width:445px;
	background-color:blue;

}
.sous_bloc3{
	width:433px;
	background-color:#fff;
	border: 1px solid #3c3c3c;
	padding-left: 10px;
	overflow: hidden;

}

.sous_bloc3 img{
	float: right;
	margin-left: 10px;

}


#bloc4 {
	float: right;
	width:217px;
	background-color:#55fffc;
	margin-right:5px;
	padding:5px;
}


</style>
 </head>
<body>
<div id="conteneur">

	<div id="header"> </div>

		<div id="bloc2">
<ul>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>
  <li> blabla</li>

</ul>
</div>


		<div id="bloc3">
<div class="sous_bloc3">
<img src="http://ridolfi.essai.free.fr/essai%20css/capo.jpg" />
<p>Mieux qu'une plage, mieux qu'un spot: le bout du monde à 2 pas d'Ajaccio. Avec son shore-break qui en a laissé plus d'un sur le carreau
</p>
</div>
<div class="sous_bloc3">
<img src="http://ridolfi.essai.free.fr/essai%20css/capo.jpg" />
<p>Mieux qu'une plage, mieux qu'un spot: le bout du monde à 2 pas d'Ajaccio. Avec son shore-break qui en a laissé plus d'un sur le carreau
</p>
</div>




<div id="bloc4">
<p>qadofa ofaù o</p>
 </div>
</div>
</div>
</body>

Sinon ça m'aura donné au moins un prétexte à justfier mon improductivité !!! Et puis j'adore la Corse

Ps: Comme tu ne voulais pas d'absolute il n'y en a pas... Mais par contre ce code est sensible aux margin, padding et border et les blocs en float passent vite "dessous" car les width des blocs sont fixes (en px) donc à chaque modification, il faut penser à modifier le width des blocs parents. Ca à au moins l'avantage d'une bonne portabilité (je n'ai pas vérifié ...Oups !!)

Modifié 19 Août 2006 par Arlette

kayorn · 20 Août 2006

bonjour,

je reviens de weekend - j'essaye le script

merci à vous deux!

que pensez-vous de la version que j'essaye de simplifier? ca vaut le coup ou je laisse comme ça?

http://surfing.corsica.free.fr

merci

jp

ghost · 20 Août 2006

Bonjour,

J'aime bien le style par contre au niveau technique tu nous fais une Divite aigüe !!

Ton menu, tu as tout interêt à le monter en liste

<ul>

<li< item1</li>

<li< item</li>

...

</ul>

et tu as encore des problèmes de dimentionnement du contenu mais bon !!

kayorn · 20 Août 2006

j'ai pris ce script (me rappelle plus où...) qui prévoit des <div> pour le rollover.

je peux choisir une autre balise ?

jp

ghost · 20 Août 2006

là : ://css.alsacreations.com/Galeries-de-menus-en-CSS pour les menus et

là //css.alsacreations.com/Modeles-de-mise-en-page-en-CSS pour les mises en page...

Bon courage

Connexion

positionnement recalcitrant

Sujets conseillés

kayorn

Lien vers le commentaire

Partager sur d’autres sites

marcelman

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

kayorn

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

kayorn

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité