Thu, 2012-02-16 02:50
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.
Thu, 2012-02-16 05:15
#1
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
Sat, 2012-02-18 06:16
#2
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
Sat, 2012-02-18 12:37
#3
The first visit, I am glad to
[do not make empty posts, especially with links ~gt]
Sat, 2012-02-18 18:09
#4
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>
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
Mon, 2012-02-20 08:22
#5
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>