28220 sujets

CSS et mise en forme, CSS3

[résolu] Paragraphe comprenant une image et un texte ?

Bonjour,
pour des articles stockés en BDD je doit faire une mise en page dans un DIV avec une succession de paragraphes comprenant une image a gauche en float left et un texte à sa droite. exemple : http://www.assoc-sempe.com/Coins_peche.asp
J'ai du mal a ce que les textes soient bien a côté de leurs images respectives. J'ai essayé un hr avec comme propriété clear: both mais ça ne met pas le hr forcement sous l'image...

Comment vous y prendriez vous ?

Merci
Modifié par Flyman30 (28 Aug 2005 - 18:08)
voila les CSS concernées:

#principal 
	{
	margin-left: 18em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	height: auto !important;
        height: 500px; /* because ie suxxe */
        min-height: 450px;   
	}
	html>body #principal
	{
	height: auto;
	}
.image
	{
	float: left;
	margin-right: 20px;
	margin-top: 5px;
	margin-left: 5px;
	border: none 0px;
	}

.separation
	{
	clear: both;
	/*visibility: hidden;*/
	border: 2px solid red; /*pour les test*/
	line-height: 0px;
	margin: 0px;
	padding: 0px;
	}


le div :

<div id="principal">
<p style="background:yellow;"><img alt="salat" src="Images/Salat3.png" class="image" title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua
</p><div class="separation"></div>
<p style="background:yellow;"><img alt="salat" src="Images/Salat3.png" class="image" title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua
</p><div class="separation"></div>
<p style="background:yellow;"><img alt="salat" src="Images/Salat3.png" class="image" title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua
</p><div class="separation"></div>
<p style="background:yellow;"><img alt="salat" src="Images/Salat3.png" class="image" title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua
</p><div class="separation"></div>
<p style="background:yellow;"><img alt="salat" src="Images/Salat4.png" class="image" title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua
</p><div class="separation"></div>
	</div>


Avec IE la mise en page est celle que je souhaite, mais pas avec Firefox ni Opéra il ya un espace vertical énorme entre le premier et le deuxième paragraphe les autres sont normaux.... Smiley eek

Page de test : http://www.assoc-sempe.com/Template.asp
Modifié par Flyman30 (28 Aug 2005 - 11:31)
Modérateur
bonjour,
il s'agit probablement d'un de ces "bugs" visuel de firefox ,
ou dans un div, si la premiere balise est un paragraphe ou titre (une balise block) une marge est appliqué par defaut avant et aprés cette balise... un margin:0; corrige ce defaut.
(je ne savais pas, si c'est le cas, qu'opera reagissait de la même façon)
a plus
gcyrillus a écrit :
bonjour,
il s'agit probablement d'un de ces "bugs" visuel de firefox ,
ou dans un div, si la premiere balise est un paragraphe ou titre (une balise block) une marge est appliqué par defaut avant et aprés cette balise... un margin:0; corrige ce defaut.
(je ne savais pas, si c'est le cas, qu'opera reagissait de la même façon)
a plus



J'ai essayé 
<p style="margin:0px">
pas mieux... Smiley biggol
Modérateur
bonjour, je n'avais pas regarder sur le bon lien ! et je ne comprenais pas ton probleme:
enleve le clear:both; de .separation et tout rentrera dans l'ordre (remarque que ta marge s'arrete au dernier element de tes menu Smiley smile )

a plus.
gcyrillus a écrit :
bonjour, je n'avais pas regarder sur le bon lien ! et je ne comprenais pas ton probleme:
enleve le clear:both; de .separation et tout rentrera dans l'ordre (remarque que ta marge s'arrete au dernier element de tes menu Smiley smile )

a plus.


On est sur la bonne voie, cependant ça ne fonctionne pas Smiley bawling

la marge s'arrête bien au niveau du dernier élément du menu, mais quand j'enlève le clear:both ça ne va plus du tout!
en effet le texte du second paragraphe se colle sous le premier ne respectant pas la mise en page souhaité... qui devrait être :
http://www.assoc-sempe.com/Coins_peche.asp si je vire le clear:both voila le résultat http://www.assoc-sempe.com/test.asp
Modifié par Flyman30 (28 Aug 2005 - 13:07)
Modérateur
autant pour moi !
il te faut alors organiser tes balise autrement et effectivement etirer le paragraphe jusque sous l'image.
Donc le clear:both; est le truc a utiliser, mais a l'interieur du paragraphe Smiley smile
je te propose alors de faire comme ceci: deplacer ta separation a l'interieur du paragraphe et d'utiliser une balise span (div interdit dans un p) comme ceci:
<p style="background:yellow;"><img alt="salat" src="http://www.assoc-sempe.com/Images/Salat4.png" class="image" 

title="salat">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua
<span class="separation"></span></p>

et de modifier le css legeremnt pour que span se comporte comme un div ... c'est a dire comme un bloc et face son office.:
.separation
{
clear: both;
/*visibility: hidden;*/
border: 2px solid red; /*pour les test*/
line-height: 0px;
margin: 0px;
padding: 0px;
display:block;/* pour obliger le retour a la ligne et 100% de largeur occupé */
}


voila, en principe ton affichage devrait etre ce que tu veut.
a plus
Modérateur
okay,
donc, je pense que la seule solution qui reste pour que tes separation et leur clear both; oublie le menu
c'est de placer ton div#principal en dehors du flux en lui appliquant une position:absolute;
essai alors le css comme ça :
#principal 
	{position:absolute;
	margin-left: 18em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	height: auto !important;
        height: 500px; /* because ie suxxe */
        min-height: 450px; 
	}
	html>body #principal
	{
	height: auto;
	}


aprés ça, je n'ai plus trop d'idées, je ne voit pas autrement ce qui peut encore pertubés l'affichage...

bon dev
Smiley bawling Smiley bawling Smiley bawling Smiley bawling Smiley bawling Smiley bawling

Maintenant ça fonctionne sous Firefox et Opéra mais plus sous IE qui rajoute un écart de 18em ( margin-left: 18em;) a droite du menu Smiley biggol

Merci à toi de t'intéresser à mon cas . Smiley biggrin
Modifié par Flyman30 (28 Aug 2005 - 15:18)
Salut ! Est-ce que le texte qui entoure les images est fixe ? ou est-ce qu'il va changer régulièrement ?

Tu ne voudrais pas mettre tes images à droite, au cas où Smiley cligne (on ne sait jamais)
Modifié par Sopo (28 Aug 2005 - 15:20)
gcyrillus a écrit :
okay,
donc, je pense que la seule solution qui reste pour que tes separation et leur clear both; oublie le menu
c'est de placer ton div#principal en dehors du flux en lui appliquant une position:absolute;
essai alors le css comme ça :
#principal 
	{position:absolute;
	margin-left: 18em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	height: auto !important;
        height: 500px; /* because ie suxxe */
        min-height: 450px; 
	}
	html>body #principal
	{
	height: auto;
	}


aprés ça, je n'ai plus trop d'idées, je ne voit pas autrement ce qui peut encore pertubés l'affichage...

bon dev



J'ai trouvé grace à toi Smiley biggrin j'ai utilisé un hack pour IE 

#principal 
	{
	margin-left: 18em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	height: auto !important;
        height: 500px; /* because ie suxxe */
        min-height: 450px; 
	}
	html>body #principal
	{
	height: auto;
	position: absolute;
	}
Sopo a écrit :
Salut ! Est-ce que le texte qui entoure les images est fixe ? ou est-ce qu'il va changer régulièrement ?

Tu ne voudrais pas mettre tes images à droite, au cas où Smiley cligne (on ne sait jamais)


Alors le texte est variable , puisqu'il s'agit d'articles sur des coins de pêches Smiley cligne

Pour les images à droite, ça me complique la vie étant donné que pour mon interface d'admin (ASP) j'ai un textearea qui utilise des BBcodes pour des non informaticiens puissent mettre à jour le site, donc il faudrait que je fasse d'autre BBcodes et le JS correspondant, mais il n'y a rien d'impossible.. Smiley biggrin
encore un soucis Smiley biggol

du coup mon pied de page ne descend plus quand le div "contenu" s'allonge..... et je me retrouve avec le pied de page au mileu de page ! Smiley decu 

html, body 
	{
	margin:0;
	padding:0;
	background: url(Images/main_bg.gif) #FFFFFF;
	font-family: "Trebuchet MS", Georgia, Verdana, Helvetica, Sans-serif;
	font-size:0.85em;
	line-height:normal;
	color:#000000;
	height: 100%;
	max-width: 1160px;
	min-width: 770px;
	}	
	
#banniere 
	{
	background: url(Images/logo-assoc6.gif) no-repeat center center;
	height: 110px;
	text-align: center;
	}
	
#contenu 
	{
	min-height: 80%;
	width: 100%;	
	}
		
#accueil
	{
	margin: 20px;
	}
	
#gauche 
	{
	float: left;
	width: 14em;	
	color: #ffffff;
	margin-left: 1em;
	}
	
#principal 
	{
	margin-left: 18em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	height: auto !important;
        height: 500px; /* because ie suxxe */
        min-height: 450px; 
	}
	html>body #principal
	{
	height: auto;
	position: absolute;
	}
		
#pied 
	{
	height: 5%;
	padding-top: 1.8em;
	text-align: center;
	clear: both;
	}

.separation
	{
	clear: both;
	visibility: hidden;
	line-height: 0px;
	margin: 0px;
	padding: 0px;
	display:block;/* pour obliger le retour a la ligne et 100% de largeur occupé */
	}


le squelette de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<html>
	<head>
		<title>Template</title>
		<!--#include file="meta.inc"-->
		<script language="JavaScript" src= "message.js" type="text/javascript"></script>
	</head>
	<body>
		<!--#include file = "haut.inc"-->
		<div id="contenu">
			<div id="gauche">
				<!--#include file="menu.inc"-->
			</div>
				<div id="principal">


				</div>
			</div>
		</div>
<div id="pied">
			
</div>
	</body>
</html>
Modérateur
rebonjour,
bon, alors fait l'opposseé pour voir, place le menu en absolute, lorsqu'il est plus court que le contenu.
		html>body #gauche
	{
	height: auto;
	position: absolute;
	}

a la place de 
		html>body #principal
	{
	height: auto;
	position: absolute;
	}


mais bon, c'est vrai que si tes image etait a droite, un clear:right; a ton separateur serait bien suffissant.

a plus
Sujet clos
Aller à