28172 sujets

CSS et mise en forme, CSS3

[Résolu] Deplacement en fonction de la fenêtre

Bonjour,

aujourd'hui j'ai un petit soucis, je suis en train de développer la futur version de mon site avec un style "metro"(win8), il faut donc des div flottantes pour les avoir l'une à coté de l'autre, le problème, c'est que ces div se déplacent lorsque la fenêtre du navigateur se rapetisse, alors que j'aimerais que la position de tout les éléments du site soient fixe, même si la résolution et la fenêtre change.

Voilà le code complet(css+html)(d'ailleurs si vous trouvez des imperfections supplémentaires n'hesitez pas à m'en faire part ^^):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Le myrmecophile</title>
<style>
body {
	background-image:url(medias/img/body-bg.jpg);
	font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	position:absolute;
}
#header{
	background-image:url(medias/img/header.gif);
	background-repeat:no-repeat;
	background-color:#000;
	width: 1000px;
	height: 100px;
	margin-left: 280px;
}
#lien1{
	padding-bottom: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 280px;
	width: 200px;
	float: left;
	font-family: "Comic Sans MS", cursive, Vani;
	color: #FFF;
}
#lien1 a{
	color:#FFF;
}
#lien2 a{
	color:#FFF;
}
#lien3 a{
	color:#FFF;
}
#lien4 a{
	color:#FFF;
}
#lien5 a{
	color:#FFF;
}
#lien2{
	padding-bottom: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 200px;
	float: left;
	font-family: "Comic Sans MS", cursive, Vani;
	color: #FFF;
}
#lien3{
	padding-bottom: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 200px;
	float: left;
	font-family: "Comic Sans MS", cursive, Vani;
	color: #FFF;
}
#lien4{
	padding-bottom: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 180px;
	float: left;
	font-family: "Comic Sans MS", cursive, Vani;
	color: #FFF;
}
#lien5{
	padding-bottom: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 20px;
	width: 200px;
	float: left;
	font-family: "Comic Sans MS", cursive, Vani;
	color: #FFF;
	
}
.story-box {
	width:640px;
	background-color:#fff;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	overflow: auto;
	width: 640px;
	border: 2px solid #B2B2AA;
	float:left;
	margin-left:280px;
}
.storybox-image {
	float: left;
	margin-bottom: 6px;
	margin-right: 10px;
	width: 252px;
}
.storybox-text {
	float:left;
	font-size:12px;
	padding-bottom: 10px;
}
.story-box a {
	color:#5F6339;
}
.story-box a:hover {
}
.read-more {
	margin-bottom:10px;
}
.inner-wrapper {
	padding:20px;
}
.heading {
	font-size:20px;
}
.heading-info {
	margin-top: 4px;

}
.social-share {
	padding: 10px 0;
}
.story-box h1 {
	color: #709133;
	font-size: 36px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
.story-box h2 {
	font-weight: normal;
	margin: 0;
	padding: 0;
}
.bigbloc1{
	background-image:url(medias/img/bigbloc.png);
	background-repeat: no-repeat;
	position: relative; 
	width: 700px;
	height: 400px;
	margin-left:280px;
	float:left;
	padding-right:10px;
	color:#FFF;
}
#presentation{
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 10px;
	margin-left: 30px;
	margin-top: 180px;
	margin-right: 170px;
	margin-bottom: 40px;
	color: #000;
	background-color: #FFF;
	font-size: 14px;
}

#menu{
	position: relative; 
	float:left;
	margin-left:10px;
}
#bloc1{
	padding-bottom:10px;
	margin-left:10px;
	position:;
}
#content{
	background-image:url(medias/img/content.png);
	background-repeat:no-repeat;
	width: 1000px;
	height: auto;
	margin-left: 280px;
	padding-left:10px;
	padding-right:10px;
	padding-top:7px;
	padding-bottom:7px;
	clear:left;
}
#bigbloc2{
	background-image:url(medias/img/bloc2.png);
	background-repeat: no-repeat;
	position: relative; 
	width: 700px;
	height: 300px;
	margin-left:280px;
	padding-right:10px;
	padding-bottom:10px;
	float:left;
}

#menu2{
	position: relative; 
	float:left;
	margin-right:10px;
}

#bloc3{
	position:relative;
	float:left;
	padding-right:10px;
	padding-bottom:10px;
	padding-left:70px;
}
#menu3{
	position: relative; 
	float:left;
	margin-left:10px;
	padding-left:10px;
}
#bloc4{
	position:relative;
	float:left;
	padding-left:70px;

}
#bloc5{
	padding-bottom:10px;
}
#bloc6{
	position:relative;
	float:left;
	margin-left:10px;
	padding-right:10px;
}
#footer{
	background-image:url(medias/img/footer.png);
	background-repeat: no-repeat;
	background-position:center;
	width: 1000px;
	height: 60px;
	margin-left: 280px;
	clear:left;
	padding-top:10px;
	
}
#subfooter{
	background-repeat: no-repeat;
	width: 1000px;
	height: 20px;
	margin-left: 280px;
}

#header h1 {
	font-size: 36px;
	color: #FFF;
}
#content h1 {
	color: #FFF;
}
body,td,th {
	font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.bigbloc1 #presentation h2 {
	color: #709133;
	font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
.bigbloc1 #presentation p {
	font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<body>

<div id="header"></div>

<div id="lien1">
  <a href="">Accueil</a></div>
<div id="lien2">
<a href="http://www.lemyrmecophile.be/portail/">Portail</a>
</div>
<div id="lien3">
<a href="http://www.lemyrmecophile.be/forum/">Forum</a>
</div>
<div id="lien4">
<a href="http://www.lemyrmecophile.be/MediaWiki/">Wiki</a>
</div>
<div id="lien5">
<a href="">Nos prestations</a>
</div>

<div class="bigbloc1">

<div id="presentation"><h2>BIENVENUE</h2><p align="justify">Bienvenue sur le myrmécophile. Ce site est dédié à l'élevage des fourmis. Le myrmécophile regroupe une communauté de passionnés dont l'entraide et le partage sont les fondamentaux. Notre équipe composée de personnes qualifiées propose également des intervention pédagogiques en Belgique pour classes/centres ou encore des evenements spéciaux. Le myrmécophile c'est également une participation active aux bourses, rendez-vous et conférences entomologiques belges. A bientot parmis-nous! </p></div>

</div>

<div class="menu">
<div id="bloc1"><img src="medias/img/firefox.png" width="290" height="195" /></div>
<div id="bloc2"><img src="medias/img/bloc1.png" width="290" height="195"/></div>
</div>

<div id="content"><h1>NEWS</h1></div>

<div class="story-box">
  <div class="inner-wrapper">
    <div class="storybox-text">
      <h1 class="heading">Des supers soldats chez Pheidole sp.      </h1>
      <div class="heading-info">Ecrit par Myrmex<em> le 11 Mars 2013 à 23h31</em><em></em></div>
      <p><img src="fourmis-Pheidole.jpg" alt="A story box image" class="storybox-image" /></p>
      <p align="justify">Des fourmis peuvent être &ldquo;reprogrammées&rdquo; pour devenir des supersoldats, selon une équipe internationale de chercheurs. Toutes les colonies de fourmis sont constituées   d&rsquo;insectes de différentes castes, y compris les soldats et les   ouvrières. Cette équipe a travaillé sur la manière de modifier le   développement des larves de fourmis pour les transformer en une caste   rare et inhabituelle de supersoldat. La percée, disent les chercheurs, révèle que des traits cachés pourraient être débloqués dans de nombreuses espèces. Le Dr Ehab Abouheif de l&rsquo;université McGill à Montréal   a dirigé l&rsquo;équipe, qui a constaté que le traitement des larves de   fourmis avec une hormone à un moment très particulier, durant leur   développement, transformait ces fourmis en supersoldat géants. Les   scientifiques ont réussi à atteindre cet objectif dans les deux espèces   de fourmis qui n&rsquo;ont pas &quot;naturellement&quot; une caste de supersoldat comme   faisant une partie de leur colonie. Dr Abouheif et son équipe ont étudié les fourmis   Pheidole, un grand groupe de plus de 1 000 espèces apparentées. Parmi   elles, il y en a seulement 8 qui ont ces biens nommées supers-soldats,   qui aident à protéger la colonie en bloquant l&rsquo;entrée des envahisseurs à   l&rsquo;aide de leurs têtes surdimensionnées. L&rsquo;idée de tenter de &ldquo;programmer&rdquo; des fourmis en   développement pour devenir ces soldats géants a été déclenchée lorsque   le Dr Abouheif a remarqué qu&rsquo;une autre espèce commune de fourmis   Pheidole, qui n&rsquo;a aucun supersoldat dans sa colonie, contient certains   étranges individus à grosse tête.        <a href="http://www.gurumed.org/2012/01/06/des-fourmis-transformes-en-super-soldats/">[lire la suite]</a> 
    </div>
    <span  class='st_twitter_hcount' displayText='Tweet'></span><span  class='st_facebook_hcount' displayText='Facebook'></span><span  class='st_sharethis_hcount' displayText='ShareThis'></span><span  class='st_fblike_hcount' ></span><span  class='st_plusone_hcount' ></span></div>
</div>

<div class="menu2">
<div id="bloc3"><a href="http://www.facebook.com/LeMyrmecophile/"><img src="medias/img/facebook.jpg" width="140" height="145"/></a></div>  
<div id="bloc5"><img src="medias/img/twitter.jpg" width="140" height="145"/></div>
</div>

<div class="menu3">
<div id="bloc4"><img src="medias/img/google+.jpg" width="140" height="145"/></div>
<div id="bloc6"> <img src="medias/img/partenaires.png" width="140" height="145"/></div>
</div>

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

<div id="subfooter" align="center">|Qui sommes nous| Mentions légales | Nous contacter | 
<p>Le Myrmécophile © copyright 2013</p> </div>

</body>
</html>


et voilà une illustration du problème(ne faites pas attention au contenu ce n'est pas encore définitif Smiley langue ):

voilà la page normale(et donc que je veux avoir fixe quelque soit la fenêtre):

http://img11.hostingpics.net/thumbs/mini_400140model.png

et voilà les div qui se déplacent lorsque la fenêtre rapetisse:

http://img11.hostingpics.net/thumbs/mini_506711planserr.png


J'ai vraiment besoin d'aide pour régler ce problème qui est vraiment gênant :s

Merci d'avance,
Modifié par myrmex-le-myrmeco (14 Mar 2013 - 00:59)
Bonjour,

j'ai enfin trouvé la solution ^^ et pour aider les futures personnes qui seront dans mon cas la voilà, il suffit de mettre tout le contenu de la page dans une div pour de centrer celle-ci(avec margin-left et margin-right), voili voilou!
Sujet clos
Aller à