Pictures with underlying text

Xyis · #1 Jul 17th, 2007, 12:04

Greetings all.

I have been using CSS for a few weeks now so please forgive me if i am doing something very silly. I have been trawling the internet to try and find a solution to creating an INLINE series of pictures with underlying text.

I have tried Unordered lists and Detailed lists both seem to fail me.

Here is an example or how far i have got and a sample of the appropriate CSS code used.

http://www.xyis.net/kick/locations.html

As you can see it is quite close but the text is on the image. Any kind of floating seems to cause me big problems even inside the span which i thought should act as a container but fails.

HTML: Select all

 <ul>
     <li><span><img src="blah.gif" alt="blah"/>Testing</span></li>
     <li><span><img src="blah2.gif" alt="bla2"/>Testing2</span></li>
     <li><span><img src="blah3.gif" alt="bla2"/>Testing3</span></li>
</ul>

Code: Select all

 
#main ul{
 list-style: none; 
}
#main li {
 display: inline;
}
#main span {
 width: 87px;
}
#main img {
 border-left: 5px #CCCCCC;
 border-top: 5px #CCCCCC;
 border-bottom: 5px #ADADAD;
 border-right: 5px #ADADAD;
 
}

Thanks for reading.

Lchad · #2 Jul 17th, 2007, 12:16

Here is the answer...
Starting with HTML

Code: Select all

<body onload="MM_CheckFlashVersion('8,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">
<div id="nav">
    <ul id="menu">      
      <li><a href="index.html"><img src="images/button1.gif" alt="KickTV" /></a></li>
      <li><a href="locations.html"><img src="images/button2.gif" alt="Locations" /></a></li>

      <li><a href="audience.html"><img src="images/button3.gif" alt="Audience" /></a></li>
      <li><a href="addopps.html"><img src="images/button4.gif" alt="Advertising Opportunities" /></a></li>
      <li><a href="curradv.html"><img src="images/button5.gif" alt="Current Advertising" /></a></li>
      <li><a href="partners.html"><img src="images/button6.gif" alt="Partners" /></a></li>
      <li><a href="technical.html"><img src="images/button7.gif" alt="Technical" /></a></li>
      <li><a href="press.html"><img src="images/button8.gif" alt="Press" /></a></li>
      <li><a href="contact.html"><img src="images/button9.gif" alt="Contact" /></a></li>
  </ul>
</div>

    <div id="content">
        <div id="logo"><img src="images/logostill.gif" alt="kick_logo" width="336" height="96" /></div>
        <div id="main_t"></div>
      <div id="main">
        <h1>Find Your Club</h1>
            Kick TV is all about Health Club members and these pages are here to help you. 
            We understand that during your workout it&rsquo;s difficult to make a note of any details you might see on the channel. Here we provide you with contact details for the businesses that are promoting themselves on Kick TV that you can look at any time and anywhere.<br />
        

          <div class="block"><img src="images/locations/andover.gif" alt="Andover Leisure Centre" width="77" height="77" /><p>Testing</p></div>
            <div class="block"><img src="images/locations/atrium.gif" alt="Atrium Club Cambridge" width="77" height="77" /><p>Testing2</p></div>
            <div class="block"><img src="images/locations/barns.gif" alt="Barnsley Metrodome" width="77" height="77" /><p>Testing3</p></div>
          <div class="block"><img src="images/locations/bsc.gif" alt="Basingstoke Sports Centre" width="77" height="77" /><p>Testing4</p></div>
           <div class="block"><img src="images/locations/carrefour.gif" alt="Club Carrefour Birmingham" width="77" height="77" /><p>Testing5</p></div>
            <div class="block"><img src="images/locations/redwood.gif" alt="Redwood Hotel and Country Club" width="77" height="77" /><p>Testing6</p></div>
            <div class="block"><img src="images/locations/roko_p.gif" alt="Roko Portsmouth" width="77" height="77" /><p>Testing7</p></div>

          
      </div>
    <div id="main_b"></div>
    </div>

The only addition to css is this:

Code: Select all

.block{
    float: left;
    width: 77px;
    margin-left: 25px;
    margin-bottom: 3px;
    margin-top: 5px;
    margin-right: 15px;
    }

If you want to have four images on one line, just decrease the pixels on the margin-left and margin-right.
At this point you'll see I put three across.

Xyis · #3 Jul 17th, 2007, 12:25

So basically abandon UL's and use independant DIV's?
I didn't think of that, for some reason i thought lots of DIV's was a bad idea and a UL would have been better.

Thanks dude, for the help.

Lchad · #4 Jul 17th, 2007, 12:36

You won't be able to center the text unless you use a br and spaces... so by doing it with div classes and p's you can align it perfectly.

Nesting divs is really ok.

You're welcome!

Xyis · #5 Jul 17th, 2007, 13:02

Sorry to bother you again but do you have any idea why this is not working, in dreamweaver the borders show but in IE and Firefox theres nothing:

Code: Select all

#blocks img{
 border-left: 5px #CCCCCC;
 border-top: 5px #CCCCCC;
 border-bottom: 5px #ADADAD;
 border-right: 5px #ADADAD;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Pictures	VanessaJW	Webforumz Cafe	36	May 22nd, 2007 16:15
php uploading pictures	Accurax	PHP Forum	16	Dec 18th, 2006 11:20
Resizing Pictures	Accurax	Web Page Design	9	Dec 14th, 2006 18:05
gap between pictures	maksinx	Graphics and 3D	9	Aug 15th, 2006 17:19
Postin Pictures	franknu	PHP Forum	5	Jun 24th, 2006 15:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Pictures with underlying text