- Statut : non résolu
- Ce sujet contient 18 réponses, 2 participants et a été mis à jour pour la dernière fois par
Comme une image, le il y a 16 années et 8 mois.
-
AuteurMessages
-
30 mai 2008 à 23 h 00 min #459972
Bonjour à tous,
Un div qui ne se place pas où il faut!
j’avais fait part dans d’autres discussions de mes problèmes rencontrés lors de la création de mon thème avec le positionnement dans le CSS, je ne savais pas quoi utiliser.
En ayant recueilli certains avis et en cherchant bcp sur le net en particulier ici
positionnement avec div en absolut et relativeet ici
utilisation de l’overflow pour bloquer le contenu dans un div et gérer les scroll
j’ai opté pour une solution basée sur un gros conteneur positionné en relatif et qui contient plusieurs autres positionné en absolut. Je pensais faire juste en me basant sur le premier tuto pour positionner les conteneur interne en leur donnant des dimensions et en les plaçant par rapport au conteneur de base.
Mais le conteneur de ma sidebar ne suit pas ce que j’ai mis dans le CSS alors que les autres oui, je ne comprends pas du tout pourquoi, et je suis vraiment à cours d’idées!
Voici le début de mon template (tout bordélique car absolument pas fini et en test),
ici
et ce que j’aimerais c’est que ma sidebar soit placée à gauche en dessous de mon logo avec un décalage léger vers la droite…Pour ne pas surcharger ce message, je vous envoie dans un suivant le code de mon CSS et la partie html qui regroupera les fichiers header, index et sidebar.
Pourriez vous m’aider svp?
30 mai 2008 à 23 h 03 min #632073Voici le header et le index regroupé
<title> » » </title>
<meta http-equiv="Content-Type" content="; charset= » />
<meta name="generator" content="WordPress » />
<!-- leave this for stats -->
<link rel="stylesheet" href=" » type= »text/css » media= »screen » />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href=" » />
<link rel="alternate" type="text/xml" title="RSS .92" href=" » />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href=" » />
<link rel="pingback" href=" » />
<div id="page"> <!-- on ouvre le div page -->
<div id="header"> <!-- on ouvre le div header -->
<h1><a href=" »></a></h1> <!-- on affiche le nom du blog et on lui donne un style -->
<h1>. </h1> <!-- on affiche la description du blog -->
<b> <A HREF="http://www.unine.ch"><IMG SRC="http://www.fightmoveacademy.ch/blog//wp-content/themes/Theme1/imgs/logo.png" ALIGN="right" border="0"><A>
</div> <!-- on ferme le div header -->
<!-- ouvrir header,php -->
<div id="menuflash">
</div> <!-- on ferme le div menuflash-->
<div id="content">
<div id="content1">
<div id="content2">
<div class="post" id="post-« >
<h2><a href=" » title= » »></a></h2>
<p class="postmetadata"> <!-- on affiche les postmetadata (date, auteur, etc de l'article) -->
par |
Catégorie: |
</p>
<div class="post_content">Oooopppsss…
Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .
30 mai 2008 à 23 h 04 min #632074le fichier sidebar
<div>
<ul>
</ul>
<li id="search"></li> <!--insertion formulaire de recherche -->
<li id="calendar"><h2>Calendrier</h2> <!--insertion calendrier par défaut de Wordpress-->
<li><h2>Categories</h2> <!--insertion catégorie-->
<ul>
</ul>
<?php wp_list_pages('title_li=<h2>Menu-pages</h2>‘); ?> <!--insertion pages-->
<li><h2>Archives</h2> <!--insertion archives-->
<ul>
</ul>
</li>
<li><h2>Infos Meta</h2> <!--insertion infos meta (login, etc)-->
<ul>
<li></li>
</ul>
</li>
<li><h2> Flux RSS </h2> <!--insertion flux rss-->
<ul>
<li><a href=" » title= »Flux RSS des articles »>Flux RSS des articles</a></li>
<li><a href=" » title= »Flux RSS des commentaires »>Flux RSS des commentaires</a></li>
</ul>
</li>
</li>
</li>
</div>30 mai 2008 à 23 h 06 min #632075et pour finir le fichier CSS en chantier
/*
Theme Name: Theme1
Description: Le theme du site FightMoveAcademy
Version: 0.1
Author: Fabien Nissels
*/
body {
font-family: Lucida Grande, Arial, Helvetica, Sans-serif;
font-size: 0.8em;
text-align: left;
background-color: #000000;
margin: 0;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url(http://www.fightmoveacademy.ch/blog//wp-content/themes/Theme1/imgs/fondsite.jpg);
background-position:center center;
}
#page {
position: relative;
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
}
#header {
position:absolute;
width: 400px;
height: 400px;
top:0;
left:0;
}
#header h1 {
display:none;
}
#menuflash {
background-color: #000000;
position:absolute;
width: 600px;
height: 135px;
top:0;
right:0;
}
#content {
position:absolute;
width: 510px;
height: 633px;
bottom:0;
right:0;
background-repeat:no-repeat;
background-image:url(http://www.fightmoveacademy.ch/blog//wp-content/themes/Theme1/imgs/content.png);
background-position:center center;
background-attachement: fixed
}
#content1 {
width: 510px;
height: 633px;
overflow : auto;
border : 1px solid #000;
}
#content2 {
padding : 40px 0 0 90px;
}
#sidebar {
font-size: 0.6em;
position:absolute;
width: 270px;
height: 358px;
bottom:0;
left:0;
}Je vous remercie d’avance pour votre aide, car là je suis à court d’idées. Il me faut peut être quelques explications sur le fonctionnement des « bottom:0; left:0; » etc
31 mai 2008 à 0 h 29 min #6320761/ Tu aurais tout à fait pu mettre tout dans un seul message, mais il ne faut pas oublier d’utiliser la balise CODE (bouton C) pour tes listings.
2/ La CSS, on la trouve sur ton site que tu nous mets en lien, c’est parfait ; ce qui peut aider, et qui manque, ce serait une mini maquette graphique du rendu souhaité (il ne me reste plus qu’à espérer t’avoir compris).
3/ Firefox + Firebug + Html Validator => ça urge !
4/=> tu ne crois pas qu’il manque quelque chose (une idée ? un id !)Bon, pour être un peu plus clair : commence par télécharger les deux extensions de firefox citées ci-dessus, et modifie tes thèmes pour pondre du code valide.
Ensuite, sur cette base saine, nous poursuivrons le travail.
31 mai 2008 à 14 h 55 min #632077Salut!
je te remercie bcp pour ta réponse, j’ai donc installé les extensions et corrigé l’erreur pour le div sidebar! Par contre je ne comprends pas bien ce que font ces extensions, elles permettent réellement de changer la feuille de style d’un site par ex? Mais les changements seront visibles seulement pour notre pc?
Sinon j’ai fait un shéma du site le voilà
Voici les différents div du shéma:
1: Div header- Doit rester à la même place tout le temps, n’est pas scrollable
2: Div sidebar- Doit rester à la même place tout le temps, n’est pas scrollable
3: Div news- Doit rester à la même place tout le temps, n’est pas scrollable, contient une bannière style pub
4: Div menu flash – Doit rester à la même place tout le temps, n’est pas scrollable, contient une anim flash
5: Div content – Doit rester à la même place tout le temps, le fond est fixe, mais le contenu est scrollable
6: Div footer – Doit rester à la même place tout le temps, n’est pas scrollable
7: Div page – J’aimerais qu’il soit centré en hauteur et en largeur par rapport à l’écran, afin de se poser correctement sur l’image de backgroundMes questions sont donc:
– Comment puis je centrer en hauteur et en largeur mon div page?
– Est-il possible de faire que le scroll du div content soit celui du bord de page, plutôt que d’être situé sur le bord du div content?
– Est-ce que ma technique pour placer mes div internes par rapport au div page est elle juste? (le div page en position relative, les autres en absolue, et le placement grâce au infos « bottom:0 » etc?
– Comment faire pour bloquer impérativement la taille du div page? Actuellement si j’ajoute du contenu à la sidebar, il s’allonge, j’ai pourtant spécifié une taille dans le CSS pour le div page…Merci d’avance pour votre aide à tous!
31 mai 2008 à 15 h 11 min #632078Html validator ne te permet que de vérifier si ton code est valide, et de prendre connaissance des erreurs qui s’y trouvent (charge à toi de trouver comment les corriger).
Firebug te permet de modifier dynamiquement dans une page chargée dans ton navigateur son contenu et ses attributs. La modification ne touche que la page chargée dans ton navigateur, et évidemment pas le site qui la contient (si tu rafraîchis la page, toutes les modifications disparaissent). Ça te permet surtout de valider visuellement les retouches à apporter, c’est un excellent outil de diagnostic/mise au point.
J’ai besoin de quelques compléments d’informations :
* Qu’est ce que tu entends par « n’est pas scrollable ». Il s’avère que si tes différentes divs étagées sont plus hautes que la fenêtre du navigateur, fatalement, il va y avoir une barre de défilement vertical (qui ne peut pas se confondre avec celle qui te permet de faire défiler le contenu de « content »)Le centrage horizontal, c’est assez fastoche.
Le centrage vertical, c’est une autre paire de manche.
Un chouette tuto chez Alsacréations.31 mai 2008 à 15 h 28 min #632080ah ok, je comprends mtn bien à quoi elles servent. J’ai fait un diagnostique du site et il me trouve des erreurs de syntaxes que je ne comprends par vraiment, mais c’est pas grave, j’en ai corriger des qui étaient évidentes.
Oui en fait je me suis mal exprimé, il est clair que si la résolution de l’écran est plus petite que la taille de mon site, je vais avoir un scroll, il faut donc que je me débrouille pour éviter d’avoir trop de contenu dans la sidebar. Ce qui m’aurait intéressé c’est de supprimer ce vilain effet de frame pour le div content qui a la propriété overflow, en utilisant le scroll du bord de la page pour scroller son contenu.
Concernant le placement des divs internes, est-ce que les infos « bottom:0″ top:0 » correspondent en fait au margins, mais exprimées autrement?
Merci pour le tuto, je fonce dessus mtn!
31 mai 2008 à 15 h 44 min #632079Non, bottom et top, ça correspond à un positionnement (généralement avec un position:absolute).
D’ailleurs, généralement on accroche en haut ou en bas (bottom OU EXCLUSIF top) et à droite ou à gauche (left XOR right).Quelques précisions aussi par rapport à ta maquette, tu n’as pas précisé si tu voulais du design fluide ou fixe.
31 mai 2008 à 16 h 10 min #632081et bien j’aimerais un design fixe pour commencer pour ne pas trop compliquer la tache avec mes div qui contiennent une image de fond, car même si je sais que je peux l’étirer en la coupant en plusieurs morceaux, je préfère faire simple.
J’ai regardé ton tuto pour l’alignement vertical, et après avoir essayé quelques uns de leurs trucs et avoir fouiné sur le web, j’ai abandonné car apparemment c’est en effet un sujet épineux :happy: et je me base plutôt sur un margin-top: value; pour gérer quand même un peu le positionnement vertical…
Sais tu aussi pourquoi est-ce qu’on a un effet de sintillement pour la partie du background qui se trouve sous le div content, lorsqu’il y a un scroll pour la page (donc que par ex ma sidebar est trop longue) ? C’est curieux ce truc!
31 mai 2008 à 17 h 10 min #632082Quelques remarques en vrac :
1/ puisque tu as un nouveau blog, tu as tout intérêt à le faire sur la dernière version en date de WP : 2.5.1
2/ tu as un soucis d’encodage sur « Actualités » : si tu as mis des accents dans un fichier PHP, il faut qu’il soit encodé en utf8 (si possible sans entête). Évite aussi la ligne vide en tout début de ton entête.
3/ Concernant ton logo, je ne sais pas pourquoi tu lui a mis des bords. Du coup, la div qui le contient déborde de la div #page. Tu te compliques la vie pour rien !
4/ J’ai vu que tu avais mis une width de 1024 pour ta div principale, mais pour un écran de cette résolution, compte tenu des bords de fenêtre + ascenseurs, la largeur disponible est réduite à environ 1000px. Penses-y ! Les ascenseurs horizontaux sont souvent pénibles…
5/ L’effet de « scintillement » est dû au travail que tu demandes au navigateur pour recalculer l’image de fond compte tenu de la transparence (nb : pas compatible IE6-, sauf hack)2 juin 2008 à 7 h 49 min #632083Salut!
Merci encore une fois pour ton aide très préciseuse!
alors j’ai tenu compte de tes remarques (sauf pour la version et l’encodage, dont je dois encore m’occuper) et j’ai positionné mes divs en leur donnant à chacun un background de couleur pour voir s’ils se positionnent correctement selon ce que j’ai défini dans ma feuille de style.
Les éléments se positionnent donc juste, par contre j’ai un souçis que je comprend pas avec mon div principal, le div page: Je lui ai donné les dimensions 1000px par 750px et j’ai mis une image de background qui fait exactement la même taille. Pourtant lorsque je regarde le site sur un écran 22 pouces par ex, le div page n’est pas assez haut, et il affiche donc pas toute mon image de background, une partie du contenu (les divs internes) donnent donc l’impression de dépasser du div page…
Sinon j’ai un autre petit souçis:
Mon site sera constitué de plusieurs pages et d’une qui contiendra le blog. Dans ma sidebar j’affiche donc les différentes pages, mais comment mettre ensuite celle destinée au blog, qui est en fait la homepage du site, exactement dans la même liste. En effet, dans wordpress, la partie du menu page ne permet d’afficher que des pages, et non des liens vers d’autres sites par ex, je serais obligé d’insérer un bloglist par ex, ce que je ne veux pas…Merci d’avance
2 juin 2008 à 11 h 00 min #632084…je viens de tomber sur un tutoriel sur la gestion de la sidebar pour un site wordpress mi site traditionnel mi blog. Je vais donc essayer de résoudre ma deuxième question seul pour ne pas te surcharger de questions 🙂
2 juin 2008 à 13 h 36 min #632085Concernant mon problème de background par contre je sèche toujours, je ne comprends pas pourquoi est-ce que mon div page ne veut pas coupe un bout de mon image de background sur la hauteur. La dimension de l’image et celle du div est pourtant exactement la même…
J’ai partiellement résolut le problème en mettant mon image de background dans la partie body et non pas dans mon div, mais j’aimerais quand même bien comprendre ce qui ce passait…
2 juin 2008 à 20 h 45 min #632086Excuse-moi mais je n’arrive pas à comprendre ton problème (je suis un peu fatigué ce soir !). Est-ce que tu peux le reformuler ?
Est-ce que ton problème n’est pas un problème de padding ou de margin ?
Par ailleurs, je pense que ce n’est pas forcément génial de spécifier une height pour un conteneur principal… -
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.