CSS/Image Help

Xylophonic · 15-05-2008 4:16am #1

Hi guys

Was just wondering if anyone can help me with a slight problem I am having. Essentially I want to create a map using CSS and images. I have the basic bit done here.

But I don't want the gaps in between each image and I also want the text to be centred beside each image. Would anyone know how to do this?

What I want it to look like

Regards,
Darren

Adam · 15-05-2008 8:34am

I would recommend using a table for this to be honest. Trying to get that all to work on all browsers will probably end you. And there's nothing wrong with tables here and there, they're more frowned upon if you use for for actual site layout.

Try this:

[html]
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="maps/1.png" alt="Terminus" /></td>
<td>Stop 1</td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td><img src="maps/3.png" alt="Stop"></td>
<td>Stop 2</td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td><img src="maps/4.png" alt="Interchange"></td>
<td>Stop 3</td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td colspan="2"><img src="maps/2.png" alt="Street" /></td>
</tr>
<tr>
<td><img src="maps/9.png" alt="Terminus"></td>
<td>Stop 4</td>
</tr>
</table>
[/html]

egan007 · 15-05-2008 8:52am

Don't use a table that's bad for lots of reasons, the simple rule for when to use tables is.
Use tables when the data is tabular by nature - e.g. printing a league table

When laying out something like this you have think about it from a html object behavioral point of view rather than how you would draw something.

Use Css.

Each of the stops are the same so make a redStop class. Make a whiteStop class.
Join them with a red div.

here's a rough example: (with many problems, not intended to be the finished article)

Adam · 15-05-2008 9:38am

egan007 wrote: »

Don't use a table that's bad for lots of reasons, the simple rule for when to use tables is.
Use tables when the data is tabular by nature - e.g. printing a league table

When laying out something like this you have think about it from a html object behavioral point of view rather than how you would draw something.

Use Css.

Each of the stops are the same so make a redStop class. Make a whiteStop class.
Join them with a red div.

here's a rough example: (with many problems, not intended to be the finished article)

My point exactly, trying to do it in css will be awkward and time consuming to get cross browser compatibility. Tables are to be used minimally, but tabular information is not the only time to use them. What would be the down side to using one in this situation?

DonkeyStyle \o/ · 15-05-2008 1:09pm

Here's my version...
I've embedded the CSS just for convenience... my edits are from .map downwards.
Looks fine in IE6, IE8, FF2, FF3, Opera, Safari(windows).

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dublin Commuter</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<style type="text/css">
body
{ font-family: 'Trebuchet MS';
background-color: #FFF;
color: #000;
//margin: 30px;}

a
{ font-family: 'Comic Sans MS';
color: #DD0000;
text-decoration: none;}

a:hover
{ font-family: 'Comic Sans MS';
color: #DD0000;
text-decoration: none;}

.map
{ font-size: 10px;
vertical-align: middle;
margin: 0;
padding: 0;
}

.stage
{
height: 25px;
background-repeat: no-repeat;
padding-left: 25px;
}

.stage.start { background-image: url('maps/1.png'); }
.stage.street { background-image: url('maps/2.png'); }
.stage.stop { background-image: url('maps/3.png'); }
.stage.end { background-image: url('maps/9.png'); }

.stage p {
margin: 0;
padding: 0;
line-height: 23px;
}
</style>

</head>

<body>
<div class="map">

<div class="stage start"><p>Stop 1</p></div>
<div class="stage street"></div>
<div class="stage street"></div>
<div class="stage street"></div>
<div class="stage stop"><p>Stop 2</p></div>
<div class="stage street"></div>
<div class="stage street"></div>
<div class="stage stop"><p>Stop 3</p></div>
<div class="stage street"></div>
<div class="stage street"></div>
<div class="stage street"></div>
<div class="stage end"><p>Stop 4</p></div>

</div>
</body>
</html>
[/html]
I notice you've changed your graphics since I nabbed a local copy late last night... this html/css was modified from and works with the version in your screenshot of "What I want it to look like".

egan007 · 15-05-2008 3:14pm

Mirror wrote: »

My point exactly, trying to do it in css will be awkward and time consuming to get cross browser compatibility.

if you're bad at css.....

Adam · 15-05-2008 3:22pm

Agreed. I didn't get the impression the OP had much experience with css or html.

Goodshape · 15-05-2008 3:52pm

here's a quick example that doesn't need any images. I guess you can add an image background to the 'stop' css class if you really wanted those round stops...

working example : http://michael.flanagan.ie/work/stops.html

<html>
<head>
<title>Dublin Commuter</title>

<style type="text/css">

.map {
	font-size: 10px;
	width : 75px;
}

.map .stop {
	width : 18px;
	height : 18px;
	background-color : #BE2D2C;
}

.map .street {
	width : 8px;
	margin-left : 5px;
	background-color : #BE2D2C;
	height : 100px;
}

.map span {
	position : absolute;
	line-height : 18px;
	margin-left : 23px;
}

.map .currentstop {
	background : black;
}

.map .shortstreet {
	height : 75px;
}

</style>


</head>

<body>
<div class="map">

<span>Stop 1</span>
<div class="stop"></div>
<div class="street"></div>

<span>Stop 2</span>
<div class="stop"></div>
<div class="street shortstreet"></div>

<span>Stop 3</span>
<div class="stop currentstop"></div>
<div class="street"></div>

<span>Stop 4</span>
<div class="stop"></div>

</div>
</body>
</html>

CSS/Image Help

Comments