Page 3 of 3 FirstFirst 123
Results 21 to 26 of 26

Thread: Div Problem

  1. #21
    Join Date
    Dec 2002
    Location
    On an island in Canada
    Posts
    330
    ok. here's what your files could look like using eRflol's css.
    As stated by eRflol, you need to put the id selectors in your css file.

    You should remove the div you have in your menu.inc.php file

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
     <head>
      <title>Middle of Nowhere -- Where people seem dumber, than they appear.</title>
       <link rel="stylesheet" type="text/css" href="templates/reg.css" title="Default" />
        <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <META name="description" content="The Official Middle of Nowhere Website">
        <META name="keyword" content="middle of nowhere,shows,tv,sitcom">
        
        </style>
    
     <!--[if IE]>
      <style type="text/css" media="screen">
       li {
              margin: 0px;
              margin-top: -2px;
    }
       ul {
              margin: 15;
              margin-right:;
              margin-left 20px;
    }
       div {
              margin-top: -3px;
    }
       img.IE {
              margin-bottom: -6px;
    }
       img.t {
              margin-top: -3px;
    }
    
    </style>
    <![endif]-->
    
    <!-- / CSS Stylesheet -->
    
     </head>
    <body>
    
    <!-- This is where the bitch starts! -->
    
    
        <img src="redlogo.PNG" alt="Title Logo" border="0">
    
        <!-- menu.inc.php -->
    
    <div id="leftnavigation">
    <?php require 'menu.inc.php'; ?>
    </div>
    
    
        <!-- The news and all goes here -->
    <div id="rightnavigation">
     <!-- if you have your news in a separate file you can then <?php require 'main.php'; ?> call it main.php, or news.php, or content.php, doesn't matter -->
    
    <div style="width: 808; height: 18; font-size: 12px; background-color: #555500; border: 1px solid #aaaa00; float: left; color: #ffff00; margin-left: 20px; margin-top: 20;">
    &nbsp;<b>Notice:</b> For browsers such as Opera, the news and such may be messed up for resolutions 1024x768 and lower, I hope I can fix this. :(</div>
    
    <div style="width: 808; height: 210; float: left; margin-left: 20px; margin-top: 6px;">
    <img src="achmedsay.png" align="right">
    
    <p align="center" class="title0" style="margin-top: 12px; margin-left: 30px;">Achmed Says:</p>
    <p class="main">Hello dick nuggets!  And welcome to the newly designed Middle of Nowhere website.  You're safer here,
    everything you remember about the old site, forget, or I'll make you forget.  You might be asking yourself, what is Middle of Nowhere?
    Well, be not alarmed, Middle of Nowhere is an internet show.  The show is created by the writer, script director, and website
    designer, Zippy.  And your main camera man and video editor, Monty.  Not to mention, the one who plays Einert on the show, Spleet is
    also a part of Middle of Nowhere.  To get more information on all this in a better way, visit the "What is MoN?" page.  Trust me fag, you'll
    be glad you did.  Be sure to check back more and more, because you never know when another episode, short, or experiment...  Or whatever, may
    ever come out.  Oh, I forgot one thing.  If you are looking at this website through Firefox, you should be A OK.  But if you are using
    Internet Explorer, this site may look ugly to you, and some of the images may contain a grey background instead of being just plain transparent.
    By the way, your IP is 72.131.52.228, so you better be careful fucking around with me!</p></div>
    
    <div style="width: 808; height: 18; font-size: 12px; float: left; margin-left: 20px; margin-top: 6;">
    &nbsp;<b>News Date Posted:</b> 3/5/06 - <b>News Type:</b> Notice! - <b>Subject:</b> Episode 3 - <b>Posted by:</b> Zippy - <b>Updates:</b> 2</div>
    
    <div style="width: 808; height: 200; font-size: 11px; float: left; margin-left: 20px; margin-top: 6;">
    <img src="threemark.gif" align="left"><p align="center" class="title0" style="margin-right: 150px;">Where the hell is Episode 3?</p>
    <p class="main" style="margin-right: 150px;">For those of you who even care and watch Middle of Nowhere, you would've noticed that on the old
    site, it said I had finished the script of Episode 3, which I did.  We were recording it actually, but we failed to keep going.  Becuase one, we
    had to do it in night time, two, it was cold as living hell, and three, we...  Had to do it in night time.  If I can, maybe I can give you people the
    scrapped out version on Episode 3, it won't be the real thing, but you can experience some of it.  If you don't want to spoil it for yourself, then i would'nt
    recommend looking at it.
    <br><br>
    <font color="#ffff00">Edit: Bloopers section has been added.</font><br>
    Edit: Link to Us, Back to Platinum, and Download Soundtrack pages have been added.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    Last edited by vampyre; 03-18-2006 at 12:57 PM.

  2. #22
    Join Date
    Dec 2002
    Location
    On an island in Canada
    Posts
    330
    what I was getting at was your use of inline css, where you style the news titles and news items, and your menu.inc.php file.
    I also provided a way to stop the divs from moving, but eRflol's way is a bit simpler.
    Last edited by vampyre; 03-18-2006 at 01:00 PM.

  3. #23
    Join Date
    Dec 2002
    Location
    On an island in Canada
    Posts
    330
    If you use the width percentages that eRflol shows in his css, your menu will resize as well. You can just specify and fixed amount of pixels for the menu instead of the 15%. Remember to adjust the left attribute in the #rightnavigation selector as well.

    If you try what I posted last, you will notice that because you specify a specific width and height, the second news item overlaps the first. (when you adjust the window size.

    I would suggest removing the width, height, and float styles you have in the news heading and news item sections.
    This allows the browser to render the sections properly and adjust for height and width itself.
    If you do that on its own and have a high enough res on your screen, i use 1280x1024, the overall height of the text is smaller than the pictures you have and so the picture overlaps the next news heading and news item.
    To address this, put a <div style="clear:both"></div> in between them. This forces the browser to draw everything it has in memory first and then start drawing what is next.

  4. #24
    Join Date
    Aug 2004
    Location
    Greenfield, WI
    Posts
    664
    Show me a screenshot of what my site looks like in your browser.
    My newest UT2k4 map:
    - AS-RaPyramidv4.1

  5. #25
    Join Date
    Dec 2002
    Location
    On an island in Canada
    Posts
    330
    here is a sample of the index file.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>Style test</title>
      <!-- <link rel="stylesheet" type="text/css" href="templates/reg.css" title="Default" /> -->
      <style type="text/css">
      #leftnavigation {
    		position : absolute;
    		left : 5;
    		width : 154;
    		margin-left : 0px;
    		margin-top : 0px;
        border: 1px solid #000000;
    	}
    #rightnavigation {
    		position : absolute;
    		left : 175;
    		top: 25;
    		width : 80%;
        border: 1px solid #303090;
    	}
      </style>
      </head>
      <body>
    <div id="leftnavigation">
         <img src="spacer.PNG" width="176" height="21" class="t" alt="spacer" style="float: left">
         <img src="cats/maincat.png" width="100" height="15" alt="home" class="IE"><br>
         <ul>
         <li><a href="index.php" class="hl">Home</a></li>
         <li><a href="linktous.php">Link to Us</a></li>
         <li><a href="http://knd.org.uk/~zippy/">Back to Platinum!</a></li>
         </ul>
    
         <img src="cats/epcat.png" width="100" height="15" alt="episodes" class="IE">
         <ul>
         <li><a href="ep.php" class="hl">Episodes</a></li>
         <li><a href="old.php">Old Episodes</a></li>
         <li><a href="shorts.php">Shorts</a></li>
         <li class="d"><NO href="reject.php" class="d">Rejected Episodes</a></li>
         </ul>
    
         <img src="cats/excat.png" width="100" height="15" alt="extras" class="IE">
         <ul>
         <li><a href="whatis.php" class="hl">What is MoN?</a></li>
         <li><a href="acc.php">Accomplish List</a></li>
         <li><a href="cast.php">Cast n' Crew</a></li>
         <li><a href="sound.php">Download Soundtrack</a></li>
         <li><a href="bloop.php">Bloopers</a></li>
         <li class="d"><NO href="comm.php">Commentary</a></li>
         <li class="d"><NO href="exp.php" class="d">Experiments</a></li>
         <li class="d"><NO href="rand.php" class="d">Randoms</a></li>
         <li class="d"><NO href="fana.php" class="d">FanArt</a></li>
         </ul>
    </div>
    
    <div id="rightnavigation">
    <div style="font-size: 12px; background-color: #555500; border: 1px solid #aaaa00; color: #ffff00; margin-left: 20px; margin-top: 20;">
    &nbsp;<b>Notice:</b> For browsers such as Opera, the news and such may be messed up for resolutions 1024x768 and lower, I hope I can fix this. :(</div>
    
    <div style="margin-left: 20px; margin-top: 6px; font-size: 11px;">
    <img src="achmedsay.png" align="right">
    
    <p align="center" class="title0" style="margin-top: 12px; margin-left: 30px;">Achmed Says:</p>
    <p class="main">Hello dick nuggets!  And welcome to the newly designed Middle of Nowhere website.  You're safer here,
    everything you remember about the old site, forget, or I'll make you forget.  You might be asking yourself, what is Middle of Nowhere?
    Well, be not alarmed, Middle of Nowhere is an internet show.  The show is created by the writer, script director, and website
    designer, Zippy.  And your main camera man and video editor, Monty.  Not to mention, the one who plays Einert on the show, Spleet is
    also a part of Middle of Nowhere.  To get more information on all this in a better way, visit the "What is MoN?" page.  Trust me fag, you'll
    be glad you did.  Be sure to check back more and more, because you never know when another episode, short, or experiment...  Or whatever, may
    ever come out.  Oh, I forgot one thing.  If you are looking at this website through Firefox, you should be A OK.  But if you are using
    Internet Explorer, this site may look ugly to you, and some of the images may contain a grey background instead of being just plain transparent.
    By the way, your IP is 72.131.52.228, so you better be careful fucking around with me!</p></div>
    
    <div style="clear:both"></div>
    
    <div style="font-size: 12px; margin-left: 20px; margin-top: 6; background-color: #441111; border: 1px solid #aa3333; color: #fff0f0;">
    &nbsp;<b>News Date Posted:</b> 3/5/06 - <b>News Type:</b> Notice! - <b>Subject:</b> Episode 3 - <b>Posted by:</b> Zippy - <b>Updates:</b> 2</div>
    
    <div style="font-size: 11px; margin-left: 20px; margin-top: 6;">
    <img src="threemark.gif" align="left"><p align="center" class="title0" style="margin-right: 150px;">Where the hell is Episode 3?</p>
    <p class="main" style="margin-right: 150px;">For those of you who even care and watch Middle of Nowhere, you would've noticed that on the old
    site, it said I had finished the script of Episode 3, which I did.  We were recording it actually, but we failed to keep going.  Becuase one, we
    had to do it in night time, two, it was cold as living hell, and three, we...  Had to do it in night time.  If I can, maybe I can give you people the
    scrapped out version on Episode 3, it won't be the real thing, but you can experience some of it.  If you don't want to spoil it for yourself, then i would'nt
    recommend looking at it.
    <br><br>
    <font color="#ffff00">Edit: Bloopers section has been added.</font><br>
    Edit: Link to Us, Back to Platinum, and Download Soundtrack pages have been added.
    </p>
    </div>
    
    </div>
    
    
    
      </body>
    </html>

  6. #26
    Join Date
    Dec 2002
    Location
    On an island in Canada
    Posts
    330
    Pictures. Note that I didn't use the reg.css file and put borders outling the left and right navigation

    Bad, without the div. It overlaps

    The good one, with the div.

    Bigger versions are here and here.
    ---
    Here is the news overlap, because of the specified height.

    ---
    NOTE: i just changed some settings on my website. It may be unavailable for a few minutes.
    ---
    UPDATE: They are working now.
    ---
    Updated the first link. copy/paste error.
    Last edited by vampyre; 03-18-2006 at 10:01 PM.

Page 3 of 3 FirstFirst 123

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •