WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do you position text on a graphic within a header box? (8 posts)

  1. iyamdman
    Member
    Posted 2 years ago #

    I got my test theme/site laid out. The header currently has a H1 Header that is positioned top center.

    Here is Header.php:

    <html>
    <head>
    <title>U7 Tutorial theme</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    </head>
    <body>
      <div id="wrapper">
        <div id="header">
          <h1>HEADER</h1>
        </div>

    In Style.css:

    #header {
        color:#00ff00;
        background: url("images/gbc-name-header-1v2-j.jpg") no-repeat scroll center top transparent;
        width: 960;
        height: 194;
    }

    So the Header box is 960 x 194 pixels, I want to put the H1 header text starting at an exact position with in the 960 x 194 pixel header box.

    About 150 pixels down from the top left corner (0,0), and 50 pixels in from the left.

    What would the code look like?

  2. peredur
    Member
    Posted 2 years ago #

    Depends on how you want to do it. Without a link to your site it's very hard to say what might be best.

    Off the top, you could make your #header div position: relative; and abolutely position your h1 header to where you want it. Something like:

    #header h1 {
      position: absolute;
      top: 150px;
      left: 50px;
    }

    But I'm guessing because I've no way of testing it without a link.

    However, you could also use margins and/or padding. Personally I'd rather do that than use absolute positioning.

    Whatever works, basically.

    HTH

    PAE

  3. iyamdman
    Member
    Posted 2 years ago #

    Sorry about the link.

    http://globalbusinessconnections.com/wpsitegbc/

    I want to position the word "Header" near the bottom right of the header block/photo.

  4. Lisa Sabin-Wilson
    Member
    Posted 2 years ago #

    Try something simple like:

    #header h1 {
    text-align:right;
    padding: 155px 20px 0 0;
    }

    Position it however you want by adjusting the padding.

    Reminder, padding definitions go top, right, bottom, left.

    So:
    padding: 155px 20px 0 0; equals:

    padding-top: 155px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left:0;

    Hope that helps.

  5. iyamdman
    Member
    Posted 2 years ago #

    Hi Lisa,

    Thanx - the question is where would I put this code - in style.css?

    Then how do I call it? - Do I have to put something in header.php?

  6. Lisa Sabin-Wilson
    Member
    Posted 2 years ago #

    This goes in your Stylesheet (style.css):

    #header h1 {
    text-align:right;
    padding: 155px 20px 0 0;
    }

    Looks like the text "Header" is already in your template file - so that is all you should need to do.

  7. iyamdman
    Member
    Posted 2 years ago #

    Got it - put it in Style.css - thanx for the help!!!!

  8. amft
    Member
    Posted 2 years ago #

    Hi
    How do I increase the size of my text in my header
    This is what I see in the layout css I amended h1 but it didnt seem to make any difference
    body {
    margin:0;
    padding:0;
    font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
    font-size:100.01%;
    position:relative;
    z-index:90;
    }
    h1,h2,h3,h4 {
    font-weight:normal;
    }
    h3,h4,h5,h6 {
    margin-bottom:0;
    }
    h3+p,h4+p,h5+p,h6+p {
    margin-top:0;
    }
    h1 {
    font-size:11.6em;
    letter-spacing:.02em;
    }
    h2 {
    font-size:1.6em;
    letter-spacing:.02em;
    }
    h3 {
    font-size:1.4em;
    letter-spacing:.01em;
    }
    h4 {
    font-size:1.2em;
    letter-spacing:.01em;
    }
    h5,h6 {
    font-size:1em;
    letter-spacing:.01em;
    }
    img {
    border:none;
    }
    dt {
    font-weight:bold;
    margin-top:10px;

Topic Closed

This topic has been closed to new replies.

About this Topic