[Wolves] CSS qustion - help - it should be easy!

Wed Dec 15 15:11:12 UTC 2010

Hi Wayne,

With out spending a bit of time on it, my approach would be 

-wrap them in a div
-put them in a <ul></ul> no style for the list i.e. list-style:none; 
-then float them to the left  ie   float:left;
- put some padding to the right so that there is space between them

maybe some further tweaking to make them look how you want, ie borders etc

Hope this helps

Mo

________________________________
From: Wayne Morris <waynelists at machx.co.uk>
To: Wolverhampton Linux User Group <wolves at mailman.lug.org.uk>
Sent: Wed, 15 December, 2010 14:46:13
Subject: [Wolves] CSS qustion - help - it should be easy!

Help - it should be easy but I'm tearing my hair out trying to     figure css 
out - 7 hours of google last night and i still can't make     this stupid
easy bit work.
want page to look like:

Image 1 Image 2 --->  Image 5               ---------------      preferably 
scale to fit webwindow but thats another thing
Menu bar

No matter what I do - use <p>, use image block instead of     inline, use all 
sorts of fancy snippets of code with div in them...
the menu bar or any text I try instead just slaps itself on the top     line 
next to the images.
I can fix it with lots of br's after the images so the text drops     down to 
the right place, but I understand that isnt a clever way.

This is it working with br's:
http://www.exceldiving.co.uk/test/zzz.html

please help!

code below 

cheers

Wayne

<html>
<head>
<link rel="stylesheet" type="text/css" 
href="http://www.exceldiving.co.uk/test/tswtabs.css" />
</head>

<style type="text/css">
div.img
{
  margin: 2px;
  border: 0px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: block;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}

</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="/pics/PADILogo-L1.jpg" 
alt="Klematis" width="auto" height="90" /></a>

</div>

<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="/pics/lionfishsmall.jpg" 
alt="Klematis" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="klematis3_big.htm"><img src="/pics/companylogo.jpg" 
alt="Picture" width="auto" height="90" /></a>

</div>

<div class="img">

 <a target="_blank" href="Picture3_big.htm"><img src="/pics/pike.jpg" 
alt="Picture" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="Picture4_big.htm"><img src="/pics/PADILogo-L1.jpg" 
alt="Picture" width="auto" height="90" /></a>

</div>
<div class="img">

 <a target="_blank" href="Picture4_big.htm"><img src="/pics/PADILogo-L1.jpg" 
alt="Picture" width="auto" height="90" /></a>

</div>
<p><p><br></br>
<br></br>
<br></br>

<h1>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>
Why isn't this working!!!!<br>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.lug.org.uk/pipermail/wolves/attachments/20101215/4a1ac178/attachment-0001.htm>