HTML - Creating Text Layer In Cell

Hi, I can make basic websites but I am not very skilled in web design. I am in need of help.

Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images.

I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean...



I have included a zip file containing my html pages and image folder. Please download it he

http://homepage.ntlworld.com/stephan.../Portfolio.zip

The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website.

When you format some text in a table cell (at least with <p> or <li> tags), some browsers drop it down one line, so that it can't fully valign top. Apparently Safari and Firefox do this. (IE seems to not do it - it valigns it to the top). Others may exhibit this behaviour, but these are all I've tested. Here is an example (view with Safari or Firefox to see problem):
http://www.fisheyemedia.net/test/
Is there any way around this? Maybe with CSS? I have a more complex table in 2 columns and am trying to get vertical alignments to match. Thanks.

G'day guys,

This will probably be a simple one for you.

I have a table set to 150px, it has to be this width, and I need to have text indented in each cell. Trouble is, when the text wraps to the next line in the cell, it doesn't stay inline or indented.

How do I get the text to stay indented when it travels to the next line?

Thanks very much for any help you can give me.

Cheers,
Jamie

Hi everyone:

Any help appreciated.

Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window.

Development: I'm using a Mac, and I don't have ready access to a PC to experiment.

What I tried:
Code:

	<table>
		<tr>
			<td><img src = "a.png" style = "width: 100%" /></td>
			<td><img src = "b.png" style = "width: 100%" /></td>
			<td><img src = "c.png" style = "width: 100%" /></td>
		</tr>
	</table>
	<p class = "caption">A caption for the 3 images</p>
	<p class = "legend" >A legend for the three images</p>

What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals.

What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element.

What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly.

What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left.

What's the trick to get around this IE "gotcha" please?

Thanks from a newbie.

Right - I am looking for way to do the following...

I want to have a 3 URLs on a page > something like

Code:

<a href="http://www.somesitesomewhere.com" alt="no 1">Click here for option 1</a>
<a href="http://www.somesitesomewhere.com" alt="no 2">Click here for option 2</a>
<a href="http://www.somesitesomewhere.com" alt="no 3">Click here for option 3</a>

which will take the viewer to another website landing page which will have a body of text that will contain an area that will be changed depending on which of the above links has been clicked...

i.e.:
Code:

<p>this is copy for the body of the landing page. You clicked option {dynamic_text}, nice choice.</p>

So the "alt" state appears dynamically - I know that the link will have the dynamic text elsewhere in the anchor tag (not in the 'alt' tag) - but am not sure where/how to implement. Can anyone help?

Cheers

YB

Hi,
First, I have to say I'm new to html, so don't be angry on me, please
second, I don't know if this is the right place to ask my question, feel free to slap me if I've done wrong

I wnated to place a textbox in my blog in blogger. So I wrote these html codes:

HTML Code:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">

</div>

<pre class="alt2" dir="ltr" style="border: 1px inset; height: 338px; margin: 0px; overflow: auto; padding: 3px; text-align: left; width: 600px;">  HERE I WILL PLACE MY TEXT , A VERY LONG TEXT                                   </pre>
</div>

the result was a textbox with a slider, but the slider doesn't move , can anyone tell me what is the problem

thanks

hi,
i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript.
i.e
if cell value is "late" then display that cell in red color
else
display the cell in green color
please help me.

Thanks ad Regards
Akash

hi all,

is there a way to have a div layer 100% in height and 100% in width?

thanks

didn't get a reply in the css forum, here is the site..
http://www.pomatrock.brevard.k12.fl.us/goodnews.html

the css file is attached as a word doc.

if you go to any of the years..(2k5,2k6 etc) there is a div on the left side, used to cover up the dark brown with a light brown. Problem is, in Firefox it shows up way too long and adds a long extension of brown from the bottom of the page, but in IE it looks just fine. Some help would be greatly appreciated. :-D

thanks.

Here's the CSS code:
HTML Code:

 <style type="text/css">
<!--
body {
scrollbar-arrow-color: #425B5E;
scrollbar-base-color: #98A5A6;
scrollbar-face-color: #98A5A6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #425B5E;
scrollbar-3dlight-color: #DEE7E8;
scrollbar-track-color: #DEE7E8;
scrollbar-darkshadow-color: #DEE7E8;
}

div#content {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}


.header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none;
 BORDER-RIGHT: none 1px solid;
              BORDER-TOP: none 1px solid;
              BORDER-bottom: white 1px solid;
              BORDER-LEFT: none 1px solid; background-color: #660000;}


.head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}

.head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;}

b { color: #6D82A1; font-size: 11px; font-weight: bold; }

A:link
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:visited
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:active
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:hover
{color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;}


body 
{background-color: gray;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
font-family: arial; 
color: black; 
margin: 0px;
letter-spacing: 0px; 
font-weight: normal; 
font-size: 12px;
cursor: default;}

td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; }
--> 


</style>

And here's the text itself;
HTML Code:

<html>
<head>


<link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" />

<script src="simple/click_menu.js" type="text/javascript"></script>

<link rel="stylesheet" href="style.css" type="text/css">
<title>Ironman Football Academy | Don Bosco Prep</title>
</head>

<body onload="clickMenu('menu')">

<center><img src="mainimage.png">
<ul id="menu">
<li class="sub"><a href="#nogo1">Home</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Information</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Registration</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Don Bosco Prep</a>
		<ul>

		</ul>
</li>
</ul>
</center>






</div>


<div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto; 
 top: 303px; width: 600px; height: 0px; overflow: visible">
<div class="header">&nbsp;Welcome</div>
We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be 

lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws 

associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a 

more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a>


</div>


</html>

Why isn't the text (with the header welcome) not centered?

Hello,

Please point me in the direction of button-layers.
In other words: How do I make a whole layer act as a link so that when a user clicks anywhere within a layer (and not ONLY on the link in the center of it), the whole layer acts as a button?

Thank you for your expertise!

Hello all,
I'm having some trouble getting html to display in my <layer> tags, for example if I use the code:
HTML Code:

<layer src = "myfile.html">

The file that I'm trying to display does not show, even though it is in the same local directory. Has anyone else ever tried this successfully? Thanks!

This is kind of hard to explain so I hope you stay with me.

I have a site and everytime you navigate to a page everything is loaded. The same images the same background everything. So I firgured to help save the load time of pages I would make a frameset. Since the Only thing the on my site that changes is one layer with new text.

Unfortunately, the frameset won't work.
I use hidden layers as a drop down navigation for a few buttons when you hover over them. So if I were to use a framset the layer would then drop down but the mainframe would cover up the drop down navigation (which is a layer). I tried figuring out to get a layer to show up over all frames but I had no luck. I also messed around with z index but that still didnt work.

So my question is... is it possible to get a layer to change but not the entire page?

Here is the site, www.griffithband.com

If you look you will see that layer17 is the only layer that changes. Is there a way to get that to be the only thing to change when going to a new page rather then the entire page?
Layers 31, 30, and 29 are the drop down navigation, and the reason why I cannot use the frameset as they will not show becuase they go underneath the mainframe.

I'm in no way very fluent with any coding. I only work on this site and thats it.

Thanks in advance.