28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'aurais souhaité ajouter un emplacement de 120 par 60 px pour mettre une pub juste à coté du contenu de ma page web, mais malheuresement, cela ne fonctionne pas.
J'aurais souhaité avoir un tel résultat:
http://www.1001-games.net/ban.png

[u]Passons à la pratique:[/u]
-J'ai donc ajouter ça dans mon css:
a écrit :
skyscraper {
position: relative;
float: left;
margin: 5px;
padding-top: 60px;
width: 120px;
}

-Et ce code dans ma page web (juste avant le </body>):
a écrit :
<div id="skyscraper"><img src="http://www.kelrestaurant.com/images/article/exemple-sky.gif"/>
</div>


Et la ça beug, regardez:http://www.1001-games.net Smiley decu

Pouvez-vous m'aider sur ce sujet, car la je ne sais pas quoi faire...
Merci d'avance!!
Modifié par adri5656 (10 Apr 2007 - 00:04)
Extrait de ta feuille de style :
skyscraper {
	position: relative;
	float: left;
	margin: 5px;
	padding-top: 60px;
	width: 120px;
}

Tu utilises un sélecteur d'élément, mais l'élément skyscraper n'existe pas en HTML. Tu voulais sans doute utiliser un sélecteur d'identifiant, par exemple #skyscraper {...} ?

Ceci dit, ça ne suffira pas à positionner correctement cet élément.

Le plus simple, à priori, serait de travailler en position absolue. Il faut que div#skyscrapper soit à l'intérieur de div#onlinegam (par exemple à la fin), et faire quelque chose de ce style :
div#onlinegam {
	position: relative;
}
div#skyscrapper {
	position: absolute;
	top: 50px;
	right: -200px;
}
Bonjour;

Tu crées un nouveau conteneur de 779+120px soit 899px (Ce n'est pas top au niveau dimension mais bon) en margin: auto pour le center,

Tu laisses ton bloc #onlinegam a gauche, (tu supprimes juste le auto à margin: 0 auto;)

et ton bloc pub tu le places en float: right

Dans ton code, tu places avant #onlinegam ton bloc pub et tu n'oublie pas de refermer ton </div id="#conteneur"> en tout dernier

<div id="conteneur">
  <div id="pub">
  </div>
  <div id="onlinegam >
  </div>
</div>


Avec quelques cosmétiques ça devrait marcher du genre margin-right: 120px pour #onlinegam etc ...
Modifié par ghost (09 Apr 2007 - 18:59)