CSS Positioning Help: Z-index

  • Resolved faerystrangeme

    (@faerystrangeme)


    16 years, 7 months ago

    http://spba.stanford.edu

    My basic problem is that I would like to position some text over the picture banner. I would like the text to be adjustable from each page, however; meaning that you can go to home and write something special there, and then write something different for the ‘about’ page, etc. The way I think I could be able to do this is put whatever text I want in <h1> tags, and then position <h1> in the stylesheet.

    However, my text keeps disappearing under the picture.

    Is my problem my layering of divs? I have several divs inside of one another, and the text I want on top of the picture is probably going to be inside of the ‘content’ div.

    <div class="border">

<!-- IMAGE I WANT UNDER EVERYTHING, but over the 'border' div -->
<img src="http://spba.stanford.edu/images/2_2.jpg">

<div class="container">

<div class="content">

<!-- TEXT I WANT OVER EVERYTHING -->
	<div style="position: relative;">
<div style="position: absolute; top: -50px; left: 0; z-index: 5;">
<h1>1st Header</h1>
</div>
</div>
<p>
<h2>2nd Header</h2>
<p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
<p>SPBA. SPBA.</p>

<br /><br />
</div>

<div class="sidebar"><b>Join us!</b>
<br />Send an email to prebusiness-join@lists.stanford.edu

<!-- <br />Enter your email address below and click Subscribe to join our mailing list.

<p><input type="text" id="emailaddress" />
<input type="button" value="Subscribe" onClick="document.getElementById('subscribed').innerHTML = 'Sending request...'; joinSPBA(document.getElementById('emailaddress').value)" /></p>
<p id="subscribed"></p> -->

<br /><br />

</div>

</div>
</div>
Viewing 2 replies - 1 through 2 (of 2 total)
  • stvwlf

    (@stvwlf)

    16 years, 7 months ago

    hi

    I suggest you approach this a different way.

    When you say

    “I would like the text to be adjustable from each page, however; meaning that you can go to home and write something special there, and then write something different for the ‘about’ page, etc.”

    I assume you mean by “go to home” to go the editor and change the home page.

    If so I suggest you enter the text you want in the header on that page as a custom field, below the editor box. A good name for the custom field would be HeaderText. On any page on which you want that text displayed just create a custom field with that name.

    I also suggest you display the image you are using as a background image in CSS rather than adding its code into the header as an img tag.
    Currently you have this:
    <img src="http://spba.stanford.edu/images/banner1.png"/>
    When you switch to background image that line of code is removed from the template, and replaced with the line of code you would luke to display over the background image. Doing it this way you don’t have to deal with z-index at all.

    In your CSS. change what starts on line 53 to this:

    div.border {
   background: #660000 url(http://spba.stanford.edu/images/banner1.png) no-repeat;
   height: 150px;
   width:900px;
   border:0 none;
   clear:both;
   overflow:auto;
}

    Then put the code to display the custom field in your header code, like this – remove the img line and add these lines under the border div.

    <div class="border">
<?php
$hdr_txt = get_post_meta($post->ID, 'HeaderText', true;
if ($hdr_txt) { ?>
   <h1 style="text-align: center;"><?php echo $hdr_txt;?></h1>
<?php }?>

    You can add additional styling to the style= within the h1. If there is no custom field associated with a page or post then no header message will display – the background image will always display. It is also possible to create a default header message that will display on all pages and posts that do not have a custom header for that page. I didn’t include code for that in this reply.

    Thread Starter faerystrangeme

    (@faerystrangeme)

    16 years, 7 months ago

    Ohhh, I learned something new 😛 Thank you!

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

The topic ‘CSS Positioning Help: Z-index’ is closed to new replies.