48 users online (1 members and 47 guests)  

Thread: Overlap


  Results 1 to 8 of 8

Related

  1. Image overlap help needed!    Forum: CSS Forum
    Replies: 3
  2. Replies: 2
  3. Dropdown Overlap    Forum: HTML Forum
    Replies: 7
  4. Overlap    Forum: General Discussion
    Replies: 2
  1. #1
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86

    Overlap

    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

  2. #2
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    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

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    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*
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    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>

  5. #5
    mbh's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Location
    USA/Central Kentucky
    Posts
    18

    Talking

    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><!--ends main overall centered container-->

    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.

  6. #6
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    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

  7. #7
    mbh's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Location
    USA/Central Kentucky
    Posts
    18

    One more thing...

    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!

  8. #8
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    Thanks I found a site that shows how to formatt it!

    Thanks



Tags for this Thread