Kommunauty
Connexion
Inscription

positionnement en html5


Homer Messages : 1855

Tout dépend si ta div footer est dans ta div corps ou pas

<body>
<div id="corps">
<div id="footer"></div>
</div>
</body>

Dans ce cas footer vaut 80% des 80% ...


<body>
<div id="corps"></div>
<div id="footer"></div>
</body>

dans ce cas footer vaut 80%

vendredi 21 novembre 2014 (Dernière édition vendredi 21 novembre 2014)

OaladesSomatesTignon Messages : 175

Et avec LESS, c'est plus faisable ? Jamais utilisé.

samedi 22 novembre 2014

Homer Messages : 1855

L’intérêt du LESS c'est le côté dynamique, là en l’occurrence, c'est un réglage unique pour tous donc un simple css suffit amplement.

samedi 22 novembre 2014

jeandub Messages : 145

C'est quoi LESS ?

Sinon OK j'ai compris l'histoire des pourcentages.

Autre chose : j'ai une div "bannière" et en CSS j'ai mis un background-image" . Comment faire pour que ce background s'adapte lui aussi à la largeur d'écran en respectant ses proportions hauteur-largeur ?

dimanche 23 novembre 2014 (Dernière édition dimanche 23 novembre 2014)

Homer Messages : 1855

LESS c'est pour générer du css dynamiquement, et pouvoir utiliser plusieurs version d'une même classe.

Essaie la propriété background-size : cover;

J'ai un doute mais je crois que pour une div en %, il y a des soucis d'affichages.

Peut tu donner le code de la div, se sera plus simple

dimanche 23 novembre 2014 (Dernière édition dimanche 23 novembre 2014)

jeandub Messages : 145

ça s'écrit comment en css pour un background-image ? background-image-size ?

dimanche 23 novembre 2014

Homer Messages : 1855

http://www.w3schools.com/cssref/css3_pr_background-size.asp

dimanche 23 novembre 2014

jeandub Messages : 145

Bon, j'ai vraiment un problème avec le positionnement :

J'ai mis le bas de page en relative et les deux images (id = appdiv) en absolute.

mais ça ne marche pas si je réduis la taille de l'écran : l'image de droite part du pied de page (vers la droite) . J'ai mis le bas de page en width: 100%.

De plus la hauteur du pied de page s'est réduite et le texte n'est plus centré verticalement.

Où est l'erreur ?

#pied_de_page
{
position: relative;
width: 100%
height : 209px;
background : url("design/pied_de_page.png") center;
text-align : center;
padding-top : 41px;
color : #000000;
clear : both;
border-radius: 5px;
}

#pied_de_page a
{
color : #000000;
}

#apDiv4
{
position: absolute;
width: 74px;
height: 79px;
z-index: 1;
left: 5px;
top: 10px;
}
#apDiv5
{
position: absolute;
width: 48px;
height: 79px;
z-index: 2;
left: 1175px;
top: 10px;
}

<div id="pied_de_page">© La Baraque TV
<div id="apDiv5"><img src="../design/logo.jpg" alt="logo la baraque TV" width="48" height="79" /></div>
<div id="apDiv4"><img src="../design/le-creusot-logo-web.jpg" width="74" height="79" alt="logo le creusot" /></div>
</div>
</div>

Et si je mets #apDiv5 en float: right elle ne flotte pas à droite mais à gauche du pied de page!!

dimanche 23 novembre 2014 (Dernière édition dimanche 23 novembre 2014)

Homer Messages : 1855

essai ça :


#apDiv5
{
position: absolute;
width: 48px;
height: 79px;
z-index: 2;
[color=#9e141c]right: 5px;[/color]
top: 10px;
}

Si tu peux un left:1175px, forcément ça dépasse du cadre, alors que si tu le place par rapport à la droite, quoi que tu fasse, il sera toujours là ou il faut.

dimanche 23 novembre 2014

jeandub Messages : 145

Merci Homer, mais j'ai trouvé la solution : j'ai enlevé les <div> qui contenaient les images et j'ai réussi à caler mon pied-de page avec left et right 5px.

Je ne sais pas ce qui gênait avec les <div>

En tout cas merci de ton aide

lundi 24 novembre 2014 (Dernière édition lundi 24 novembre 2014)

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !