|
CSS - Move Drop Down To Below Header Image
Hi,
Av been having a lot of problems with my drop down working in IE since I added the flash fade to the images. Can anyone point me to the code that is responsible for keeping the drop down menu at the top of the header image.. How can I change it to make it at the bottom? Thanks This is in the header section Code: <!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 1152)? "1150px" :
(document.documentElement.clientWidth < 702) ? "700px" :
"auto");}
</style>
<![endif]-->
<?php wp_head(); ?>
I.E css Code: #header-image {
float: left;
width: 100%;
height: 383px;
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
margin-bottom: 20px;
}
Main stylesheet Code: #nav li {
position:relative; /* establish stacking context for the AP'd dropdown sublist */
float:right;
padding:0;
line-height:1.75em;
}
#nav li a {
float:left;
padding:0 .5em;
border-right: 1px solid #333;
color: #CCCCCC;
text-decoration: none;
}
#nav li a.first {border:none;}
#nav li:hover,
#nav li.sfhover{
background:black;/* background for all links on hover */
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/
/*=== All Sublist Styles ===*/
#nav ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
width:12em; /*150px*/
margin-left:-999em;/* hide the sublist */
padding:0;
left:0; /* IE6/7 need this to position the sublist correctly on hover*/
top:1.75em;
background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
float: none;/*reset the float from #nav li*/
display:block;
height:auto;
line-height:1.5;
border:none;/*reset borders from #nav li*/
}
#nav li li a {
float: none;/*reset the float from #nav li*/
display:block;
width:11em;/*IE6 needs a width (12em total with padding)*/
padding:0 .5em;
border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/
/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a,
#nav li.sfhover li a {color:#000;} /*2nd level font color*/
#nav li li:hover a,
#nav li li.sfhover a {color:#FFF;} /*2nd level font color on hover*/
/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}
label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}
thanks Similar TutorialsHobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! Hello! I have the site (w w w . s t e f a n t r e g o . c o m /wordpress) ... and I am trying to place a tv graphic I made under my twitter feed as an aesthetic effect. Currently I have: body { background-image:url('/Images/tregotv.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:983px 400px; display:block; } This looks fine on my computer -- BUT -- when I go to my photo section, travels section, the format of the site changes. Therefore my background image and twitter feed don't align correctly. Is there any CSS way to correctly align the background image to always be positioned under my twitter feed without format issues? Or would I need to get assistance with an alternate code such as Java script, or PHP to position the picture so the twitter feed always fits inside the tv? I appreciate the help!! -Stefan twitter: @stefantrego w w w . stefantrego . c o m / w o r d p r e s s PS. Sorry for the spaced out web addresses -- due to being a new user I cannot post links right away. My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera. My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! 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">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
Trying to delete my post but no option to delete so just removing content. What I hope to do is have a header with a left "cap" a right "cap" and a background tiling across connecting the two if that makes any sense whatsoever so if L is the left image B is the background image and R is the right image it would look like this... LBBBBBBBBBBR Anyway, I've ALMOST got it working. The only thing missing is the image on the right. I have this code in an html table cell: Code:
<div id='logographicinner'>
<div id='logostrip'>
<div id='logographic'><div id='catname'>{$data['cat_name']}</div></div>
</div>
</div>
and this in the css Code:
#logostrip{
background-color: #ffffff;
background-image: url(images/headerbg.gif);
height: 29px;
margin: 0px;
padding: 0px;
}
#logostripinner{
background-color: transparent;
background-image: url(images/headerright.gif);
background-position: right;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}
#logographic{
background-color: transparent;
background-image: url(images/headerleft.gif);
background-position: left;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}
#catname{
text-align: left;
padding-top: 7px;
padding-left: 20px;
font-weight: bold;
}
Any ideas what I've done wrong? Look - I'm 59....almost 60 - and I've been using tables forever. So please forgive, what I am certain, is a fairly stupid question. But I have been trying to wrap my head around CSS and I have struggled with it for the last couple of years..... It's like Algebra, for me - it seems as though it's something I can never really learn. I am trying to re-build an old site and avoid using tables. All I want to do is put an image - positioned absolutely - in a DIV header area. I've managed to get the page, by the way, to display the header, the footer, a fix-width center area, etc. just fine - which is no small miracle, for me. What I've got, now, looks like this: The code looks like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body {margin: 0 0 0 0; background-color: #E1DACD;}
#header {width: 100%; height: 120px; background-color: #F1E2C2;}
#social {position: absolute; top: 26; left: 730;}
#container {
margin-left: auto;
margin-right: auto;
width: 960px;
text-align: left;
background-color: #FFF;
height: 600px;
}
#footer {width: 100%; height: 80px; background-color: #EFE1C1;}
h2 {font-family: arial; font-size: 21px; font-weight: normal; display: inline;}
</style>
</head>
<body>
<div id="header"><img src="head1.gif">
<div id="social"><img src="22s.gif"></div>
</div>
<DIV id="container">
<DIV style="padding-left: 12px;"><h2><br>Some content...</div>
</div>
<div id="footer">footer</div>
How in the heck do I get that social networking .gif to end up in the header, to the right of the domain name....? Any help would be greatly appreciated. Hi, I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well. Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div. It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider! Here is the page code: Code: <%@ LANGUAGE=JScript %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <link rel=stylesheet type="text/css" HREF="kahn.css"> <title>Crollard Kahn</title> </head> <body> <div class="Outer"> <img src="images/top2h.png" style="border: none; margin: 0; padding: 0;"> <div class="Main"> <div class="InnerMain"> <div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;"> <!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">--> Top navigation bar here... </div> <div class="Left"> <div class="InnerLeft"> Left navbar<br>here<br>...<br>...<br>...<br>... </div> </div> <div class="Right"> <div class="InnerRight"> <h1 class="Header1 Top">Header</h1> <p>Text.</p> <p>More Text.</p> <p>More Text.</p> <p>More Text.</p> </div> </div> <div style="clear: both; margin: 0; padding: 0;"></div> </div> <!-- InnerMain --> </div> <!-- Main --> <img src="images/footer2.png" style="border: none; margin: 0; padding: 0;"> </div> <!-- Outer --> </body> </html> Here is the stylesheet: Code: BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;}
DIV.Outer { width: 980px; background-color: #868B6B; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0; margin-left:auto; margin-right:auto;}
DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}
DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}
.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }
P.List { margin-bottom: 2em; }
.Top { margin: 0; } /* weird firefox blank space otherwise */
I'm fairly new to CSS, but am trying to leave tables behind as much as possible. Can anybody please tell me how to fix this? Regards, Elisabeth Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work. Here is the main.css (only css file being used) Code:
body {
color: #ffffff;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
margin:auto;
text-align:center;
margin:0 auto;
}
a {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
p {
margin: 0px 0px 7px 0px;
}
sup {
display: inline;
padding: 0px;
vertical-align: super;
font-size: 8px;
}
a:hover {
color: #ffb4b4;
}
legend {
display: none;
}
label {
display: none;
}
fieldset {
border: none;
padding: 4px 0px 4px 5px;
}
fieldset p {
display: block;
margin: 5px 5px 5px 2px;
}
form {
margin: 0px 0px 5px 0px;
}
img {
border: none;
}
li {
padding-bottom: 5px;
}
/* +------------------------------------------------------------+ */
/* | General XHTML Classes | */
/* +------------------------------------------------------------+ */
.center {
text-align: center;
}
.inlinecenter {
text-align: center;
}
p.inline {
display: inline;
padding: 0px;
}
.strong {
font-weight: bold;
}
.big {
font-weight: bold;
font-size: 16px;
}
.hidden {
display: none;
}
a.unfancy {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
/* +------------------------------------------------------------+ */
/* | Skin Specific Divs | */
/* +------------------------------------------------------------+ */
#skin_header {
height: 230px;
width: 899px;
margin:auto;
padding: 0px;
background-position: center top;
}
#skin_wrapper {
width: 910px;
padding: 0px;
margin:auto;
}
#skin_wrapper_full {
width: 100%px;
padding: 0px;
margin:auto;
background-image: url('../media/header.png')
background-repeat: repeat-x;
background-position: top left;
}
#skin_ct {
width: 100%;
padding: 0px;
margin: auto;
border-spacing: 0px;
border-collapse: collapse;
}
#skin_ct_lcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
width: 160px;
height: 80px;
}
#skin_ct_rcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
height: 80px;
text-align: right;
}
#skin_ct_lcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
text-align: left;
}
#skin_ct_mcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
line-height: 150%;
}
#skin_ct_rcol {
padding: 2px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
}
#skin_footer {
color: #FFFFFF;
background-color: #000000;
padding: 50px 10px 10px 10px;
margin: 0px;
text-align: center;
background-image: url('../media/footer.png');
background-repeat: repeat-x;
background-position: top left;
}
#skin_pgtitle {
font-size: 16px;
padding: 0px 0px 4px 0px;
margin: 0px 0px 10px 0px;
font-weight: bold;
border-bottom: 1px solid #999999;
}
#skin_content {
margin: auto;
}
There is more coding but the actual image header is located inside of the #skin_header. Also, here is the PHP code where the SRC code is located: Code:
</head>
<body>
<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>
<div id="skin_wrapper_full"><div id="skin_wrapper">
<table id="skin_ct">
<tr>
<td id="skin_ct_rcol_head" colspan="3">
<div id="skin_menu_head">
<ul>
<?php
if (!(empty($link_home))) {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart))) {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account))) {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact))) {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>
</ul>
Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net thank you! Hey, Im pulling my hair out...basically iv developed a site testing it in safari and when i have come to test it in FF the background image i am displaying in my header div doesn't display in FF but displays fine in Safari, unable to check IE atm. Iv broken down my code down and put together a simple test html script and css script and still no joy. Below is the script can anyone see where i am going wrong...hope so. 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=utf-8" /> <title>Background Image Test</title> <link rel="stylesheet" type="text/css" href="millar.css" /> </head> <body> <div id="container"> container <div id="header"> header </div> <div id="main"> main </div> <div id="footer"> footer </div> </div> </body> </html> Code: body {
background-color: #F0F0F0;
font-family: verdana;
font-size: 10px;
color: #333333;
}
#container
{
background-color: red;
margin: 0 auto;
}
#header
{
background-color: yellow;
height: 100px;
background-image: url('topbanner.jpg');
}
#main
{
background-color: blue;
}
#footer
{
background-color: green;
}
cheers tom Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug? h**p://www.topofferspage.com Hi again, i have another issue i can't get my head around. As before i'm sure it will be an easy solution. basically, i currently have an image 1px wide with 100px height which is repeated accross the page, basically i want the top left and top right corners to be cornered. Any ideas people? Code: div.header
{
padding:0em;
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
clear:both;
margin:0 auto;
}
erm does rounded make more sense?, hang on let me find an example. http://a-ccarsales.com/page3.htm see like their header has rounded corners, thats what i want. However theirs is fixed, i want mine elastic but with the rounded corners, sorry if i'm not explaining this very well.. I just can't do it!!!! I need help on this.. My header.. I can't get rid of the spaces around the image.. hmm check this out.. I can't post a link direct but its on the world wide web at piedmontred (dot) com firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either.. I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out.. Thanks for any help!! Todd I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short. My CSS code: body { font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva; background-color: #1c1c1c; background-repeat:repeat-x; border-color: #FC3; border-width: 1px; padding: 25px; margin: 30px; color: #FFC; } #header { height: 200px; width: 100%; margin: 0; background-image:url(images/header.jpg); background-repeat:no-repeat; margin-right: 0px; margin-left: 0px; border: thin solid #FFF; border-style:none; } #header { height: 200px; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #p { padding-left:inherit; padding:inherit; } A:link {color:#FFF; text-decoration:underline; } A:visited {color:#CCC; text-decoration:underline; } A:hover {color:#FFC; text-decoration:underline; } #nav { height: 35px; } I've tried: width: 100%; and width: 100%; width: auto; There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%" Any help would be so great please. I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends. http://www.guestwardho.com/campground_map.html If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends. Thank you in advance for your assistance. I'm trying to get something that looks like this: Here is the xhtml: Code: <div id="container">
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
</div>
Here is the relevant css: Code: .design_box {
display: block;
margin-bottom: 17px;
}
#row_a_right_web_design img {
float: left;
}
.design_box h1 {
color: #fbfbfb;
font: bold .9em Tahoma, arial, sans;
margin-bottom: 4px;
}
.design_box p {
color: #c4c2c2;
}
Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this. Thanks in advance. I wish to include a header image on each page of my site. Is it typically better to include the image in the CSS or HTML? For example, see OPTION 1 and OPTION 2. Thank you OPTION 1 Code:
#header {
margin: 0;
padding: 0;
height: 165px;
background: url(headers/tapmeister_header.jpg) no-repeat scroll left top;
}
Code: <div id="header"> <h1 class="header_title">Welcome to Tapmeister</h1> <p class="tagline">Better Beer!</p> </div> OPTION 2 Code: <div id="header"> <img src="images/headers/tapmeister_header.jpg" style="margin: 0; width: 165px" /> <h1 class="header_title">Welcome to Tapmeister</h1> <p class="tagline">Better Beer!</p> </div> I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 Hey all, I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer. I would like it to look something like this. I'm using this code for the background image, for the Header: body { background-image: url(stars.gif); background-repeat: repeat-x } And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page? Here is the code that I'm assuming would have to be used: { background-image: url(stars.gif); background-repeat: repeat-x; background-position: bottom; } Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code? Thanks. I want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images. thanks So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li. For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated. Here's a selection of my code where I think the problem is happening: Code: <div id="nav">
<ul id="dd">
<li id="hm"><a href="menu.html">Menu</a></li>
<li id="au"><a href="about_us.html">About Us</a></li>
<li id="oc"><a href="#">Our Coffee</a>
<ul>
<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
</ul>
</li>
<li id="os"><a href="os_hy.html">Our Stores</a></li>
<li id="ols"><a href="online_store.html">Online Store</a></li>
<li id="oct"><a href="our_culture.html">Our Culture</a></li>
</ul>
</div>
Code:
#nav ul li ul li a {
display: block;
height: 0px;
overflow: hidden;
}
#dd li#oc a {
display: block;
width: 95px;
}
#dd li#oc {
float: left;
width: 95px;
}
#dd li#oc ul {
position: absolute;
width: 95px;
left: -9999px;
}
#dd li#oc:hover ul {
left: auto;
}
#dd li#oc:hover ul, #dd li.sfhover ul {
left: auto;
}
li#oc ul li a {
height: 0px;
display: block;
overflow: hidden;
}
#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#dd, #dd ul {
padding: 0;
margin: 0;
list-style: none;
}
Any suggestions would be appreciated. |
|||||||