[CSS] div à côté de mon texte qui grossi avec mon texte

Marsh Posté le 26-07-2005 à 17:58:45

Salut,

J'ai un petit cadre joli tout plein sur une maquette dans lequel je dois insérer mes textes.

J'ai donc commencé à le mettre en place, et j'ai un souci :

Sur la droite du texte, j'ai :
-> Un logo
-> Puis en dessous une image qui se répète en background

Sur la gauche, j'ai aussi une image qui se répète en background

Et au milieu, j'ai mon texte.

J'ai fait ça :

Code :

<div class="cadreTitreContenu">
<div class="milieu">
<div class="gauche">
<div class="logo"></div>
</div>
<div class="droite"></div>
<p><%=contenu%></p>
</div>
</div>

Code :

.cadreTitreContenu .milieu
{
height: 200px;
}
html>body .cadreTitreContenu .milieu .droite {
height: auto;
min-height: 200px;
}
.cadreTitreContenu .milieu .gauche
{
float: left;
width: 65px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-gauche.gif');
}
.cadreTitreContenu .milieu .gauche .logo
{
width: 65px;
height: 200px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-logo.gif');
}
.cadreTitreContenu .milieu .droite
{
float: right;
width: 43px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-droite.gif');
height: 100%;
}
.cadreTitreContenu .milieu p
{
font-size: 20px;
}

Bon, déjà, j'ai dû faire un hack pour que le div contenant le background de droite soit au moins aussi grand que le logo. Il y avait aussi un hack utilisant "!important", mais ça ne marche pas avec NS 7.0, j'ai donc opté pour celui-ci qui est moins sexy.

Par contre, ça ne résoud pas mon problème de texte. Si mon <p> grossi, alors il descend plus bas que le cadre, et le cadre ne grandi pas (ce qui me semble normal d'ailleur)

Comment faire pour que ça marche ?

Evidement, les "height: auto" ou "height: 100%" ne marchent pas.

Reply

Marsh Posté le 26-07-2005 à 17:58:45

Reply

Marsh Posté le 26-07-2005 à 18:02:32

Sinon, autre truc ennuyeux entre mon élément ".cadreTitreContenu .haut" et ".cadreTitreContenu .milieu", sous NS 7.0 je n'ai pas d'espace, alors que sous IE j'ai un saut de ligne, je ne vois pas d'où il vient (j'ai mis des padding:0 et margin:0 partout, des float, des clear:none, rien n'y fait )

Le code complète :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Interclass nouvelle version</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="cadreLogin">
<div class="cadreTitreContenu">
<div class="haut">
<div class="gauche"></div>
<div class="droite"></div>
<h1>IDENTIFICATION</h1>
</div>
<div class="milieu">
<div class="gauche">
<div class="logo"></div>
</div>
<div class="droite"></div>
<p>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/>Trucs à mettre dans le cadre "login"<br/></p>
</div>
</div>
</div>
</body>
</html>

Code :

.cadreLogin
{
width: 581px;
}
.cadrePrincipal
{
}
.cadreTitreContenu
{
}
.cadreTitreContenu .haut
{
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-milieu.gif');
background-repeat: repeat-x;
}
.cadreTitreContenu .haut .gauche
{
width: 100px;
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-gauche.gif');
float: left;
}
.cadreTitreContenu .haut .droite
{
width: 46px;
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-droite.gif');
float: right;
}
.cadreTitreContenu .haut h1
{
padding-top: 5px;
padding-left: 105px;
font-size: 18px;
font-weight: bold;
color: #4F98DC;
font-family: Arial-Narrow, Arial, Sans-Serif;
}
.cadreTitreContenu .milieu
{
height: 200px;
}
html>body .cadreTitreContenu .milieu .droite {
height: auto;
min-height: 200px;
}
.cadreTitreContenu .milieu .gauche
{
float: left;
width: 65px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-gauche.gif');
height: 100%;
}
.cadreTitreContenu .milieu .gauche .logo
{
width: 65px;
height: 200px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-logo.gif');
}
.cadreTitreContenu .milieu .droite
{
float: right;
width: 43px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-droite.gif');
height: 100%;
}
.cadreTitreContenu .milieu p
{
font-size: 20px;
}

Reply

Marsh Posté le 26-07-2005 à 18:06:53

En fait, ça donne ça :

Reply

Marsh Posté le 26-07-2005 à 18:35:03

Ca y est, j'ai encore fait peur à tout le monde...

Reply

Marsh Posté le 27-07-2005 à 14:01:15

Je vous ai fait si peur que ça ???

Ca doit pourtant pas être bien compliqué...

Reply

Marsh Posté le 27-07-2005 à 14:17:55

J'ai trouvé sur le site d'Apple ce lien :

http://www.apple.com/macosx/

C'est donc un peu ce qu'il y a à droite que je veux, sauf que pour eux, c'est plus simple : la largeur est fixe, donc ils ont un background-image qui fait à la fois la bordure gauche et la bordure droite, et le texte directement dans ce div. Sauf que moi je ne peux pas, la largeur (ici contrainte par un DIV dimensionné qui est autour) n'est pas fixe, sur les autres pages, elle dépendra de la taille de la fenêtre.

Reply

Marsh Posté le 27-07-2005 à 14:47:04

Hé ho ! C'est pourtant simple mon problème, vous savez, quand on a un élément avec une taille de 100% qui ne prends la taille du parent que lorsque ce dernier est renseigné... sauf que moi je ne peux pas le renseigner...

Reply

Marsh Posté le 27-07-2005 à 14:51:23

Bon, on va mettre de ce côté ce problème, il reste toujours le truc blanc entre les deux div, ça vient d'où?

Reply

Marsh Posté le 27-07-2005 à 15:30:16

On dirait que tes bandes verticales sont trop petites par rapport au contenant : on dirait qu'il y a un centrage vertical.
Je n'ai pas mes sources perso sur moi, mais tu n'aurais pas oublier de mettre un "repeat-y" sur ces bandes verticales ?

Message édité par robbyone le 27-07-2005 à 15:33:17

---------------
La curiosité est un vilain défaut car l'erreur et la frustration sont de croire qu'elle pourra être satisfaite !

Reply

Marsh Posté le 27-07-2005 à 15:48:12

Arjuna a écrit :

Hé ho ! C'est pourtant simple mon problème, vous savez, quand on a un élément avec une taille de 100% qui ne prends la taille du parent que lorsque ce dernier est renseigné... sauf que moi je ne peux pas le renseigner...

Pour un élément qui est en display block, il va toujours prendre 100% du parent, sans avoir besoin de renseigner quelqu'un

Reply

Marsh Posté le 27-07-2005 à 15:48:12

Reply

Marsh Posté le 27-07-2005 à 15:56:10

Cadox : http://www.456bereastreet.com/arch [...] d_borders/

T'as juste à modifier l'image pour prendre tes cadres [:dawa]

Reply

Marsh Posté le 27-07-2005 à 16:13:32

robbyone a écrit :

On dirait que tes bandes verticales sont trop petites par rapport au contenant : on dirait qu'il y a un centrage vertical.
Je n'ai pas mes sources perso sur moi, mais tu n'aurais pas oublier de mettre un "repeat-y" sur ces bandes verticales ?

Non, justement, le problème, c'est que les div contenant ces bandes ne grossissent pas. Le repeat se fait bien, puisque le fond fait un pixel de haut seulement, hors là om fait facilement 20px, mais le div ne veut pas grossir plus.

Reply

Marsh Posté le 27-07-2005 à 16:22:00

FlorentG a écrit :

Cadox : http://www.456bereastreet.com/arch [...] d_borders/

T'as juste à modifier l'image pour prendre tes cadres [:dawa]

Je viens de regarder, mais le problème, c'est que pour que ce soit joli, il faut utiliser un JavaScript, et je préfèrerais m'en passer.
Sans le JS, on a un simple block sans bords arrondis.

Reply

Marsh Posté le 27-07-2005 à 16:22:39

L'important, c'est l'information, pas le design Mais y'a moyen de faire une version à peu près joli, surtout avec ta structure

Reply

Marsh Posté le 27-07-2005 à 16:23:15

FlorentG a écrit :

Pour un élément qui est en display block, il va toujours prendre 100% du parent, sans avoir besoin de renseigner quelqu'un

ben non justement, ça ne marche pas

pour qu'il prenne toute la taille, il faut qu'un élément conteneur aie une taille définie, et que tous les contenants intermédiaires soit à 100% explicitement (testé)

Reply

Marsh Posté le 27-07-2005 à 16:25:52

Non

display: block, et pas de float, et c'est bon [:spamafote]

Reply

Marsh Posté le 27-07-2005 à 16:30:52

Avec cette CSS :

Code :

.cadreLogin
{
width: 581px;
height: 500px;
}
.cadrePrincipal
{
height: 200px;
}
html>body .cadreTitreContenu .milieu .droite {
height: auto;
min-height: 200px;
}
.cadreTitreContenu
{
/* height: 100%;*/
}
.cadreTitreContenu .haut
{
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-milieu.gif');
background-repeat: repeat-x;
}
.cadreTitreContenu .haut .gauche
{
width: 100px;
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-gauche.gif');
float: left;
}
.cadreTitreContenu .haut .droite
{
width: 46px;
height: 54px;
background-image: url('/web_interclass/new/picts/presentation/cadre/haut-droite.gif');
float: right;
}
.cadreTitreContenu .haut h1
{
padding-top: 5px;
padding-left: 105px;
font-size: 18px;
font-weight: bold;
color: #4F98DC;
font-family: Arial-Narrow, Arial, Sans-Serif;
}
.cadreTitreContenu .milieu
{
/*height: 100%;*/
}
.cadreTitreContenu .milieu .gauche
{
float: left;
width: 65px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-gauche.gif');
height: 100%;
}
.cadreTitreContenu .milieu .gauche .logo
{
width: 65px;
height: 200px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-logo.gif');
}
.cadreTitreContenu .milieu .droite
{
float: right;
width: 43px;
background-image: url('/web_interclass/new/picts/presentation/cadre/milieu-droite.gif');
height: 100%;
}
.cadreTitreContenu .milieu p
{
font-size: 20px;
}

Ca donne ça :

Si je vire le "height: 500px;" dans ".cadreLogin" (div conteneur de tout le cadre) ben j'ai le même résultat qu'avant.

Ca m'ennuie, parceque autant pour ce cas précis, je connais la taille exacte du cadre, autant sur les autres pages, il descend jusqu'en bas de la page, selon la taille du contenu... (ce sera la classe ".cadrePrincipal" qui sera alors utilisée).

Message édité par Arjuna le 27-07-2005 à 16:37:03

Reply

Marsh Posté le 27-07-2005 à 16:37:03

Si je trouve le temps, je ferais un essai demain

Reply

Marsh Posté le 27-07-2005 à 16:39:23

FlorentG a écrit :

Non

display: block, et pas de float, et c'est bon [:spamafote]

Comprends pas. Ecris-moi le bout de class qui va bien, je ne comprends pas ce que tu racontes.

Sinon, comprends pas non plus ça :

http://membres.lycos.fr/magicbuzz/ [...] efault.htm

Même source qu'en local, et j'ai à nouveau le bug alors qu'en local ça marche...

Reply

Marsh Posté le 27-07-2005 à 16:41:37

Faut dire qu'avec leur putain de bannière de merde, ils bouffent mes déclarations XHTML, et à coup sûr c'est ça qui fait partir en live le parseur CSS d'IE :fou:

Message édité par Arjuna le 27-07-2005 à 16:42:12

Reply

Marsh Posté le 27-07-2005 à 16:47:58

Oui

Reply

Marsh Posté le 27-07-2005 à 16:55:43

Bon, j'ai au moins réussi à corriger un truc : l'espace blanc sous IE : le H1 et le P on une margin avec IE, je l'ai virée, et ça remarche.

Par contre, maintenant reste plus qu'à corriger ce problème de hauteur qui marche pas.

Reply

Marsh Posté le 27-07-2005 à 17:22:57

Nouvelle version (avec le bas du cadre maintenant)

Reste plus qu'à virer le "height: 500px;" dans ".cadreLogin"...

(même url qui déconne chez multimania, faut copier la page et tout le bordel qui va avec en local, et virer les script )

Reply

Marsh Posté le

Reply

[CSS] div à côté de mon texte qui grossi avec mon texte

Sujets relatifs:

Leave a Replay