CSS Lists with images

Steeevoe

New Member
Messages
103
Reaction score
0
Points
0
Currently I am using containers in my Gallery page: http://www.bmac.exofire.net/gallery.php , to seperate the images.

As you can see I have two sizes of images I will be using.


I have been experimenting and failed miserably by converting the list ways in the nav links bar at the top of the page into one that takes images and lays them out like in the current gallery.


Is there a way I could have CSS so a list of images appears like the current gallery?

i.e. I want to be able to use and produce the layout in the current gallery.

<ul id=images>
<li id=half><IMG ...></li>
<li id=full><IMG ...></li>
</ul>



Thanks :)
 

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
So, instead of using div's you want to use unlinked lists?

think with a bit of css that may be possible.

for example, to produce this:

1
2 3
4

you can do this:
Code:
<ul>
<li style="display:block">1</li>
<li style="display:inline">2</li>
<li style="display:inline">3</li>
<li style="display:block">4</li>
</ul>

I think this could be achieved in a less confusing way with tables:
Code:
<table>
  <tr>
    <td colspan="2">1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
  </tr>
</table>

And, as you originally posted, this is much easier using id="example" instead of attributes.
 
Last edited:

Steeevoe

New Member
Messages
103
Reaction score
0
Points
0
Yes it seems that way!

I originaly used an old doc type in the webpages which doesn't allow the wrapper to be centered which is what I want! But when I changed the doc type of the committee page it totaly messes up the layout of the list shown here:

http://www.bmac.exofire.net/about/committee.php

all of the boxes dissappear and the floats just appear as a normal list when its changed to the new doc type :(
 

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
Actually, the problem may be that you have a "> being echoed before the <!DOCTYPE. You can see it hanging out there in the upper left corner of your site :p
 
Last edited:
Top