Mon site ne ressemble plus à rien une fois réduit

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mon site ne ressemble plus à rien une fois réduit

Zangalou

Hop, un gros problème se pose à moi (étonnant) je cherche donc à ce que mes éléments restent toujours positionnés de la même façon même une fois la page réduite. Alors que le problème ne se pose pas sur mon index, tout se décale et déforme si je diminue la taille de la fenêtre (même le logo en haut de ma page, non présent sur la capture, disparaît totalement). J'ai vraiment besoin d'aide pour tout remettre en plein et que tout ne se chevauche pas comme ça (le code se trouve plus bas). Merci !

Voilà à quoi ressemble la page pleine :

Et voilà une fois réduite :

Voici mon code html :

<!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>Document sans titre</title>
<link rel="stylesheet" type="text/css" href="style_div3.css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fr'}
</script>
</head>

<body background="../../../Users/Steph/Desktop/JeuxOnline/Design/fromdustfond.png">
<div id="logo"><img src="../../../Users/Steph/Desktop/JeuxOnline/logosoon.png" /></div>
<div id="menu"><div id="blocinfos"><img src="From_Dustbox.png" /></div><div id="blocbox" style="text-align:justify;"><dd><span class="tailletitre">From Dust</span><span class="plateformexbox">Xbox Live Arcade</span></dd>
<span class="texte">Populous et Black & White, des titres à succès au concept malheureusement tombé aux oubliettes, celui des god games. Un genre remis au goût du jour grâce à From Dust, un jeu signé Eric Chahi.</span></div></div>
<div id="menu2"><div id="social"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.jeuxonline.ca%2Fcritique2FFrom-Dust%2&send=false&layout=standard&layout=button_count&width=70&show_faces=true&action=like&colorscheme=light&font&height="20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="JeuxOnlineCa" data-lang="fr">Tweeter</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div id="socialimg"><img src="../../../Users/Steph/Desktop/JeuxOnline/Design/gamebuzz.png"></div></div>

<div id="contenu"><div id="contenugauche"><p class="titre">Quand la mascotte de Nintendo débarque sur une plateforme, les ventes ont, surprise, tendance à exploser. Présent lors lancement de la Nintendo DS par le biais d’un remake du titre sorti sur Nintendo 64, Mario n’a pas souhaité pointer le bout de son nez lors de la commercialisation de la Nintendo 3DS. Ce n’est pourtant que partie remise, un épisode totalement nouveau étant prévu pour la fin de cette année, un titre que nous avons eu la chance de prendre en main au cours de la dernière semaine.</p><br>

<p>Depuis plusieurs décennies, la série Mario n’a jamais cessé d’évoluer, passant de la 2D de ses débuts à la 3D lors de son arrivée sur Nintendo 64. Évoquons enfin le drapeau marquant la fin d’un niveau, méconnu des plus jeunes et remplacé par une ribambelle d’étoiles à récolter. Pourquoi ressasser le passé ? Pour la simple raison que ce Mario nous offre un doux mélange entre les premiers épisodes de la série et ceux de la nouvelle génération. Quatre niveaux nous étaient proposés, deux façon Super Mario 64, un niveau en 2.5D, et enfin un boss.<img src="../../../Users/Steph/Desktop/JeuxOnline/Design/from-dust.jpg" /></p><p>Ce premier niveau de Super Mario 3D nous plonge dans un univers familier, peuplé de Goombas, qu’un simple saut sur la tête terrassera, mais aussi de plantes carnivores particulièrement voraces.</p>
</div>

<div id="contenucentre"><p>Tandis que la fleur permet tout simplement d’expédier de puissants projectiles sur les adversaires d’une simple pression sur le bouton, la combinaison tanooki administre de nouvelles aptitudes au plombier moustachu, comme celle de pouvoir planer, en pressant continuellement le bouton une fois dans les airs, et de donner de redoutable coups de queue. Comme laissé entendre, ce Super Mario amène un véritable vent de fraîcheur avec son petit côté rétro, ses tuyaux verts, pouvant être empruntés d’une simple pression sur R, menant toujours vers des destinations étonnantes, tandis que les blocs musicaux, parfaits pour bondir vers d’autres horizons, cohabitent parfaitement avec les nouveautés de l’épisode.<br><img src="../../../Users/Steph/Desktop/JeuxOnline/Design/From-dust2.jpg" /><br>En plus des blocs de pierre classiques, vides ou cachant une ou plusieurs pièces, des téléporteurs offrent la possibilité de voyager rapidement d’un endroit à l’autre, d’accéder à des bonus de temps ou de découvrir d’étranges plateformes. Oubliez enfin les étoiles marquant la fin du niveau, la nostalgie faisant un retour marquant avec son escalier menant vers le fameux drapeau que seul un saut parfait permet de décrocher. Bien plus complexe tout en étant la parfaite représentation des améliorations apportées à la série, le second niveau se présentait comme</p> </div>

<div id="contenudroite"> <p> une espèce de labyrinthe géant, bourré d’interrupteurs faisant apparaître des plateformes folles pouvant se défiler sous nos pieds à n’importe quel instant. Difficile de retrouver son chemin lorsqu’une dizaine de boutons se présentent devant nous, menant vers des routes aussi variés qu’imprévisibles, qui plus est habitées par d’étranges créatures. Disposant enfin d’une poignée de niveaux à la New Super Mario Bros. nous obligeant à jouer avec la profondeur, le titre tire pleinement profit de la 3D, indispensable pour une rare fois sur Nintendo 3DS. Faisant ressortir certains éléments du décor, mais aussi les projectiles, la trois dimensions prend désromais tout son sens de la plus belle des façons, à travers des environnements colorés, rappelant certains des meilleurs volets de la franchise.</p><br>

<div id="conclusion"><p class="titre">Graphiquement au point tout en étant particulièrement fluide, rien d’étonnant pour un produit Nintendo, Super Mario 3D surfe sur les bases de ses prédécesseurs, aussi bien au niveau de la prise en main, avec les traditionnelles pirouettes de Mario, que des environnements. Au final, le titre nous livre, pour notre plus grand plaisir, un concentré de tout ce qui a fait le succès de licence depuis 25 ans, du tout bon en perspective si l’on ajoute à cela quelques mélodies spécialement réinterprétées pour l’occasion.</p></div>
</div></div>
<div id="menu3" style="padding-left:15px;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FJeuxOnlineCanada&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height="30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe><img src="../../../Users/Steph/Desktop/JeuxOnline/Design/menu.png" align="right" style="padding-right:15px;" /></div>

</body>
</html>

Et le CSS :

@charset "utf-8";
/* CSS Document */

body {

margin:0px;
padding:0px;
width:100%;
background-attachment:fixed;

}

.twtr-ft { display:none; }

div#logo {
position:absolute;
left: 50%;
top: 50%;
margin-top: -340px; /* moitié de la hauteur de l'image */
margin-left: -195px; /* moitié de la largeur de l'image */
}

div#menu {
position:absolute;
margin-top:-105px;
background-color: rgba(56,87,100,0.2);
width:100%;

}

div#contenu {
position:absolute;
margin-top:0px;
background-color: rgba(237,233,233,0.5);
margin-left:auto;
margin-right:auto;
padding:10px;
width:45%;
left: 25%;
border-bottom:1px solid #414142;
border-top:1px solid #414142;
}

div#menu3 {
position:absolute;
top: 50%;
padding-top:8px;
margin-bottom:none;
padding-right:0px;
margin-top: 750px; /* moitié de la hauteur de l'image */
background-color: rgba(215,219,200,0.3);
width:99%;

}
div#contenugauche {
position:relative;
float:left;;
width:32%

}

div#contenucentre {
position:relative;
float:left;
padding-left:15px;
width:31%
}

div#contenudroite {
position:relative;
float:left;
padding-left:15px;
margin-right:-23px;

width:31%

}

div#menu2 {
position:relative;
margin-top:275px;
width:100%;

}

div#blocbox {
position:relative;
float:left;
margin-left:2px;
margin-top:4px;
padding-left:2px;
width:300px;
padding-bottom:2px;
padding-top:2px;
padding-right:0px; }

div#blocinfos {
position:relative;
float:left;

margin-left:450px;
margin-top:6px;
margin-bottom:6px;}

div#social
{
position:absolute;

width: 200px;
left: 40%;
margin-top:8px;

}

div#socialimg
{
position:relative;

width: 100px;
left: 52%;

}
.tailletitre {
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin-left:-40px;

}
.plateformexbox {
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#A3CA3B;
margin-left:30px;

}

.developpeur {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#88889C;
margin:0px;

}

.developpeur2 {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
color:#006699;

}
.editeur {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#88889C;
font-weight:bold;

}

.editeur2 {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
margin:0px;

}
.genre {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#88889C;
margin-left:52px;

}

.genre2 {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
margin:0px;

}
.etat {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#88889C;
margin-left:10px;

}

.etat2 {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
margin:0px;
}
.prix {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin-top:0px;

}

.prix2 {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left:3px;

}

.texte {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;

}

.titre

{

font-weight:bold;

}

p { font-family:Arial, Helvetica, sans-serif;
margin:0 auto; font-size:13px; text-align:justify;}

div#conclusion {
position:absolute;
background-color: rgba(199,39,21,0.6);
margin-left:auto;
margin-right:auto;
padding:10px;

}

Message édité par Zangalou le 10-08-2011 à 08:24:40

Publicité

rufo

Pas me confondre avec Lycos!

dans le css, faut mettre des instructions de largeurs minimal style min-width...

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

fred777888999

En melangeant les flux dans tous les sens (float, left, right), les positionnements (relative, absolute), a peu pres tous les types de marges (positive, negative), les tailles fixes et % (le positionnement de ton logo est d'ailleurs une merveille du genre, surtout quand on voit le div conclusion positionne de facon similaire mais avec une methode differente), tu t'attendais a quoi ?
Je n'oses meme pas imaginer le comportement sur differents navigateurs et systemes d'exploitation.
En primes, le montage qui melange allegrement le significatif (logo, menu auquel je n'ai d'ailleurs rien compris en lecture rapide) et le positionnement (contenucentre, contenugauche et droite) est a proscrire, c'est le pire des deux mondes (antique tables/div) sans le meilleur (constance/legerete+souplesse).
Le mieux est soit de tout laisser en l'etat avec eventuellement des min-width, min-height, voire height/width si tu n'as pas le temps de recoder, soit de refaire proprement de A à Z.

Bon courage.

Fred.

Zangalou

Je pense vouloir tout recoder ... j'ai commencé par virer le position absolute du logo avec un :

div#logo {
margin: 0 auto;

}

un text-align:center; et une marge pour le top, et je m'occupe du reste maintenant.

Message édité par Zangalou le 10-08-2011 à 18:26:00

Zangalou

J'ai une petite question, j'ai donc réussi à centrer mes div sans utiliser les positions absolute, problème, lorsque je réduis la page, mes div se déplacent en restant centrés, une idée pour cela ne se produise ? En gros je veux qu'ils soient centrés en page pleine, mais pas en réduite.

Message cité 1 fois
Message édité par Zangalou le 10-08-2011 à 21:16:59

fred777888999

Ca va etre tres dur sans utiliser du Javascript, ce qui n'est franchement pas recommande. Essaye de ne pas etre trop creatif de ce cote et de te cadrer plutot sur des looks et des comportements "existants".
Qu'est-ce qui te gene dans le faire qu'ils soient centres quand tu reduis ?
Quel rendu attends-tu si l'utilisateur ouvre ton site avec un navigateur "non en plein ecran" ?
En tous cas bon courage dans ta demarche, il est souvent dur et long de recoder de l'existant

Message cité 1 fois

rufo

Pas me confondre avec Lycos!

Zangalou a écrit :

je dirais que si tu spécifies un width sur body en taille fixe (donc pas 100% mais par ex, 70em ou 750px), ça devrait le faire

Zangalou

fred777888999 a écrit :

aucune idée en fait, j'ai peur que ça pose problème avec une révolution plus petite, mais en fait je pense que ça devrait le faire.

J'ai viré les positions absolute du div logo et du menu, et laissé un seul float, ce qui donne ça et règle les problèmes de décalages sur les deux premiers div (logo et menu) :

body {

margin: 0 auto;
padding:0 auto;
background-attachment:fixed;

}

div#logo {
margin-left:38%;
width:auto;
}

div#menu {
width: 100%; height: 103px; background-color: rgba(237,233,233,0.5);

}

div#blocbox {
margin-left:35%;
margin-top:4px;
padding-left:2px;
width:300px;
height:80px;
padding-bottom:2px;
padding-top:2px;
padding-right:0px; }

div#blocinfos {
float:left;
margin: 0 auto;
margin-left:30%;
margin-top:6px;
margin-bottom:6px;
;}

Bon je devrais peut être retravailler un peu les blocs infos et box, mais ça me semble un peu plus propre. Par contre, une question, quand je réduis ma page, le texte situé dans le blocbox se décale, une solution ?

(On m'a indiqué de donner une taille fixe au parent aussi pour ce cas, le parent c'est #menu ? si oui ça ne risque pas de poser problème aux visiteurs avec une plus grosse résolution que la dimension que je donne ? sachant que je souhaite que le fond de couleur, présent dans menu, fasse toute la largeur quelque soit la résolution).

Message cité 1 fois
Message édité par Zangalou le 11-08-2011 à 14:42:07

rufo

Pas me confondre avec Lycos!

Zangalou a écrit :

Tu lis pas ce que je t'ai mis? => spécifies un width sur body en taille fixe (donc pas 100% mais par ex, 70em ou 750px), body étant le parent de tous les parents...

Zangalou

okay merci je vais voir ça

Publicité

Zangalou

En effet le texte ne se décale plus, par contre comme je le pensais, mon menu ne fait pas la largeur désirée, il se termine sur les 750px, ce que je ne souhaite pas puisque le fond doit faire toute la largeur. À moins qu'il faille que j'apporte une autre modification.

Message édité par Zangalou le 11-08-2011 à 15:08:59

rufo

Pas me confondre avec Lycos!

T'es passé en largeur fixe, faut donc adapter les autres blocs que t'as laissés en %

Zangalou

ou l'inverse non ? car l'inverse, tout en %, ne donne rien

rufo

Pas me confondre avec Lycos!

faut donc adapter les autres blocs que t'as laissés en % => passer les blancs en % en largeur fixe aussi, la mention "T'es passé en largeur fixe" faisait référence au fait que t'avais mis une largeur fixe dans le body.

Zangalou

okay mais ça ne va pas poser problème avec une résolution plus petite ? si je met une margin fixe et que le visiteur débarque avec une réso 800x600 ou supérieure à la mienne, le site va être mal positionné, il y a une solution ? Ou alors je développe pour du 1024 et c'est réglé non ?

Message édité par Zangalou le 18-08-2011 à 19:36:40

Skopos

La solution c'est un design fluide et "responsive" comme ils disent là-bas [:ignition]

Ouvre cette page et réduit lentement la largeur de fenêtre. Observe la disposition des blocs la taille des images... http://www.alistapart.com/d/respon [...] FINAL.html

Les explications là : http://gobanclub.net/2010/11/17/re [...] e_trad_fr/

Message édité par Skopos le 18-08-2011 à 20:03:02

Zangalou

pas mal, mais je voulais finalement tout mettre en pixel, façon gamekult, pour éviter justement les décalages, même si dans ce cas c'est plutôt intéressant.

Message cité 1 fois

Skopos

Zangalou a écrit :

pas mal, mais je voulais finalement tout mettre en pixel, façon gamekult, pour éviter justement les décalages, même si dans ce cas c'est plutôt intéressant.

[:wo0chy]

Zangalou

façon de parler et je pense plus simple à faire pour une page statique, la mienne pouvant varier en fonction de l'article et des médias.

Message cité 1 fois

Skopos

Zangalou a écrit :

façon de parler et je pense plus simple à faire pour une page statique, la mienne pouvant varier en fonction de l'article et des médias.

J'ai bien compris

C'est sûr que c'est pour la démonstration et j'imagine (j'ai pas encore mis en pratique) que selon les dispositions dans tes pages ça peut être encore plus prise de tête que de partir sur un truc qu'on sait faire, ou à peu près.
Enfin t'as la source maintenant

Zangalou

j'ai finalement décidé de reprendre la technique du centrage, mais de façon plutôt propre (enfin je trouve). À moins que le visiteur se ballade avec une réso de 480, ça passe sans tâche.

Message édité par Zangalou le 22-08-2011 à 02:16:59

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Mon site ne ressemble plus à rien une fois réduit

Sujets relatifs
Flèches du clavier et jeu flash dans site PHP	Créer un site comme wloche.tk et zloche.net
Serveur dns site	Meilleur logiciel pour création site Web
[Recherche] Codeur pour la création d'un petit site	Faire un Flux RSS sur mon site - demande d'aide
Adapter mon site aux écrans ?	[PHP?]Un sous répertoire d'un site affiché comme la racine.
Structure d'un site	Création de site internet : quelles démarches ? Où commencer ?
Plus de sujets relatifs à : Mon site ne ressemble plus à rien une fois réduit

Page générée en 0.080 secondes