PDA

View Full Version : -- Text for a sliced layout --


Paranoid
06-09-2004, 11:04 PM
I created a layout on Adobe Photoshop, which I then sliced on Adobe Imageready. By doing this, it also creates an html document that I have already posted on the internet for my site. On the layout, I left four blank spaces, which I was planning on putting links and to also put an I-frame in the main one. The only problem is, I can't figure out how to place text on top of the layout (or in the boxes I left). I tried looking everywhere on google, but I can't seem to come across any sites that can help me. My site where the layout is, is here : http://www.geocities.com/rottureversionone//hogwartsmain.html . I would greatly appreciate it if someone could help me with my little dilemma... :confused:

Thanks in advance,
Paranoid

Span
06-10-2004, 09:51 AM
You could use Dorm-Rooms.gif, Other.gif, The-Castle.gif and Main-Information.gif as background images.

Instead of this:
<TD><IMG SRC="Dorm-Rooms.gif" WIDTH=197 HEIGHT=108></TD>

Use this:
<TD background="Dorm-Rooms.gif"><p>So now you can put your text here</p></TD>

mindlessLemming
06-10-2004, 10:03 AM
Hi, welcome to CF :)
If you remove the images (<img>) from your table cells (<td>) and set those images as the <td>'s background image you will be able to put more content on top without any troubles.
We'll start off by using inline CSS (cascading style sheets. they rock!) to set the background images and keep the table cells the right height.

Sample:

<TD COLSPAN=2>
<IMG SRC="hogwartslayoutflatenned2_09.gif" WIDTH=31 HEIGHT=4>
</TD>
<TD>
<IMG SRC="hogwartslayoutflatenned2_10.gif" WIDTH=103 HEIGHT=4>
</TD>
<TD>
<IMG SRC="hogwartslayoutflatenned2_11.gif" WIDTH=102 HEIGHT=4>
</TD>

<img>'s removed and CSS used:

<TD COLSPAN=2 style="background:url(hogwartslayoutflatenned2_09.gif); height:4px; width:31px;">
</TD>
<TD style="background:url(hogwartslayoutflatenned2_10.gif); height:4px; width:103px;">
</TD>
<TD style="background:url(hogwartslayoutflatenned2_11.gif); height:4px; width:102px;">
</TD>

Obviously those TD's aren't the ones you want to change, but if you do to the correct td's what I just did to that sample you'll be well on your way.
Have a go at that, and once it's sorted I'll help you use more of CSS's power to seperate your content from your presentaion.

Andrew.

**edit: Doh! I've got to take a typing class or something. That's the third time this week someone's posted the same thing as me while I'm still typing :o

Paranoid
06-10-2004, 06:42 PM
:p Thank you very much, guys! It works wonderfully now! :thumbsup:

--Paranoid