rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Problème de hauteur d'un bloc en CSS

Posté par julien, le jeudi 20 septembre 2007 à 17:57:12
Bonjour,

J'ai un big problème avec css sous firefox (évidement...).
J'ai un bloc avec une image et du texte aligné à droite de celle-ci. Il se trouve que mon texte prend moins de place en hauteur que mon image, et le bloc est redimensionné non pas par rapport à mon image, mais par rapport à mon texte; ce qui fait que mon image déborde du bloc. Par contre sous internet explorer, ca ne pose pas de problème. J'ai essayé pleins de solutions qui ne fonctionnent pas sous firefox. Etant donné que le contenu du bloc va varier, je ne souhaite pas que celui-ci ai une hauteur fixe.
Je ne vois pas trop quoi faire. Voici une image qui explique mon problème : http://www.mtma-web.com/text.jpg

Si besoin de code, je peux le donner. Pour rappel, je n'ai ce problème qu'avec firefox.

Merci d'avance

Julien Digoit
Configuration: Windows XP
Internet Explorer 7.0
Répondre à julien  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le jeudi 20 septembre 2007 à 18:04:06
salut,

J'ai un big problème avec css sous firefox (évidement...).
???
il faut commencer par FF pour après adapter à IE, sinon tu risques de galérer encore plus.

et effectivement il faudrait le code, le mieux étant une version en ligne pour triturer directement !!!
-;o)
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
julien, le jeudi 20 septembre 2007 à 18:18:56
Bonjour,

Merci pour ta réponse.

Voici le code html et le code css

code HTML

<div class="text-center">
<ul><li class="submen4">
<img src="images/img-news.jpg"/></li>
<li class="submen5"><b>L</b>orem ipsum dolor sit amet, consectetuer adipiscing elit. Integer et lacus. Aenean blandit tellus eget turpis. Nulla facilisi. Aenean vitae sapien quis metus mollis bibendum. Nullam metus. Nulla blandit nisi dapibus massa scelerisque semper. Fusce purus nunc, fermentum at, faucibus in, condimentum nec, eros. Curabitur mi tortor, placerat quis, aliquet id, semper id, quam. Pellentesque tempor.</li>
</ul>
</div>

code CSS

.submen4
{
LIST-STYLE-TYPE: none; float: left; padding-right: 8px; display: block;
}
.submen5
{
font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-align: left; display: block; padding-right: 8px; padding-left: 0px; padding-top: 8px; padding-bottom: 0px;
}

Merci

Julien
   
Répondre à julien

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le jeudi 20 septembre 2007 à 18:46:43
je ne comprends pas pourquoi tu utilises une liste.
que penses-tu d'utiliser un paragraphe et une image ?
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
julien, le jeudi 20 septembre 2007 à 19:25:05
Merci pour ta réponse.

Je vais essayer d'utliser les paragraphes comme-tu me le conseille et voir ce que ca donne.

Merci
Julien
   
Répondre à julien

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
julien, le jeudi 20 septembre 2007 à 22:55:43
Ca a l'air de pas mal fonctionner. il a fallu que je modifie une bricole ou deux pour que tout fonctionne bien. Ca ma permis également de corriger d'autres bugs.

Merci encore

Julien
   
Répondre à julien

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le jeudi 20 septembre 2007 à 22:56:40
bon courage pour la suite, je coche "résolu" !
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
TOONIE, le samedi 6 octobre 2007 à 10:20:15
Bonjour,

J'ai appliqué le script et je trouve le résultat super. Le petit souci est que la bordure entourant les "cadres" paragraphes et images englobe également mes boutons d'accueil et autres; je souhaiterai en fait que cette bordure ne commence qu'aux paragraphes et images. Et je ne trouve pas où est mon erreur. Puis-je solliciter votre aide ? Voici le script, si OK :


(...)
</head>

<style type="text/css">
html
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
margin:0;
padding:2em 0;
}
body
{
width:772px;
margin:0 auto;
padding:0;
font-size:.8em;
}
div
{
padding:10px;
margin:20px 0;
border: 1px solid #ccc;
float:center;
}
div p
{
margin:0;
padding:0 0 0 250px;
text-align:justify;
}
div img
{
float:left;
}
hr
{
clear:left;
}
</style>


</head>


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Début
image1 = new Image();
image1.src = "Bouton_accueil_02.png";
image2 = new Image();
image2.src = "test_02.png";
image3 = new Image();
image3.src = "Bla_Bla_02.png";
// Fin -->
</script>
</HEAD>


<BODY>
<div align="right">
<p align="left"> </p>
<a href="index.html" onmouseover="image1.src='Bouton_accueil_02.png';"
onmouseout="image1.src='Bouton_accueil_01.png';"&g­t;
<img name="image1" src="Bouton_accueil_01.png" border=0></a> 
<a href="divers.html" onmouseover="image2.src='test_02.png';"
onmouseout="image2.src='test_01.png';">
<img name="image2" src="test_01.png" border=0></a> 
<a href="Bla_Bla.html" onmouseover="image3.src='Bla_Bla_02.png';"
onmouseout="image3.src='Bla_Bla_01.png';">
<img name="image3" src="Bla_Bla_01.png" border=0></a> 

</BODY>


<body>
<h1>Positionnement de texte avec une image</h1>
<p>en réponse à <a href="probleme de hauteur d un bloc en css">problème de hauteur d'un bloc en CSS</a>.</p>
<p>Testé sous Windows XP (SP2), avec IE (6 et 7), FireFox (2) et Opéra (9).</p>
<p><a title="Validation XHTML" href="http://validator.w3.org/check?uri=referer"&g­t;XHTML 1.0 Strict</a></p>
<p><a title="Validation CSS" href="http://jigsaw.w3.org/css-validator/check/referer&­quot;>CSS 2.0</a></p>
<hr />
<div>
<img src="ressources/image_gauche.jpg" alt="et hop, une image à gauche !" width="240" height="180" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ipsum lectus, rhoncus eu, pretium vel, rutrum eu, lorem. Sed sed est. Sed metus quam, blandit ut, porttitor vitae, feugiat eget, neque. Vestibulum at risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut libero. Vivamus ullamcorper volutpat nulla. Cras nisi. Nullam non odio. Duis scelerisque accumsan nulla.</p>
</div>
<hr />
<div>
<img src="ressources/image_gauche.jpg" alt="et hop, une image à gauche !" width="240" height="180" />
<p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien. Duis mi est, facilisis vitae, vestibulum ut, convallis eu, diam. Curabitur dapibus sollicitudin mi. Aliquam auctor tortor ut neque. Proin mauris. Nunc facilisis sagittis sapien. Donec nonummy libero vel enim. Donec rutrum risus quis neque. Nulla nec enim. Sed aliquam. In hac habitasse platea dictumst. Praesent interdum magna ut dui. Sed eget ante et lorem condimentum pretium. Quisque metus justo, varius ac, condimentum sit amet, vulputate id, est. Proin sollicitudin. Vivamus sapien magna, blandit in, imperdiet auctor, ullamcorper in, eros. Vivamus tempor egestas arcu. Sed neque. Donec sem. Sed dictum interdum metus. Nulla mollis. Sed sollicitudin, pede sed dignissim viverra, ipsum enim volutpat eros, a rutrum libero lectus pellentesque mi. Pellentesque tellus est, facilisis id, dictum eget, ultrices sit amet, orci. In hac habitasse platea dictumst. Vivamus mattis massa et mi. Vivamus posuere leo ut dolor. Nulla nonummy ante ut ligula viverra bibendum. Donec sodales auctor quam. Nulla consectetuer, leo vitae cursus consequat, nibh tellus euismod justo, ut cursus est lorem nec dolor. Vestibulum eu nisi. Duis rhoncus. Proin vel risus at augue gravida vulputate. Donec eu risus nec est pulvinar lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sagittis, diam sed imperdiet fermentum, orci mi scelerisque diam, vel volutpat magna velit quis quam. Mauris nulla. Donec porta lacus a felis. Etiam dignissim, tellus eget vulputate rhoncus, odio enim varius massa, vitae congue diam enim eu nunc. Curabitur massa. Aliquam ut tellus ut libero pellentesque nonummy. Ut nulla.</p>
</div>
</body>

</html>
   
Répondre à TOONIE

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le samedi 6 octobre 2007 à 10:44:44
salut,

pour mettre le code en forme, utilise ce bouton.
en premier il faut un html correct.
tu as deux fois <head> et deux fois <body> dans ta page. par ailleurs en xhtml il faut écrire toutes les balises en miniscules.
pour appliquer un règle à une balise en particulier tu peux utiliser un identifiant (ce que tu fais pour <div id="right"), si tu dois cibler plusieurs balises avec la même règle tu utiliseras une classe (ce que je fait pour les <div> à encadrer). 
</head>

<style type="text/css">
html
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
margin:0;
padding:2em 0;
}
body
{
width:772px;
margin:0 auto;
padding:0;
font-size:.8em;
}
div.border
{
padding:10px;
margin:20px 0;
border: 1px solid #ccc;
float:center;
}
div p
{
margin:0;
padding:0 0 0 250px;
text-align:justify;
}
div img
{
float:left;
}
hr
{
clear:left;
}
</style>

<script text="text/javascript">
image1 = new Image();
image1.src = "Bouton_accueil_02.png";
image2 = new Image();
image2.src = "test_02.png";
image3 = new Image();
image3.src = "Bla_Bla_02.png";
</script>

</head>

<div align="right">
<p align="left"> </p>
<a href="index.html" onmouseover="image1.src='Bouton_accueil_02.png';"
onmouseout="image1.src='Bouton_accueil_01.png';"&g­t;
<img name="image1" src="Bouton_accueil_01.png" border=0></a> 
<a href="divers.html" onmouseover="image2.src='test_02.png';"
onmouseout="image2.src='test_01.png';">
<img name="image2" src="test_01.png" border=0></a> 
<a href="Bla_Bla.html" onmouseover="image3.src='Bla_Bla_02.png';"
onmouseout="image3.src='Bla_Bla_01.png';">
<img name="image3" src="Bla_Bla_01.png" border=0></a> 
</div>

<h1>Positionnement de texte avec une image</h1>
<p>en réponse à <a href="probleme de hauteur d un bloc en css">problème de hauteur d'un bloc en CSS</a>.</p>
<p>Testé sous Windows XP (SP2), avec IE (6 et 7), FireFox (2) et Opéra (9).</p>
<p><a title="Validation XHTML" href="http://validator.w3.org/check?uri=referer"&g­t;XHTML 1.0 Strict</a></p>
<p><a title="Validation CSS" href="http://jigsaw.w3.org/css-validator/check/referer&­quot;>CSS 2.0</a></p>
<hr />
<div class="border">
<img src="ressources/image_gauche.jpg" alt="et hop, une image à gauche !" width="240" height="180" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ipsum lectus, rhoncus eu, pretium vel, rutrum eu, lorem. Sed sed est. Sed metus quam, blandit ut, porttitor vitae, feugiat eget, neque. Vestibulum at risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut libero. Vivamus ullamcorper volutpat nulla. Cras nisi. Nullam non odio. Duis scelerisque accumsan nulla.</p>
</div>
<hr />
<div class="border">
<img src="ressources/image_gauche.jpg" alt="et hop, une image à gauche !" width="240" height="180" />
<p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien. Duis mi est, facilisis vitae, vestibulum ut, convallis eu, diam. Curabitur dapibus sollicitudin mi. Aliquam auctor tortor ut neque. Proin mauris. Nunc facilisis sagittis sapien. Donec nonummy libero vel enim. Donec rutrum risus quis neque. Nulla nec enim. Sed aliquam. In hac habitasse platea dictumst. Praesent interdum magna ut dui. Sed eget ante et lorem condimentum pretium. Quisque metus justo, varius ac, condimentum sit amet, vulputate id, est. Proin sollicitudin. Vivamus sapien magna, blandit in, imperdiet auctor, ullamcorper in, eros. Vivamus tempor egestas arcu. Sed neque. Donec sem. Sed dictum interdum metus. Nulla mollis. Sed sollicitudin, pede sed dignissim viverra, ipsum enim volutpat eros, a rutrum libero lectus pellentesque mi. Pellentesque tellus est, facilisis id, dictum eget, ultrices sit amet, orci. In hac habitasse platea dictumst. Vivamus mattis massa et mi. Vivamus posuere leo ut dolor. Nulla nonummy ante ut ligula viverra bibendum. Donec sodales auctor quam. Nulla consectetuer, leo vitae cursus consequat, nibh tellus euismod justo, ut cursus est lorem nec dolor. Vestibulum eu nisi. Duis rhoncus. Proin vel risus at augue gravida vulputate. Donec eu risus nec est pulvinar lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sagittis, diam sed imperdiet fermentum, orci mi scelerisque diam, vel volutpat magna velit quis quam. Mauris nulla. Donec porta lacus a felis. Etiam dignissim, tellus eget vulputate rhoncus, odio enim varius massa, vitae congue diam enim eu nunc. Curabitur massa. Aliquam ut tellus ut libero pellentesque nonummy. Ut nulla.</p>
</div>
</body>

</html>
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 TOONIE, le dimanche 7 octobre 2007 à 21:24:54
Bonjour,

Merci Dalida,

Résolu, donc.
   
Répondre à TOONIE
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Mega Bloc Notes 5.3Mega Bloc Notes - Mega Bloc Notes est un éditeur de texte (TXT/RTF/XLS/DOC/MCW/HTM...) possédant une multitudes de fonctions originales telles...Catégorie: Traitement de texte
Licence: Freeware/gratuit
Télécharger Blowfish Advanced CS 2.57Blowfish Advanced CS - Blowfish Advanced CS est un puissant outil de sécurité et de cryptage pour Windows. En tant que successeur de BFA97,...Catégorie: Sécurité
Licence: Open Source
Télécharger Firefox 3.0.1Firefox - Mozilla Firefox 3 est un excellent navigateur qui peut fonctionner à côté d' Internet Explorer ou le remplacer. Il...Catégorie: Navigateurs
Licence: Open Source
Télécharger Opera 9.51Opera - Marre des trous de sécurité du navigateur par défaut ? Envie enfin d'avoir un navigateur simple et configurable facilement ?...Catégorie: Navigateurs
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « problème de hauteur d'un bloc en CSS »