|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
 Posté le : Lun Juin 05, 2006 11:32 Sujet du message: [résolu] Aide positionnement en css |
|
|
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 
Dernière édition par medium69 le Lun Juin 05, 2006 13:35; édité 1 fois |
|
| |
|
 |
mr_go
WRInaute accro
Inscrit le: 21 Sep 2005
Messages: 1944
Localisation: Sous le soleil
|
| Posté le : Lun Juin 05, 2006 11:40 Sujet du message: [résolu] Aide positionnement en css |
|
|
Pas bien! 
il faudrait utiliser les positions dites absolues.
Ce que je n'aime pas forcément pour ma part. |
|
| |
|
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
| Posté le : Lun Juin 05, 2006 11:44 Sujet du message: [résolu] Aide positionnement en css |
|
|
| Mais encore ... |
|
| |
|
|
FlorentP
WRInaute occasionnel
Inscrit le: 25 Juin 2005
Messages: 145
|
| Posté le : Lun Juin 05, 2006 11:58 Sujet du message: [résolu] Aide positionnement en css |
|
|
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 |
|
| |
|
|
mr_go
WRInaute accro
Inscrit le: 21 Sep 2005
Messages: 1944
Localisation: Sous le soleil
|
| Posté le : Lun Juin 05, 2006 12:15 Sujet du message: [résolu] Aide positionnement en css |
|
|
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;
}
|
|
|
| |
|
|
FlorentP
WRInaute occasionnel
Inscrit le: 25 Juin 2005
Messages: 145
|
| Posté le : Lun Juin 05, 2006 13:17 Sujet du message: [résolu] Aide positionnement en css |
|
|
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 |
|
| |
|
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
| Posté le : Lun Juin 05, 2006 13:27 Sujet du message: [résolu] Aide positionnement en css |
|
|
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  [/url]
Dernière édition par medium69 le Lun Juin 05, 2006 23:35; édité 1 fois |
|
| |
|
|
Pikooz
WRInaute occasionnel
Inscrit le: 09 Fév 2006
Messages: 117
|
| Posté le : Lun Juin 05, 2006 20:29 Sujet du message: [résolu] Aide positionnement en css |
|
|
| le display:block; il sert a quoi au passage ? |
|
| |
|
|
FlorentP
WRInaute occasionnel
Inscrit le: 25 Juin 2005
Messages: 145
|
| Posté le : Lun Juin 05, 2006 20:32 Sujet du message: [résolu] Aide positionnement en css |
|
|
A rien sur un div non floattant, vu que le display est par défaut égal à block  |
|
| |
|
|
Pikooz
WRInaute occasionnel
Inscrit le: 09 Fév 2006
Messages: 117
|
| Posté le : Lun Juin 05, 2006 20:32 Sujet du message: [résolu] Aide positionnement en css |
|
|
| Mais encore, ca sert a quoi ? |
|
| |
|
|
FlorentP
WRInaute occasionnel
Inscrit le: 25 Juin 2005
Messages: 145
|
| Posté le : Mar Juin 06, 2006 0:44 Sujet du message: [résolu] Aide positionnement en css |
|
|
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. |
|
| |
|
|
mr_go
WRInaute accro
Inscrit le: 21 Sep 2005
Messages: 1944
Localisation: Sous le soleil
|
| Posté le : Mar Juin 06, 2006 7:54 Sujet du message: [résolu] Aide positionnement en css |
|
|
| 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. |
|
| |
|
|
| |
|
|
