Overflow: le foutoir !

Fermé
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 27 mai 2008 à 15:12
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 30 mai 2008 à 14:24
Bonjour à tous !
J'ai un gros souci (et le ne maitrise pas trop la propriété overflow (voir ici http://txiki.free.fr/index-test.php sous IE7/XP j'obtiens deux ascenseurs au lieu de rien normalement (? ? ?).
Sous Firefox/XP toujours, je n'ai plus que l'ascenseur vertical (? ? ?) Pourquoi ? (voir ici http://txiki.free.fr/index-test.php ).
ci-dessous ma portion de css:
#frame { /* partie centrale scrollable si le contenu dépasse */
	float: right;
	padding: 5px; /*marge intérieure des textes */
	height: 500px; /* hauteur de 500 px fixe */
	width: 710px;  /* 730 (bandeau) - (largeur de l'ascenseur + paddings) */
	background-color: #F2FFF2; /* couleur vert très pale */
	height: 500px; /* hauteur du bloc central avant scroll */
	overflow: auto; /* si le contenu déborde, il y aura un scroll (ascenceur) */
}


Je pense que c'est le logo de xiti qui me met la grouille mais n'en suis pas sur du tout. D'un div, je l'ai passé en <p> mais ça ne change rien.

J'ai aussi pensé à la hauteur du #frame mais là encore, rien de concret !

Je vais finir par virer ce overflow et tant pis si le bandeau, menu et footer ne sont pas toujours visibles. La plupart des pages sont quand même assez longues !

Ça fait un bon moment que je bataille avec cette nouvelle mise en page et ne m'en sort pas. Ça m'éneeeeeerve !
Pourtant je ne suis pas loin du but !
Si quelqu'un pouvez m'aiguiller j'en serais ravi.
Merci d'avance pour ce sérieux coup de main !


5 réponses

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
27 mai 2008 à 21:02
Bonsoir à tous,
Alors personne pour un p'tit coup de main ?
PS: j'ai supprimé le height.

Il faudrait aller sur http://txiki.free.fr pour le résultat, différent sous IE7 et Firefox. Dans un cas il met les deux scroll, dans l'autre, Firefox, quand c'est necessaire.
Mais dans IE7, c'est la présence de l'image flottante qui le gène (voir tradition les 3 premières pages, abarka, alamedia et bertsu).

Merci d'avance.
0
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
27 mai 2008 à 21:43
bsr

J'ai pas encore succombé à cette mode qui veut qu'on positionne tout dans des DIV donc je ne maîtrise pas encore toutes les subtilités (et encorer moins les abérrations) qui vont avec l'emploi des float ...

Voici cependant ce que j'ai pu noter

Déjà 4 feuilles de styles ha tu fais pas dans le simple ! T'Oh :-)

Dans ton code je constate qu'il y a 2 tag <div id="frame"> imbriqués ? Est-ce normal ?
Surtout que le style appliqué à #frame comporte float: right; Lorsqu'on imbrique les float ca donne quoi ?


Ensuite ça : je suppose que ca doit servir mais ...

html {
height: 100%
}


Hauteur 100% pour l'élément HTML : ok mais par rapport à quoi ?


Un script JavaScript en plein milieu de la page : mais il s'exécute qd exactement ? Alors que l'arbre DOM de la page n'est pas encore complètement chargé ? Personnellement je proscris les scripts en milieu de page : c'est soit avant dans le head soit après dans le onload par ex ... mais c'est juste un avis personnel

Dans ton tableau à l'intérieur des <div id="frame"> tu positionnes le contenu de ta 1ère cellule de façon relative, la seconde de manière absolue et la troisième en suivant le flux normal ... hé ben

Malgrès tes 4 feuilles de style on trouve encore beaucoup de style in-line directement dans le code HTML ? Pourquoi ?

Et ceci
<div id="footer">
        <!-- Début de la section footer (pied de page) -->
       <TR>


Tu attaques un <tr> directement sans balise <table> préalable ... hum bienvenue aux effets de bord


Ouais c'est le foutoir t'as raison lol

Revois d'abord tes balises et leur imbrication tes codes CSS à mon avis le pb vient de là

0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
29 mai 2008 à 21:29
Salut php et désolé pour ce retard (journées de Ouf !)

1 -) Dans ton code je constate qu'il y a 2 tag <div id="frame"> imbriqués ? Est-ce normal ?
Je pense que tu a du voir ça sur le source mais en fait il s'agit d'includes en php dans ces div. Mais je ne vois pas l'erreur (a force de parcourir ces lignes je ne vois plus rien, ne suis plus très lucide).
Un extrait de l'index:
<!-- Début de l'image de la bannière -->
	<div id="bandeau">
           <IMG title="Abarka"  style="margin: 0px" width="730" height="164"
             <?php
               echo "src=\"".$_SESSION[$page]['Banner']."\"";
             ?>
           alt="Abarka"><br />
	</div>
       <!-- Fin de l'image de la bannière -->

       <!-- Début de la section du menu dynamique -->
             <div id="menu">
			   <div id="wrap">
               <div>
                 <?php
                   include "Html Pages/Share/Menu $lang.htm";
                 ?>
               </div>
               <SCRIPT language=javascript>
                 if (TransMenu.isSupported())
                 {
                   TransMenu.updateImgPath('Modules/TransMenu/');
                   var ms = new TransMenuSet(TransMenu.direction.right, 0, 0, TransMenu.reference.topRight);
                   TransMenu.subpad_x = 1;
                   TransMenu.subpad_y = 0;

                   document.getElementById("menu01").onmouseover = function()
                   {ms.hideCurrent();} 
                   <?php
                     echo "IncludeSubMenu$lang();"; 
                   ?>
 
                   TransMenu.renderAll();
                 }
                 init1=function(){TransMenu.initialize();}
                 if (window.attachEvent){window.attachEvent("onload", init1);}
                 else {TransMenu.initialize();}
               </SCRIPT>
             </div>
			</div>
       <!-- Fin de la section du menu dynamique -->


       <!-- Début du contenu principal -->
		<div id="frame">
             <?php
               include $_SESSION[$page]['Location']." $lang.htm";
             ?>
		</div>
        <!-- Fin du contenu principal -->



2 -) html {
height: 100%
}

C'était ainsi, alors je l'ai laissé mais ça m'a semblé bizarre ! Je vais le virer, j'avais pensé que c'était pour avoir le footer toujours en bas de la page si celle-ci n'avait pas suffisament de contenu.

3 -) Un script JavaScript en plein milieu de la page : mais il s'exécute qd exactement ?
Lorsqu'on passe la souris sur un item de menu. Ça génère le mouvement des sous menus (avec le transmenu.js).

4 -) Dans ton tableau à l'intérieur des <div id="frame"> tu positionnes le contenu de ta 1ère cellule de façon relative, la seconde de manière absolue et la troisième en suivant le flux normal
C'est basé sur un tuto d'alsacréation mais corrigé par quelqu'un ici. Le Pb, c'est tout ça fonctionne très bien chez moi, aussi bien sous IE7 que Firefox (sous XP).

5 -) Tu attaques un <tr> directement sans balise <table> préalable
Ça c'est un oubli du script original (le gars avait tout fait via des tableaux. Et pourtant c'est pas un manche ! (? ? ?)

Si tu pouvais jeter un œil rapide (avec le pseudo que tu porte... ça ne devrais pas te paraitre très difficile par rapport à moi)
En tous cas merci d'avance !

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 6
29 mai 2008 à 22:15
Bonsoir!
J'adore le pays basque, et ton site porte là-dessus.
Ce que j'ai vu (même si ce n'était pas ta question), c'est que dans le menu à gauche, plusieurs de tes rubriques reviennent plus d'une fois, comme Prénoms, Recettes, etc. Est-ce voulu? Et les sous-rubriques aussi ont l'air de se retrouver de manière pas très ordonnée dans les rubriques. Un peu le foutoir me semble-t-il.
Mais comme tu es en train de construire ton site, il ira en s'améliorant
Courage
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
30 mai 2008 à 12:31
Salut Beate,
C'est normal pour les répét des menus, ce sont des copier/coller dans les pages menus, uniquement pour voir le comportement de celui-ci lorsqu'il dépasse la hauteur du bandeau.
Si tu veux voir l'original (que je suis en train de reloocker) c'est ici: http://www.abarka.eu

Mais tant que je n'ai pas réglé cette mise en page....
0
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
30 mai 2008 à 12:42
Déjà, sur ton bout de code :
- Ne jamais utiliser espaces et majuscules pour tes chemins de fichiers (include "Html Pages/Share/Menu $lang.htm";). Il y a toujours des risques, en changeant de serveur...

- Si tu as bien deux DIV ID="frame", il faut corriger ça : par définition, le ID définit un objet unique (contrairement à la CLASS).

- Je crois qu'il y a un truc avec le padding sous IE... Tu peux essayer en augmentant le WIDTH, et/ou en diminuant le PADDING...
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
30 mai 2008 à 13:20
Salut macgawel !

- Ne jamais utiliser espaces et majuscules
Ça, c'était mon principe AVANT mais cette façon d'écrire ce n'est pas la mienne ! je peux très bien changer, ce n'est pas méchant (sauf que je dois modifier aussi ces chemins dans les déclarations de variable).

- Si tu as bien deux DIV ID="frame", il faut corriger ça
Alors ça, je ne vois pas où se trouve cette double nomination. Je sais très bien qu'un id ne peut être qu'unique dans une page mais le Pb c'est que je ne vois pas où se trouve le second ? Je continue de regarder mais....

- Je crois qu'il y a un truc avec le padding sous IE...
Tu ne confond pas avec le margin plutôt ? IL faut commencer par supprimer le margin puis le remettre mais là encore je ne sais pas comment m'y prendre.

En tous cas merci pour ta participation.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
30 mai 2008 à 13:31
Bjr



<!-- Fin de la section du menu dynamique -->


<!-- Début du contenu principal -->
<div id="frame">
<?php
include $_SESSION[$page]['Location']." $lang.htm";
?>
</div>
<!-- Fin du contenu principal -->

Donc vérifie le code dans ton include juste après tu dois avoir un second <div id="frame"> dedans

En fait le second div apparaît juste après le commentaire : <!-- Début de la colonne centrale -->

je sais pas si ca t'aide bcp
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
30 mai 2008 à 14:24
J'ai TROUVEEEE !
En fait le div id="frame" de trop se trouvait sur la page accueil Fr.htm. Du coup j'ai même viré les commentaires et démarre la page par un <h1> et </h1>.

Mais je pense que je vais garder les espaces et les majuscules dans les noms des dossiers 'à moins que vous me conseillez le contraire !). Voici un extrait de la css:
#conteneur { /*le conteneur global du site, qui sera centré */
	width: 880px; /* largeur du bandeau (730px) + menu (150px) */
	margin: 0 auto; 
}

#header { /* le header sera centré */
    margin: 0px auto; 
	width: 880px; /* le header fait 880 px de large */
	padding-top: 12px; /* l'espace interne supérieur sera de 12 px */
	padding-bottom: 10px; /* l'espace interne inférieur sera de 10 px */
	text-align: right; /* le texte sera aligné à droite */
}

#menu { /* position du menu */
	float:left; /* le bloc du menu flotte à gauche */
	width: 150px; /* largeur du menu */
	background: #931224;  /* couleur rouge sang pour le menu */
}

#bandeau { /* le bandeau fait 730 px de large et 164 ps de hauteur, toujours */
	float: right; /* le bandeau flotte à droite dans le conteneur principal */
	margin: 0px auto; /* la marge haute sera de 0 px et au milieu de la place qui lui est réservée  */
	width: 730px; 
	height: 164px;
}

#frame { /* partie centrale flottante à droite qui aura le scroll */
	float: right; /* la boite flotte à droite dans le conteneur principal */
	margin-left: 0;
	margin-right: 0;
	padding: 5px; /*marge intérieure des textes */
	height: 500px; /* hauteur du bloc central avant scroll */
	width: 700px;  /* 730 (bandeau) - (largeur de l'ascenseur + paddings) */
	background-color: #F2FFF2; /* couleur vert très pale */
	margin-bottom: 10px;
	overflow: auto; /* si le contenu déborde, il y aura un scroll (ascenceur) */
}

Est-ce correct ? Ou y-a-t-il encore des boulettes ?

En fait, il me faudrait IE6 mais je ne sais pas si je peux l'installer en ayant IE7 sur mon ordi ? Comment je pourrais faire ?

Autre chose: les caractère accentués et spéciaux comme "boeuf" du prénom du jour (qui se trouve dans une table) ne s'affichent plus correctement alors que sur l'ancien, encore en ligne, c'est OK. Pourquoi ?
http://www.abarka.eu

Vous qui avez l'habitude, dans cette nouvelle structure, le logo xiti ne se trouve plus que sur l'accueil. Comment ça va se passer pour les analyses ?
Je crois savoir qu'il faut le tag xiti sur chaque page a auditer, non ?

En tous cas merci beaucoup pour votre aide si précieuse pour moi qui suis débutant !

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0