problème conteneur div.

Anonymus · 19 Mai 2005

Bonjour,

Suivant cet exemple :

http://www.galle.fr/entreprise/dev/nouveau_site/index.php

Le 'contenu' devrait s'afficher dans le cadre blanc, quitte à le faire 'agrandir' si ce cadre n'est pas assez grand. Il devrait d'ailleurs faire par défaut la taille de l'écran.

Le problème, c'est que ca marche bien sous IE, mais pas sous Mozilla. Le cadre ne s'agrandit pas.

Second problème, les cadres 'gauche' et 'droit' devraient s'afficher respectivement à gauche et à droite de l'ensemble, soit au dessus du contenu, soit chacun à coté.

Idem, impossible à faire... sans tableaux

**Dan** · 19 Mai 2005

Avec la même classe définie pour les cadres gauche et droit, ils ne risquent pas de s'afficher de part et d'autre, non ?

<div class=table_principale>gauche<div class=table_principale>droit </div>

.... ta div de droite est contenue dans celle de gauche, ainsi que la div principale ?

Anonymus · 19 Mai 2005

Très juste.. Je fais des essais, parce que visiblement, il y a quelque chose qui m"échappe

Là, c'est remis 'normalement'. Les cadres gauche et droite sont à coté, mais décalés. Et je ne peux pas mettre de valeur négative pour le cadre de droite, vu que je ne sais pas la longueur qu'il aura.

Les bordures sont là uniquement pour avoir une idée d'où se trouve le cadre.

**Dan** · 19 Mai 2005

Salut Nico,

Tu peux mettre le cadre gauche en float-left avec une width de 48% ... idem pour celui de droite (en float:right bien sûr)

Comment veux-tu qu'ils s'affichent ? De part et d'autre du bloc principal, ou isolés en haut, l'un à gauche et l'autre à droite avec le cadre principal en dessous ?

Dan

Jeff · 19 Mai 2005

Bon c'est pas trop mon truc, mais je me lance, ça peut me servir aussi


<html>
<head>

<style type="text/css">
body{
	background-color: #C3C2AD;
	margin-top:3%;
	margin-left:5%;
	margin-right:5%;

	}

.page{
	background-image: url("background_site.gif");
	height:100%;
	padding:2%;
	position:relative;

	}

.header_img{
	margin-top:0.5%;
	position:relative;
	width:100%;
	}

.menu{

	margin-left:2.5%;
	width:95%;
	position:relative;
	}

.menu_td{
	background-image: url("menu_td.jpg");
	position:relative;
	border-width:1px;
	border-style:dotted;
	padding-top:2px;
	padding-left:7px;
	padding-bottom:2px;
	border-color:black;
	}

.contenu{
	width:100%
	}

.table_principale{
	text-align: center;
	margin-top:1%;
	margin-left:30%;
	margin-right:30%;
	border-style:dashed;
	padding: 10px;
	}

.gauche{
	float:left;
	width: 20%;
	margin-right:5%;
	padding:2%;
	position:relative;
	border-style:dashed;
	}

.droit{
	float: right;
	width: 20%;
	padding:2%;
	margin-left:5%;
	position:relative;
	border-style:dashed;
	}


</style>
</head>
<body>
<div class='page'>
header
<div class=contenu>
<div class=gauche>gauche</div>
<div class=droit>droite</div>

<div class=table_principale>

contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu

</div>

</div>

</div>
</body>
</html>

Par contre pour le fond je ne sais pas trop, j'avais eu un pb similaire, mais je ne me rappelle plus.

Jeff,

michmuch51 · 19 Mai 2005

Salut Anonymous,

je ne sais si tu as jeté un oeil sur le post de Régis, mais en fait visiblement vos pb, peuvent être réglés avec la même structure css, surtout toi si tu doit faire un hack pour ie:

donc je te remets le lien:

alsa

Puis sinon même si mon css est un peu brouillon va y fouiller un peu, mon image de fond s'étire également...

@+

Dudu · 19 Mai 2005

Second problème, les cadres 'gauche' et 'droit' devraient s'afficher respectivement à gauche et à droite de l'ensemble, soit au dessus du contenu, soit chacun à coté.

Ils dépassent à eux deux les 100%

Tu les a déclaré à 50% chacun plus les bordures, donc on est dans les 101 % à peu près

Comme le suggère Dan, passe les à 48% ainsi tu es sûr d'avoir visuellement un résultat assez proche d'un 50/50, tout en disposant d'une marge de manoeuvre pour les bordures.

Essaie aussi de supprimer les bordures Si tu souhaites les conserver pour voir où sont les blocs tu peux essayer de mettre à la place un outline (= bordure qui se surperpose sans prendre sur les blocs la place dont elle a besoin) ou bien un background (la méthode la plus simple).

Attention, outline n'est pas reconnu par tous les navigateurs..

tictact · 19 Mai 2005

bonsoir ou bonjour,

des exemples qui peuvent vous inspirer.

Anonymus · 20 Mai 2005

Merci beaucoup à tous,

j'en ai pour le week end, le temps de tester tout ca

YannCo · 21 Mai 2005

Salut, je me suis inspiré d'un css trouvé sur le hub, enfin il me semble il fonctionne tant que je n'utilise que des paragraphes ou des titres, seulement va faloir que j'insèrer un tableau (sauf si on me propose mieux ..) et dès que je met mon tableau ça plante sous IE, mon tableau se retrouve bien dans la bonne colonne du site mais commence sous la derniere ligne du menu.

Sous FireFox c'est ok. désolé je ne peux pas vous montrer le lien (faut que je me trouve un hébergement gratuit d'ailleur pour les tests)

style.css


/* CSS Document */
* {padding: 0; margin:0}
html,body
{
	height:100%;}
body {
   background-color:#e1e1e1;
}
#corps{
height:auto;
min-height:100%;
height:100%;
width:740px;
margin-left:auto;
margin-right:auto;
background:#eaeaea;
}
input, select { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; text-align:center; font-weight:bold; color:#a5c551 }

#header
{
   width: 740px;
   height: 87px;
   background-color:#FFFFFF;
}
#header p{
position:relative;
font-size:36px;
top:40px;
right:20px;
text-align:right;
color:#99FF66;
}
#menu
{
   float: left; 
   width: 150px;
   padding-top:4px;
   background-color: #e7e9df;
   /*height:80%;*/
   min-height:80%;
}


.element_menu
{
   border: 1px solid #CCCCCC;
   margin-bottom: 10px; 
   margin-left:2px;
   -moz-border-radius: 10px;
      background:#a5c51b;

}


.element_menu h3 
{    
   color: #fff;
   background:#a5c51b;
   font-family: Verdana, Tahoma, serif;
   font-size: 12px;
   margin-top: 5px;
   margin-left: 0px;
   text-align:center;
   padding:3px;
   text-decoration: none;
}

.element_menu ul
{
   list-style-type: disc;
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 10px;
      background-color: #e7e9df;

}

.element_menu a 
{
   color: #669966;
   text-decoration:none;
   font-family: Verdana, Tahoma, serif;
   font-size:10px;

}
.content
{
 text-align:center; 
 padding-top:7px;
       background-color: #e7e9df;
   margin-bottom: 10px;

 }
#droite
{
   margin-left: 152px; 
   margin-right:2px;
   color: #a5c51b;
   font-family: Verdana, Tahoma, serif;
   font-size:10px;
   font-weight: bold;
      background:#a5c51b;
   margin-top:4px;
   border: 1px solid #CCCCCC; 
   -moz-border-radius: 10px;

   text-align: justify;
}

#droite h2
{
   font-size: 14px;
   color: #fff;
   background:#a5c51b;
   font-family: Verdana, Tahoma, serif;
   margin-top: 5px;
   margin-left: 0px;
   text-align:center;
   padding:3px;
   padding-bottom:30px;
   text-decoration: none;

}
#droite ul
{
   list-style-type: disc;
   line-height:16px;
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 10px;
      background-color: #e7e9df;
}

#droite h3
{
   color: #AAAAAA;
   text-align: left;
   font-family: Verdana, Tahoma, serif;
   text-decoration: underline;
   font-size: 10px;
}

#droite a
{
   color: #a5c51b;
   font-family: Verdana, Tahoma, serif;
   font-size:10px;
}

#droite a img
{
   border: 1px solid black;
}

#footer
{
   clear:both;
   text-align: center;
color:#a5c51b;
font-size:9px;
}

index.php


<!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=iso-8859-1" />
<title>Document sans titre</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="corps">
	<div id="header"><p>Titre</p></div>
	<div id="menu">
		<div class="element_menu"> 
	   <h3>Menu 1</h3>
	   <ul>
	   	<li><a href="#">Accueil</a></li>
	   	<li><a href="index1.php?page=accueil1">accueil1</a></li>
	   	<li><a href="#">lien</a></li>
	   	<li><a href="#">lien</a></li>
	   	<li><a href="#">lien</a></li>
	   	<li><a href="#">lien</a></li>
	   </ul>
	   </div>
	   <div class="element_menu"> 
	   <h3>Menu 2</h3>
	   <div class="content">
	   <input type="text" size="8" /><input type="password" size="8" /><input type="submit" value="Connexion" /><br />
		<a href="#">Inscription</a></div>
  	  </div>
	</div>
	<div id="droite">
<?php
if($_GET['page'] == 'accueil1')
{
include 'accueil1.php';
}
else
{
include 'accueil.php'; 
}
?>
</div>
<div id="footer">Bla bla bla</div>
</div>
</body>
</html>

page avec tableau accueil1.php


<h2>Gnia gnia gnia</h2>
<div class="content">
	<table width="100%">
		<tr>
<td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td>
		</tr>
		<tr>
<td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td>
		</tr>
		<tr>
<td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td><td width="33%">Contenu cellule</td>
		</tr>
	</table>
</div>

Hors-sujet : sympa la codebox

Anonymus · 21 Mai 2005

Ca marche pas trop mal, j'ai juste un p'tit problème, pour aligner au centre les menus..

C'est bon pour IE, mais Mozilla refuse de les aligner

=>http://www.galle.fr/entreprise/dev/nouveau_site/index.php

Merci

edit : si vous voyez que ca bouge, c'est normal, je suis dessus

Dudu · 22 Mai 2005

c'est quoi ce div spacer ? :fou:

Pour les menus, mets-y de la sémantique, tu y gagneras Si tu mets dans ton div menu une petite liste (<ul><li></li></ul>) tu pourras jouer avec les margin left et right de l'ul pour centrer les élements du menu (ton bloc menu est bien centré, lui, grâce aux margin, mais pas son contenu )

Modifié 22 Mai 2005 par Dudu

Anonymus · 22 Mai 2005

C'est pour voir si tu suivais :lol:

Bon, c'est bon, je l'ai enlevé

Qu'entends tu par 'mettre de la sémantique' dans les menus ?

J'ai mis des '<ul><li>' pour le menu, cependant, il n'est pas centré sous mozilla

Dudu · 22 Mai 2005

Qu'entends tu par 'mettre de la sémantique' dans les menus ?

Ben une liste est une liste. J'entends par là se servir des balises adéquates au bon moment.

La série de <a> alignés avait l'air de tout sauf d'un menu quand on désactivait les CSS

Anonymus · 22 Mai 2005

J'ai légèrement modifié, en fait je pense que je suis arrivé à ce que je voulais faire (avec les listes)

Y'a un lien, en bas à droite, pour désactiver la feuille de style (on gagne du temps, comme ca )

Dudu · 22 Mai 2005

J'ai légèrement modifié, en fait je pense que je suis arrivé à ce que je voulais faire (avec les listes)

Y'a un lien, en bas à droite, pour désactiver la feuille de style (on gagne du temps, comme ca )

Tu ne voulais pas aligner les items de menu au centre ? (ils ne sont pas au centre chez moi)

Merci pour le lien qui désactive les styles. Pour l'instant je faisais çà avec un bookmarklet (Safari) ou avec l'extension WebDevelopper (Firefox)

[edit] il serait préférable

de mettre les icônes de liste en CSS
de mettre l'image du header en CSS également (mais quelque chose me dit qu'elle est appelée dynamiquement)

y'a une quelconque gêne à faire çà ? c'est voulu ?

[/edit]

[edit2]

si tu vois un boulet dans tes logs qui fait des 404 sur une feuille de style inexistante, c'est moi je la cherchais dans mon historique navigateur plutôt que dans le code source (et vu qu'elle a changé de place...)

[/edit2]

Modifié 22 Mai 2005 par Dudu

Anonymus · 22 Mai 2005

Non, ils ne sont pas au centre, je n'y arrive pas.

Dans le meilleur des cas ils 's'ajustent', mais ils ne sont pas 'centrés'.

Et quand ca marche pour l'un (IE), ca ne marche pas pour l'autre (Moz), ou inversement )

D'ailleurs, il y aurait un peu tout à centrer. Je pense qu'il y a une autre solution que de donner la taille exacte à chaque élément, systématiquement.

De plus, je n'ai plus les couleurs qui changent sur les menus. Normalement, quand on passe dessus avec la souris, ca devrait changer de couleur. Ca ne le fait pas avec IE. Mais j'ai lu un truc là dessus, il faut que j'expérimente.

ps : j'ai remis à jour.

Dudu · 22 Mai 2005

Normal pour les survols souris qui ne s'affichent pas avec IE. Ce #@&^$ de navigateur ne connait le pseudo-format :hover que sur les liens.

Le meilleur moyen de faire est de passer les liens en mode bloc.

Et même pour un navigateur qui reconnaît les li:hover, le lien ne s'affiche pas sur toute la surface du rectangle, ce qui est dommage.

Je me penche sur la question, tu risques d'avoir des référants un peu étranges

T'as vu mes edit ?

Anonymus · 22 Mai 2005

Le code 'source'

echo"<ul id='menu'>";

$menu = array("Accueil","Métier","Contact","Outils","Liens");
$sous_menu = array("Bienvenue","Présentation","Coordonnées","Programmes ","Références");

	foreach($menu as $k=>$v)
  echo "\t\t<li>\n\t\t\t<a href='' Title='Menu : ".$v."'><img src='./image/fleche_menu.jpg' title='fleche' alt='flèche' /> <b>".$v."</b>\n\t\t\t<br />\n\t\t\t".$sous_menu[$k]."\n\t\t\t</a>\n\t\t</li>\n";
echo "</ul>";

Pour les images hover, un span devrait faire l'affaire, mais 'est ce correct' ?

Dudu · 22 Mai 2005

Le code 'source'

echo"<ul id='menu'>";

$menu = array("Accueil","Métier","Contact","Outils","Liens");
$sous_menu = array("Bienvenue","Présentation","Coordonnées","Programmes ","Références");

	foreach($menu as $k=>$v)
  echo "\t\t<li>\n\t\t\t<a href='' Title='Menu : ".$v."'><img src='./image/fleche_menu.jpg' title='fleche' alt='flèche' /> <b>".$v."</b>\n\t\t\t<br />\n\t\t\t".$sous_menu[$k]."\n\t\t\t</a>\n\t\t</li>\n";
echo "</ul>";

Pour les images hover, un span devrait faire l'affaire, mais 'est ce correct' ?

Merci pour le code source PHP. Pour l'instant, je vois juste l'intégration HTML finale à l'aide d'un bête dossier sur mon bureau. Après, éventuellement, je mets çà sur localhost

Pour les référants, finalement t'inquiètes pas, j'ai rapatrié tout le nécessaire

Pour les :hover, non un span ne fera pas l'affaire (avec IE). IE ne connait les :hover que sur les balises <a> et aucune autre.

Donc li:hover ou span:hover -> du pareil au même

PS: Damned, tu as mis des listes partout, maintenant

edit: gargl, j'image que çà t'embêtes pour le PHP si je remplace les simple-quotes par des doubles ? :-/

edit2: pfiou, je sais pas comment mettre ton little_br_line en plus joli au niveau du code :unsure:

Mettre çà dans un <p> vide c'est de la grosse bidouille

Modifié 22 Mai 2005 par Dudu

Dudu · 22 Mai 2005

En fait le souci au niveau du menu, c'est qu'il y ait 2 lignes.

Juste pour le centrer, en gardant les marges de 10px, pas de souci.. mais avec 2 lignes par bloc, çà fout la zone

Dudu · 23 Mai 2005

En fait le souci au niveau du menu, c'est qu'il y ait 2 lignes.
Juste pour le centrer, en gardant les marges de 10px, pas de souci.. mais avec 2 lignes par bloc, çà fout la zone

24 h après, pas réussi à régler ce problème-là. En revanche, j'ai un peu retouché le reste pour que ce soit plus propre, mais les listes à 2 lignes je bloque. C'est vraiment nécessaire de les laisser comme çà ? :hypocrite:

Anonymus · 23 Mai 2005

En fait, non. Je pourrais essayer autre chose, mais je n'ai pas trop d'idées quant au design

Il pourrait y avoir 2-3 solutions, que j'ai testé sans résultats, mais ca pourrait te donner des idées. Au lieu du mot1<br>mot2, faire :

- faire une sous liste, ce qui donnerait qqch comme : <ul><li>mot1</li><li>mot2</li></ul>

- enlever carrément le <br>. La taille du second mot le fait passer en dessous, sans besoin de '<br> (ca donnerait mot1 mot2, le second passant en dessous)

- tester une autre balise (type <em>...)

- rajouter un 6e menu (ca donnerait : Accueil,métier,contact,outils, liens, divers), ca ne centre pas, mais ca élargi les cases, ce qui permet d'occuper toute la place.

Car finalement, si on occupe toute la place, ca ne fait pas centré, ca fait... complet

Sinon je supprime la seconde ligne, tant pis.

Merci

Dudu · 23 Mai 2005

- faire une sous liste, ce qui donnerait qqch comme : <ul><li>mot1</li><li>mot2</li></ul>

je n'ai pas essayé cela, puisqu'une sous-liste avec un seul item me paraît un peu étrange d'un point de vue sémantique. Mais je tente le coup..

Au fait, une sous-liste, çà donnerait plutôt quelque chose du genre

Là ton bout de code, c'est une simple liste à 2 éléments

- enlever carrément le <br>. La taille du second mot le fait passer en dessous, sans besoin de '<br> (ca donnerait mot1 mot2, le second passant en dessous)

Pas sûr que çà passe avec tous les navigateurs, çà (j'en connais un en particulier qui risque de ne pas aimer. Je ne montre pas du doigt conformément aux règles du Hub

mais suivez mon regard :lol:

)

- rajouter un 6e menu (ca donnerait : Accueil,métier,contact,outils, liens, divers), ca ne centre pas, mais ca élargi les cases, ce qui permet d'occuper toute la place.

Car finalement, si on occupe toute la place, ca ne fait pas centré, ca fait... complet

Non. Il n'y a pas de problème, c'est centré

C'est juste lorsqu'on rajoute la 2ème ligne (j'ai enlevé toutes les 2èmes lignes pour pouvoir me concentrer d'abord sur le centrage du menu) que çà ruine toute la mise en page du menu.

Connexion

problème conteneur div.

Sujets conseillés

Anonymus

Dan

Anonymus

Dan

Jeff

michmuch51

Dudu

tictact

Anonymus

YannCo

Anonymus

Dudu

Anonymus

Dudu

Anonymus

Dudu

Anonymus

Dudu

Anonymus

Dudu

Dudu

Dudu

Anonymus

Dudu

Veuillez vous connecter pour commenter

Parcourir

Activité