|
|
Posted by Jonathan N. Little on 07/11/06 18:56
Klaus Cammin wrote:
> Following problem: I have a webpage with many little images, (see
> http://www.klaca.de switch to English, then 'Compacted View').
>
Sorry missed the URL, anyway here is a table-less way, advange is the
view port is reduced the number of "columns" changes to full the
available space!
CSS:
/* adjust to taste */
..flags DIV { float: left; margin: .5em; padding: .5em; width: 5em; }
..flags DIV A { display: block; }
..flags DIV A IMG { border: 0; }
/* clear float so sections stay together */
H2 { clear: left; }
HTML
<h2>
<a href="http://home.pages.at/klaca/ENGFLGS4.HTM"><== R-Z</a>
Letters
<a href="http://home.pages.at/klaca/ENGFLGS2.HTM">A-E ==></a>
</h2>
<div class="flags">
<div>
<a href="http://home.pages.at/klaca/AFGHANIS/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/AFGHANIS.GIF"
title="Afghanistan" width="60"></a>
<a
href="http://home.pages.at/klaca/AFGHANIS/ENGLAND.HTM">Afghanistan</a>
</div>
<div>
<a href="http://home.pages.at/klaca/ALBANIA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ALBANIA.GIF"
title="Albania" width="60"></a>
<a href="http://home.pages.at/klaca/ALBANIA/ENGLAND.HTM">Albania</a>
</div>
<div>
<a href="http://home.pages.at/klaca/ALGERIA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ALGERIA.GIF"
title="Algeria" width="60"></a>
<a href="http://home.pages.at/klaca/ALGERIA/ENGLAND.HTM">Algeria</a>
</div>
<div>
<a href="http://home.pages.at/klaca/ANDORRA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANDORRA.GIF"
title="Andorra" width="60"></a>
<a href="http://home.pages.at/klaca/ANDORRA/ENGLAND.HTM">Andorra</a>
</div>
<div>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANGOLA.GIF"
title="Angola" width="60"></a>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">Angola</a>
</div>
<div>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">
<img src="http://home.pages.at/klaca/LAENDER/ANTI_AND.GIF"
title="Antigua and Barbuda" width="60"></a>
<a href="http://home.pages.at/klaca/ANGOLA/ENGLAND.HTM">Antigua and
Barbuda</a>
</div>
...rest of your section flags ...
</div>
<h2>Your nest section ... </h2>
Simpler markup, more flexible for user and easier for you to maintain...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|