Overlap

**Ywun** · 07-25-2003, 10:12 PM

Hi is there away to set the parimiters for your page because stuff like text on my site keeps overlapping over graphics and makes it hard to view the text. Is there away to stop that. And how do I set page to like some number by some number? Thanks

**Ywun** · 07-25-2003, 10:26 PM

Ok I found what I was doing that made my text overlap all I want to know now is how to make it so when you maximize your screen all the content stays in one place.

Thanks

**QuietDean** · 07-26-2003, 01:29 AM

Hello,
Without looking at your code, it sounds like you are using percentage values instead of fixed values. Try fixed values.

However, this is a guess. How about an example page for us to see what you mean?

*Moving to HTML Help*

**Ywun** · 07-26-2003, 08:51 AM

Here is my script, I removed meta tags and replaced all text areas with the word text. My site is still under-construction.

<!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">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=encoding" />
<TITLE>My Title</TITLE>
<style type="text/css">
body {
font: 12pt verdana;
color: green;
background-color:black;
width:300;
}
h1 {
font: 12pt ;
display: inline;}
a:link{color: green; text-decoration: none;}
a:visited{color: green; text-decoration: none;}
a:focus{color: green; text-decoration: none;}
a:hover{color: green; text-decoration: underline; font-weight: none;
}
img{
border: none
}
#textbox{width:144px; height:240px; background-color:black; float:left}
#right_top{width:180px; height:160px; background-color:black; float:right;}
#links{width:180px; height:160px; background-color:black; float:right; clear:right}
#admin{width:144px; height:120px; background-color:black; float:left; clear:left}

</style>

</head>
<img src="image3.jpg">

<body>
<div id="textbox">
<P STYLE="font-weight: none; border: 0px solid black; align:left; position: absolute; width: 144px; height: 240px; overflow: scroll ;">
<b>Navagation:</b><br>
Menu
</div>
<div id="admin">
<P STYLE="font-weight: none; border: 0px solid black; position: absolute; width: 144px; height: 120px; ;">
Site Admins:<br>
Text
</div>
<div id="right_top">
<P STYLE="font-weight: none; border: 0px solid black;position: absolute; width: 180px; height: 160px;overflow: scroll ;">
<img src="image8.gif"><br>
Text
</p>
</div>
<div id="links">
<P STYLE="font-weight: none; border: 0px solid black; position: absolute; width: 180px; height: 160px; ;">
Related Sites:<br>
Text
</div>

<div id="oicw">
<img src="oicw_large.jpg" align="right" hspace="5" vspace="1" />
</div>
<p align="justify">Text</p>

</body>
</head>

**mbh** · 07-26-2003, 03:44 PM

QuietDean will probably chime back in on this later. First, let me applaud you rather loudly for CSS being utilized.

In general, without combing the CSS code point for point and running a css class recognize that as you get into the <body> of your code you have a series of <div>s or containers if you will. At this point, each container will stack down the page on top of one another or depending on width they may stack next to each other.

In brief, (you'll have to experiement) you can center (should work) the whole thing by placing/nesting the existing containers within an overall container.
Example:
<div align="center">
<div>content here</div>
<div>content here</div>
<div>content here</div>
</div>

Note, while you can take some other approaches this is the basic CSS gist of it. Mind you you'll have to play with the individual sizes of each yourself (144px, 180px, etc., etc.)

Hopefully you have followed this excerpt.

**Ywun** · 07-26-2003, 03:53 PM

Thanks mbh
All of my <div>s are floating to the left and right http://www31.brinkster.com/ywun/main.html to see what mean. I'm going to try aligning it center like you said.

Thanks

**mbh** · 07-26-2003, 04:12 PM

On the quick... while I mentioned that you might play with the px values for each container you might also watch that float left/right deal.

I can't remember the specific code off the top right this minute but you might even try floating everything left and then adjust the pixel sizes accordingly from that point.

I've executed too many css experiments at this point but I usually stray from as many of the absolute value statements as possible unless I'm just defining a container size to hold something.

Head to google and enter css+glish as your keywords and this will be a good site to gather some additional CSS code for experimentation and positioning.

Good Luck!

**Ywun** · 07-26-2003, 06:23 PM

Thanks I found a site that shows how to formatt it!

Thanks

Thread: Overlap

Thread Tools

Related

Image overlap help needed! Forum: CSS Forum

How do you overlap MS player with images or text? Forum: HTML Forum

Dropdown Overlap Forum: HTML Forum

Overlap Forum: General Discussion

Overlap

One more thing...

Tags for this Thread