How do you position text on a graphic within a header box?

  • Resolved iyamdman

    (@iyamdman)


    13 years, 3 months 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?

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

  • 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

    Thread Starter iyamdman

    (@iyamdman)

    Sorry about the link.

    https://globalbusinessconnections.com/wpsitegbc/

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

    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.

    Thread Starter iyamdman

    (@iyamdman)

    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?

    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.

    Thread Starter iyamdman

    (@iyamdman)

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

    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;

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do you position text on a graphic within a header box?’ is closed to new replies.