Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts

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

    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:

    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)
    Code:
    <div id="article_menu_container">
    				<!-- start first article_menu -->
    				<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>
    					
    				<!-- end first article_menu -->
    				<!-- start second article_menu -->
    				<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>

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Can anybody help? Do you need me to clarify anything?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
                    <!--end no_rht_border--></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>
                	<!--end no_lft_border--></div>
                <!--end no_lft_border--></div>
            <!--end article_menu--></div>
        <!--end article_menu_container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •