Overlapping text on my website.

  • Thread starter Thread starter artbug
  • Start date Start date
A

artbug

After discovering text on my site over laps when a viewer increases the font
size on their browser screen, I found out from a MVP it is because I used so
many Absolute Position layers instead of CSS. MVP recommended I start to use
CSS to fix the problem.

Site is http://www.maximefrenchbulldogs.com/

I am still trying to understand CSS by watching video Tutorials on
Expression Web and do not feel comfortable redoing my website in CSS yet so I
went back in Frontpage 2003 and did away with Absolute Layers on my Homepage
http://www.maximefrenchbulldogs.com/ and FB Information webpage
http://www.maximefrenchbulldogs.com/french bulldog breed_information_2.htm in hopes it would fix the problem.

I simply entered text and most pics with out layers, using the space bar to
position on the page. I left a few absolute layers so I could position
remaining pics exactly and when text is enlarged these remaining few
absolute layers over lap text in some areas.

Questions are:

1. Without using a CSS is there a way I can get these Absolute layers to
move down with the text as the font size is increased in the browser? so
there is no over lapping?

2. Some of the elements I left Absolute in layers are two layers linked, one
with text and the other with a graphic behind the text making a link box by
attaching hyperlink.
How can I create the same look of the graphic plus text with a hyperlink
without using layers in absolute? Use the convert to gif then attach link?
I had done this in the past, but found the convert to gif lost a lot of
resolution and looked blurred... any alternatives?

3. Finally as I get more advanced and use CSS will I be able to create a
custom CSS and get the exact same look as my website now or will I have to
change the layout to fit a CSS?

THank you MVPs for all your help on this!
 
Hi artbug

I certainly recommend using HTML and CSS. (In fact, I did didn't I?<grin>)

I have added some comments in-line

artbug said:
After discovering text on my site over laps when a viewer increases the
font
size on their browser screen, I found out from a MVP it is because I used
so
many Absolute Position layers instead of CSS. MVP recommended I start to
use
CSS to fix the problem.

Site is http://www.maximefrenchbulldogs.com/

I am still trying to understand CSS by watching video Tutorials on
Expression Web and do not feel comfortable redoing my website in CSS yet
so I
went back in Frontpage 2003 and did away with Absolute Layers on my
Homepage
http://www.maximefrenchbulldogs.com/ and FB Information webpage
http://www.maximefrenchbulldogs.com/french bulldog breed_information_2.htm
in hopes it would fix the problem.

I simply entered text and most pics with out layers, using the space bar
to
position on the page. I left a few absolute layers so I could position
remaining pics exactly and when text is enlarged these remaining few
absolute layers over lap text in some areas.
Click to expand...

You don't need any absolute layers. I said in a previous post that you do
but I was wrong.

Using the space bar for spacing is NOT a good idea, Tables are much better

I suggest two <div>s with this CSS
#sidebar, #content { float: left; padding: 0;}
#sidebar { width: 14%; }
#content { width: 86%; }

The 14% may vary a bit.

This CSS is placed in the <head> section between <style type="text/css"> and
</style>

Your HTML would read
<html>
<head>
<style type="text/css">
#sidebar, #content { float: left; padding: 0;}
#sidebar { width: 14%; }
#content { width: 86%; }
</style>
</head>
<body>
<div id="sidebar">
<!-- Put all the left hand column links and images in here -->
<div>

<div id="content">
<!-- Put all the rest of the content in here -->
<div>
</body>
Questions are:

1. Without using a CSS is there a way I can get these Absolute layers to
move down with the text as the font size is increased in the browser? so
there is no over lapping?
Click to expand...

You don't need any absolute layers at all

Try positioning the elements in tables
<table>
<tr> <!-- Row 1 -->
<td> <!-- Column1 -->

</td>

<td> <!-- Column2 -->
</td>

<td> <!-- Column2 -->
</td>

<td> <!-- Column3 -->
</td>
</tr>

<tr> <!-- Row 2 -->
<td> <!-- Column1 -->
</td>

<td> <!-- Column2 -->
</td>

<td> <!-- Column2 -->
</td>

<td> <!-- Column3 -->

</td>
</tr>
</table>

From what I recall of your site, you mainly need lots of rows. In a only a
couple of cases are there elements side by side, in which case there would
be an extra column in that row

2. Some of the elements I left Absolute in layers are two layers linked,
one
with text and the other with a graphic behind the text making a link box
by
attaching hyperlink.
How can I create the same look of the graphic plus text with a hyperlink
without using layers in absolute? Use the convert to gif then attach link?
I had done this in the past, but found the convert to gif lost a lot of
resolution and looked blurred... any alternatives?
Click to expand...

You can add text and graphic in the same element of a table i.e, between
<td> and </td>. You don't need to convert anything; just use a jpg file.
Perhaps you want the text on top of the graphic but I would suggest just
putting it underneath. You can put it to the right of the image using a
style on the <img> tag. The CSS is "float:left;" which can be inline as in
<img style="float:left;"> but you are better off in the long run creating a
class in CSS.

A CSS class is
..fleft {float:left;}
Note the leading dot(.) The name can be anything - I just used fleft as a
memory prompt

The <img> tag is
<img class="fleft"> where the class name in quotes is the class name defined
in the CSS, without the dot.

3. Finally as I get more advanced and use CSS will I be able to create a
custom CSS and get the exact same look as my website now or will I have to
change the layout to fit a CSS?>
Click to expand...

Yes, you can (as I think some politician said many times). The main change
is removing all the absolute layers. Then all you have to do is add the
content into tables. To do this just use the Code or HTML view by clicking
on that tab at the bottom. The code view behaves just like a text editor, so
add the table tags around the existing elements

For example
<div style="position: absolute; top: 10px; left: 15px; width: 132px;
height: 57px; z-index: 32">
<p align="center">
<a href="index.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-HOME.GIF" width="116"
height="58"></a></div>

<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div style="position: absolute; top: 90px; left: 15px; width: 132px;
height: 57px; z-index: 32">
<p align="center">
<a href="French%20Bulldog%20Show%20dogs.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-Show%20stoppers.GIF"
width="116" height="58"></a></div>

<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div style="position: absolute; top: 175px; left: 15px; width: 132px;
height: 57px; z-index: 32">
<p align="center">
<a href="new_stars.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-New%20show%20stars.GIF"
width="116" height="58"></a></div>

would become

<table>
<tr><td>
<a href="index.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-HOME.GIF"
width="116" height="58" title="Home"><br>
Home</a>
</td></tr>

<tr><td>
<a href="French%20Bulldog%20Show%20dogs.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-Show%20stoppers.GIF"
width="116" height="58" title="Show Stoppers"><br>
Show Stoppers</a>
</td></tr>

<tr><td>
<a href="new_stars.htm">
<img border="0" src="Navagation%20Yellow%20Posy%20-New%20show%20stars.GIF"
width="116" height="58" title="New Show Stars"><br>
New Show Stars</a>
</td></tr>

<!-- etc -->

</table>

Note that I have added mouseover text (title="...") and the same text as
extra text to each link

BTW,
Your structure needs a bit of fixing

Remove
</html>
<html>
immediately after <body>

Remove </html> 14 lines from the bottom immediately after </div>

Add
</body>
</html>
as the very last lines
 
I did too but somehow it never made it to the group messages only to artbug
directly even though I hit reply to group
http://www.css-layouts.org/french-bulldogs/

I limited the size of the container because of the width of the masthead
image.

artbut you can use this if you so desire changing sizes and use Trevor's
table for all of the image links you want to add in the body.

I encourage you to take the time to learn the basics of css and html.

pat
 
Back
Top