Aligning Header and Sidebar

  • Resolved madtripper

    (@madtripper)


    18 years, 5 months ago

    Hi,

    I’m tweaking the Kubrick theme to create a custom theme for my blog. For the most part it’s working out well, but I cannot get the different pieces to align properly. My header is aligning left and I need it center. My sidebar is floating to the far right of the entire page and I need it flush right with my header. The footer and background are correctly centered. The site is up at https://www.girltrip.org.

    My header.php is coded:
    <style type=”text/css” media=”screen”>

    body { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/666666.gif”); }
    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/psbackground.gif”) repeat-y top; border: none; center}
    <?php } else { // No sidebar ?>
    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/psbackground.gif”) repeat-y top; border: none; center}
    <?php } ?>
    #header { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/psheader.gif”) no-repeat bottom; border: none; center}
    #footer { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/psfooter.gif”) no-repeat bottom; border: none; center}

    #header { margin: 0 !important; margin: 0 0 0 0px; padding: 1px; height: 165px; width: 800px; }
    #headerimg { margin: 0; height: 165px; width: 800px; }

    </style>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id=”page”>

    <div id=”header”>
    <div id=”headerimg”>
    <h1>/”><?php bloginfo(‘name’); ?></h1>
    <div class=”description”><?php bloginfo(‘description’); ?></div>
    </div>
    </div>

    ==================
    Some code from my style.css:

    #header {
    background: #90a090;
    position: center;
    border-bottom: solid 0px #aba;
    border-left: solid 0px #9a9;
    border-right: solid 0px #565;
    border-top: solid 0px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 1px 1px 1px px;
    }

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

    #header a:hover {
    text-decoration: underline;
    }

    #sidebar {
    background: #ffffff;
    float: right;
    width: 210px;
    }

    #footer
    {
    clear: both;
    =========================

    I am ultimately going for a gray background (background 666666.gif) with an 800 wide page centered on it. Any help would be appreciated. As I said, everything I’ve tweaked in the Kubrick code has worked well except these alignments.

    Thanks,
    MT

Viewing 3 replies - 1 through 3 (of 3 total)

  • Ran the css through a validator, check these out:

    URI : https://www.girltrip.org/wp-content/themes/pinksuitcase/style.css
    * Line: 61 Context : h1

    Invalid number : position center is not a position value : center
    * Line: 169 Context : #header

    Invalid number : position center is not a position value : center
    * Line: 177 Context : #header

    Invalid number : padding px is not a padding-left value : 1px 1px 1px px

    URI : https://www.girltrip.org./

    * Line: 30 Context : #page
    Parse Error - center
    * Line: 31 Context : #header
    Parse Error - center
    * Line: 32 Context : #footer
    Parse Error - center

    I’m concerned about your “page” properties, they’re not listed in your post but they take precedence…

    Anyhoo, first see about addressing the above errors?

    Thread Starter madtripper

    (@madtripper)

    Thanks! I cleared the CSS and checked for validation. It seems to be fine now. I also checked my page properties (assuming that you’re referring to page.php and didn’t see anything about alignment, but here is my page.php code:

    <?php get_header(); ?>

    <div id=”content” class=”narrowcolumn”>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class=”post” id=”post-<?php the_ID(); ?>”>
    <h2><?php the_title(); ?></h2>
    <div class=”entrytext”>
    <?php the_content(‘<p class=”serif”>Read the rest of this page »’); ?>

    <?php link_pages(‘Pages: ‘, ”, ‘number’); ?>

    </div>
    </div>
    <?php endwhile; endif; ?>
    <?php edit_post_link(‘Edit this entry.’, ”, ”); ?>
    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>
    ===============================
    any help is greatly appreciated…

    Thanks,
    MT

    Not the page.php but the ‘page’ css properties, how ‘page’ is defined in css. Will take another look as soon as I get back…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Aligning Header and Sidebar’ is closed to new replies.

Tags