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

CommentFileSizeAuthor
#3 Captura3.PNG4.9 KBmanoloka
#4 Captura4.PNG141.24 KBmanoloka
#2 Captura2.PNG78.83 KBmanoloka
Captura.PNG98.06 KBmanoloka

Comments

nicholasthompson’s picture

nicholasthompson
Primary language English
commented

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.

manoloka’s picture

manoloka commented
StatusFileSize
new Captura2.PNG78.83 KB

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

manoloka’s picture

manoloka commented
StatusFileSize
new Captura3.PNG4.9 KB

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).

manoloka’s picture

manoloka commented
StatusFileSize
new Captura4.PNG141.24 KB

This is the one

nicholasthompson’s picture

nicholasthompson
Primary language English
commented

Try adding an overflow:hidden to the container (.field-field-tambien).