how do i make two separate headers in one container graphically?

JMayer

12-21-2010, 11:24 PM

That might be a confusing question. I have been editing a section, converting a text header with a color-based background to a static graphic..

Currently the container has four sections.. But each section is referencing the same header.

I successfully made it so the top two are positioned correctly, but the bottom two I am having difficulty with.
I am thinking that maybe I need to use a header graphic that is similar to graphics that change on click, in the way that the top of the header appears for one section, and the bottom appears for the other section.
I am not sure if the background position tag will work for this (as i tried), or to use a margin tag. However, it seems that I need to create a separate subsection in order to accomplish what I want to do.

Below is the current code:

#article_menu_container {
width: 622px;
float: left;
}
.article_menu {
font: bold 10px/22px Arial, Helvetica, sans-serif;
float: left;
text-align: center;
width: 311px;
}

.article_menu div {
background: url(../images/shopcardother.png) no-repeat;
/*--background-position: -110px 0;--*/
border: 1px solid #453e3c;
position: relative;
text-indent: -9999px;
}
.article_menu div.no_lft_border {
border-left: 0px none transparent;
/*--background-position: 0 0 0 -394px;*/
margin: 0 0 0 -288px;
}
.article_menu img.round_lft {
position: absolute;
left: -1px;
top: -1px;
}
.article_menu img.round_rht {
position: absolute;
right: -1px;
top: -1px;
}
.article_menu h2 {
font: bold 15px/22px Bookman Old Style, Times New Roman, Times, serif;
font-weight: bold;
color: #b7b2a2;
line-height: 39px;
/*-text-indent: -9999px;-*/
}

Here is the corresponding php:
(i've only included part of it because sections 3 and 4 are the same without the image)
<div id="article_menu_container">

<div class="article_menu">
<div class="no_rht_border"><img src="<?php bloginfo('template_url')?>/images/art_menu_hdr_lft_rou.png" width="19" height="41" class="round_lft" /><h2>SHOP BY PRODUCT:</h2></div>



<div class="article_menu">
<div class="no_lft_border"><img src="<?php bloginfo('template_url')?>/images/art_menu_hdr_rht_rou.png" width="15" height="41" class="round_rht" /><h2>SHOP BY COLOR:</h2></div>

JMayer

12-22-2010, 07:17 AM

Can anybody help? Do you need me to clarify anything?

Excavator

12-22-2010, 07:33 AM

Hello JMayer,
Since your question involves images it would be nice to be able to see them. Link us to the test site.

In the meantime, the layout is a lot easier to follow if you use some comments and indentation like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#article_menu_container {
width: 622px;
float: left;
}
.article_menu {
font: bold 10px/22px Arial, Helvetica, sans-serif;
float: left;
text-align: center;
width: 311px;
}
.article_menu div {
background: url(../images/shopcardother.png) no-repeat;
/*--background-position: -110px 0;--*/
border: 1px solid #453e3c;
position: relative;
text-indent: -9999px;
}
.article_menu div.no_lft_border {
border-left: 0px none transparent;
/*--background-position: 0 0 0 -394px;*/
margin: 0 0 0 -288px;
}
.article_menu img.round_lft {
position: absolute;
left: -1px;
top: -1px;
}
.article_menu img.round_rht {
position: absolute;
right: -1px;
top: -1px;
}
.article_menu h2 {
font: bold 15px/22px Bookman Old Style, Times New Roman, Times, serif;
font-weight: bold;
color: #b7b2a2;
line-height: 39px;/*-text-indent: -9999px;-*/
}
</style>
</head>
<body>
<div id="article_menu_container">
<div class="article_menu">
<div class="no_rht_border">
<img src="/images/art_menu_hdr_lft_rou.png" alt="description" width="19" height="41" class="round_lft" />
<h2>SHOP BY PRODUCT:</h2>
</div>
<div class="article_menu">
<div class="no_lft_border">
<img src="/images/art_menu_hdr_rht_rou.png" alt="description" width="15" height="41" class="round_rht" />
<h2>SHOP BY COLOR:</h2>
</div>
</div>
</div>
</div>
</body>
</html>

JMayer

12-23-2010, 07:20 PM

I just would like to have a different graphic referenced in the bottom place. The reference above to the PHP and corresponding CSS is very similar to the PHP of the following two places. It is referencing the stylesheet where the referenced graphic (shopcardother) is referenced.
I want to know how to make the bottom two sections reference a different graphic. Do I just need to change a few lines of code, or implement multiple lines?

teedoff

12-23-2010, 07:43 PM

Your not very clear...lol Im confused as to what exactly you are wanting to accomplish. Like Excavator said, your site link would be ideal since we are talking images.

I want to know how to make the bottom two sections reference a different graphic.

If you mean you want to change the image link(reference) then you might look at changing the img src of this line

<img src="/images/art_menu_hdr_lft_rou.png" alt="description" width="19" height="41" class="round_lft" />