problèmes de marges...

Un cadre, un titre h3, un paragraphe

24 juin 2006 à 16:29:10

Hello ! Je vous explique mon problème....

Je suis en train de faire mon premier site, et j'en suis pour l'instant à mettre en place la page d'accueil.
Pour mon sysème de news, j'ai crée un cadre d'environ 30px d'épaisseur (ce n'est pas un cadre plein sinon ça ferait un peu lourd lol ^^)... A l'interieur, il y a donc le titre, et les news...

Le code xhtml se présente donc comme ça :

<div class="cadre"><h3>Quoi de neuf ici ? LES NEWS !!</h3><br/>
<p>Le 11/06/07 : Mise en ligne du site. Du tout beau du tout neuf ! <br/>
Le 20/07/06 : Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!</p></div>

Le code css :

.cadre
{
margin :0px;
width : 400px;
height : 204px;
background: url("../../graphismes/graphismes1/petit_cadre.jpeg") no-repeat;

}
.cadre p
{
font-size: 0.8em;
height : 119px;
overflow : auto;
margin-top: 0px;
margin-bottom : 30px;
margin-left: 30px;
margin-right : 30px;

}
.cadre h3
{
height : 25px;
margin-top: 30px;
margin-bottom: 0px;
margin-left : 30px;
margin-right : 30px;

}

Vous l'aurez compris, le but c'est d'avoir un cadre, avec à l'interieur un titre et du texte qui ne soit pas sur le cadre mais bien à l'interieur, et une barre de défillement qui se met en place quand il y a trop de news.
Mais ça marche pas

Sous IE, le texte mange un peu sur le cadre en bas, alors que je suis sûre que les marges sont bonnes et que le texte ne devrait pas être sur le cadre, ça veut dire qu'il est poussé par quelque chose... Mais par quoi ? Le titre ? Pourquoi donc ?

Sous firefox, c'est le contraire : c'est le titre qui mange sur le cadre du haut.
En plus, en regardant ma page avec Nvu et en mettant l'option "affichage des blocs", je vois qu'il y a une marge entre mon paragrpahe et mon titre, alors que j'en ai pas demandé !

Bref, vous pouvez pas m'aider, je voudrais juste que ces 2 là respectent ma marge de 30px, ça doit pas être bien sorcier o_O

Merci d'avance !

titi.be

24 juin 2006 à 16:51:17

salut essai plutot cela

.cadre
{
margin :0px;
width : 400px;
height : 204px;
background: url("../../graphismes/graphismes1/petit_cadre.jpeg") no-repeat;

}
H3 p
{
font-size: 0.8em;
height : 119px;
overflow : auto;
margin-top: 0px;
margin-bottom : 30px;
margin-left: 30px;
margin-right : 30px;

}
div h3
{
height : 25px;
margin-top: 30px;
margin-bottom: 0px;
margin-left : 30px;
margin-right : 30px;

}

ou tu leurs attribue a chacun leurs propre id ou class.

joe.tgg

24 juin 2006 à 19:03:10

Je construirais plutôt un titre en h3 et un bloc pour le texte avec une propriété "overflow: auto".

<h3>Quoi de neuf ici ? LES NEWS !!</h3>
<div class="cadre">
<p>Le 11/06/07 : Mise en ligne du site. Du tout beau du tout neuf ! <br/>
Le 20/07/06 : Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!</p>
</div>

.cadre
{
margin :0px;
width : 400px;
height : 204px;
background: url("../../graphismes/graphismes1/petit_cadre.jpeg") no-repeat;
}

manzelle_bidule

24 juin 2006 à 20:19:01

Bon, j'ai fait ce que tu as dit Joe, j'ai mis le titre en dehors du cadre, c'est vrai que ça change pas grand chose. Sous IE, c'est parfait (pour une fois !!), mais sous Firefox et Opéra, c'est passable, dans le sens ou le texte mange pas sur le cadre, mais les marges ne sont toujours pas respectées, le texte est bcp trop bas

Donc voici le code xhtml :

<h3>Quoi de neuf ici ? LES NEWS !!</h3>

<div class="cadre"><p>Le 11/06/07 : Mise en ligne du site. Du tout beau du tout neuf ! <br/>
Le 20/07/06 : Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est!</p></div>

Le code css (j'ai mis les marges en padding dans le cadre sinon ça marchait pas du tout sous Firefox) :

.cadre
{
margin :0px;
width : 400px;
height : 204px;
background: url("../../graphismes/graphismes1/petit_cadre.jpeg") no-repeat;
padding : 30px;
}
.cadre p
{
font-size: 0.8em;
height : 144px;
width : 340px;
overflow : auto;

}

Et sous firefox (enfin ce que je vois sous nvu avec l'affichage des blocs) ça fait ça (le cadre c'est juste en shéma hein

j'ai pas encore fini le vrai cadre, mais celui là a les bonnes mesures) :
image

On voit bien que il y a un pb, le bloc fait 300m de long sur l'image alors que j'ai bien indiqué les bonnes mesures dans le code css.

Une idée :euh:

joe.tgg

24 juin 2006 à 21:54:10

Ca aurait été bien un screenshot du bloc sous IE que l'on voit le résultat escompté.

A essayer :

.cadre
{
margin :0px;
width : 400px;
height : 204px;
background: url("../../graphismes/graphismes1/petit_cadre.jpeg") no-repeat;
padding : 30px;
overflow : auto;
}
.cadre p
{
font-size: 0.8em;
}

manzelle_bidule

25 juin 2006 à 16:53:07

Sous Ie ça donne la même chose, sauf que le texte est parfaitement centré (dans la hauteur)
C'est sûr que c'est pas un drame, le texte mange pas sur le cadre ici, sauf que le navigateur a pas l'air de comprendre tout à fait bien mon code et ne centre pas parfaitement le texte au milieu... Alors que normalement les tailles que j'ai indiqué c'est au pixel près. Le truc c'est que sous firefox le résultat est passable, mais comme les navigateurs affichent pas toujours la même chose au pixel près...j'ai peur que sous un autre navigateur le texte passe carrement sur le cadre :/

Pis ce que je comprend pas c'est pourquoi sous Firefox, il me fait un bloc de 3 mètres de long (on le voit bien avec l'affichage des blocs), alors que dans mon code j'ai bien indiqué les mesures présises du cadre dans le bloc .cadre !!

Sinon le code que tu as écrit ne convient pas..je n'ai carrement plus la barre de déffilement :euh: