CSS Forum

**RNPoo7** · 05:51 PM

Hey guys,
I have another question.

I was working on a layout but I didn't know how to make links in css

"chef" , "contacts" i wanted those 4 to be links to other pages.

www.houseofpizza.biz/test

here's the empty layout
www.houseofpizza.biz/test/top.jpg

And here's my code:

<html>
<head>
<title>
House Of Pizza Restaurant
</title>
<link rel="StyleSheet" href="style.css" type="text/css">
</head>
<body bgcolor="#ffffff">

<center>
<div id="content">

<span id="top">
<center>
<img src="top2.jpg">

</center>
</span>

<span id="content">



<table>
<tr>
<td><b>Welcome to our Restauarnt</b></td>
<td></td>
<td>Ask about our Gift Certificates</td>
</tr>

<tr>
<td><font color="red">Ask about our Catering & Discounts for
<br>

Business Luncheons, Birthday Parties
<br>
And Special Group Occasions
<br><font color="green">
Availabe on Sundays by Reservations
</td>
</tr>

</table>



</span>

</div>

<div id="footer">

<img src="line.jpg" border="0">

<BR>

<a href="home.html">Home</a> - <a href="menu.html">Menu</a> - <a href="coupons.html">Coupons</a> - <a href="directions.html">Directions</a> - <a href="contact.html">Contact Us</a>
<br>
<font color="red">Copyright 2006 House of Pizza Restaurant. All Rights Reserved</font>

</div>
</center>

</body>
</html>

**ADAM Web Design** · 05-20-2006, 01:21 AM

The best way to go about doing what you want isn't actually CSS, but through a combination of ImageReady and regular HTML.

Use ImageReady from within Photoshop and slice up your image so that the four images that you want will be separate, and then export. (For more information, there are a whole bunch of tutorials on the subject.)

**RNPoo7** · 05-20-2006, 03:14 PM

I have work right now. I'm gonna search for them when I come home.

But quick question, are they in the CSS sticky?

Thanks

**RNPoo7** · 05-21-2006, 12:25 AM

Hey guys, i started splicing the bottons, but I don't knwo what to do after that.

Like I used the slice tool around the bottons, but that's all and saved optimized as.

I'm sure i'm missing stuff here, any one have a write up on how to do this?

Much apperciated

**ADAM Web Design** · 05-21-2006, 04:46 AM

There really isn't one that I know of.

You basically just carve the thing up, make sure you end up with your four separate buttons, and use regular HTML (possibly with some CSS mixed in for your specific situation) to code them in.

**RNPoo7** · 05-21-2006, 12:43 PM

I can splice it in photoshop and take it to dream weaver but I dont 'like how dream weaver gives it to me all in html tables.

I wanted to incorperate it in my css layout. That is possible, right?

**chrishirst** · 05-21-2006, 12:50 PM

Quote:

Originally Posted by RNPoo7

I can splice it in photoshop and take it to dream weaver but I dont 'like how dream weaver gives it to me all in html tables.

I wanted to incorperate it in my css layout. That is possible, right?

well yes, just code it by hand

**RNPoo7** · 01:15 PM

Quote:

Originally Posted by chrishirst

well yes, just code it by hand

Well that's teh part that I'm not too sure about.

I think I know how to code it, but I don't know how to make it stay on the red and green bars on top which is the "top2.jpg"
For example: I know how to have multiple pics and make each of them link to a different page.

<center>
<div id="content">

<span id="top">
<center>
<img src="top2.jpg">

</center>
</span>

I know I put right after the "img src" but i'm not too sure what exactly will go there.

**chrishirst** · 05-21-2006, 01:17 PM

set top.jpg as a background image to the menu div then float the anchor containers inside the div

**LadynRed** · 05-22-2006, 01:15 PM

Don't use the <center> tag, it's completely unnecessary if you're going to use CSS, it's also deprecated.

It's not necessary to slice images in ImageReady and use it's messy HTML. Carve out your button in PS with the marquee tool, copy/paste the button into it's own file, save it as a JPG, then put it in your page with CSS as suggested above.