SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why, oh, why does part of my page wrap?

    The site is www.sblum.net - and no matter what I try, when the size is reduced, the main.php part always wraps down when I get to a certain point.

    Here is index.php:

    PHP Code:
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <title>sblum.net</title>
    <style>
    #navbar {
    float: left;
    display: inline;
    margin:4px;
    margin-left: 120px;
    }

     

    #main {
    float: left;
    margin: 4px;
    margin-right: 100px;
    }
    </style>
    </head>

    <body>
    <table width=100% style="background-color: rgb(127,192,213); font-family: 

    verdana; font-size: 18px;"><td>sblum.net</td></table><br>
    <?           

                
    echo "<div id='navbar'>";

                require(
    "nav.htm");

                echo 
    "</div>";

                

                echo 
    "<div id='main'>";

                if( 
    $pg != "" ) require($pg);

                else require(
    "blog/main.php");

                echo 
    "</div>";

    ?>

    </body>

    </html>
    Here is the code of main.php:

    PHP Code:
    <html>



     <head> 
     <title><?php echo $blogname ?></title> 
      
     <!-- Change charset if needed(?)  But please do not remove this metatag --> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <meta http-equiv="reply-to" content="you@somewhere.zzz" /> 
     <meta http-equiv="imagetoolbar" content="no" /> 
     <meta content="TRUE" name="MSSmartTagsPreventParsing" /> 
     <link rel="stylesheet" type="text/css" href="../stylesheet.css" /> 
    <style> 
    body{ 
    font-size: 11px


    </style> 


     </head>
    <body>
    <?php comments_popup_script() ?>
    <?php permalink_anchor
    (); ?>

         <?php while($row mysql_fetch_object($result)) { start_b2(); ?> 
     <p class="update">
      <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; font-size: 11px" bordercolor="#111111" width="100%" id="AutoNumber1">
        <tr>

          <td width="22%" style="font-weight: bold">|<?php the_time("d.m.y"); ?>| |<?php the_time("H:i"); ?>|</td>
          <td width="78%"><b><?php the_title(); ?><b></td>
        </tr>
        <tr>
          <td width="100%" colspan="2"><?php the_content(); ?></td>
        </tr>
    <tr>
    <td width="100%" colspan="2" style="text-align: right;" ><?php comments_popup_link("Comments (0)""Comments (1)""Comments (%)"?></td>
    </tr>
      </table></p>
    <?php include ("b2comments.php"); ?>

           <?php ?>  
     <?php 
     
    if ($debug=="1") { 
          echo 
    "<p>$querycount queries - ".number_format(timer_stop(),3)." seconds</p>"
     } 
     
    ?> 
    </body
     </html>
    Here is the code of nav.htm:

    HTML Code:
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <base target="rtop">
    
     <SCRIPT type="text/javascript">
     <!--
        
     function roll_in( name ) { 
    name.style.backgroundColor = 'rgb(77,142,163)'; 
    name.style.color = 'black'; 
    name.style.fontWeight = 'bold';
    } 
    
     function roll_out( name ) { 
    name.style.backgroundColor = 'rgb(127,192,213)'; 
    name.style.color = 'black'; 
    name.style.fontWeight = 'normal';
    }
     -->
     </SCRIPT>
     </head>
    <body>
    <p class="navigation_header">navigation</p>
    <p class="navigation" onclick="window.location='?pg=blog/main.php'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">main</p>
    <p class="navigation" onclick="window.location='?pg=aboutme.htm'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">about me</p>
    <p class="navigation" onclick="window.location='?pg=poetry.htm'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">poetry</p>
    <p class="navigation" onclick="window.location='?pg=music.htm'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">music</p>
    <p class="navigation" onclick="window.location='?pg=contactme.htm'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">contact me</p>
    <p class="navigation" onclick="window.location='?pg=blog/b2archives.php'" onmouseover="roll_in(this);" onmouseout="roll_out(this);">archives</p>
    </body>
    
    
    <p class="navigation_misc">copyright (c) <br> 2003 <br> steven blum</p>
    <center><img src="http://www.sblum.net/cgi-sys/counter/c.pl?br=0,0,0&tx=0,0,0&bg=77,142,163&type=png&font=small&cookies=0&name=default&width=var" NOSAVE></center>
    
    </html>
    And here is the .css regarding the two:

    HTML Code:
    body {
    background-color: rgb(77,142,163); 
    scrollbar-base-color: rgb(77,142,163); 
    }
    
    p.navigation {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(127,192,213);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    padding: 2px;
    width: 100px;
    text-align: center;
    cursor: pointer
    }
    
    p.navigation_misc {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(127,192,213);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    padding: 2px;
    width: 100px;
    text-align: center;
    }
    
    p.navigation_header {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(77,142,163);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    padding: 2px;
    width: 100px;
    text-align: center;
    font-weight: bold;
    }
    
    p.update {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(127,192,213);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    width: 89%;
    }
    
    p.body_list {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(127,192,213);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    padding: 5px;
    padding-bottom: 5px;
    width: 89%;
    text-align: center; 
    line-height: 20px
    }
    
    p.body {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,0,0);
    background-color: rgb(127,192,213);
    color: rgb(0,0,0);
    font-family: verdana, sans-serif;
    font-size: 11px;
    padding: 5px;
    padding-bottom: 5px;
    width: 89%;
    }
    I can't, for the life of me, figure this out. If you can help me out I'd appreciate it very much.

  2. #2
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See this thread when I was having the same problem, Floating your nav bar left causes content to wrap, using absolute positioning seems to do the trick.

    http://www.sitepointforums.com/showthread.php?t=139585

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmmm... I've tried messing with the absolute positioning all over, for hours, trying to get it to work, and it's just not working. Any other suggestions?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want your navbar on the left and your content to stay to the right of it then all you need to do is absolutely place your navbar left in the required position (as suggested by glenplake above).

    Then you can simply give your content a margin left that is big enough to clear the nav.
    e.g.
    Code:
    #navbar {
    position:absolute;
    top:25px;/* or whatever you want*/
    left:50px;/* "	" */
    width:200px;
    }
    #content {
    margin-left:260px;
    }
    Thats a simple example that should accomplish what I think you want.

    However you will need to sort out your code first as your processed page has about 139 errors on it according to the validator.

    You are writing body and head tags everywhere with your php and you are incorrectly nesting block elements.

    Once you've sorted that out it should be easier to fix your page .

    Paul

  5. #5
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's how I figured it out - if this helps...

    http://www.sitepointforums.com/showthread.php?t=141019
    _________________________________________
    Rockin' in the free world...
    brilliant nonsensical ramblings


Bookmarks

Posting Permissions

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