CSS et HTML imbrication

Version imprimable

Bonjour,

J'ai un probleme de CSS ou de HTML, je ne sais pas trop...

J'ai en fait un objet catitembody, compose de catitemimage et catitemintrotext, et un objet catitemextrafields, qui s'affiche en dessous.

catitemimage catitemintrotext
catitemextrafields

Je souhaiterais que catitemextrafields soit inclu dans catitembody, pour obtenir les trois elements en ligne:

catitemimage catitemintrotext catitemextrafields

Voici le CSS actuel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
div.catItemBody {display:inline; padding:8px 0;margin:0;}
 
div.catItemImageBlock {float: left;width: 15%; margin: 9px;padding: 4px;}
	span.catItemImage {display:block;text-align:center;margin:0 0 8px 0;}
	span.catItemImage img {border:1px solid #ccc;padding:8px;}
 
 
	div.catItemIntroText {width:50%; px;font-size:inherit;font-weight:normal;line-height:inherit;padding:8px 12px;}
	div.catItemIntroText img {}
 
div.catItemExtraFields, div.genericItemExtraFields {float: right;width:35%;margin:16px 0 0 0;padding:8px 0 0 0;border-top:1px dotted #ddd;}
	div.catItemExtraFields h4, div.genericItemExtraFields h4 {margin:0;padding:0 0 8px 0;line-height:normal !important;}
	div.catItemExtraFields ul, div.genericItemExtraFields ul {margin:0;padding:0;list-style:none;}
	div.catItemExtraFields ul li, div.genericItemExtraFields ul li {display:block;}
	div.catItemExtraFields ul li span.catItemExtraFieldsLabel, div.genericItemExtraFields ul li span.genericItemExtraFieldsLabel {display:block;float:left;font-weight:bold;margin:0 4px 0 0;width:40%;}
	div.catItemExtraFields ul li span.catItemExtraFieldsValue {}

Et le PHP actuel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="catItemBody">
 
	  <!-- Plugins: BeforeDisplayContent -->
	  <?php echo $this->item->event->BeforeDisplayContent; ?>
 
	  <!-- K2 Plugins: K2BeforeDisplayContent -->
	  <?php echo $this->item->event->K2BeforeDisplayContent; ?>
 
	  <?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
	  <!-- Item Image -->
	  <div class="catItemImageBlock">
		  <span class="catItemImage">
		    <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>">
		    	<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
		    </a>
		  </span>
 
	  </div>
	  <?php endif; ?>
 
	  <?php if($this->item->params->get('catItemIntroText')): ?>
	  <!-- Item introtext -->
	  <div class="catItemIntroText">
	  	<?php echo $this->item->introtext; ?>
	  </div>
	  <?php endif; ?>
 
 
 
	  <?php if($this->item->params->get('catItemExtraFields') && count($this->item->extra_fields)): ?>
	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
	  	<h4><?php echo JText::_('Additional Info'); ?></h4>
	  	<ul>
			<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
			<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
				<span class="catItemExtraFieldsLabel"><?php echo $extraField->name; ?></span>
				<span class="catItemExtraFieldsValue"><?php echo $extraField->value; ?></span>
			</li>
			<?php endforeach; ?>
			</ul>
		  <div class="clr"></div>
	  </div>
	  <?php endif; ?>

Ca fait 10 jours que j'essaie de faire ca, autant dire que je remercie vraiment d'avance la personne qui m'aidera!

24/05/2011, 08h41
ornitho13

Salut,

a la place de ton PHP, mets le code HTML généré, on y verra plus clair :)

Voici le code source de la selection

Coude source de la selection (sur un exemple)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="catItemBody">
 
	  <!-- Plugins: BeforeDisplayContent -->
 
 
	  <!-- K2 Plugins: K2BeforeDisplayContent -->
 
	  	  <!-- Item Image -->
	  <div class="catItemImageBlock">
		  <span class="catItemImage">
		    <a href="/joomla/index.php/movies/now-showing/item/61-thor" title="[Copy of] [Copy of] Thor test">
		    	<img src="http://127.0.0.1/joomla/media/k2/items/cache/00d9b1e39f02d57be65ad2a9a6eaa3b8_S.jpg" alt="[Copy of] [Copy of] Thor test" style="width: 100px; height: auto;">
		    </a>
		  </span>
 
	  </div>
 
	  	  <!-- Item introtext -->
	  <div class="catItemIntroText">
	  	<p><strong>Synopsis</strong>: Thor is the son of the king of Asgard, destined to  reach the throne. Le  jour de son couronnement, il se passe des trucs et  on verra bien si ça  fait 30 mots</p>
<p><a id="thortrailer" class="s5mb" href="http://www.youtube.com/v/JOddp-nlNvQ&amp;feature=player_detailpage" title="Thor Trailer"><strong>Watch the trailer! </strong></a></p>
<p><a href="/joomla/index.php/movies/all-reviews/2-Movies/1-Thor">Read and write <strong>reviews</strong>!</a></p>
<p>&nbsp;</p>
 
<div><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2F127.0.0.1%2Fjoomla%2Findex.php%2Fcomponent%2Fcontent%2Farticle%2F&amp;layout=standard&amp;show_faces=1&amp;width=320&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=" style="border: medium none; overflow: hidden; height: 80px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe></div>	  </div>
 
 
 
	  	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
	  	<h4>Additional Info</h4>
	  	<ul>
						<li class="even typeTextfield group1">
				<span class="catItemExtraFieldsLabel">Release date</span>
 
				<span class="catItemExtraFieldsValue">28 april 2011</span>
			</li>
						<li class="odd typeTextfield group1">
				<span class="catItemExtraFieldsLabel">Director</span>
				<span class="catItemExtraFieldsValue">Kenneth Branagh</span>
			</li>
						<li class="even typeTextfield group1">
 
				<span class="catItemExtraFieldsLabel">Cast</span>
				<span class="catItemExtraFieldsValue">AAA,VBB,CCC</span>
			</li>
						<li class="odd typeMultipleSelect group1">
				<span class="catItemExtraFieldsLabel">Language</span>
				<span class="catItemExtraFieldsValue">English</span>
			</li>
 
						<li class="even typeTextfield group1">
				<span class="catItemExtraFieldsLabel">Genre</span>
				<span class="catItemExtraFieldsValue">Action, Fantasy</span>
			</li>
						<li class="odd typeMultipleSelect group1">
				<span class="catItemExtraFieldsLabel">Rating</span>
				<span class="catItemExtraFieldsValue">PG</span>
 
			</li>
						<li class="even typeLink group1">
				<span class="catItemExtraFieldsLabel">Saga</span>
				<span class="catItemExtraFieldsValue"><a href="http://">Marvel</a></span>
			</li>
						</ul>
		  <div class="clr"></div>
	  </div>

Merci!

24/05/2011, 09h25
Bisûnûrs

Tu dois mettre le div "catItemExtraFields" avant le div "catItemIntroText" dans le HTML pour que ton float:right fonctionne comme tu le souhaites.
24/05/2011, 10h38
lili1982

Ca marche parfaitement!

Citation:

Envoyé par Bisûnûrs

Tu dois mettre le div "catItemExtraFields" avant le div "catItemIntroText" dans le HTML pour que ton float:right fonctionne comme tu le souhaites.

Mille mercis! :D
Ca peut paraitre rien du tout, mais je desesperais! Encore merci!