Header Alignment

  • Alright so I’m new to CSS and PHP so this has been a learning process. Everything was going pretty well until I started to put my own images in. My footer and background images line up just fine and the background slice scales vertically as it is supposed to. Initially when I inserted my footer image into the code its height was cut off and constrained and cut off part of my design. I was able to fix this in the structure code in the main css stylesheet by adjusting the height. My header image was cut off both vertically and horizontally also as a result of the previous height and width in the code being smaller than the image. So under the same structure section of the CSS code I adjusted the header tag’s height and width and it does end up displaying the image in its entirety after this but it has it aligning way right of the rest of the body of my design.

    To see what I am talking about here is a link:

    https://www.ryanloewe.com/index-hidden.php

    Thanks in advance for any help.

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

  • EDITED* Huh!?!?! I just viewed your source, and it appears ok.. what the hell lmao!?!

    Maybe try fixing the first validation error once? Then we can go from there.. ??

    spencerp

    Thread Starter writimagination

    (@writimagination)

    Yeah man, I have no idea. I don’t get it.

    Thread Starter writimagination

    (@writimagination)

    I totally forgot to check it in other browsers. I was using Firefox. The only other browser I have on here right now is IE or I would have checked others, but IE wigs out in a completely different way. Header and body line up but the body text and footer jut left. Blast.

    To check your validation errors click on the “Valid XHTML” link on your sidebar. There it will tell you what errors there are on your page. The error it comes up with is that the </head> tag is missing. Check the file “header.php” and make sure that just before the <body> tag you have the </head> tag. Then revalidate to check for any other errors that may show up.

    Thread Starter writimagination

    (@writimagination)

    <!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">

    <head profile="https://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <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'); ?>" />

    <style type="text/css" media="screen">

    <?php
    // Checks to see whether it needs a sidebar or not
    if ( !$withcomments && !is_single() ) {
    ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.jpg") repeat-y top; border: none; }
    <?php } ?>

    </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>
    <hr />

    That’s my header.php code. No sign of head or body tags. Well, except for the head profile one. I’m working off of the default Kubrick theme.

    when you added your own image, did you use the original image from the theme and build yours the same size?

    Thread Starter writimagination

    (@writimagination)

    No that’s the problem I think. I suppose I should have addressed that. That’s something I’m trying to learn, what constrains the size of the images you use. I thought that it was merely the height and width in the structure section of the css stylesheet but apparently I was wrong. Changing the height doesn’t seem to mess anything up but the width does.

    I don’t even know how to go about building a wordpress of my own design without first building on an existing theme.

    Well, for one thing.. the Kubrick (default) theme is one of the worst themes for people to start out on, I know.. I’ve messed with it enough already.. why not pick a different theme from here once:
    https://themes.wordpress.net/

    Find one you like, and one that basically has the same layout style you’re looking for, then go from there. ??

    By the way, what exactly are you trying to do with it? Get rid of the 20px gaps at the top and bottom, and leave the 20px gaps on the left and right? If so, I made a version of that already.. =P

    spencerp

    Thread Starter writimagination

    (@writimagination)

    I’m not sure what gaps you are referring to.

    Maybe I will shop around a bit for another theme. I initially had been working with a theme other than the default but I just checked and it just happens to be based on Kubrick. Go figure.

    Thread Starter writimagination

    (@writimagination)

    I seem to have this issue no matter what theme I use. I tried a few others. I may just have to redesign my header image a bit so it’s width is smaller. I really wish I knew what was going on code-wise so I wouldn’t be so limited on my design.

    When you first start out editing themes, its a lot easier to take the images from the theme itself, start by changing colours of those but leaving the size the same. that way you wont break the code and the sizes there.

    Thread Starter writimagination

    (@writimagination)

    That’s probably what I’ll end up doing for now but but I’m not giving up on studying CSS and how wordpress works. I want to figure out the code well enough that I can create whatever I want. I guess that will just take time…

    unfortunately it does take time.. a few years ago, I started playing with phpnuke (before WP) and that was how I learned php and css… there were modules and themes I wanted to customize and I had to use what I had started with to figure out what to do to make it how I wanted it. I can tweak things today, but I hate having to write stuff from scratch. I can use what I laerned by tweaking TO write it from scratch (took me years to learn, but playing like that was the best way for me.. better than any book).. the instant feedback of seeing what you do step by step to alter something is the best teacher in my opinion.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Header Alignment’ is closed to new replies.