Alignment problem
-
Hi
I have a template that I’ve made pretty much from scratch and I’m having some problems with alignment.
On the main page and my article pages the footer looks fine – https://yfrog.com/86mcmj
But on my category pages the footer seems to creep up the page and over content – https://yfrog.com/juhh6j
I’ve played around with CSS but can’t understand as all the basica layout uses the same div tags and CSS for alignment.
Any help would be grateful, let me know if you need to see anything like the coding for the different pages.
-
Did you clear the floats in the content div on the category pages? It looks like those images are floating elements…
Here is the coding for the page, CSS to follow (it’s probably really bad coding and probably the reason it’s not working so sorry in advance!)
***** HEADER.PHP *****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="https://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <meta name="verify-v1" content="I+4JMesZs/OwNzOneIkfARneLDmBLedFxBb56xEXe20=" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script src="https://www.the-dish.co.uk/Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <?php wp_head(); ?> </head> <body> <div class="wrapper" id="wrapper"> <div class="header" id="header"> <div class="ad1" id="ad1"><?php $args = array('position' => 'header-ad', 'description' => 'Header Advert', 'before' => '<div id="header-ad">', 'after' => '</div>'); do_action('ad-minister', $args);?></div> <div class="logo" id="logo"><a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_directory'); ?>/images/theDISH-logo.jpg" alt="logo" width="319" height="88" border="0" /></a></div> <div class="nav" id="nav"> <div id="nav-menu"> <ul> <li><a href="https://www.the-dish.co.uk/category/music">Music</a></li> <li><a href="https://www.the-dish.co.uk/category/fashion">Fashion</a></li> <li><a href="https://www.the-dish.co.uk/category/mens-fashion">Man.theDISH</a></li> <li><a href="#">theDISHtv</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Shop</a></li> </ul> </div><div id="searchbox"> <form id="searchform" method="get" action="/index.php"> <div> <input type="text" name="s" id="s" size="34" /> <input type="submit" value="Search" /> </div> </form> </li></div> </div> </div> <div class="main" id="main"> <?php get_sidebar(); ?> <div class="text" id="text"> <div class="post" id="post">
***** CATEGORY PAGE *****
<?php get_header(); ?> <div id="article"> <div class="feature" id="feature"> <?php $args = array('position' => 'Fashion-feature', 'description' => 'Fashion Feature', 'before' => '<div id="fashion-feature">', 'after' => '</div>'); do_action('ad-minister', $args);?> </div> <div class="fashion-categories" id="fashion-categories"> <div class="fashion-feature-left"> <div class="fashion-headline">Featured</div> <?php query_posts('cat=1596&showposts=3'); echo "<ul id=fashion-features>"; while (have_posts()) : the_post(); echo "<li><table><tr><td><a href="; echo get_permalink(); echo ">"; the_post_thumbnail(); the_title(); echo "</a>"; echo "<br /><span id=headline-desc>"; the_excerpt(); echo "</span>"; echo "</tr></td></table></li>"; endwhile;?> </ul> </div> <div class="fashion-feature-right"> <div class="fashion-headline">On The Cover</div> <?php query_posts('cat=1598&showposts=3'); echo "<ul id=fashion-features>"; while (have_posts()) : the_post(); echo "<li><table><tr><td><a href="; echo get_permalink(); echo ">"; the_post_thumbnail(); the_title(); echo "</a>"; echo "<br /><span id=headline-desc>"; the_excerpt(); echo "</span>"; echo "</tr></td></table></li>"; endwhile;?> </ul> </div> <div class="fashion-feature-bottom-left"> <div class="fashion-breaking">Breaking News</div> <?php query_posts('cat=1595&showposts=3'); echo "<ul id=fashion-features>"; while (have_posts()) : the_post(); echo "<li><table><tr><td><a href="; echo get_permalink(); echo ">"; the_post_thumbnail(); the_title(); echo "</a>"; echo "<br /><span id=headline-desc>"; the_excerpt(); echo "</span>"; echo "</tr></td></table></li>"; endwhile;?> </ul> </div> <div class="fashion-feature-bottom-right"> <div class="fashion-headline"> </div> <?php query_posts('cat=1595&showposts=3&offset=3'); echo "<ul id=fashion-features>"; while (have_posts()) : the_post(); echo "<li><table><tr><td><a href="; echo get_permalink(); echo ">"; the_post_thumbnail(); the_title(); echo "</a>"; echo "<br /><span id=headline-desc>"; the_excerpt(); echo "</span>"; echo "</tr></td></table></li>"; endwhile;?> </ul> </div> </div> </div> <?php include (TEMPLATEPATH . '/footer.php'); ?>
***** FOOTER.PHP *****
</div> </div> </div> <div class="footer" id="footer"> <div class="footer-ad" id="footer-ad"><?php $args = array('position' => 'footer-ad', 'description' => 'Footer Advert', 'before' => '<div id="footer-ad">', 'after' => '</div>'); do_action('ad-minister', $args);?></div> <div id="social" class="social"><a href="https://www.twitter.com/theDISHmagazine" target="_blank"><img src="../../../twitter.png" alt="twitter" width="60" height="60" border="0" /></a> <a href="https://www.facebook.com/theDISHonline" target="_blank"><img src="../../../facebook.png" alt="facebook" width="60" height="60" border="0" /></a> <a href="https://www.myspace.com/thedishmusic" target="_blank"><img src="../../../myspace.png" alt="myspace" width="60" height="60" border="0" /></a> <img src="../../../youtube.png" alt="youtube" width="60" height="60" border="0" /></div> <div class="footer-nav" id="footer-nav"> <div id="nav-menu"> <ul> <li><a href="https://www.the-dish.co.uk/about-us/">About</a></li> <li><a href="https://www.the-dish.co.uk/contribute/">Contribute</a></li> <li><a href="https://www.the-dish.co.uk/contact-us/">Contact</a></li> <li><a href="#">Advertise</a></li> <li><a href="https://www.the-dish.co.uk/terms-conditions/">Terms & Conditions</a></li> </ul> </div> <span id="footer-copy"> All rights reserved © theDISH 2005-2010<br /> <a href="https://www.blackeaglemedia.co.uk">BlackEagleMedia Publishing</a></span></div> </div> </div><?php wp_footer(); ?> </body> </html>
***** CSS *****
body { padding:0; margin: 0px; background-image: url('https://www.the-dish.co.uk/the-dish-bg.gif'); background-repeat: repeat-y; background-position:center; background-color:#FFF; } #container { margin: 0px; padding: 0px; float: none; width: 1024px; margin: auto; border-width: 1px; border-color: #000000; border-style: solid; background-color:#FFFFFF; } #container #header { margin: 0px; padding: 0px; float: none; height: 158px; width: 1024px; background-color: #000000; } #container #main { margin: 0px; float: none; height: 604px; width: 938px; background-color: #FFFFFF; padding-left: 43px; padding-right: 43px; padding-top: 16px; padding-bottom: 14px; } #footer { height: 150px; padding-left: 0px; padding-right: 5px; padding-bottom: 5px; padding-top: 5px; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 10px; } #footer-left { float: left; width: 728px; height: 90px; } #footer-right { float: right; width: 210px; height: 90px; } #container #header #logo { height: 145px; float: left; width: 512px; } .headlines { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #container #header #menu { float: right; height: 145px; width: 469px; margin-right: 43px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 0px; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-align: left; margin-bottom: 0px; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: left; margin-bottom: 0px; } a:link { color: #000000; text-decoration: none; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #16E501; } a:active { color: #16E501; } #container #main #article-left #related { margin-top: 5px; height: 110px; width: 300px; background-color: #ededed; border-style: solid; border-width: 1px; border-color: #000000; } #container #main #article-left #relatedlinks { font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding: -5px 0px 0px 10px } #container #main #article-left { width: 300px; float: left; } .articletitle { background-color: inherit; color:#0f9b00; font-size:200%; font-weight:bold; margin: 0 0 5px 0; padding:0; line-height: 100%; } .articletitle2 { background-color: inherit; color:#0f9b00; font-size:150%; font-weight:bold; margin: 0 0 5px 0; padding:0; line-height: 100%; } .cover-of-the-week { margin-right: 3px; margin-top: 7px; } .playlist { margin-left: 2px; margin-top: 7px; } #container #main #music-left { width: 600px; height: 584px; float: left; } #container #main #music-right { float: right; width: 333px; height: 584px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 5px; } #container #main #fashion-page { width: 938px; height: 584px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #container #main #fashion-page #thedishrecommends { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #fashion-box { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #women-trends { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #womens-directory { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #article-left img { border-style: solid; border-width: 1px; border-color: #000000; } #featurepic { border-style: solid; border-width: 1px; border-color: #000000; } #thedishrecommends img { border-style: solid; border-width: 1px; border-color: #000000; } #women-trends img { border-style: solid; border-width: 1px; border-color: #000000; } #fashion-box img { border-style: solid; border-width: 1px; border-color: #000000; } #womens-directory img { border-style: solid; border-width: 1px; border-color: #000000; } .articletitle { background-color: inherit; color:#0f9b00; font-size:200%; font-weight:bold; margin: 5px 0 5px 0; padding:0; line-height: 100%; } .articletitle2 { background-color: inherit; color:#0f9b00; font-size:150%; font-weight:bold; margin: 5px 0 5px 0; padding:0; line-height: 100%; } .date { color: #000000; text-align: left; } .fashion-boxes { border-style: solid; border-width: 1px; border-color: #000000; } #contact-table { width: 900px; } #contact-left { width: 450px; float: left; } #contact-right { width: 450px; float: right; } #container #main #mensfashion-page { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 5px; } #header-strip { width: 1024px; height: 20px; background-color: #000000; margin: auto; float: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; clear: both; color: #FFFFFF; border: 1px solid #000000; } #header-strip input { color: #ffffff; background: #525252; border: 1px solid #616161; border: 2px outset #d7b9c9 font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; } #header-strip .submit input { color: #000; background: #ffa20f; } #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; } #navlist li { list-style: none; margin: 0; padding: 0.25em; border-bottom: 1px solid gray; } #navlist li a { text-decoration: none; color: #E5E5E5; } #navlist li a:hover { color: #0f9b00; } #Social { height: 86px; width: 155px; margin: auto; background-image: url(join-us.jpg); background-repeat: no-repeat; padding-left: 35px; padding-top: 4px; margin-left: 20px; } #wrapper { width: 1065px; clear: both; float: none; padding-top: 10px; position: relative; margin: auto; } #header { height: 140px; width: 1065px; } #logo { height: 88px; float: left; width: 320px; padding-bottom: 10px; } #ad1 { float: right; padding-bottom: 10px; } #nav { clear: both; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; width: 1065px; height: 30px; float: none; } #sidebar { float: right; width: 310px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #sidebar ul { list-style-type: circle; padding-left: 20px; } #hotbox { border: thin solid #000; margin-right: 5px; width: 300px; } #feature { border: 1px solid #000; width: 730px; } .headline-title { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 730px; padding-top: 10px; } .headline-feature-title { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 730px; padding-top: 0px; } #text { float: left; width: 740px; margin-left: 5px; } #footer-nav { clear: both; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; width: 1065px; height: 30px; float: none; margin-top: 10px; } #footer-copy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-align: right; float: right; margin-top: 2px; } #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin-top: 3px; margin-right: 15px; margin-bottom: 0; margin-left: 0.15em; } #nav-menu { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; } #nav-menu li a { text-decoration: none; color: #000; } #nav-menu li a:hover { text-decoration: none; color: #090; } #headline { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; list-style-type: none; padding-left: 7px; } #headline ul { list-style-image: none; list-style-type: none; } #headline li { padding-top: 5px; padding-bottom: 0px; margin-top: 0px; } #headline-desc { font-weight: normal; font-style: italic; font-size: 12px; margin-top: 0px; padding-top: 0px; } #headline li a { text-decoration: none; color: #000; } #headline li a:hover { text-decoration: none; color: #090; } #footer-ad { margin-left: 5px; margin-bottom: 10px; float: left; } .footer-features { clear: none; margin-top: 10px; } .feature-left { float: left; width: 225px; height: 150px; margin-left: 5px; clear: none; } .feature-middle { top: 10px; margin-left: 245px; width: 225px; height: 150px; } .feature-right { float: right; width: 225px; height: 150px; margin-right: 5px; } #blog-info { height: 130px; padding: 2px; } .features { height: 170px; margin-top: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 730px; } .features-title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .features a { text-decoration: none; color: #000; } .features a:hover { text-decoration: none; color: #090; } .features-left { float: left; width: 400px; height: 180px; } .features-right { float: right; width: 325px; height: 180px; } #post{ float: right; margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 0px; margin-bottom: 0px; } #article{ width: 715px; padding-right: 25px; } .article-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 720px; margin-bottom: 0px; padding-bottom: 0px; } .music-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 225px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } .music-feature-left { float: left; width: 225px; height: 350px; margin-left: 5px; clear: none; } .music-feature-middle { top: 10px; margin-left: 245px; width: 225px; height: 350px; } .music-feature-right { float: right; width: 225px; height: 350px; margin-right: 5px; } #music-features { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; text-decoration: none; list-style-type: none; margin-left: 0.15em; padding-left: 0.15em; line-height: normal; vertical-align: top; } #arrows { color: #06F; font-size: 14px; font-weight: bold; } #newsfeature { float: left; height: 350px; } #newsheadlines { float: right; } .red { color: #F00; } #social { float:right; margin-top: 15px; margin-right: 35px; margin-bottom: 10px; } #searchbox { float:right; margin-top: 2px; } #searchbox label { width: 4em; float: left; text-align: right; margin-right: 0.5em; display: block } #searchbox .submit input { margin-left: 3em; } #blogbox { margin: 0px; width: 300px; padding-top: 20px; } #blogbox p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; } #blogbox img { margin-right: 5px; } #blogbox a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #000; } #blog-tab { width: 300px; border:none; } #blog-tab-top { border:none; } #blog-tab-content { background-color: #FFF; height: 405px; width: 290px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; padding: 5px; padding-top: 10px; color: #FFF; } #fashion-features { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; text-decoration: none; list-style-type: none; margin-left: 0.15em; padding-left: 0.15em; line-height: normal; vertical-align: top; font-weight: bold; } .fashion-feature-right { float: right; width: 330px; height: 350px; margin-right: 5px; } .fashion-feature-left { float: left; width: 330px; height: 350px; margin-right: 5px; } .fashion-feature-bottom-left { float: left; width: 330px; height: 350px; margin-right: 5px; margin-top: 35px; clear: left; } .fashion-feature-bottom-right { float: right; width: 330px; height: 350px; margin-right: 5px; margin-top: 35px; } .fashion-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 350px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } .fashion-breaking { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 720px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } #fashion-categories { margin-top: 10px; } .wp-post-image { border: 1px solid #000; margin-right: 5px; float: left; } .fashion-headline-box { height: 110px; } .music-categories { } img.alignleft { margin: 0 7px 2px 0; } img.alignright { margin: 0 0 2px 7px; } .alignright { float: right; } .alignleft { float: left; } .wp-caption { border: 1px solid #000; text-align: center; background-color: #CCC; padding-top: 4px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 0px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #000; } #respond { clear: both; } .noborder { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #music-feat{ height: 160px; clear: both; float: none; }
Anyone able to help?
Don’t paste huge chunks of code as per the Forum Rules – use the WordPress Pastebin
At this point, your site URL will result in more help than code chunks.
- The topic ‘Alignment problem’ is closed to new replies.