• Locked
1 reply [Last post]
Fri, 2010-08-13 21:39
hcdave
hcdave's picture
User offline. Last seen 1 year 40 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2010-08-13
Posts: 1
Points: 2

Hello All,

I am trying to put a menu along with the website logo into a div and have the div span 100% of the page. I want the icon to float right and the menu buttons to float left - the problem is, when I add 'float:right' to the SCC for the logo, the background color of the div it is in resets to white.

Here's the HTML:

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Template</title>
        <link href="optional_files/_HTML/HTML.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
   	<div class="menu_panel">
   	  <div class="button_panel">
                <a class="button" href="#"><span>About&nbsp;MSRH</span></a>
                <a class="button" href="#"><span>Services</span></a>
                <a class="button" href="#"><span>Products</span></a>
                <a class="button" href="#"><span>Investment</span></a>
                <a class="button" href="#"><span>Affiliates&nbsp;&&nbsp;Partners</span></a>
                <a class="button" href="#"><span>Board&nbsp;of&nbsp;Directors</span></a>
                <a class="button" href="#"><span>FAQ</span></a>
                <a class="button" href="#"><span>Contact&nbsp;Us</span></a>
        </div>
        <img class="logo" src="website_images/logo.png" width="134" height="112" />
      </div>
	</body>
</html>

And the CSS:

@charset "utf-8";
/* CSS Document */
 
html, body {
  margin: 0;
  padding: 0;
} 
 
div.menu_panel {
	position:relative;
	width:100%;
	min-width:1000px;
	background-color:#CCC;
	padding:5px 5px 0px 5px;
}
 
div div.button_panel {
	float:left;
}
 
div img.logo {
	margin:0px 10px 0px 45px;
	float:right;
}
 
/*blue buttons*/
a.button {
	border:none;
	outline:none;
	text-decoration:none;
	float:left;
	cursor:pointer; 
	font-weight:bolder; 
	padding:0px 15px 0px 0px;
	margin:5px 0px 0px 0px;
	background:url(../../website_images/btn_blue_right.png) right no-repeat; 
	font-size:0.8em;
	height:24px; 
}
a.button span {
	border:none;
	outline:none;
	position:relative;
	float:left;
	padding:0px 0px 0px 15px; 
	margin:0px 0px 0px 5px;
	line-height:24px;
	background:url(../../website_images/btn_blue_left.png) left no-repeat;
	color:#fff;
}
 
a.button:hover {
	background:url(../../website_images/btn_blue_right_hover.png) right no-repeat;
}
a.button:hover span {
	background:url(../../website_images/btn_blue_left_hover.png) left no-repeat; 
}

I have attached the images in case you want to see what I see....
Any help is most appreciated!

Dave.

AttachmentSize
btn_blue_left.png430 bytes
btn_blue_left_hover.png452 bytes
btn_blue_right.png386 bytes
btn_blue_right_hover.png407 bytes
logo.png7.94 KB
Top
Tags:
Fri, 2010-08-13 21:46
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 17 weeks 4 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

research enclosing floats

research enclosing floats

Oh, and your navigation should be structured as a list using the Sprite technique.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
  • Locked