|
CSS - How To Place An Image In The Menu Navigation
Hi,
I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. Similar TutorialsHey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? Code: <!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
does anyone know how i can place my menu on the right spot. this is the website Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. Hello, I have made playersnutrition.com As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top???? I'm working on a drop down menu that's entirely in CSS, and since it contains several levels and some go below the visible part of the page needing scrolling down (not good) - I need to have the sublists remain in place when the mouse is no longer over. Is there an easy way to do that without involving Javascript? Or if that is needed, how exactly? Please help!!! Thank you! Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi, I have a table in my website and i want in one column to place an image at the bottom of it (and stay there when the height of the table changes). The column already has a repeated background image. Thanks I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it. This is what I want it to look like image link This is what does look like web page link Here is the CSS css link How can I get abosolute vertical placement of the text best for firefox and IE? I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible. Thanks! Hello, I want to create Vertical Navigation menu with pure CSS. Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus. Example: please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm Under Overview:How it works section: Please click on See the finished SwapClass menu link. In that page they have left hand side vertical nav-menu with sub-menus open under same navbar. I want to create like above example. Is there any tutorials or open source for this? Thank you, tec I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again How can do that using css and html? I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile Site Link:staging.phantasea.net/cpi/ CSS I added: Code: #navigation-menu ul.sf-menu > li > a {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #ffffff;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}
ORIGINAL CSS: Code: /* Begin Main Navigation Menu */
#navigation-menu {
position:absolute;
right:20px;
top:5px;
font-size:14px;
height:40px;
}
.navigation-menu {
position:relative;
z-index:22;
}
#main-menu {
background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
width: 100%;
position:relative;
z-index:101;
height:56px;
margin-bottom:-6px;
}
#dropdown-holder {
display: block;
position:relative;
}
#navigation-menu > ul {
padding-top: 7px;
}
#navigation-menu > * {
padding:0;
margin:0;
font-size: 1em;
}
#navigation-menu ul.sf-menu {
padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
background:none;
list-style: none;
float: left;
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
background: url(../images/menu-btn_r.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #E8E8E8;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu a {
line-height: 1.2em;
padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(../images/menu-btn_l.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li {
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #FFF;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #6A6A6A;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}
/* End Main Navigation Menu */
Hello I have a site uptogether but having a problem with my top navuigation.I have my whole pag centered in the container but the navigation is to the left and i cant seem to move it.Here is the code I have used for the navigation :- #navigation { BACKGROUND: url(../_images/navbg.jpg) #0038ba repeat-x; WIDTH: 700px; HEIGHT: 35px; } #menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #ffffff; PADDING-TOP: 11px } #menu .item { PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none } #menu .item A { COLOR: #ffffff; TEXT-DECORATION: none } #menu .item A:hover { COLOR: #ffc45d; TEXT-DECORATION: none } #categories { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 9px; TEXT-ALIGN: center } .catSelect { FONT-SIZE: 100%; WIDTH: 200px } .catSelectOrange { BACKGROUND: #ffae22 } Can anyone help me please. Cheers Stevo!! Ok, 'guys' I've hit a snag. I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/. It works fine in Firefox and IE6. At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7). My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem. Can anyone help? thanks... I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs. As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that. Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/ This is the solution I found - lwptsa . org/newsite/dropdown . html But I am unable to get the dark blue to continue to the end of the container. ** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B). Hopefully this makes sense. My style sheets a No drop-down menu, but working spacing and white separating lines (id - navigation): lwptsa . org/newsite/ Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#navigation
{
font-size:small;
float: left;
width: 1024px;
background: #002664;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
#navigation li a
{
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { color: #a3d869; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu): lwptsa . org/newsite/dropdown . html Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#menu ul
{
font-family: Arial, Verdana;
font-size:small;
margin: 0;
padding: 0;
list-style: none;}
#menu ul li
{
display: block;
position: relative;
float: left;}
#menu li ul { display: none; }
#menu li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #002664;
margin-left: 1px;
white-space: nowrap;}
#menu ul li a:hover { background: #00693e; }
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Any and all help welcome. I'm trying to redesign the look and information of the PTA's website. a. I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox. Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible) I'd like it to appear in firefox the same as IE.. Heres the html code: Quote: <div id="Navigation"> <ul> <li><a href="main.htm"><b>Homepage</b></a></li> <li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br> <li><a href="home.html">Cool Sites</a></li> <li><a href="home.html">My Opinions</a></li> </ul> </div> Css code thats formatting the <div> and its contents. Quote: #Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; } #Navigation ul { list-style: none; margin: 0; padding: 0; border: none; } #Navigation li { border-bottom: 1px solid #202020; margin: 0; } #Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; } #Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; } I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.> Thank you for your help I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others. I have a test one set up at http://www.theepicnetwork.com/gfn My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it. I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp. But i just need to successfully give it a drop down function. Here is all my code. ------- NAV MENU CSS Code: /* Navigations*/ #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; } #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; } #nav li { float:left; margin:0; padding:0; list-style:none; } #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; } #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }
INTENDED DROPDOWN CSS - I copied this from one of my other sites. Code: #dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
HEADER.PHP MENU LAYOUT Code: <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul> </div>
----- any help will be appreciated I know that there must be some way to do this without having to use absolute positioning, but what I need to be able to do is lay down an image on a page (in my case its a center column image that's floated left next to a navigation area). Then I need to be able to create an addressable area, probably a div, over that image with variable images I read from a database. Best way to imagine this is to draw your typical header rectangle at the top, left navbar on the left, then a square area in the middle next to the navbar. Thats my central area. Now draw a rectangle inside the square at the bottom about 1/5th the size of the total square. Inside this rectange I want to place three images side by side and rotate them. How can CSS be used to overlay one image in this case, with another, or, more correctly, one <div> over another <div>? Thanks for your help!! |
|||||||