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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] div à côté de mon texte qui grossi avec mon texte

Arjuna

Aircraft Ident.: F-MBSD

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.

Publicité

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

En fait, ça donne ça :

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

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

Arjuna

Aircraft Ident.: F-MBSD

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.

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

robbyone

Non pas !

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 !

FlorentG

Unité de Masse

Arjuna 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

Publicité

FlorentG

Unité de Masse

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

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

Arjuna

Aircraft Ident.: F-MBSD

robbyone a écrit :

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.

Arjuna

Aircraft Ident.: F-MBSD

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.

FlorentG

Unité de Masse

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

Arjuna

Aircraft Ident.: F-MBSD

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

FlorentG

Unité de Masse

Non

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

Arjuna

Aircraft Ident.: F-MBSD

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

FlorentG

Unité de Masse

Si je trouve le temps, je ferais un essai demain

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

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

FlorentG

Unité de Masse

Oui

Arjuna

Aircraft Ident.: F-MBSD

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.

Arjuna

Aircraft Ident.: F-MBSD

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 )

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[JavaScript]ouvrir un fichier texte [Fixed]	[CSS] Questions diverses
Problème avec les positions absolues en CSS	transformation de texte en html et inversement
problème texte dans une image php	recherche de scipt de mise a jour texte dans site
Un tableau en Css/xhtml dans une include....	Besoin d'un expert en feuilles de styles CSS
[HTML/CSS] Blocs superposés/Double arriere plan	pb lors d'une recherche avec champs texte
Plus de sujets relatifs à : [CSS] div à côté de mon texte qui grossi avec mon texte

Page générée en 0.087 secondes