...

View Full Version : Ta-ble or not Ta-ble. CSS again.



effpeetee
05-22-2007, 02:06 PM
http://www.exitfegs.co.uk/nine.html

This page is a pictorial menu, which is done using tables. Can someone give me a rough idea as to how to translate this into CSS.

Thanks in advance,

effpeetee

stefanoperfili
05-22-2007, 02:24 PM
I'm no expert, but I think this'll really help you:

http://alistapart.com/articles/practicalcss

effpeetee
05-22-2007, 02:33 PM
I'm no expert, but I think this'll really help you:

http://alistapart.com/articles/practicalcss
That looks wonderful. Just what I was looking for.

Many thanks. Coding Forums strikes again!

effpeetee

www.exitfegs.co.uk

I'll keep everyone posted.

kewlceo
05-22-2007, 02:41 PM
http://www.exitfegs.co.uk/nine.html
Can someone give me a rough idea as to how to translate this into CSS.


Try this out mate:

CSS


.pics { /* also specify font, color, margins, etc */
float: left;
}
.pics img { /* specify width, height, border, etc */
display: block;
}
.clear { /* clear the floats */
clear: both;
height: 0;
}


(X)HTML


<ul class="pics">
<li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
<li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
</ul>
<div class="clear"><!-- --></div>

effpeetee
05-22-2007, 03:52 PM
Try this out mate:

CSS


.pics { /* also specify font, color, margins, etc */
float: left;
}
.pics img { /* specify width, height, border, etc */
display: block;
}
.clear { /* clear the floats */
clear: both;
height: 0;
}


(X)HTML


<ul class="pics">
<li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
<li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
</ul>
<div class="clear"><!-- --></div>

Hi Kewlceo.

This is as far as I have got. As you can see I still have a way to go.
Any further signposts will be appreciated.

The following page can also be reached via my index page.

http://www.exitfegs.co.uk/css.html

www.exitfegs.co.uk

effpeetee

kewlceo
05-22-2007, 05:51 PM
This is as far as I have got. As you can see I still have a way to go.
Any further signposts will be appreciated.

Sorry my friend, like those chefs on TV, I left a few ingredients out. :D

I've put it all together in a single file here, but it is preferable to put the CSS in its own file (as your already have on your site).

Here's what it looks like live on my test site: http://www.uberhost.net/work/


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Effpeetee's Photo Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="A page of family photos.">
<style type="text/css">
<!--
body {
font: 62.5%/1.6 "Lucida Grande", Tahoma, Verdana, sans-serif;
background: #000;
color: #FFF;
}
#container {
width: 500px;
margin: 0 auto;
}
.pics {
list-style-type: none;
}
.pics li { /* also specify font, color, margins, etc */
float: left;
margin: 0 20px 25px 0;
}
.pics img {
width: 160px;
height: 120px;
border: thin solid white;
display: block;
}
.clear { /* clear the floats */
clear: both;
height: 0;
}
-->
</style>
</head>

<body>
<div id="container">
<ul class="pics">
<li><a href="#"><img src="http://www.exitfegs.co.uk/101.jpg" alt="Family photos" /></a>Photo caption</li>
<li><a href="#"><img src="http://www.exitfegs.co.uk/Web2.jpg" alt="Family photos" /></a>'effpeetee' - Himself.</li>
<li><a href="#"><img src="http://www.exitfegs.co.uk/98.jpg" alt="Family photos" /></a>Photo caption</li>
<li><a href="#"><img src="http://www.exitfegs.co.uk/102.jpg" alt="Family photos" /></a>Photo caption</li>
</ul>
<div class="clear"><!-- --></div>
</div>
</body>
</html>

effpeetee
05-22-2007, 06:45 PM
Fabulous.
I am most greatful to you. I can now see where I kept going wrong.
I am slowly getting my site up to date, thanks almost entirely to the kindness and expertise of Coding Forums friends.

I have used a seperate style sheet as you said.

Once again,
Thanks.

effpeetee

http://www.exitfegs.co.uk/css.html

kewlceo
05-22-2007, 07:08 PM
Fabulous.
http://www.exitfegs.co.uk/css.html
That looks excellent, bud. Good work! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum