|
CSS - Rollover Buttons With Text
I need to get away from "text-graphics"
as much as possible because I am writing multilingual apps where the translator configures the translations of all the control words that appear on the menus. Besides it causes downloading lots of little images and this is not good. I would like to do a submit button in a form with a rollover, using the background-image property. Any text on that button is just superimposed on the image via html form. This will be bandwidth friendly as well as easier to make a translation, as I can use the same background image for all the buttons and if the user wants to reskin it all he has to do is put a different bg grc in the css file and resize it. Here is what I have to mess with right now: Code:
#button_btn1 {
font-family: Tahoma, sans-serif;
text-align: center;
font-weight: bold;
font-size: 12pt;
background-image: url(http://localhost/~me/testing/img/BlurMetalLa7.gif);
color: #003300;
border: none;
height: 24px;
width: 126px;
cursor: help;
}
Code: <form action="foo.php"> <input type='submit' id='button_btn1' name='submit' value='Click me' /> </form> It displays the image all right, now I want to rollover. It seems like I need to write a javascript invoked onMouseover to alter the background-image property. I don't know how to do this. I've looked at rollovers that fool with the visibility property and I've even messed with them myself, but they seem very dicey and with each new brower version they break in yet another novel way. Similar TutorialsI'm just wondering everyones opinions on what the best way to do a rollover navigation button is. Should I use two background images and on hover switch the background image? Is using one background image and moving the background up or down to switch between the images better? Is there another better way to do rollovers that i'm missing? I'm not really sure if I like the loading time that it takes to load the roll over image, and am wondering what method you guys use to achieve a similar effect. I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text. However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox. However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML. Is there a way to fix this or am I going to have to go back to JavaScript? [code] css: body { background: url(images/sips_menu.gif) no-repeat; } a.con { z-index: 1; } a.menu { z-index: 2; } /*set whole page as an invisible link*/ a.con:link,a.con:visited,a.con:hover,a.con:active { background-color: transparent; display: block; border: none; position: absolute; top: 0px; left: 0px; width: 790px; height: 540px; text-decoration: none; cursor: default; } /*set span for whole page as visible only when hovering over page*/ a.con span { display:none; } a.con:hover span { color: black; font-weight: normal; display: block; text-decoration: none; font-size: 11px; font-family: arial, sans-serif; text-align: left; position: absolute; top: 125px; left: 580px; width: 170px; height: 150px; } /*menu links - when mouse is over these it is not over general page anchor*/ a.menu:link,a.menu:visited,a.menu:hover,a.menu:active { background-color: white; border: 1px solid black; color: #617AB2; font-size: 12px; font-weight: bolder; font-family: arial, sans-serif; text-decoration: none; text-align: left; padding: 4px 6px 4px 6px; } a.menu:hover { color: red; } /*menu link rollover text visible when mouse over*/ a.menu span { display: none; } a.menu:hover span { color: black; font-weight: normal; display: block; } /* Ids to position each of the menu links */ #one { position: absolute; top: 180px; left: 20px; } #two { position: absolute; top: 250px; left: 250px; } #three { position: absolute; top: 380px; left: 220px; } #four { position: absolute; top: 320px; left: 420px; } #five { position: absolute; top: 450px; left: 565px; } /* Ids to position the span tags*/ #a { position: absolute; top: -55px; left: 560px; width: 170px; } #b { position: absolute; top: -125px; left: 330px; width: 170px; } #c { position: absolute; top: -255px; left: 360px; width: 170px; } #d { position: absolute; top: -195px; left: 160px; width: 170px; } #e { position: absolute; top: -325px; left: 15px; width: 170px; } xhtml: <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>title</title> <link rel="stylesheet" href="menu.css" type="text/css" /> </head> <body> <p><a class="con" href="#"><span>text</span></a></p> <p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p> <p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p> <p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p> <p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p> <p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p> </body> </html> I'm having a problem getting the text of an <a> tag to be what I want where I want. No one in the javascript forum wants to tackle this. maybe it is a css thing. I made this interlocking tabbed menu which I do by javascript updating the position of the background graphic and its neighbor. I have done buttons before with a background and text overlayed. but they were always <input>'s and whatever I put in the value field just kinda showed up on top of the background graphic. These are actually <a>'s I assumed the text I put in between the <a> and the </a> tag would just show up but it doesn't. I tried making special divs for them but then I run in to position problems. If I make it absolute the first one is fine, then they all pile on top of it. If I make it relative, NONE of them show. Here is a test http://colleenweb.com/tests/bartest.php There is nothing like css for turning my brain into industrial waste. This has to be doable. Someone who understands this stuff please advise? Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks. i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; Hey, In Firefox, Safari and Chrome etc, the poll in the sidebar on my website looks perfect: Lil Wayne HQ But in Internet Explorer, it displays the text underneath the radio button, instead of to the right of the button. This is what the poll currently looks like in IE: But this is what I would like it look like, and what it already looks like in other browsers: Anyone know how I can fix this with css? And I am using a IE specific style sheet. Thanks Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button? Hi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? Hey folks, I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over. Here's the page in question. Here's the CSS I"ve used for it: Code:
/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}
#landingMenu li {
float:left;
font-size:14px;
font-weight:bold;
}
#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px;
padding-top:15px;
}
/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE)
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/
#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}
* html #landingMenu li li { margin-left:20px; }
#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }
* + html #landingMenu li li { margin-left:-160px;width:150px;}
* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }
#landingMenu li ul {
display: none;
position: absolute;
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}
#landingMenu li > ul { top: auto; left: auto; }
#landingMenu li:hover ul, li.over ul { display: block; }
/* END LANDING MENU */
Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client. Any thoughts? I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. Hi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html I've finally finished a site, but I am having slight problems with the rollover menu. I was able to post it online, so check out this page, first in Firefox, then in IE. http://uwopartners.org/students/schuhm65/Plexus/main.html I believe the problem is that the conditional IE statements add a table within the main menu links. This is to get around using javascript, but when you hover over the main links, the background is changed and expanded to include the submenu. Can anyone figure out a work around for this, so the appearance is similar to Firefox? Here is the css: Code:
html {
margin:0;
padding:0;
}
body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}
.clear {
margin:0;
padding:0;
clear:both;
font-size:0;
line-height:0;
}
/* Header container */
#header {
margin: 0;
padding: 0;
border: 1px solid #000;
color: #fff;
text-align: center;
background: url("images/classroom.gif") repeat-x;
}
img#logo {
margin: 10px 0px 0px 0px;
border: 4px solid #FFF;
}
#header h1 {
margin: 5px 0px 5px 0px;
font-size: 2.5em;
font-weight: bold;
letter-spacing: 0.125em;
}
#banner
{
margin: 0;
padding: 0;
background: #235 url("images/banner.gif") no-repeat 50% 50%;
border: 1px solid #000;
}
#banner img
{
width: 0;
margin-left: -200px;
padding-left: 1px;
}
/*topNav Container */
#topNav {
margin: 10px 0px;
padding: 0;
/* border: 1px solid #ff0; */
}
#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav {
margin: 0px 0px 0px 153px;
padding: 0px;
/* border: 1px solid #0f0; */
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li#nav-foundation, #nav li#nav-submission, #nav li#nav-recipients, #nav li#nav-volunteer {
margin: 0px 0px 0px 8px;
padding: 0;
float: left;
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-repeat: no-repeat;
background-position: 50% 100%;
}
#nav table {
border-collapse: collapse;
}
#nav a.mainMenu {
display: block;
font-size: 18px;
color: #FFF;
background-color: #c7013f;
text-decoration: none;
text-align: center;
}
#nav ul ul {
margin: 0 auto;
padding: 0;
display: none;
width: 90%;
/* border: 1px solid #0f0; */
}
#nav ul ul li {
margin: 4px 0px;
padding: 0;
border: 1px solid #fff;
}
#nav table a {
font-size: 15px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background-color: #c7013f;
}
#nav ul ul li a {
font-size: 15px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background-color: #c7013f;
}
#nav ul li:hover a.mainMenu , #nav ul a.mainMenu:hover {
background-color: #235;
}
#nav ul li:hover ul, #nav ul a.mainMenu:hover ul{
display: block;
}
#nav ul ul li:hover a, #nav ul ul a:hover {
background-color: #235;
}
/* nav Headings
#foundation #nav-foundation a.mainMenu, #submission #nav-submission a.mainMenu,
#volunteer #nav-volunteer a.mainMenu, #recipients #nav-recipients a.mainMenu {
background: #235;
}
#charter #nav-foundation ul, #committee #nav-foundation ul, #schedule #nav-foundation ul {
display: block;
}
#charter #nav-foundation ul #nav-charter a, #committee #nav-foundation ul #nav-committee a,
#schedule #nav-foundation ul #nav-schedule a {
background: #235;
}
*/
/* Side Navigation */
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
#sideNav a {
font-size: 1em;
color: #fff;
text-decoration: none;
}
#sideNav #calendar {
margin: 0px;
}
#sideNav img {
border-style: none;
width: 150px;
height: 150px;
}
#sideNav a:hover {
font-weight: bold;
}
/* Main Content Container */
#main {
float: auto;
padding: 10px;
border: 1px solid #000;
background: #fff;
margin-left: 165px;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
#footer a {
color: #fff;
font: underline;
}
#footer a:hover {
font-weight: bold;
letter-spacing: .1em;
}
And here is the html: 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" xml:lang="en" lang="en"> <head> <title>Welcome!</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link href="style.css" rel="stylesheet" media="screen" type="text/css" /> </head> <body> <!-- Header --> <div id="header"> <span> <img id="logo" src="images/plexusLogo.jpg" alt="Plexus"/>®</span> <h1>Helping Hands</h1> <div id="banner"> <img src="images/banner.gif" width="200" height="30" alt="Providing Resources - Supporting Communities - Affecting Lives"> </div> </div> <!-- Navigation Menu --> <div id="topNav"> <!-- Search Box --> <div id="searchBox"> Welcome, <b>John Doe</b>! [<a href="#">Admin</a>] [<a href="#">Sign Out</a>] <form action="" name="search"> <input type="text" size="14" name="searchQuery" /> <input type="submit" value="Search" /> </form> </div> <div id="nav"> <ul> <li id="nav-foundation" style="background-image: url(images/foundation.jpg)"> <a class="mainMenu" href="#">Foundation <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-charter"> <a href="#">Charter</a> </li> <li id="nav-committee"> <a href="#">Committee</a> </li> <li id="nav-schedule"><a href="#">Schedule</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-submission" style="background-image: url(images/submission.jpg)"> <a class="mainMenu" href="#">Submission <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-guidelines"> <a href="#">Guidelines for Giving</a> </li> <li id="nav-submit"> <a href="#">How to Submit a Request</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-recipients" style="background-image: url(images/recipients.jpg)"> <a class="mainMenu" href="#">Recipients <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li> <a href="#">Sub One</a> </li> <li> <a href="#">Sub Two</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-volunteer" style="background-image: url(images/volunteer.jpg)"> <a class="mainMenu" href="#">Volunteer <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-program"> <a href="#">Volunteer Program</a> </li> <li id="nav-tracking"> <a href="#">Tracking Hours</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <div class="clear"> </div> </ul> <div class="clear"> </div> </div><!-- nav --> <div class="clear"> </div> </div><!-- topNav --> <!-- Side Navigation --> <div id="sideNav"> <div class="box" style="background-image: url(images/CompanyEvents.gif)"> <a href="#">Check out the events at Plexus!</a></div> <div class="box" style="background-image: url(images/CommunityEvents.gif)"> <a href="#">Check out the community events sponsored by Plexus!</a></div> <div class="box" style="background-image: url(images/EventPhotos.gif)"> <a href="#">Check out the photos from previous events!</a></div> <div class="box" style="background-image: url(images/AddEvent.gif)"> <a href="#">Check out the photos from previous events!</a></div> <div id="calendar"> <a href="#"><img src="images/calendar.jpg"/></a> </div> </div> <!-- Main Content --> <div id="main"> The Foundation's goal is to provide support that can have a meaningful impact in markets and communities that are strategically alligned with Plexus Corp.'s mission as the Product Realization Company. To accomplish this goal, the PCCF's charitable giving is allocated into three primary categories: <br /><br /> <ul style="padding-left: 32px;"> <li><b>1. Technology:</b> Supporting innovation and technology-related education</li> <li><b>2. Healthca </b> Enhancing the quality of medical care</li> <li><b>3. Community:</b> Making the communities we live in a better place</li> </ul> <br />Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla, rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris, imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula. <br /><br />Sed vel urna. Quisque mattis orci sit amet dolor. Sed commodo felis at diam. Aenean ut nisl a mauris varius hendrerit. Vivamus feugiat risus in lacus. Ut eleifend velit. In blandit. Mauris bibendum, nunc at ullamcorper egestas, eros nibh faucibus diam, tincidunt placerat purus justo vel sapien. Curabitur feugiat scelerisque odio. Nullam nec augue ut libero faucibus ornare. Suspendisse tortor mauris, luctus sit amet, tempor vel, facilisis ac, lacus. Phasellus ultrices, massa eget consequat dapibus, dui felis interdum sapien, sed fringilla magna neque eu est. Vestibulum luctus vehicula eros. <br /><br />Phasellus massa metus, blandit eget, porttitor at, faucibus ac, lorem. Integer id augue vitae magna ullamcorper varius. Nam id turpis. Integer venenatis tincidunt est. In hac habitasse platea dictumst. Proin id turpis fermentum neque sodales ullamcorper. Quisque ante. Morbi sit amet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nulla erat, sollicitudin in, imperdiet vitae, elementum eu, sapien. Nulla nonummy nisi eget quam. Suspendisse potenti. <br /><br />Morbi quis enim ac libero pulvinar scelerisque. Morbi eleifend, nulla eget egestas tincidunt, augue libero rutrum neque, non pharetra orci risus vel diam. Nunc eget lorem. Integer vitae erat. Donec non diam. Nulla a risus sit amet orci consectetuer tincidunt. Morbi sapien. Ut scelerisque, ipsum quis egestas blandit, magna nisl laoreet ligula, at ornare lorem augue nec purus. Praesent scelerisque, lectus sed venenatis lacinia, ipsum nulla accumsan nibh, id dapibus lectus libero ultricies ipsum. Etiam aliquet vehicula nisi. Praesent consectetuer, odio eget posuere blandit, dui sapien pharetra enim, id iaculis elit est sed libero. Praesent in eros non augue commodo nonummy. <br /><br />Nulla placerat feugiat neque. Vivamus commodo condimentum neque. Aenean at enim et justo malesuada molestie. Cras lacinia tincidunt magna. Vivamus convallis, tellus nec convallis blandit, diam nisi facilisis justo, ut consectetuer lectus neque et sapien. Quisque mattis dolor vel mi. Aliquam risus odio, euismod at, sodales non, auctor a, leo. Pellentesque imperdiet odio quis velit. Quisque pharetra, quam vel volutpat molestie, mi mauris auctor neque, eget tempus massa nibh vel enim. Donec vitae arcu at pede feugiat suscipit. Quisque sollicitudin. Cras ac enim a lorem nonummy consectetuer. Donec tortor nulla, porttitor mattis, molestie eu, pharetra elementum, libero. Integer nonummy viverra quam. Sed posuere urna non elit. Morbi et sem quis neque tempor tincidunt. <br /><br />Nam velit. Nam eget lectus sit amet nibh aliquam pulvinar. Pellentesque quam. Integer mauris est, dapibus eu, laoreet at, vehicula nec, tellus. Nam urna diam, nonummy ac, dictum ut, accumsan id, orci. Ut iaculis. Praesent sapien quam, vehicula vitae, imperdiet vitae, dictum at, lorem. Morbi nisl purus, interdum nec, sollicitudin at, eleifend vel, sem. Phasellus lacinia. Duis ut ligula. Morbi ut felis ac quam feugiat eleifend. Vestibulum nibh mauris, interdum ac, vehicula a, porttitor accumsan, ligula. Aenean vehicula tortor vel turpis. In hac habitasse platea dictumst. Suspendisse id sem. Sed fermentum, nisi at vestibulum cursus, sem nibh aliquet arcu, non vehicula turpis felis et dui. Pellentesque ligula augue, hendrerit quis, rhoncus vitae, hendrerit fringilla, nibh. </div> <div id="footer"> <a href="#">Feedback</a> | <a href="#">Contact</a> | <a href="#">Site Map</a> | <a href="#">Privacy</a> | <a href="#">Legal</a> <br /><br /> Donec aliquet tincidunt velit. Aliquam erat volutpat.<br /> Mauris ante. Suspendisse a leo ut leo tristique porta.<br /> Aliquam iaculis sem tristique massa fringilla faucibus. </div> </body> </html> |
|||||||