media queries : image calée coin haut droit

**Ariranha** · 15/01/2013, 17h32

Bonjour à tous,

J'ai un problème tout bête et j'ai besoin de clairvoyance.

J'ai 1 div principale qui en contient 2 autres (respectivement texte et image) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="metiers" class="panel">
   <div class="content"></div>
   <div class="imageTablette"></div>
</div>

et du côté du css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.panel { overflow:visible; margin-top:-2000%; width:100%; }
.content { width:100%; font-size:.8em; top:350px; left:170px;}
.imageTablette { float:right;}

Malheureusement, je n'arrive pas à décaler l'image à droite de l'écran

Quelqu'un à une idée ?

**Torgar** · 15/01/2013, 17h46

Salut,

Pour ta div de contenu, les propriétés top, right, bottom et left ne s'appliquent que pour les éléments positionnés (absolute | relative).

Ce que tu peux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.panel { overflow:visible; margin-top:-2000%; width:100%; position: relative;}
.content { width:100%; font-size:.8em; top:350px; left:170px; position: absolute;}
.imageTablette { position: absolute; right: 0;}

Plus d'explications sur position.

**Ariranha** · 15/01/2013, 18h13

Merci Torgar pour ce lien très instructif.

Si j'applique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.imageTablette { position: absolute; right: 0;}

L'image se cale à droite de .panel qui n'est pas représentatif de la largeur totale du navigateur.

Si je change en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.imageTablette { position: fixed; right: 0;}

C'est parfait !

Encore merci

**NoSmoking** · 15/01/2013, 22h07

Bonsoir,

L'image se cale à droite de .panel qui n'est pas représentatif de la largeur totale du navigateur.

dans ce cas pourquoi mettre l'élément dans une DIV qui ne prendra pas toute la largeur pour peu qu'il y ait des margin?

Il est inutile de préciser la largeur sur ta DIV content qui prendra la place restante, 100% ou moins.

D'autres part je préconise, lorsque l'on utilise une float:right, de mettre l'élément avant afin que le navigateur l'ayant placer conserve la place restante aux autres éléments "s'entourant" autour.

à voir avec cet exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Float Right]</title>
<style>
.panel {
  width:100%;
  background-color:#FFB0B0;
  height:150px;
}
.content {
  font-size:.8em;
  top:350px;
  left:170px;
  background-color:#B0FFB0;
}
.imageTablette {
  background-color:#B0B0FF;
  float:right;
}
</style>
<script>
</script>
</head>
<body>
Float Right déclaré APRES
<div class="panel">
   <div class="content">Plein de texte dedans!</div>
   <div class="imageTablette">
     <img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1357393069">
   </div>
</div>
Float Right déclaré AVANT
<div class="panel">
   <div class="imageTablette">
     <img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1357393069">
   </div>
   <div class="content">Plein de texte dedans!</div>
</div>
</body>
</html>

**Ariranha** · 16/01/2013, 08h59

Bonjour,

Envoyé par NoSmoking

Dans ce cas pourquoi mettre l'élément dans une DIV qui ne prendra pas toute la largeur pour peu qu'il y ait des margin?

Très bonne question...j'ai essayé d'attribuer width:100% au div .panel mais rien n'y fait, il ne prends pas la totalité de l'espace.

En ce qui concerne le bout de code, encore merci c'est une très bon exemple que je saurai réutiliser à bon escient. Mais dans mon cas il ne s'applique pas, je dois avoir des éléments hérités qui foutent la me#*de.

**NoSmoking** · 16/01/2013, 18h29

...il ne prends pas la totalité de l'espace.

il te faut peut être mettre le margin/padding du BODY à 0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html, body{
  margin:0;
  padding:0;
}

media queries : image calée coin haut droit

CSS

Vue hybride

Discussions similaires

Partager

Partager