28173 sujets

CSS et mise en forme, CSS3

[résolu] Texte indomptable qui sort d'une div...

Bonjour !

Voila .. une photo vaux mieux qu'un grand discours alors voila mon soucis :

EDIT par Igor : attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.

Après moulte tentative de paddin, margin en tout genre, impossible d'agir sur le coté droit de la div ! je ne vois plus comment faire ... Smiley decu

voila le code de la page d'index




<body onload="MM_preloadImages('banniere/images/banniere_03_roll.gif','banniere/images/banniere_04_roll.gif','banniere/images/banniere_05_roll.gif','banniere/images/banniere_06_roll.gif','banniere/images/banniere_07_roll.gif')">

<div id="interface">

<div id="banniere">

"code de la banniere et du menu"

</div>

<img src="contenu/Cadre_haut.gif" alt="">

<div id="contenu">

<div id="ecrit">
En construction ...

§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
</div>



</div>
<img src="contenu/Cadre_bas.gif" alt="">
</div>

</body>
</html>


et le code de la CSS associée


/* CSS Document */

img
{
display: block;
}

body 
{  
  color: #000000;
  margin: 0px;
  height: 100%;
  width: 100%;
  background-image:url(images/ligne_diago1.png)
}

#interface 
{
  position: absolute; 
  left: 50%; 
  width: 800px; 
  margin-left: -400px;
}

#banniere
{

}


#contenu 
{
  background-image: url("contenu/Cadre_milieu.gif");
  background-repeat: repeat-y;
}

#ecrit
{
margin-left: 90px; // pour que le texte apparaisse bien dans le cadre du coté gauche

}


Voila ! donc j'ai réussi à positionner le texte comme il faut a gauche mais rien n'y fait pour ne pas que ça dépasse a droite .. Smiley bawling

Merci d'avance pour votre aide !
Modifié par Adrenaline_BuZz (06 Aug 2006 - 20:05)
Salut,

juste pour voir la place qu'occupe ta div, attribue lui :

#tadiv {border: 1px solid blue;}


et tu verras : elle m'a bien l'air d'ocupper toute la largeur : normal.

Donne lui une valeur de largeur :


#tadiv {
   width: 550px;
   border: 1px solid blue;}


Smiley smile
Bonjour,
Adrenaline_BuZz a écrit :
je ne vois plus comment faire ... Smiley decu

En plaçant un espace de temps en temps.
Modifié par Alan (05 Aug 2006 - 19:50)
Adrenaline_BuZz a écrit :
#interface
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}


Pourquoi ce left: 50% qui est ensuite corrigé par une marge négative??
Administrateur
Bonjour,

est-ce que tu as testé la solution d'Alan? Un chose de 200 caractères ininterrompu, ce n'est pas pareil que 18 mots de ~10 lettres et 17 espaces ... Les navigateurs web sont prévus pour afficher du texte plausible Smiley smile lorem ipsum étant un parfait texte de substitution. Du finlandais ou de l'allemand si tu chercher des mots bien longs Smiley ravi
Modifié par Felipe (05 Aug 2006 - 20:31)
Rien à voir avec la question, mais puisque largowin a soulevé le problème, je mets mon nez dedans. Le centrage d'un site à l'aide des marges négatives, que tu utilises apparemment, est à éviter absolument. En effet, un visiteur qui aurait une résolution d'écran trop faible, ou qui aurait réduit sa fenêtre, ne verra pas une partie du site, et pire, ne saura pas y accéder via les barres de scroll.

De plus, il est possible de réaliser le centrage plus proprement à l'aide des marges automatiques.

Voir la FAQ pour plus de renseignements.
a écrit :
lorem ipsum


Il existe quelques générateurs comme celui-ci mais qui permettent d'obtenir un texte balisé (plus pratique quand on ne travaille pas avec un éditeur WYSIWYG). Celui-ci permet par exemple d'obtenir en plus des titres.

Sinon certains éditeurs intègrent un générateur de « Lorem Ipsum » (par exemple PSPad pas défaut ou Dreamweaver en ajoutant une extension)
Modifié par Alan (05 Aug 2006 - 21:19)
Alan avait raison ... j'en reviens pas ! j'ai passé des heures ... alors que tout marchais en fait ! Smiley biggol

Ceci dit, suite à vos conseils je vais revoir mon système de centrage ! Smiley cligne

Merci à tous !
Sujet clos
Aller à