Posted by manoloka on August 5, 2011 at 10:06am
2 followers
| Project: | Relevant Content |
| Version: | 6.x-1.5 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Hi,
On the project page you state;
Alternatively, with a little CSS magic in your theme, you could float the CCK Field to the side, add a little padding, border & margin an have a related content section with the content flowing around it.
mmm ... I've been trying to implement the example you mention but I haven't manage :( I'm not a CSS expert just a newbie
I'm using the Giordani themme (a sub themme of Marinelli http://drupal.org/project/marinelli) and this is the code I get
<div class="field field-type-relevant-content field-field-tambien">
<div class="field-header">
<h2> <span style="color:#008000;">También en Categorías similares:</span></h2>
</div>
<div class="field-items">
<div class="field-item odd first">
<p><a href="http://savealife.es/perros/mestizo/149.htm">Idefix</a><br>
<a href="http://savealife.es/perros/mestizo/149.htm"><img width="150" height="113" class="imagecache imagecache-perro_adopcion imagecache-default imagecache-perro_adopcion_default" title="" alt="" src="http://savealife.es/sites/default/files/imagecache/perro_adopcion/adopcion_perros/img00162-20110615-2058.jpg"></a><br>
<a href="http://savealife.es/perros/mestizo"> mestizo</a></p>
</div>
<div class="field-item even">
<p><a href="http://savealife.es/perros/mestizo/114.htm">Chipy</a><br>
<a href="http://savealife.es/perros/mestizo/114.htm"><img width="150" height="113" class="imagecache imagecache-perro_adopcion imagecache-default imagecache-perro_adopcion_default" title="" alt="" src="http://savealife.es/sites/default/files/imagecache/perro_adopcion/adopcion_perros/chipy2.jpg"></a><br>
<a href="http://savealife.es/perros/mestizo"> mestizo</a></p>
</div>
<div class="field-item odd last">
<p><a href="http://savealife.es/perros/mestizo/168.htm">Dorcas</a><br>
<a href="http://savealife.es/perros/mestizo/168.htm"><img width="150" height="150" class="imagecache imagecache-perro_adopcion imagecache-default imagecache-perro_adopcion_default" title="" alt="" src="http://savealife.es/sites/default/files/imagecache/perro_adopcion/adopcion_perros/img024red.jpg"></a><br>
<a href="http://savealife.es/perros/mestizo"> mestizo</a></p>
</div>
</div>
</div>check the image to see the result as is
Anyone could help me to implement that CSS example?
Thanks a lot
Great module
| Attachment | Size |
|---|---|
| Captura.PNG | 98.06 KB |
Comments
#1
so, in the CSS, you could just do:
.field-field-tambien {float:right;
padding:10px;
margin:10px;
border:1px solid #000;
}
The Relevant Content field would need to be weighted to appear before the Body, this would render it first, float it right and the proceeding content would wrap around it.
#2
Thanks Nicholas,
That worked, however not with the result I expected, see pic (I think I misunderstood what you meant).
What a I want is for the images to float side by side, so I get an horizontal section, not a vertical one, do you know what I mean?
I'll have another go, maybe with this new info I can manage.
Thanks again
#3
Aha
So, I've managed to get what I wanted :) (see pic)
I used this css
.field-field-tambien {
border:1px solid #000;
padding:10px;
}
.field-field-tambien .field-items p{
float:left;
padding:5px;
margin:5px;
}
However, I still got a couple of issues;
As soon as I add float to .field-field-tambien .field-items p, the border will show only around the header text ??? I guess I still something wrong.
Not really an issue as I can work it around creating a group and theming that border .... just don't know why this happens.
The other issues don't have to bee with this, so I'll open new issues.
Thanks
Sorry I mistook the image and don't know how to delete it now (that one is for the other issue).
#4
This is the one
#5
Try adding an
overflow:hiddento the container (.field-field-tambien).