SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with layout from php-generated pages (ALMOST DONE).

    Hello,

    Updated...

    Since I'm not sure what is causing the problems, I'm posting all code. I'd be more than happy to post only relevant code, but I don't know what's relevant.

    The blog pages are generated by php files. I know very little about php, but just viewing source won't help because of the php generation.

    The blog is being built here.

    The page is VERY close in FF. The only problem in FF is that I'd like the "Posted in WHATEVER | x Comments" to all be on one single line. I can't figure this out, and it's gotta be simple. This is also happening in IE

    In IE:

    The entire right side nav is below everything, and you'll notice that "Blog Search" through META is right on the vertical line. It should be about 10px more to the right, and the blog search should be right below the navbar, pretty much right next to the site search.

    Two final things, and it'll be good to go!

    Shouldn't be too hard for you fine folks, but I'm stuck myself! Here's the files controlling the page.

    INDEX.php file:
    PHP Code:
    <?php get_header(); ?>
    <body id="starting">
    <div id="wrapper">

    <div id="headerimg">
        
    </div>
                    <div id="logonav">
        <ul>
    <li><a accesskey="k" href="../" title="To The Main Page">Home</a></li>
    <li><a accesskey="t" href="../timeline/" title="A little about me">Timeline &amp; Bio</a></li>
    <li><a accesskey="i" href="../about/" title="Info about this little web space">About This Site</a></li>
    <li><a accesskey="c" href="../contact" title="Contact Me">Contact</a></li>
            </ul>    
        </div>

    <div id="contentwrapper">
        

    <div id="contentleft">
    <!-- SiteSearch Google -->
    <form method="get" action="http://www.google.com/search">
    <div class="trans">
    <a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://www.google.com/"><img src="../pix/google.gif" alt="Google"/></a>

    <label for="CB"><input type="radio" name="sitesearch" id="CB" value="ChrisBartlett.net" checked="checked"/> This Site</label>

    <input type="hidden" name="domains" value="ChrisBartlett.net"/>

    <label for="Web"><input type="radio" name="sitesearch" id="Web" value="The Web"/>The Web</label>

    <label for="search"><input type="text" name="q" id="search" value="Click here to search" onfocus="if (this.value==this.defaultValue) this.value='';" /></label>

    <input type="submit" name="button" value="Site Search"/>

    </div>
    </form>
    <!-- SiteSearch Google -->
     <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
        <div class="narrowcolumn">
    <?php if (have_posts()) : ?>    
    <?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time('F jS, Y'?> <!-- by <?php the_author() ?> --></small>
    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>

    <p class="postmetadata">Posted in <?php the_category(', '?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments »''1 Comment »''% Comments »'); ?></p>

    <div class="hr"></div>
    </div>

    <?php endwhile; ?>

    <div class="navigation">
    <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries'?>
    </div>

    <div class="alignright">
    <?php previous_posts_link('Next Entries &raquo;'?>

    </div>

    <?php else : ?>
    <h2 class="center2">Not Found</h2>
    <p class="center2">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH "/searchform.php"); ?>
    <?php 
    endif; ?>
                        <?php get_footer(); ?>
    </div>
    </div>
    </div>


    </div>
        <?php get_sidebar(); ?>
            <div id="contentright">
            <h2>Navigation</h2>    
            <ul> 
                      <li> <a accesskey="b" href="../blog/" title="Blog This!">My Blog</a> </li>
            <li> <a accesskey="m" href="../music/" title="Let's crank some tunes!">Music</a> </li> 
            <li> <a accesskey="q" href="../blackjack/" title="Learn about and play blackjack">Blackjack, anyone?</a> </li> 
                  <li> <a accesskey="p" href="../poll/" title="Weigh in on the issue of the week">Weekly Poll</a> </li> 
            <li> <a accesskey="j" href="../junior/" title="The rebuilding of our home">Junior</a> </li>
            <li> <a accesskey="y" href="../photography/" title="Photos and Info">Photography</a> </li>
            <li> <a accesskey="r" href="../resume/" title="HIRE ME!">Resume (Click ME)</a> </li>
            </ul>
            <ul>
            <li><a accesskey="x" href="../icanhelp/" title="Can I help you with something?">I Can Help</a></li>
            <li><a accesskey="w" href="../tutorials/" title="Learn something...">Tutorials</a></li>
            <li><a accesskey="u" href="http://www.amazon.com/gp/registry/registry.html/002-1293398-9548820?%5Fencoding=UTF8&amp;id=145BGATFWD94O" title="Wanna get me a gift?" onclick="this.target='_blank';" onkeypress="this.target='_blank';">My Wishlist</a></li>
            <li><a accesskey="d" href="../drinks/" title="Drinks I like or invented">Drink &amp; be merry</a></li>
            <li><a accesskey="l" href="../links/" title="Cool Sites I like">Cool Links</a></li>
            <li><a accesskey="f" href="../friends/" title="Friends who've TRULY earned the title">Friends</a></li>
            </ul>    
            <h2>Quote of the Moment</h2>
             <p><script src="../quote.js" type="text/javascript"></script></p>

             <div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://validator.w3.org/check/referer" title="Check 'em. They validate!"><img src="../pix/valid_xhtml10.bmp" alt="This page is 100% VALID XHTML 1.0 Strict!" width="88" height="31" /></a></div>
            <img class="spacer" src="../pix/spacer.png" alt="" title=""/>
            <div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.bartlett-family.net/chrisbartlett/main.css
    "><img style="border:0;width:88px;height:31px" src="../pix/valid_css.gif" alt="This entire site is powered by 100% VALID CSS code!" /></a></div>
            <img class="spacer" src="../pix/spacer.png" alt="" title=""/>
            <div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://webxact.watchfire.com/submit.aspx?SCANURL=http%3A%2F%2Fwww.bartlett-family.net/chrisbartlett/blog2/&amp;GL=wcag1-aaa&amp;FR=1&amp;CL=1&amp;AR=1&amp;RS=1&amp;SA=0&amp;complete=1&amp;tzo=240" title="Explanation of Level Triple-A Conformance"><img height="32" width="88" src="../pix/wcag1AAA.png" alt="Level Triple-A conformance icon, This page meets the guidelines for W3C-WAI Web Content Accessibility Guidelines 1.0 Level THREE!"/></a></div>
            <img class="spacer" src="../pix/spacer.png" alt="" title=""/>
            <div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.anybrowser.org/campaign/" title="This site works with ANY modern browser" onclick="this.target='_blank';"><img src="../pix/w3c_ab.png" alt="This site works with ANY modern browser?!"/></a></div>
            <img class="spacer" src="../pix/spacer.png" alt="" title=""/>
            <div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.spreadfirefox.com/?q=user/register&amp;r=111360" title="WHY are you still using IE?!" onclick="this.target='_blank';"><img src="../pix/getFF.jpg" alt="WHY are you still using IE?!"/></a></div>
            </div>

            <br class="clear" />

    <p id="footer">&copy; Chris Bartlett 2005 <a href="../accessibility.html" accesskey="1">Accessibility</a> | <a href="../privacy.html" accesskey="2">Privacy Policy</a> | <a href="#starting">Back to Top</a>

    <script type="text/javascript">
    <!-- Begin

    it1 = "mail";
    it2 = "to";
    part1 = "ch";
    part2 = "ris";
    parta = "chrisbartlett";
    partb = ".";
    partc = "net";

    document.write('<p><b>Send me an e-mail at: </b> ') 
    document.write('<a href=\"' + it1 + it2 + ':' + part1 + part2 + '@' + parta + partb + partc + '\">');
    document.write(part1 + part2 + '@' + parta + partb + partc + '</a>');
    // End -->
    </script>
    </p>

    </div>
    </body>
    </html>
    HEADER.php file:
    PHP Code:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head profile="http://gmpg.org/xfn/11">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="DESCRIPTION" content="This site is here for one purpose: To introduce myself to the world, and to allow me to express myself as I see fit, Chris Bartlett, Christopher Bartlett, Christopher J. Bartlett, Christopher John Bartlett, Beauty, Wonder, Strength, Power, Respect, Honor, Balance, Chris Bartlett Photography, Christopher J. Bartlett Photography, Christopher Bartlett Photography, Technology Consultant, IT Consultant, Lowell, MA, Lowell MA, Blackjack tips, Play Blackjack" />
    <meta name="KEYWORDS" content="Chris Bartlett, Christopher Bartlett, Christopher J. Bartlett, Christopher John Bartlett, WorldBuilder, The WorldBuilder, Perfect Website, Technically flawless website,  The world's most perfect website, Beauty, Wonder, Strength, Power, Respect, Honor, Balance, Chris Bartlett Photography, Christopher J. Bartlett Photography, Christopher Bartlett Photography, Technology Consultant, IT Consultant, Lowell, MA, Lowell MA, Blackjack tips, Play Blackjack" />
    <meta name="Classification" content="Computing" />
    <meta name="distribution" content="GLOBAL" />
    <meta name="rating" content="General" />
    <meta name="language" content="en" />
    <meta name="author" content="Chris Bartlett, WorldBuilder" />
    <meta name="robots" content="ALL, INDEX, FOLLOW" />

    <title><?php bloginfo('name'); ?>

    <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

    <!-- leave this for stats -->

    <link href="../main.css" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <script type="text/javascript">
    //<![CDATA[
    <!--
    //-->
    //]]>
    </script>

    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>

    <?php } else { // No sidebar ?>

    <?php ?>

    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php wp_head
    (); ?>
    </head>
    Lastly, my CSS file.

    Almost there!

    Chris
    Last edited by Worldbuilder; Jul 12, 2005 at 04:02.

  2. #2
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've figured out several things, and only need help with the rest. I've edited the original post to reflect the updates.

    Thanks for any help!

    Chris

  3. #3
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Worldbuilder
    The page is VERY close in FF. The only problem in FF is that I'd like the "Posted in WHATEVER | x Comments" to all be on one single line. I can't figure this out, and it's gotta be simple. This is also happening in IE

    Add
    ".postmetadata strong {display: inline;}"
    in your CSS file


    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  4. #4
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Worldbuilder
    In IE:

    The entire right side nav is below everything, and you'll notice that "Blog Search" through META is right on the vertical line. It should be about 10px more to the right, and the blog search should be right below the navbar, pretty much right next to the site search.

    Two final things, and it'll be good to go!

    Try this:
    1. remove "width:160px" in #sidebar part
    2. in your HTML file:
    HTML Code:
    <li><h2>Meta</h2><ul><li><a href="http://www.bartlett-family.net/chrisbartlett/blog2/wp-login.php">Login</a></li><li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    
    <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    
    <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    
    </ul>
    </li>
    
    <!-- 
    </ul>
    </div>    	<div id="contentright">
    -->
    <li>
    		<h2>Navigation</h2>	
    		<ul> 
          	    	<li> <a accesskey="b" href="../blog/" title="Blog This!">My Blog</a> </li>
    
    [...]
    
    		<li><a accesskey="f" href="../friends/" title="Friends who've TRULY earned the title">Friends</a></li>
    		</ul>	
    </li>
    <li>
    		<h2>Quote of the Moment</h2>
    		 <p><script src="../quote.js" type="text/javascript"></script></p>
    
    [...]
    
    		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.spreadfirefox.com/?q=user/register&amp;r=111360" title="WHY are you still using IE?!" onclick="this.target='_blank';"><img src="../pix/getFF.jpg" alt="WHY are you still using IE?!"/></a></div>
        	</div>
    </li>
    </ul>
    </div>
    		<br class="clear" />
    3. if you need extra-spaces at the left of the right navigation, change your #sidebar padding by: padding: 0px 0 0px 7px;

    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  5. #5
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Linn Hastur
    Add
    " .postmetadata strong {display: inline;} "
    in your CSS file
    Worked beautifully, THANK YOU!

    Chris

  6. #6
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Linn Hastur
    Try this:
    1. remove "width:160px" in #sidebar part
    Worked to perfection. Again, thank you!

    Quote Originally Posted by Linn Hastur
    3. if you need extra-spaces at the left of the right navigation, change your #sidebar padding by: padding: 0px 0 0px 7px;
    Turns out it doesn't need the padding.

    Few more things that I can't figure out, though...

    In FF, the blog search is directly aligned horizontally from the regular search. Not in IE, it's lower. No matter what I do with padding and margins, I can't seem to align it in IE like it is in FF.

    In IE, the arrows in the lists aren't there like they are in FF.

    In both IE & FF, all the links under "Navigation" are pushed about 10px or so further to the right than they are on all other pages. Have a look at their location on anyother page (EXCEPT HOME), and you'll see the difference.

    Thoughts?

    THANKS!

    Chris
    Last edited by Worldbuilder; Jul 12, 2005 at 11:42.

  7. #7
    SitePoint Zealot Linn Hastur's Avatar
    Join Date
    Jun 2005
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Worldbuilder
    In FF, the blog search is directly aligned horizontally from the regular search. Not in IE, it's lower. No matter what I do with padding and margins, I can't seem to align it in IE like it is in FF.
    For me, in IE like in Moz, the blog search is a few pixels higher than regular search (the same difference).



    Quote Originally Posted by Worldbuilder
    In IE, the arrows in the lists aren't there like they are in FF.
    To put your arrows, you use the :before selector which is not implemented in IE yet. If you want to see them, use an image like you do in the navigation part.



    Quote Originally Posted by Worldbuilder
    In both IE & FF, all the links under "Navigation" are pushed about 10px or so further to the right than they are on all other pages. Have a look at their location on anyother page (EXCEPT HOME), and you'll see the difference.
    The main difference between the main page and the others is that you have 2 divs in the main page in the right part: #sidebar and #contentright. Only the second is used in the other pages. As I can see, you have different margin/padding for these 2 divs. So, I think the difference comes from a side effect. In your CSS file, try to comment all #sidebar definitions, then find all #contentright definitions and add the same #sidebar lines (copy / paste), except the background image if you want another aspect for lists.
    The best thing will be to change #contentright in .contentright (change id to class), then use " id="sidebar", class="contentright" " in the first right div, but that means updating all the HTML pages which contain id="contentright" to class="contentright".


    I hope this will help you.

    L.H.

    J'ai décidé d'être heureux, c'est bon pour la santé !
    I decided to be happy, it is good for health!
    (Voltaire)

  8. #8
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Linn Hastur
    For me, in IE like in Moz, the blog search is a few pixels higher than regular search (the same difference).
    Yeah, I fixed that last night with a an IE-only selector and playing with another margin. Thanks to Johnny Gulag for a push in the right direction!

    I'll play with the rest later. I'm sure it'll be fruitful, but the majority of the work is done. Thanks!

    Chris


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
  •