How to move header text down

  • Hi, I would like to move the text disaplayed in my header downward a bit. Here is the header code.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”https://www.w3.org/1999/xhtml”&gt;

    <head profile=”https://gmpg.org/xfn/11″&gt;
    <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>

    <?php counterize_add(); ?>

    <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=”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’); ?>” />
    <?php wp_get_archives(‘type=monthly&format=link’); ?>

    <?php wp_head(); ?>
    </head>
    <body>

    <div id=”page”>

    <div id=”header”>
    <h1>“><?php bloginfo(‘name’); ?></h1>
    <div class=”description”><?php bloginfo(‘description’); ?></div>
    </div>
    <img src=”images/line.gif” width=”433″ height=”1″ alt=”” />

    Any help is appreciated, Thanks.

    -Mike
    https://www.ieatpeople.com

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

  • The stylesheet should look this way if you want to move everything that is real text:

    #header h1 {margin-top:10px;}

    if the whole page should be moved down check out this one:

    body {padding-top:10px}

    and choose a number you like

    Your header text is in your index.php and depending on your theme, in some other page templates. The text is contained in the following block:
    <h1>"><?php bloginfo('name'); ?></h1>
    The enclosing block is the <div id="header">
    You don’t have to change anything in your template files though.

    The <div> and the id identifies this block uniquely and you can apply style rules to it.

    You can change the position of the header text in your stylesheet. Look up the header section and add this rule:

    #header h1{
    margin:20px 0 0 0;
    }

    This will add extra space above your header text.
    However, you might want to make the header itself a little lower. As it stands it takes up rather much of the browser real estate.
    If you want to do that find your #header rule and change the height, for example to 150px like this;

    #header {
    padding: 0;
    margin: 0 auto;
    height: 150px;
    width: 100%;
    background-color: black;
    }

    It actually is the same ??

    Thread Starter mycoo62

    (@mycoo62)

    Got it to work, Thanks!

    -Mike

    AuctionMaster: Exactly!
    Your post came in while I was writing, so you beat me to it ?? Maybe I’m to verbose.

    Uh… Ok. I use a personalheader.jpg, and Im trying to figure the same out. S=Does this go in the style.css or header.php ?
    Or am I looking in the wrong place again? I figured out how to align it to the right, but now it sits too high for the visual element/image.

    checkit.

    https://www.rottenmac.com/blog

    any feedback is great.

    Bikepunk, open the header.php, choose the img-tag or whatever you want wo move and add style="margin-top:10px;" to it. This way you don’t have to find the right place in the stylesheet.

    Found it… Thanks again. I ned to pay attention when I do things the first time.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to move header text down’ is closed to new replies.