[résolu] Aide positionnement en css

  • Auteur de la discussion Auteur de la discussion medium69
  • Date de début Date de début
WRInaute passionné
Je souhaite avoir mon code html dans cet ordre mais avec l'affichage dans l'ordre indiqué :

Code:
<div id=corps>le texte principal du site doit s'afficher entre la pub et les liens du bas de page</div>
<div id=bas>les liens du bas de page s'affiche en bas</div>
<div id=pub>la publicité s'affiche en haut de page</div>

J'ai consulté Alsacréation, mais je ne trouve pas de solutions à mon problème :(
 
WRInaute passionné
Pas bien! :)

il faudrait utiliser les positions dites absolues.
Ce que je n'aime pas forcément pour ma part.
 
WRInaute discret
Par exemple pour le dernier div, tu lui fixe 50px de hauteur et tu le force en haut avec un positionnement absolu.
Puis sinon tu gère tes deux autres div normalement, mais en mettant une marge haute de 50px pour ton div principal, histoire qu'il ne se fasse pas recouvrir par la pub.
Enfin c'est l'idée
 
WRInaute passionné
Untruc de ce genre

Code:
.pub{
position : absolute;
display:block;
top : 20px;

background-color:red;
}

.corps{
position : absolute;
display:block;
top : 200px;
background-color:blue;
}

..bas{
position : absolute;
display:block;
top : 300px;
}
 
WRInaute discret
bof, non, pas besoin de s'embeter avec une positionnement spécifique pour corps & bas.

#pub{
position : absolute;
top : 20px;
background-color:red;
}

#corps{
margin-top : 200px;
background-color:blue;
}

ça devrait suffir a positionner correctement le machin
 
WRInaute passionné
Merci à vous tous ; avec vos conseil j'ai pu gaire un affichage comme je le souhaitais :

Code:
#header {
	background-color: #00ccff;
}
#menu {
	width: 20%;
	background-color: #99cccc;
}
#pub {
	height: 60px;
	width: 80%;
	position: absolute;
	top: 0px;
	background-color: #99aacc
}
#contenu {
	margin-left: 20%;
	position: absolute;
	widht: 80%; 
}
#corps {
	margin-top: 60px;
	width: 80%;
	background-color: #22aacc;
}
#bas {
	width: 80%;
	height: 60px;
	background-color: #aaddee;
}
.float {
	background-color: #99aacc;
	float: left;
	width: 25%;
	margin: 1em 0;
}
.floatbis {
	background-color: #ff66cc;
	float: left;
	width: 25%;
	margin: 1em 0;
}
.both {
  clear: both;
}

Code:
<div id=header align="center">
	Du texte à afficher avant le menu et le contenu en haut de page par exemple.<br>
	Ce dernier pousse l'ensemble vers le bas.
</div>
<div id=conteneur>
	<div id=contenu>
		<div id=corps>
			<p>le texte principal du site s'affiche avant les colonnes éventuelles <br>
			en prenant toute la hauteur disponible comme ci-après.
			<div class="float">
				1ere colonne à s'afficher dans le texte principal du site.
			</div>
			<div class="floatbis">
				La deuxième vient parès la première et est acollé eontre
			</div>
			<div class="float">
				La troisième colonnes...
			</div>
			<div class="floatbis">
				Et la quatrième...
			</div>
			<div class="both">
				La fin du contenu principal peut s'afficher en dessous des colonnes.
			</div>
		</div>
		<div id=bas>
			les liens éventuel en bas de page
		</div>
		<div id=pub>
			la publicité s'affiche<br>
			en haut de page avec 60 pixels de hauteur
		</div>
	</div>
	<div id=menu>Le menu de gauche<br>
	s'affiche ici
	</div>
</div>

Mon code s'affiche dans l'ordre que je souhaites.

Merci encore :wink:[/url]
 
WRInaute discret
display:block ou inline
En gros l'élément est soit un bloc (tu peux lui attribuer une largeur, hauteur, bordure, position, ... il y a systématiquement un passsage à la ligne avant et un après), soit un élément en ligne, c'est à dire qu'il suit le texte (cas typique d'un <span>) : il ne va servir qu'à baliser le texte pour dire de mettre en gras, de souligner, de préciser une couleur, une font...

Dans un cas (block) tu manipules un élément "palpable", dans l'autre (inline) tu as juste la main sur la mise en forme de texte. En gros.
 
WRInaute passionné
Effectivement, j'ai tendance à déclarer les attributs en block, même si ceux-ci le sont par défaut. Cela peut éviter les problèmes lors de des déclarations de DIV imbriquées.
 
Discussions similaires
Haut