28172 sujets

CSS et mise en forme, CSS3

Taille de la page ajustée au navigateur IMPOSSIBLE

Bonjour,
Je débute en programmation et aurais aimé savoir ce qui cloche dans mon code CSS et qui fait que ma page ne s'adapte pas naturellement à la page du navigateur de celui qui visite ?
Par exemple si je l'ouvre sur un autre pc, cette page et trois fois trop grande :
Merci d'avance pour vos réponses !
B
Modifié par lideleer (21 Aug 2013 - 19:50)
Il y a (au moins) ton image qui contiens le texte "directeur artistique et chef..." qui à un margin-left de 38.5em, ce qui le fais dépasser sur la droite et agrandi la taille de la fenêtre.
Hmm, je comprend pas trop à quoi tu veux que ton site ressemble en fait. Si tu veux avoir ton titre et ton image de fond cote à cote, ca va prendre énormément de place en largeur donc ca dépassera sur beaucoup d'écrans.

Un solution rapide et de toute façon conseillée serait de remplacer ton image par du vrai texte, qui lui retournerais à la ligne quand c'est nécessaire.
En fait, je veux que mon site à ce qu'il est maintenant, mais une fois que tout est situé dans la page. Je m'explique : maintenant l'affiche par défaut de la page oblige l'utilisateur à faire un ctrl + (-) pour réduire le zoom, ce que je voudrais c'est que la page apparaisse directement sous ce format...
Salut, pour commencer tu peux retirer tous les paramètres de positionnements que tu as mis pour le body.

Ensuite tu crées une 
<div id="XXX"> qui englobe le tout </div>


Dans le .Css tu mets ça : 
#XXX{width:100%;margin:0 auto;}


ca aura pour impact de prendre toute la largeur du navigateur quel qu'il soit puis de centrer le contenu automatiquement.

Ensuite il va falloir que tu réajustes l'images avec "Chef de ....."
Indice : ta du css en trop à ce niveau et qui ne sers pas à grand chose.
Administrateur
Bonjour et bienvenue,

je n'ai pas compris non plus : qu'est-ce qui n'est pas "situé" dans la page ?
Voudrais-tu un contenu de largeur fixe et centré quand la fenêtre est plus grande (exactement comme alsacreations.com et des milliers d'autres sites) ? Autre chose ? Si tu as une image, un gribouillis ou un site existant similaire, n'hésite pas Smiley cligne
edit: un des gabarits de Florent V. sur www.alsacreations.com / Outils / Gabarits peut-être ?
Modifié par Felipe (21 Aug 2013 - 16:19)
Merci pour vos réponses :

@artsx : j'ai fait ce que tu m'as suggéré mais ça ne change rien... ai-je bien compris ce que tu m'as demandé (voyant mon code source ?)- peut-être la balise est-elle mal placée dans le html ? concernant l'image, je l'ai retirée actuellement du site, mais le problème persiste...

@felipe : voici le genre de site dont je parle, un site qui apparaît directement dans toute la largeur de la page, sans avoir à faire zoomer ou dézoomer l'utilisateur...
Je viens de rechecker, quand je redimensionne la fenêtre, je vois le scrollbar qui apparait au niveau du h1.introduction.
Ta margin-left / right pose problème.

Faudrait diminuer la taille de ta carte FR pour garder de bonne dimension.
Sinon faudrait penser également a faire des blocs en float left et les placer.
Ca serait beaucoup plus simple à maintenir qu'avec tes margin.
Merci encore pour ta réponse, par contre pour les blocks en float left, tu veux dire que chaque élément de la page (section, aside, nav) devraient être situés dans quel balise ? J'ai encore un peu de mal avec l'agencement, et justement ce problème va m'aider à les résoudre
En règle général un site web est composé de cette façon : 

<div id="wrapper">
    <div id="nav"></div>
    <div id="content">
       <div id="content-left">
            les divs pour la partie gauche de contenu
       </div>      
       <div id="content-right">
            les divs pour la partie droite de contenu
       </div>      
    </div>
</div>


Le #wrapper englobe le tout, il permet de pouvoir placer tout ton site ou tu le souhaite selon sa largeur, 100%, 1024px etc.. etc.. avec le margin:0 auto;

La #nav bah pour la navigation en règle général <ul><li>... ou en HTML5 <nav> selon ce que tu souhaites faire.

Tu as le content, qui permet d'établir une largeur à ne pas dépasser pour les 2 content-left/right pour pouvoir les placer avec des margin-top/bottom.

Ensuite tu places ton contenu gauche à gauche (logique), idem à droite. en float:left;
Il faut pas oublier d'indiquer une largeur pour la parti gauche et droite, si ça ne rentre pas, soit il n'y a pas assez d'espace (par exemple tu demandes la largeur total est de 800px, tu dis 600px pour gauche et 300px a droite, le bloc de droite ira en dessous du gauche), soit... y a une erreur quelque part.

Y a plein d'école différente pour faire un site internet.

Je n'ai pas mis le footer car tout dépend ou tu veux qu'il soit placer, si tu veux qu'il soit dans la partie délémité dans le width demandé, faut le mettre dans le wrapper, sinon tu le sors de toutes les div et tu peux le placer ou tu le souhaites ensuite.
Merci infiniment pour ces conseils précieux,
Ce n'est effectivement pas le plan que je respectais... je m'y attèle ce soir et reviens vers toi en cas de doute, mais c'est déjà un grand pas franchi. Bonne fin de journée !
Sujet clos
Aller à