How to Get a Banner to Span the Length of a Web Page

I am a new web developer, and I was asked to create a banner that will span across an entire page using four pictures: one having an "X" to close the message when clicked, a right-rounded side of the dialog box, a center that needs to be stretched across the length of the page, and a left-rounded side of the message box. In addition, I need to add text over the center of the image, similar to the attached image. How would I use the four small images to make one large image that can be used on a page to make a larger button appear to be there?

Thanks in advance for your time and your help. Any help that you can provide would be greatly appreciated. Complete Message to Be Displayed CenterofMessage CloseButtonOnImage RoundLeftSideMessage RoundRightSideMessage
thenthorn1010Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

thenthorn1010Author Commented:
The best starting point that I have is using the code:


                <table border="0" width="100%">
                <tr>
                    <td>
                        <span>
                        <img src="/imm/LeftBG.gif" width = "100%" height = "50" />
                        </span>
                    </td>
                    <td>
                        <span>
                        <img src="/imm/WarningCenterBG.gif" width = "100%" height = "50" />
                        </span>
                    </td>
                    <td>
                        <span>
                        <img src="/imm/WarningRightBG.gif" width = "100%" height = "50" />
                        </span>
                    </td>
                </tr>
                </table>

When I use the code in my ASP .NET page, I end up with the attached results. I am unable to get the images to equally be spaces across three cells in the table. Can someone help me by telling me what I am missing in my ASP .NET code? All help is greatly appreciated. CurrentResults
0
Michel PlungjanIT ExpertCommented:
I would have a look here

http://www.google.com/search?q=full+width+banner+css+2011

in case no-one shows up here
0
Steve BinkCommented:
Here is an interesting method I found recently:

<div class="button_wrapper"><span class="button_l">&nbsp;</span><span class="button_r">&nbsp;</span><span class="button_c">Your stuff here</span></div>

#top_nav_menu li.menu_item:hover {
  color:#131b20;
  background-color:#4ea9d0;
  border:1px solid #3294bd;
  cursor:pointer;
}

#top_nav_menu li.menu_item a {
  text-decoration:none;
}

.button_wrapper {
  display:inline-block;
  position:relative;
  height:25px;
  overflow:hidden;
  white-space:nowrap;
  margin-top:20px;
}

.button_wrapper .button_c,.button_wrapper .button_c a {
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Helvetica, Sans-Serif;
  font-style:normal;
  font-weight:bold;
  font-size:11px;
  position:relative;
  display:inline-block;
  text-align:center;
  color:#000000 !important;
  line-height:25px;
  height:25px;
  padding:0 9px !important;
  overflow:visible;
  cursor:pointer;
}

.button_wrapper .button_l,.button_wrapper .button_r {
  display:block;
  position:absolute;
  height:85px;
  background-image:url('/images/button.png');
}

.button_wrapper .button_l {
  left:0;
  right:13px;
}

.button_wrapper .button_r {
  width:419px;
  right:0;
  clip:rect(auto, auto, auto, 406px);
}

.button_wrapper:hover .button_l,.button_wrapper:hover .button_r {
  top:-30px;
}

Open in new window

the button image
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve BinkCommented:
The CSS I included is specific to a button I used on a website.  You should be able to modify it to show a larger banner with little trouble.
0
RouchieCommented:
Hey there.

Please don't mess about with tables for this, they are well beyond their sell-by date.  The solution for standards compliant coding is to use new CSS, but allow older browsers to also show the content they are able without any bad side effects.  Here is a possible solution for you, the older browsers simply don't show rounded corners or shadows...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<style type="text/css">
		/* create a container for your content (only needed in this demo */
		body {background-color:#eeeeee}
		.container {width:75%; border:1px solid black; background-color:White; padding:1em}
		/* the banner code */
		.mybanner {background-color:#d99da5; position:relative; padding:1em 2em 1em 1em}
		a.closeLink {font-size:200%; font-weight:bold; color:black; display:block; width:1em; position:absolute; top:5px; right:5px; text-decoration:none}
		/* fancy stuff - shadow and rounded corners - that gets ignored by older browsers */
		.mybanner {border-radius:1em; box-shadow:3px 2px 8px rgba(0, 0, 0, 0.53)}
	</style>
	<script type="text/javascript">
	//<![CDATA[
		function hideElement(elementId) {
			document.getElementById(elementId).style.display = "none"; 
		}
	//]]>
	</script>
</head>
<body>
	<div class="container">
		<p>Hello World</p>
		<div id="mybanner01" class="mybanner">
			Here is my banner that can contain <a href="http://microsoft.com">links</a> and <span style="font-weight:bold">formatting</span>
			<a href="#" onclick="hideElement('mybanner01'); return false;" class="closeLink">X</a>
		</div>
		<p>Hello World</p>
	</div>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.