4 replies [Last post]
tifacola
tifacola's picture
Offline
newbie
United States
Last seen: 11 years 24 weeks ago
United States
Timezone: GMT-7
Joined: 2011-07-03
Posts: 9
Points: 12

I hate to post ALL my code in here especially when there's firebug these days. The URL to the temp site is Tifacola's Burning Hearts Concept

A few things are going on here.

1. Overflow:hidden isn't exactly working on all browsers. (it's not rounding the corners on hover)I have validated.
2. Because of the hidden overflow I can't see the drop down menu.

I don't want the hover state to square out the nav bar, but I also want to _maybe_ have sub menus which is less important to me than the nav bar having rounded corners. I am trying to work in only html5 now.

Can anyone think of some nifty ways to get both to work?

The CSS
........................................................................

@charset "utf-8";
/* CSS Document */
 
@import url(<a href="http://fonts.googleapis.com/css?family=Redressed&v1" rel="nofollow">http://fonts.googleapis.com/css?family=Redressed&v1</a>);
@import url(<a href="http://fonts.googleapis.com/css?family=Gravitas+One&v1" rel="nofollow">http://fonts.googleapis.com/css?family=Gravitas+One&v1</a>);
@import url(<a href="http://fonts.googleapis.com/css?family=Limelight&v1" rel="nofollow">http://fonts.googleapis.com/css?family=Limelight&v1</a>);
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
img	{
	display:block;
}
/* end reset code */
 
html, body{
	padding: 0;
	margin: 0;
	height: 100%;
	}
 
	body {
		background-image:url(images/bh_bg2.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-color:#2c011f;
	color:#924b5d;
	font-family: 'Redressed', arial, serif;
	font-size:16px;
	}
 
	/* the body*/
 
	.container {
		width: 970px;
		margin: 0 auto;
		}
	header {
		background-color:#0FF;
		}
 
		.headerleft {
			width: 350px;
			float:left;
			}
		.headerright {
			width: 350px;
			float:right;
			}
 
	.nav {
		height: 45px;
		width: 970px;
		background-image:url(images/divbackground2.png);
		border: 1px solid #000;
		border-color: #620145 #4f0037 #15000f #2c011f;
		overflow:hidden; !important
	}
 
	.logo	{
		position: absolute;
		height:1px;
		width:1px;
		top:20px;
		left:20px;
		}
 
	.content {
		width: 950px;
		padding: 10px;
		background-image:url(images/divbackground2.png);
		min-height: 600px;
		border: 1px solid #000;
		border-color: #620145 #4f0037 #15000f #2c011f;
		margin-top:5px;
		}
		.rounded {
			border-radius:10px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		}
 
	footer {
		width:970px;
		height:400px;
		background-color:#0F6
		}
		.clear
		{clear:both;}
 
		/*nav start heres */
 
#nav, #nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	line-height: 30px;
}
 
#nav a {
	display: block;
	width: 190px;
	height: 45px;
	border-right: 1px solid #8c3746;
	color: white;
	text-decoration: none;
	text-align: center;
}
 
#nav a:hover {
	background-color:#fd8f1c;
	background-image:url(images/navhoverback.jpg);
	background-repeat:repeat-x;
	color: white;
}
 
#nav li {
	float: left;
	position: relative;
}
 
#nav ul {
	position: absolute;
	z-index:100;
	width: 190px;
}
 
#nav li ul a { /* top button look and feel */
	width: 190px;
	height: auto;
	float: left;
}
 
#nav ul ul { /* second level buttons */
	top: auto;
	left: 190px;
	z-index:100;
	margin: 0 0 0 10px;
}
 
/* secondary menu behavior */
 
#nav ul a {
	background-color: green;
	color: white;
	overflow:visible;
}
 
#nav ul a:hover {
	background-color: purple;
}
 
/* tertiary menu behavior */
 
#nav ul ul a {
	background-color: blue;
	color: white;
}
 
#nav ul ul a:hover {
	background-color: red;
}
 
#nav li.last a {
    border:none;
}

The HTML
.....................................................................................

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Burning Hearts Burlesque - Seattle Burlesque Company</title>
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script> 
<script type="text/javascript" src="js/menu.js"></script> 
<script type="text/JavaScript" src="curvycorners.js"></script>
 
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<header>
<div class="headerleft"><img src="images/burning_hearts_burlesque_logo_2.png" alt="Burning Hearts Burlesque Seattle">
</div>
<div class="headerright">right</div>
</header>
<div class="clear"></div>
<div class="nav rounded">
<ul id="nav"> 
	<li class="curveleft"><a href="index.html">Home</a></li> 
	<li><a href="about.php">About</a></li> 
	<li><a href="girls.php">the Girls</a> 
    	<ul> 
   		  <li><a href="#">Battery Power</a></li> 
        	<li><a href="#">Expected Lifespan</a></li> 
        	<li><a href="#">Overall Range</a></li> 
    	</ul> 
    </li> <!-- closes Peapod nested list --> 
 
	<li><a href="shop.php">Shop</a></li> 
	<li class="last"><a href="contact.php">Contact</a> 
    </li> <!-- closes Chevy Volt nested list --> 
</ul>
</div>
<div class="content rounded">slfkja;slfjsa;lf30</div>
<footer>this is hte footer
</footer>
</div>
</body>
</html>

AndyA
AndyA's picture
Offline
Moderator
Brisbane
Last seen: 11 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2011-06-30
Posts: 39
Points: 41

Hey tifacola I suggest you

Hey tifacola

I suggest you try putting the border radius and background on the Menu Items instead of the Div.
That way you will still have rounded corners when you hover over the Menu.

tifacola
tifacola's picture
Offline
newbie
United States
Last seen: 11 years 24 weeks ago
United States
Timezone: GMT-7
Joined: 2011-07-03
Posts: 9
Points: 12

I thought about trying to

I thought about trying to give the first and the last button a class to round only the side corners of them both but can't seem to get the code to work something like

#nav li.roundedleft a {
border radius: 10px 0 0 10px;
_webkit ...............
_mox ...................etc
}

then in the html

<ul>
<li class="roundedleft"><a href="index.php">Home</li>

Something like that but it doesn't work. I think mostly 'cause I need to add the a:hover property to that line of css but can't figure out how.

tifacola
tifacola's picture
Offline
newbie
United States
Last seen: 11 years 24 weeks ago
United States
Timezone: GMT-7
Joined: 2011-07-03
Posts: 9
Points: 12

SOLVED!!!!

#nav li.roundedleft a:hover{
	-webkit-border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	border-radius-top-left: 10px;
	border-radius-top-right: 0;
	border-radius-bottom-left: 10px
	border-radius-bottom-right: 0;
	}

DURRRR! lol

AndyA
AndyA's picture
Offline
Moderator
Brisbane
Last seen: 11 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2011-06-30
Posts: 39
Points: 41

Congratulations

Congratulations Big smile