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

marcelman

ghost

kayorn

ghost

kayorn

ghost

Veuillez vous connecter pour commenter

Parcourir

Activité