Décalage d'une image selon la résolution

**camox** · 28/07/2013, 17h00

bonjour

j’apprends l' HTML5 et le CSS3

je viens de finir ma structure en HTML, la structure est composé d'un <div id="bloc_page">, d'un <header>, et de 2 <section>, dont un menu <nav> en float:left; .

en finissant de stylé le header et le menu nav en CSS3, je me suis rendue compte quand réduisant la page y a l'image qui est dans le <header> qui passe au dessus <hgroup> et le <div id="bloc_page"> qui passe au dessus de la section.

comme une image vaut mieux que des mots voici les capture

le rendu plein écran
http://img827.imageshack.us/img827/691/2jqd.png

le rendu avec l'écran réduit
http://img580.imageshack.us/img580/1070/64m2.png

voici le code HTML qui part du div id="bloc_page" jusqu'à la fin de la première <section>

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<body>
 
<div id="bloc_page">
 
	<img alt="logo" src="img/Creative1.png" id="logo_img" />
 
<header role="banner">
 
	<hgroup>
		<h1>Lorem ipsum </h1>
		<h2>dolor sit amet</h2>
	</hgroup>
 
	<form action="traitement.php" method="post">
		<label for="search"></label>
			<input id="search" name="search" type="search" list="opt"  placeholder=" tapez votre recherche..."  />
 
				<datalist id="opt"option="">
					<option value="forum">Forum</option>
					<option value="documentation">Documentation</option>
					<option value="web">Web</option>
					<option value="autre">Autre</option>
				</datalist>
						<input type="submit" value="ok">
 
	</form>
 
</header>
 
<nav role="navigation">
<ul>
	<li>
	<a href="#">Accueil</a>
 
		<ul>
			<li><a href="#">qui somme nous</a></li>
			<li><a href="#">présentation</a></li>
			<li><a href="#">historique</a></li>
			<li><a href="#">nos produits</a></li>
		</ul>
	</li>
 </ul>
</nav>
 
	<div class="clear"></div>
 
<section id="new" role="main">
 
<article>
<h1>les dernières news</h1>
 
<time datetime="2013-07-07" pubdate="">le dimanche 7 juillet 2013</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum pellentesque orci ut porttitor. Aliquam erat volutpat. Sed a aliquam elit, in convallis arcu. <abbr title="test de la balise ABBR">Vivamus</abbr> nec consequat quam. Duis nulla arcu, malesuada at neque id, adipiscing commodo libero. Integer tincidunt nec risus eu interdum. Etiam vitae consectetur nulla. Nullam lobortis est nec urna scelerisque, et venenatis augue posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <abbr title="test de la balise ABBR">Aenean </abbr> at dictum sem, sed iaculis tellus. Etiam odio ligula, lacinia in vulputate a, ullamcorper non urna. Phasellus tristique augue neque. Sed at ipsum ac quam laoreet porttitor. Nullam ultricies pellentesque consequat. Cras laoreet felis urna, non dapibus leo pulvinar in. Nullam ut commodo dui, at pulvinar ante.
</p> 
 
<h1>ces dernièrs jours</h1>
 
<time datetime="2013-07-07" pubdate="">la semaine dernière</time>
 
<p>
lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum pellentesque orci ut porttitor. <abbr title="test de la balise ABBR">Aliquam</abbr> erat volutpat. Sed a aliquam elit, in convallis arcu. Vivamus nec consequat quam. Duis nulla arcu, malesuada at neque id, adipiscing commodo libero. Integer tincidunt nec risus eu interdum. Etiam vitae consectetur nulla. Nullam lobortis est nec urna scelerisque, et venenatis augue posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <abbr title="test de la balise ABBR">Aenean</abbr> at dictum sem, sed iaculis tellus. Etiam odio ligula, lacinia in vulputate a, ullamcorper non urna. Phasellus tristique augue neque. Sed at ipsum ac quam laoreet porttitor. Nullam ultricies pellentesque consequat. Cras laoreet felis urna, non dapibus leo pulvinar in. Nullam ut commodo dui, at pulvinar ante.
</p> 
 
<a class="btn" href="#">voir plus de news</a>
 
</article>
</section>

le CSS du <body> et du <div id="bloc_page">

Code :

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
body
{
   padding: 0px; 
   margin:0px;
   font-size:13px;
   border-top:12px solid black;
   position:relative; 
}
#bloc_page
{
  margin:20px auto;
  padding:0px;
  width:80%; 
  min-width:50%; 
  border:1px solid red;
  position:relative;
}

le CSS du HEADER et de la <section>

Code :

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
43
44
45
46
47
48
 
header
{ 
height:180px; 
background:-moz-radial-gradient(top left,#002D40 40%,#fff);background: -webkit-radial-gradient(top left,#002D40 40%,#fff); color:whitesmoke;
 position: relative; 
padding-top:1px; 
}
 
hgroup
{ 
margin:60px;
 font-family: Conv_KaushanScript-Regular;
 font-size:20px; 
text-transform: uppercase; 
letter-spacing: 1.5px; 
line-height:20px;
    }
hgroup h2
{ 
font-size:18px;
 padding-left:126px; 
padding-top:10px; 
color: burlywood; 
font-weight:bold; 
}
 
#logo_img{ position:absolute; top:22px; right:460px;  z-index:1;}
 
input{
position:absolute; 
right:80px; 
top: 80px;
 padding:5px;
border:none; 
border-radius:5px 0px 0px 5px;
font-style:italic;
 background:#D6DDE0;
}
input:active{background:#fff;}
 
input[type="submit" ]{ padding:4px; margin-right:-29px; border-radius:0px 5px 5px 0px;  font-weight:bold; cursor:pointer; text-transform:uppercase; color:burlywood; border-left:1px dotted #002D40; }
	input[type="submit"]:hover{background:#002D40; }
 
 
/*/==== SECTION ====/*/
 
#new{ border:1px red solid; width:600px; padding:0px; margin:-50px 350px;}

cordialement

**Muchos** · 28/07/2013, 18h51

Votre logo chevauche le reste de la page et c'est normal, puisque vous l'avez fait sortir du flux avec la position ABSOLUTE et il est à 1 niveau au-dessus du reste (z-index):

Code css :

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

#logo_img{ position:absolute; top:22px; right:460px;  z-index:1;}

Dans tous les cas, vous devriez l'intégrer dans votre HEADER.
Voyez les tutos DVP pour plus d'infos sur les possibilités de mises en page.

Invité · 28/07/2013, 19h41

Bonjour,
tant que faire se peut, éviter de mettre inutilement en position:absolute;

Il est possible (surtout vu la simplicité de la mise en page) de tout positionner correctement en relatif.
clear:both; float:right/left; devraient suffire.
=> Div et CSS : une mise en page rapide et facile

Pour le logo, sa place est dans le <header>, pas avant.

**camox** · 29/07/2013, 20h36

bonjour a vous

merci pour vos réponses enrichissante

, je vais travaillé les positionnement avec les liens que vous m'avez fait part

.

une dernière question

je voudrais apprendre le référencement, quel livre (pour débutant) me conseillez-vous, le référencement ce fait t-ils pour tous les navigateurs en général (chrome, firefox, IE ...)

**rodolphebrd** · 29/07/2013, 21h23

Bonjour,

vous pouvez commence dès maintenant avec les tutoriels du forum :http://www.developpez.net/forums/d17...ion-pages-web/

Sinon je vous conseille une livre éditer très récemment.
J'ai lu celui-ci qui est très complet.

Décalage d'une image selon la résolution

CSS

Discussions similaires

Partager

Partager