Aller au contenu

problème conteneur div.


Anonymus

Sujets conseillés

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 :(

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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, B)

Lien vers le commentaire
Partager sur d’autres sites

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...

@+

Lien vers le commentaire
Partager sur d’autres sites

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 :D

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..

Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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 :(

=&gt;http://www.galle.fr/entreprise/dev/nouveau_site/index.php

Merci ;)

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

Lien vers le commentaire
Partager sur d’autres sites

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é par Dudu
Lien vers le commentaire
Partager sur d’autres sites

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 :(

Lien vers le commentaire
Partager sur d’autres sites

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 :D

Lien vers le commentaire
Partager sur d’autres sites

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 )

Lien vers le commentaire
Partager sur d’autres sites

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

  1. de mettre les icônes de liste en CSS
  2. 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 :D je la cherchais dans mon historique navigateur plutôt que dans le code source (et vu qu'elle a changé de place...)

[/edit2]

Modifié par Dudu
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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' ?

Lien vers le commentaire
Partager sur d’autres sites

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é par Dudu
Lien vers le commentaire
Partager sur d’autres sites

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 :ph34r:

Lien vers le commentaire
Partager sur d’autres sites

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 :ph34r:

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:
Lien vers le commentaire
Partager sur d’autres sites

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 :D

Sinon je supprime la seconde ligne, tant pis.

Merci ;)

Lien vers le commentaire
Partager sur d’autres sites

- 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

<ul><li>mot1<ul><li>mot2</li></ul></li></ul>

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 :D 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 :D

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.
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...