WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help Sidebars and footers making them even (11 posts)

  1. dblast
    Member
    Posted 5 years ago #

    Hi everyone, I am trying to get my side bar menu and my footer to even out. If the article is longer than the sidemenu I have a weird cut off

    http://www.warrior-scholar.com/wordpress/?page_id=2

    If the side menu is longer than the page I get a footer up in the center of the page:

    http://www.warrior-scholar.com/wordpress/?m=200812

    I'm new to the css and php so please speak slowly to me.

    Thanks

    Dan

  2. dblast
    Member
    Posted 5 years ago #

    Bump

  3. dblast
    Member
    Posted 5 years ago #

    Bump

  4. @mercime
    Volunteer Moderator
    Posted 5 years ago #

    You can "fix" it in at least two ways.
    1) change in one file - footer.php and upload
    add: <br clear="all" />
    between <?php get_sidebar(); ?> and <p class="credit">
    therefore:

    <?php get_sidebar(); ?>
    <br clear="all" />
    <p class="credit">

    or,
    2) change 2 files - footer.php and style.css
    in footer.php add this instead of the br clear above in the same place:
    <div class="cleardiv"></div>
    in style.css add this
    div.cleardiv { clear: both; width: 100%; height: 1em; }

  5. dblast
    Member
    Posted 5 years ago #

    Thanks I made the changes and tried both versions but it's still off. I tried to insert the code here:

    /*
    Theme Name: WordPress Classic
    Theme URI: http://wordpress.org/
    Description: The original WordPress theme that graced versions 1.2.x and prior.
    Version: 1.5
    Author: Dave Shea
    Tags: mantle color, variable width, two columns, widgets

    Default WordPress by Dave Shea || http://mezzoblue.com
    Modifications by Matthew Mullenweg || http://photomatt.net
    This is just a basic layout, with only the bare minimum defined.
    Please tweak this and make it your own. :)
    */

    a {
    color: #3399FF;
    }

    a img {
    border: none;
    }

    a:visited {
    color: #3399FF;
    }

    a:hover {
    color: ##3399FF;
    }

    acronym, abbr {
    border-bottom: 1px dashed #333;
    }

    acronym, abbr, span.caps {
    font-size: 90%;
    letter-spacing: .07em;
    }

    acronym, abbr {
    cursor: help;
    }

    blockquote {
    border-left: 5px solid #71b7f4;
    margin-left: 1.5em;
    padding-left: 5px;
    }

    body {
    background: #fff;
    border: 2px solid #243C5D;
    border-bottom: 1px solid #243C5D;
    border-top: 3px solid #243C5D;
    color: #243C5D;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    margin: 0;
    padding: 0;
    }

    cite {
    font-size: 90%;
    font-style: normal;
    }

    h2 {
    border-bottom: 1px dotted #243C5D;
    font: 95% "Times New Roman", Times, serif;
    letter-spacing: 0.2em;
    margin: 15px 0 2px 0;
    padding-bottom: 2px;
    }

    h3 {
    border-bottom: 1px dotted #fff;
    font-family: "Times New Roman", Times, serif;
    margin-top: 0;
    }

    ol#comments li p {
    font-size: 100%;
    }

    p, li, .feedback {
    font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: -1px;
    }

    /* classes used by the_meta() */
    ul.post-meta {
    list-style: none;
    }

    ul.post-meta span.post-meta-key {
    font-weight: bold;
    }

    .credit {
    background: #243C5D;
    border-top: 3px double #243C5D;
    color: #71b7f4;
    font-size: 11px;
    margin: 10px 0 0 0;
    padding: 3px;
    text-align: center;
    }

    .credit a:link, .credit a:hover {
    color: #fff;
    }

    .feedback {
    color: #ccc;
    text-align: right;
    clear: both;
    }

    .meta {
    font-size: .75em;
    }

    .meta li, ul.post-meta li {
    display: inline;
    }

    .meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
    }

    .storytitle {
    margin: 0;
    }

    .storytitle a {
    text-decoration: none;
    }

    #commentform #author, #commentform #email, #commentform #url, #commentform texarea {
    background: #fff;
    border: 1px solid #333;
    padding: .2em;
    }

    #commentform texarea {
    width: 100%;
    }

    #commentlist li ul {
    border-left: 1px solid #ddd;
    font-size: 110%;
    list-style-type: none;
    }

    #commentlist li .avatar {
    float: right;
    margin-right: 25px;
    border: 1px dotted #ccc;
    padding: 2px;
    }

    #content {
    margin: 30px 13em 0 3em;
    padding-right: 60px;
    }

    #header {
    background: #243C5D;
    border-bottom: 3px double #243C5D;
    border-left: 1px solid #243C5D;
    border-right: 1px solid #243C5D;
    border-top: 1px solid #243C5D;
    font: italic normal 230% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }

    #header a {
    color: #fff;
    text-decoration: none;
    }

    #menu {
    background: #243C5D;
    border-left: 1px solid #243C5D;
    border-top: 3px solid #243C5D;
    padding: 10px 0 10px 30px;
    position: absolute;
    right: 0px;
    top: 0;
    width: 11em;
    }

    #menu form {
    margin: 0 0 0 13px;
    }

    #menu input#s {
    width: 80%;
    background: #eee;
    border: 1px solid #999;
    color: #71b7f4;
    }

    #menu ul {
    color: #71b7f4;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding-left: 1px;
    text-transform: lowercase;
    }

    #menu ul li {
    font: italic normal 110% 'Times New Roman', Times, serif;
    letter-spacing: 0.1em;
    margin-top: 10px;
    padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
    }

    #menu ul ul {
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    #menu ul ul li {
    border: 0;
    font: normal normal 12px/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 1px;
    }

    #menu ul ul li a {
    color: #fff;
    text-decoration: none;
    }

    #menu ul ul li a:hover {

    border-bottom: 1px solid #809080;
    }

    #menu ul ul ul.children {
    font-size: 142%;
    padding-left: 2px;
    }

    #wp-calendar {
    border: 1px solid #ddd;
    empty-cells: show;
    font-size: 14px;
    margin: 0;
    width: 90%;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    text-decoration: none;
    }

    #wp-calendar a:hover {
    background: #e0e6e0;
    color: #333;
    }

    #wp-calendar caption {
    color: #999;
    font-size: 16px;
    text-align: left;
    }

    #wp-calendar td {
    color: #ccc;
    font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: normal;
    padding: 2px 0;
    text-align: center;
    }

    #wp-calendar td.pad:hover {
    background: #fff;
    }

    #wp-calendar td:hover, #wp-calendar #today {
    background: #eee;
    color: #bbb;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }

    /* Captions & aligment */
    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    div.cleardiv { clear: both; width: 100%; height: 1em; }

    /* End captions & aligment */

    #text-245503761{
    //holds karate man low block, give it some height to push the lower menu items down
    display:block;
    height:320px
    }

    #text-245503761 DIV.textwidget{
    //position karate man low block absolutely on the screen
    display:block;
    position:absolute;
    right:2px;
    top:2px;
    }
    #daikos-text-1{
    //holds meditation man, give it some height to push the lower menu items down
    display:block;
    height:320px
    }

    #daikos-text-1 DIV.DaikosText{
    //position meditation man absolutely on the screen
    display:block;
    position:absolute;
    right:2px;
    top:2px;
    }
    #text-285852621{
    //holds karate man side kick, give it some height to push the lower menu items down
    display:block;
    height:320px
    }

    #text-285852621 DIV.textwidget{
    //position karate man side kick absolutely on the screen
    display:block;
    position:absolute;
    right:50px;
    top:2px;
    }

    #text-286092581{
    //holds karate man MPDK, give it some height to push the lower menu items down
    display:block;
    height:320px
    }

    #text-286092581 DIV.textwidget{
    //position karate man MPDK absolutely on the screen
    display:block;
    position:absolute;
    right:20px;
    top:2px;
    }

    #text-286970521{
    //holds karate man Horse, give it some height to push the lower menu items down
    display:block;
    height:320px
    }

    #text-286970521 DIV.textwidget{
    //position karate man Horse absolutely on the screen
    display:block;
    position:absolute;
    right:1px;
    top:2px;
    }

    and here:

    <!-- begin footer -->
    </div>

    <?php get_sidebar(); ?>
    <div class="cleardiv"></div>

    <p class="credit"><!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
    </p>
    </div>
    <?php wp_footer(); ?>

    </body>
    </html>

    Am I doing something wrong?

  6. dblast
    Member
    Posted 5 years ago #

    <chirp, chirp>
    Help, anyone?

  7. dblast
    Member
    Posted 5 years ago #

    Help?

  8. drewactual
    Member
    Posted 5 years ago #

    dude- you've disregarded every chunk of etiquette here...

    nonetheless- here you go:

    change your body background color.
    change the color of your content background.

    you hafta think outside the box- literally in this case!
    here is your code's to change:

    #content {
    	margin: 0;
            width:58em;
    	padding-left: 60px;
            padding-right:60px;
            padding-bottom:40px;
            background-color:#fff;
            }
    
    #menu {
    	background: #243C5D;
    	border-left: 1px solid #243C5D;
    	border-top: 3px solid #243C5D;
    	padding: 10px 0 10px 30px;
    	position: absolute;
    	right: 0px;
    	top: 0;
    	width: 11em;
            }
    
    body {
    	background: #243C5D;
    	border: 2px solid #243C5D;
    	border-bottom: 1px solid #243C5D;
    	border-top: 3px solid #243C5D;
    	color: #243C5D;
    	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    	margin: 0;
    	padding: 0;
    }

    find those in your stylesheet and change them... Poof.. what your looking for! :-)

  9. dblast
    Member
    Posted 5 years ago #

    dude- you've disregarded every chunk of etiquette here...

    nonetheless- here you go:

    Sorry, I'm getting used to the forum. It seems if you don't keep asking your request gets buried and ignored. I'm a newbie (obviously)and I'd like to get this finished. I tired your suggestions but I don't see any changes here's what I did to the rtl.css

    /* Based on Arabic (RTL) version of WordPress Classic theme, converted by Serdal (Serdal.com) */

    #menu ul ul, #wp-calendar caption, #wp-calendar #prev a { text-align: right; }
    #wp-calendar #next a, .feedback { text-align: left; }

    blockquote {
    border-left: 0;
    border-right: 5px solid #ccc;
    margin-left: auto;
    margin-right: 1.5em;
    padding-left: 0;
    padding-right: 5px;
    }

    body { font-family: 'Geeza Pro', Tahoma, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; }

    h2 { font: 95% 'Al Bayan', 'Traditional Arabic', "Times New Roman", Times, serif; }

    p, li, .feedback {
    font: 90%/175% 'Geeza Pro', Tahoma, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    text-align: justify;
    }

    acronym, abbr, span.caps, h2, p, li, #header, #menu ul li, #menu ul ul li, #wp-calendar td, .feedback, .meta, .meta a { letter-spacing: normal; }

    #commentlist li ul {
    border-left: 0;
    border-right: 1px solid #ddd;
    }

    #content {
    margin: 0;
    width:58em;
    padding-left: 60px;
    padding-right:60px;
    padding-bottom:40px;
    background-color:#fff;
    }

    #menu {
    background: #243C5D;
    border-left: 1px solid #243C5D;
    border-top: 3px solid #243C5D;
    padding: 10px 0 10px 30px;
    position: absolute;
    right: 0px;
    top: 0;
    width: 11em;
    }

    body {
    background: #243C5D;
    border: 2px solid #243C5D;
    border-bottom: 1px solid #243C5D;
    border-top: 3px solid #243C5D;
    color: #243C5D;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    margin: 0;
    padding: 0;
    }

    #menu form { margin: 0 13px 0 0; }

    #menu ul {
    padding-left: 0;
    padding-right: 3px;
    }

    #menu ul li { font: normal normal 110% 'Geeza Pro', Tahoma, 'Times New Roman', Times, serif; }

    #menu ul ul li {
    font: normal normal 12px/115% 'Geeza Pro', Tahoma, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    padding-left: 0;
    padding-right: 12px;
    }

    #menu ul ul ul.children {
    padding-left: 0;
    padding-right: 4px;
    }

    #wp-calendar #next a {
    padding-right: 0;
    padding-left: 10px;
    }

    #wp-calendar #prev a {
    padding-left: 0;
    padding-right: 10px;
    }

    #wp-calendar td { font: normal normal 12px 'Geeza Pro', Tahoma, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; }

  10. dblast
    Member
    Posted 5 years ago #

    O.K I' made changes in the style.css instead based on your idea of changing the background color blue and the content white. But I would like my content to be flush left not bordered on the left. How can I bump it over?

    http://www.warrior-scholar.com/wordpress

    Thanks for the help and patience.

  11. dblast
    Member
    Posted 5 years ago #

    I figured it out added margin-left: 0px;
    That did the trick.

    Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.