5 replies [Last post]
supernewb
supernewb's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT-5
Joined: 2012-02-16
Posts: 2
Points: 3

Hello,

Very new to CSS (well, its been an 8 year hiatus, and I was a beginner then too). I've done searches on this, but each result requires I either modify the stylesheet, or place the style in the <head>, in my case I cannot (out of my control).

I would like to do a simple 2x2 table with images and currently do it like this:

<table cellspacing="1" cellpadding="0" width="394" border="0">
<tbody>
<tr>
<td><a title="1" href="1.html"><img width="111" height="111" alt="1" src="1.jpg"></a></td>
<td><a title="2" href="2.html"><img width="111" height="111" alt="2" src="2.jpg"></a></td>
</tr>
<tr>
<td><a title="3" href="3.html"><img width="111" height="111" alt="3" src="3.jpg"></a></td>
<td><a title="4" href="4.html"><img width="111" height="111" alt="4" src="4.jpg"></a></td>
</tr>
</tbody>
</table>

How does one do this with divs?

Thank you, I appreciate the help.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 50 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9166
Points: 3153

First things first

Before we invest ourselves in defining a structure, perhaps you can better explain just what these images are, without reference to how you want them presented, i.e. 2×2.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

supernewb
supernewb's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT-5
Joined: 2012-02-16
Posts: 2
Points: 3

Hi Gary, The images are four

Hi Gary,

The images are four tiles (ex "What's New?"), in a 2x2, that take visitors to four separate areas of the site.

Thanks

tan106
tan106's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT+8
Joined: 2012-02-18
Posts: 5
Points: 5

The first visit, I am glad to

[do not make empty posts, especially with links ~gt]

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 50 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9166
Points: 3153

A menu is a list

The structure is a list, then. So, mark it as such:

<ul id="menu">
  <li>
    <a title="1" 
       href="1.html">
      <img width="111" 
           height="111" 
           alt="1" 
           src="1.jpg">
    </a>
  </li>
 
  <li>
    <a title="2" 
       href="2.html">
      <img width="111" 
           height="111" 
           alt="2" 
           src="2.jpg">
    </a>
  </li>
 
  <li>
    <a title="3" 
       href="3.html">
      <img width="111" 
           height="111" 
           alt="3" 
           src="3.jpg">
    </a>
  </li>
 
  <li>
    <a title="4" 
       href="4.html">
      <img width="111" 
           height="111" 
           alt="4" 
           src="4.jpg">
    </a>
  </li>
</ul>
In re the ul's id, check with the project manager for an appropriate token; "menu" may already be in use for something else, or the site's vocabulary may require something different.

The css:

#menu {
    width: 228px;  /*the width of two images plus 6px for a 
                     word-space between them*/
    }
 
#menu li {
    display: inline-block;
    }
 
#menu a,
#menu img {
    display: block;
    }

I don't understand your not being able to edit the css. How are you expected to add elements to a page, and not be able to control their presentation? If you can edit the html, the style element is simply another html element, though if your little menu is common to multiple pages, the css belongs in its linked file.

If all else fails, explain your needs to your project manager.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 44 weeks 12 hours ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

use the below code. it is

use the below code. it is useful for you:
css code:

.maindiv{
float:left; width:394px; height:auto;
}
.row_cols{
width:197px; float:left ; height:auto;
}
.inner_sec{
float:left; width:111px; height:111px;
}

html code:

<div class="maindiv">
<div class="row_cols">
<div class="inner_sec"><a title="1" href="1.html"><img width="111" height="111" alt="1" src="1.jpg"></a></div>
<div class="inner_sec"><a title="2" href="2.html"><img width="111" height="111" alt="2" src="2.jpg"></a></div>
</div>
<div class="row_cols">
<div class="inner_sec"><a title="3" href="3.html"><img width="111" height="111" alt="3" src="3.jpg"></a></div>
<div class="inner_sec"><a title="4" href="4.html"><img width="111" height="111" alt="4" src="4.jpg"></a></div>
</div>
</div>