I set up a smaller gallery of pictures in my web proj website:
http://younani.com/finalsite/gallery.html
To me the way the pictures sit do not look like nice. Is there a way to put borders inbetween the pictures and around it. Make it look more organize? I tried to border it but it just moved the pictures all over the script and I wasnt able to put borders in between.
CSS:
#header {
margin: 0 auto;
width: 1150px;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#center2 img
{
opacity:0.5;
-webkit-transition: opacity 1s linear;
}
#center2 img:hover
{
opacity:1.0;
-webkit-transition: opacity 1s linear;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; }
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center2"><img src="Meadowthistle.jpg" height="113" width="150" alt="" /> <img src="saffron.jpg" height="113" width="150" alt="" /> <img src="dahlias.jpg" height="113" width="150" alt="" /> <img src="bachelorbutton.jpg" height="113" width="150" alt="" /> <img src="hrysanthemum.jpg" height="113" width="150" alt="" /> <img src="PinkLily.jpg" height="113" width="150" alt="" /> <img src="pinkroses.jpg" height="113" width="150" alt="" /> <img src="RectifiedFlowers.jpg" height="113" width="150" alt="" /> <img src="rhodendron.jpg" height="113" width="150" alt="" /> <img src="gazaniadaisy.jpg" height="113" width="150" alt="" /> <img src="GreenFlower3.jpg" height="113" width="150" alt="" /> <img src="nellwerner.jpg" height="113" width="150" alt="" /> </div>
<!-- Right Column -->
<div id="right">
<p><strong><span style="text-decoration: underline;">Meaning of Flower Colors</span><strong></strong></strong></p>
<p>Pink Caring</p>
<p>Purple Royalty</p>
<p>Red Declaration of love</p>
<p>Yellow Hopelessly in love</p>
<p>Violet Faithfulness</p>
<p>Red & White Unity</p>
<p>Bronze Excitement</p>
<p>Blue loyalty</p>
<p>Green Growth</p>
<p>Orange Warmth</p>
<p>Indigo Emotions</p>
<p>White Purity</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
Try this css
#center2 a img {
border: 2px solid red;
height: 100px;
margin-top: 4px;
vertical-align: top;
width: 125px;
}
Results is
try
#center2 > a {
border: 2px solid red;
display: block;
width: 150px;
}
CSS
#center2 img {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
border: solid 2px #F0FF49;
float: left;
margin: 6px;
}
Related
a.navigation:link {color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;}
a.navigation:visited {color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
The css above is what I'm using for the unvisited page and visited page. I want a visited page that has been left to revert to unvisited css style.
I usually use the same settings for :link and :visited, like this:
a.navigation:link, a.navigation:visited {
color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;
}
And I also use the same settings for :hover and :active:
a.navigation:hover, a.navigation:active {
[... your settings ...]
}
Solution
The best option is to disable that completely - Like so:
a:visited {
text-decoration: none;
}
This will remove it from showing the default visited color.
Refrences
W3Schools
<!DOCTYPE html>
<html>
<head> <title> HOME </title>
<style>
#Header {background-color: rgb(137,184,211);
background-repeat: no-repeat;
background-position: center top;
background-size: 1400px 100px;
padding-top: 0px;
padding-bottom: 100px;
padding-left: 0px;}
p.navigation {position:absolute;
margin-left: 800px;
margin-top: 45px;}
a.current:link, a.current:visited, a.current:hover, a.current:active
{color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
a.navigation:link {color: white;
text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;}
a.navigation:visited, a.navigation:hover,
a.navigation:active
{color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
</style>
</head>
<body>
<div id= "Header">
<p class= "navigation">
HOME
<a href= "aboutus.html" target= "_self" class= "navigation">
ABOUT US </a>
<a href= "archive.html" target= "_self" class= "navigation"> ARCHIVE
</a>
<a href= "contactus.html" target= "_self" class= "navigation">
CONTACT US </a>
</p>
</div>
</body>
</html>
Website:
http://younani.com/finalsite/finalindex.html
My header aligns when the browser is not maximized. When I maximized it to moves and is not aligned. How can I align it so that it will never move. I want it to be in the exact same position as the rest of the content material underneath it
CSS:
#header {margin-left:50px; align: center;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; box-shadow:inset 1px 1px 10px 1px #000000;}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" align="left:100px" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p>Buy THREE of the any vases and receive the fourth one FREE!</p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
you are using margin-left:50px; use instead margin :0 auto;
#header {
margin: 0 auto;
width: 1150px;
}
what margin-left it does
so it will be 50px left form the browser and on difference width it will looks difference so the better approach is use margin:0 auto;
margin:0 auto makes always in center
Define your #header with or margin : 0 auto as like this
#header {
margin: 0 auto;
width: 1150px;
}
Results is
Your content should be wrapped in a container div that contains all of your content. it can be fixed width for consistency if that's what you're looking for, or fluid using other css properties to support that.
I am trying to put a header onto my website. I've tried numerous times I just cant jot down the correct way. When I put an image it wont fit into the size of the header(the rectangle where it says Younani Flower's). Why is this issue occuring? I have no left the area empty, because the image usually covers the page.
Website: http://younani.com/finalsite/finalindex.html
CSS:
#header {text-align: center;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-image:url('backgroundflower5.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
width: 960px;
margin: 0 auto;
}
#container div {
border: 1px solid;
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; }
#left,
#center,
#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; }
Homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="container" class="clearfix"><!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p></p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
If you add the header background as follows it should work:
#header {
background-image: url(image_path);
}
If you remove the text inside, you will have to specify the dimensions of the header. Since the width is implicitly 100% for a block element, you'll only need to specify the height. In my browser the height with text is 81px.
I have a input field with search icon. When the input field is pressed/focused I want to have a close icon show up on the input box as in the below image
jsfiddle
<div id="search-controls">
<input type="text" class="search-box in-acvtive" placeholder="e.g. restaurant name, cuisine" />
</div>
#search-controls {
height: 68px;
padding: 5px;
}
#search-controls input.ui-input-text {
height: 26px;
background: url('../img/search-icon.png') 99.5% center no-repeat;
background-size: 16px 14px;
border: 1px solid #999;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0px 5px 10px -5px #BBB;
-webkit-box-shadow: inset 0px 5px 10px -5px #BBB;
box-shadow: inset 0px 0px 5px 10px -5px #BBB;
padding: 6px 5px 0 5px;
margin: 0 0 5px 0;
font-size: 15px;
line-height: 15px;
}
#search-controls input.ui-input-text.ui-focus {
border: 1px solid #9E0249;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: none;
moz-box-shadow: none;
-webkit-box-shadow: none;
background: url('../img/search-active-icon.png') 100% center no-repeat;
}
Try something like this - DEMO
HTML
<div id="header" class="search" data-role="header" data-position="fixed">
<div id="search-controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
<span> x </span>
</div><!-- /search-controls -->
</div>
CSS
#search-controls span {
display: none;
position: absolute;
top: 11px;
right: 35px;
height: 22px;
width: 22px;
background: #bbb;
border-radius: 20px;
color: #fff;
font: 400 20px/22px 'Lucida Console', sans-serif;
text-align: center;
border: 1px solid #bbb;
cursor: pointer;
}
#search-controls input.ui-input-text.ui-focus ~ span {
display: block;
}
A website I'm working on, www.flynntec.com, is having problems with IE8. I'm assuming it's happening in 6 and 7 as well. Firefox/Chrome both work fine.
I have two Ads in the CSS3 dropdown (Excel) that when IE mouses over the ads, the dropdown closes. IE8 can hover over EVERYTHING else in the dropdown, but as soon as it hits the ads, the dropdown closes immediately.
Any thoughts?
CODE ADDED
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" />
<meta name="description" content="Microsoft Office Tutorials - Excel, Word, PowerPoint, Access" />
<title>Microsoft Office Tutorials - Excel, Word, PowerPoint, Access</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(media/background.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div align=center id="container">
<div id="banner"><img src="media/banner.jpg" width="800" height="120" alt="Microsoft Office Tutorials Banner" /></div>
<div id="content">
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Microsoft Office Tutorials</h2>
</div>
<div class="col_2">
<p>This site is dedicated to training people to use Microsoft Excel, Word, PowerPoint and Access. Whether you're just beginning or a professional, there are resources here for you.</p>
<p>Our philosophy is different. We have created our own tutorials, but we've also leveraged the power of the internet to gather the world's best training tutorials on the Microsoft Office Suite.</p>
</div>
<div class="col_2">
<h2>Our Philosophy</h2>
</div>
<div class="col_1">
<img src="media/FreeMini.jpg" alt="Always Free" width="125" height="48" vspace="10" />
</div>
<div class="col_1">
<p>We are dedicated to providing you the best information. <b>Always Free </b></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li>Excel<!-- Begin Excel Item -->
<div class="dropdown_5columns"><!-- Begin ExcelContainer -->
<div class="col_5">
<h2>Microsoft Excel</h2>
</div>
<div class="col_1"> <h3>Overview</h3>
<p class="black_box">Microsoft Excel is the world's most popular spreadsheet creation tool.</p>
</div>
<div class="col_1">
<ul class="greybox"><h3>Beginner</h3><li>Welcome to Excel</li>
<li>Calculations</li>
<li>Functions and Formulas</li>
<li>Formatting</li>
<li>Creating Charts</li>
<li>More...</li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Intermediate</h3><li>Freezing Panes</li>
<li>The =IF Formula</li>
<li>Conditional Formatting</li>
<li>The Date in Excel</li>
<li>Drop-Down Lists</li>
<li>More...</li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Advanced</h3><li>Using =VLOOKUP</li>
<li>Pivot Tables</li>
<li>Using the Goal Seek Feature</li>
<li>Templates</li>
<li>Macros</li>
<li>More...</li>
</ul>
</div>
<div class="col_1">
<ul class="greybox"><h3>Sponsor</h3><p><script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Support */
google_ad_slot = "8875829615";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_5">
<h2>Additional Free Resources</h2>
</div>
<div class="col_3">
<img src="media/youtube-logo.jpg" alt="YouTube Picture" name="youtube" width="90" height="70" class="img_left imgshadow" id="youtube" />
<p>If you prefer to learn visually, YouTube is the best free source for Excel tutorials in the world. We have compiled the best, most popular Excel tutorials from YouTube and put them here for your convenience. </p>
<br />
<img src="media/microsoft-logo__111129012732.jpg" alt="" name="microsoft" width="90" height="24" class="img_left imgshadow" id="microsoft" />
<p>Microsoft has some of the best tutorials in the world listed on their website. Microsoft Training can be found here.</p>
<br />
</div>
<div class="col_5">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Excel CSS3 Dropdown */
google_ad_slot = "0975939945";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div><!-- End Excel container -->
</li><!-- End Excel Item -->
CSS
#charset "utf-8";
/* CSS Document */
#container {
}
#banner img{
border:7px solid #FFF;
border-radius: 7px;
-moz-border-radius: 7px
-webkit-border-radius: 7px;
}
#banner {
padding-bottom: 0px;
}
#content {
}
#footer {
}
#menu {
list-style: none;
width: 774px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #003910;
background: -moz-linear-gradient(top, #FFF, #003910);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#003910));
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
border: 1px solid #FFF;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color: #161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right: 21px;
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 8px;
}
#menu li:hover .drop {
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}
.dropdown_1column {width: 146px;}
.dropdown_2columns {width: 284px;}
.dropdown_3columns {width: 422px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 740px;}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
Thanks!
This issue is caused by a particular wmode setting on the Flash object. For what you're after, you need the wmode to be opaque, and not window, direct, gpu or the default. However, since you are using Google ads you have absolutely no control over the content (you can't even use JavaScript to change it because of cross-domain issues). This is probably deliberate on Google's part, to prevent users from hiding ads by covering them up with another element, but frustrating when trying to have anything legitimiately on top of it.
The best suggestion I can come up with is to have the container for the ad change its visibility style to hidden while the menu is shown, then change it back to visible afterward. It'll look messy, but at least it won't be handled on top of your actual content.