How to sink a <span> title beside a floating image

12 replies [Last post]

Wed, 2009-03-25 12:44

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

My stripped html

  <div class="views-field-field-imagen-fid">
                <span class="field-content"><a href="LINK"><img src="LINKTOIMAGE" alt="" title=""  width="113" height="107" /></a></span>
  </div>
 
 
  <div class="views-field-title">
                <span class="field-content">TITLE</span>
  </div>
 
 
  <div class="views-field-teaser">
                <div class="field-content"><p>TEASER…</p>
</div>
  </div>
 
 
  <div class="views-field-field-fecha-texto-value">
                <span class="field-content">DATE</span>
  </div>
 
 
  <div class="views-field-view-node">
                <span class="field-content"><a href="LINK">mas...</a></span>
  </div>

and my stripped down css:

.views-field-title {
}
 
.views-field-field-imagen-fid {
        margin: 0px 7px 0px 0px;
        float:left;
}
 
.views-field-teaser {
      color: #ffffff;
      font-size: 0.9em;
	  line-height: 120%;
	  clear:both;
}

I d like the title to sink all the way down so that its bottom is always in line with the bottom of the picture.
I tried the vertical-align property for the title but seems not to work.
Thanks
Simone

Tags:

CSS Styling

Wed, 2009-03-25 12:55

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 36 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

Your code is semantically

Your code is semantically incorrect and if you were to take time and read our "How to Post" sticky then you would realize that we don't want stripped down code.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2009-03-25 13:17

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

oops sorry, i have read the

oops sorry, i have read the stickies but i have eventually misunderstood it,, let me reread and post back.
Thanks
Simone

Wed, 2009-03-25 14:03

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

Ok I try again here is the

Ok I try again here is the code, this time I ve stripped down the extra stuff to focus on the issue but i ve updated all the links to be absolute paths and embedded the css in the head

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
<style type="text/css">
.view-middle {
      padding: 0px 12px;
      line-height:50%;
}   
 
.views-field-view-node a:link {
      color:#ffffff;
      font-size: 1.1em;
}
 
.views-field-view-node a:visited {
      color:#ffffff;
      font-size: 1.1em;
}                                       
 
.views-field-title .field-content{
      color: #ffffff;
      font-weight: bold;
      font-size: 1.1em;
      line-height: 100%;
}
 
.views-field-teaser {
      color: #ffffff;
      font-size: 0.9em;
	  line-height: 120%;
	  clear:both;
}
 
.views-field-field-fecha-texto-value {
      color: #ffffff;
      font-size: 0.9em;
	  line-height: 100%;
}
 
 
.views-field-field-imagen-fid {
        margin: 0px 7px 0px 0px;
        float:left;
}
 
.view-top {
        background: url(<a href="http://www.elchikiplan.com/sites/all/themes/chikiplan3/images/view/rec-view-odd-top.png" rel="nofollow">http://www.elchikiplan.com/sites/all/themes/chikiplan3/images/view/rec-view-odd-top.png</a>);
        height: 15px;
        width: 257px;
}
 
.view-middle {
        background-color: #45a12b;
}
 
.view-bottom {
        background: url(<a href="http://www.elchikiplan.com/sites/all/themes/chikiplan3/images/view/rec-view-odd-bottom-last.png" rel="nofollow">http://www.elchikiplan.com/sites/all/themes/chikiplan3/images/view/rec-view-odd-bottom-last.png</a>);
}
</style>
</head>
    <body>
    <div class="view-top">
    </div>
 
  <div class="view-middle">
 
 
 
  <div class="views-field-field-imagen-fid">
                <span class="field-content"><a href="http://www.elchikiplan.com/tenerife/contenido/taller-de-creaci%C3%B3n-de-c%C3%B3mic"><a href="http://www.elchikiplan.com/tenerife/node/14/lightbox2" rel="lightframe[][]"><img src="http://elchikiplan.com/tenerife/sites/elchikiplan.com.tenerife/files/imagecache/Destacado-recomendado/comic web.jpg" alt="" title=""  width="113" height="82" /></a></a></span>
  </div>
 
 
  <div class="views-field-title">
                <span class="field-content">Taller de creación de cómic</span>
  </div>
 
 
  <div class="views-field-teaser">
                <div class="field-content"><p>El cómic es uno de los géneros que más atrae a los niños; por eso, ser capaz de trasladar a un papel sus propias historias puede ser una forma divertida de aprender.El taller está dirigido a niños de 8 a 13 años y estará a cargo de Renzo Ferrer, que también impartirá, para niños mayores, un taller de Manga.</p>
</div>
  </div>
 
 
  <div class="views-field-field-fecha-texto-value">
                <span class="field-content">Jueves alternos de marzo</span>
  </div>
 
 
  <div class="views-field-view-node">
                <span class="field-content"><a href="http://www.elchikiplan.com/tenerife/contenido/taller-de-creaci%C3%B3n-de-c%C3%B3mic">mas...</a></span>
  </div>
  </div>
  <div class="view-bottom">
    </div>
  </div>
  </body>
</html>

What I want to achieve is the image to be on the left (as it is now), the title on the right and its bottom to be inline with the bottom of the image, the text should go just under both image and title.
Let me know if i can give more info or change something
Simone

Wed, 2009-03-25 19:58

kilavasun

Offline

Regular

Brasil

Last seen: 13 years 26 weeks ago

Brasil

Timezone: GMT-3

Joined: 2009-03-23

Posts: 17

Points: 0

Site URL

Hello cimo!

Can you give to us a URL to this page? It will help 120% to find the tricky code

Regards,
kilavasun

Wed, 2009-03-25 20:04

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

Sure: www.elchikiplan.com/ten

Sure:
www.elchikiplan.com/tenerife
the title i want to sink is inside those little colored and round cornered "views"

Fri, 2009-03-27 23:38

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

This is a shameless bump!

Sat, 2009-03-28 01:03

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

If I understand your needs

If I understand your needs properly, remove the float property from this:

div.view-view-recursos .views-field-field-imagen-fid {e272f041...02f68.css (line 1)
float:left;
margin:0 7px 0 0;
}

Set the images to {vertical-align: bottom;}.

BTW, excellent posting of your code. The style in head, and the absolute urls of the images is exactly the best way to provide the data.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sat, 2009-03-28 22:47

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

Hi thanks for your answer,

Hi thanks for your answer, it s been a little step forward but the problem is that if the title has more than 1 line, beginning from the second line all text will go under the image. First line is always inline with the bottom of the image.
What i need is the bottom of the title to be in line with the bottom of the image whether it s length will need more than 1 line..
Simone

Sun, 2009-03-29 05:51

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

OK. Things don't like to

OK. Things don't like to grow upward from where they start, so we'll use absolute positioning to lock the heading's bottom to the bottom of the (new) container that holds it and the image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title></title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: 100% serif;
    }
 
  p {
    font-size: 1em;
    }
 
  #content {
    width: 250px;
    }
 
  .item {
    border: 1px solid black;
    }
 
  .banner {
    position: relative;
    zoom: 1;
    }
 
  .banner img {
    display: block;
    }
 
  .banner h3 {
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 110px;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="content">
    <div class="item">
      <div class="banner">
        <a href="#"
             class="lightbox"><img src="some.jpg"
             alt="picture of veggies"
             width="130"
             height="120" /></a>
 
        <h3>El Puesto Ecológico</h3>
      </div>
 
      <p>El Puesto Ecológico es una Asociación de Agricultores y
      Consumidores que está muy cerca de la Plaza del Cristo en la
      Laguna. Allí puedes comprar frutas, verduras, pan, huevos, miel,
      vino y otros productos ecológicos del país directamente desde los
      productores. Puedes hacerte socio,
      <br />
      <a href="#">mas...</a></p>
    </div>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2009-03-29 10:09

#10

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

Hi ok, getting there, the

Hi
ok, getting there, the main problem now is that the this html is ouput by Drupal s views module, so i need to find a way to create a new div container for image and title.Be back soon (with good news, hopefully)
Simone

Sun, 2009-03-29 20:39

#11

cimo

Offline

Regular

Last seen: 13 years 8 weeks ago

Joined: 2009-03-25

Posts: 11

Points: 4

Hi thanks for the help, i

Hi
thanks for the help, i managed to wrap image and title in a new div container and applied the css you ve given me, and it finally worked out. I signed your post as best reply..
Now the bad news.. now that i know this site you guys are going to have to bear with me ...
Simone

oh well, here some info if anybody gets in the same situation:
-tick the "Exclude from display" box for the image and title field
-create a new generic field (i used a "Global:custom text" field) and use

<div class=views-field-field-imagen-fid>[field_imagen_fid]</div><div class=views-field-title>[title]</div>

as text, of course check for the proper fields names
-now the 2 fields are wrapped in a new container, go ahead with the css code given by gary

Sun, 2009-03-29 21:00

#12

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

In re bad news

I imagine we'll manage to stand up to the load.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

How to sink a <span> title beside a floating image

Your code is semantically

oops sorry, i have read the

Ok I try again here is the

Site URL

Sure: www.elchikiplan.com/ten

This is a shameless bump!

If I understand your needs

Hi thanks for your answer,

OK. Things don't like to

Hi ok, getting there, the

Hi thanks for the help, i

In re bad news

User login

Navigation