|
CSS - Background Won't Display Behind Links In Navigation.
Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this?
Here is my code - Code: @import url('layout.css');
body {
background-image: /images/skyBACK.gif;
background-repeat: repeat-y;
background-attachment: scroll;
background: url('images/skyBACK.gif');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#container {
width: 1020px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
height: 140px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#content {
float: left;
width: 518px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #0033ff;
text-decoration: none;
display: block;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #000000;
}
h5 {
color: #000000;
}
h4 {
color: #000000;
}
h3 {
color: #000000;
}
h2 {
color: #000000;
}
#content h1 {
color: #000000;
}
#content img {
padding: 1px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #5f8ea9;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #0033ff;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
This is very strange to me any help would be greatly appreciated. Similar TutorialsHi Forum, A small non-profit group I am working with has put together a website. Unfortunately, the horizontal navigation menu disappears on IE browsers. The links are still in place, but are invisible. The shaded boxes around them do not load. Unfortunately we have no idea how to fix it. I am a beginner with CSS-- any helpful hints or advice? Thanks. -Sellicott <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="" xml:lang="en" lang="en"> <head> <title>BUTT OUT! Ending Tobacco Industry Exploitation of the Lesbian, Gay, Bisexual and Transgender Community</title> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitename"><img src=></div> </div> <div id="navigation"> %%MENU%% </div> <div id="content-wrapper"> <div id="content">%%CONTENT%%</div> </div> <div id="footer"> <div id="footer-content">%%WEEBLYFOOTER%%</div> </div> </div> </body> </html> *|*{ margin:0pt; padding:0pt; } body{ background:transparent url(pattern3.gif)repeat-x center top; background-color:#FFFFFF; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0; } p { line-height:18px; } h1, h2, h3{ line-height:40px; } #wrapper { width:760px; margin:0pt auto; } #header { float:left; width:760px; height:170px; } #sitename { color:#fff; padding-top:0px; font-size:2em; text-transform:uppercase; } #navigation { float:left; height:30px; width:760px; position:relative; } #navigation ul { float:left; padding:5px 10px 0 0; margin-left:0; } #navigation li { float:left; display:inline; font-family:"lucida grande", arial, sans-serif; text-align:center; font-size:1em; font-weight:bold; padding:6px 15px 8px 4px; margin-right:3px; } *html #navigation li { margin-right:4px; padding-right:15px; padding-bottom:9px; } #active { background: transparent url(tab_left2.gif) no-repeat left top; padding:6px 13px 6px 4px; color:#fff; font-weight:bold; } *html #active { padding-right:15px; } #navigation a:link { color:#fff; text-decoration:none; } #navigation a:visited { color:#fff; text-decoration:none; } #navigation a:hover { color:; text-decoration:none; } #active a { background: transparent url(tab_right2.gif) no-repeat right top; color:#464e54; padding:6px 14px 9px 10px; } #active a:link { color:#fff; text-decoration:none; } #active a:hover { color:#fff; text-decoration:none; } #active a:visited { color:#fff; text-decoration:none; } a:link,a:hover,a:visited { color:464e54; font-weight:normal; text-decoration:underline; } a:link { color: #464e54; } a:visited { color: #464e54; } a:active { color: #464e54; } .weebly_header { float:left; background: width:760px; height:1200px; margin-top:35px; } *html .weebly_header { margin-top:28px; padding-top:14px; } #content-wrapper { float:left; background: transparent url(content_background.jpg) no-repeat center top; width:760px; height:700px; } *html #content-wrapper { margin-top:-9px; } #content { padding-top:20px; padding-bottom:20px; } *html #content{ padding-top:35px; } img.image-left { margin-right:15px; float:left; } img.image-right { margin-left:15px; float:right; } #footer { visibility:hidden; padding-top:280px; padding-bottom:10px; float:center; } Been trying to figure out why my links in my navigation bar (id="extra") won't line up horizontally -- they keep stacking vertically. Can someone please tell me what I'm doing wrong? Thanks. The important bits are below... Code:
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #999966;}
div#extra{background:#a4c2c2; text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#fff}
div#footer{background: #999966;color: #333300}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px; background: #fff}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{width:100%}
</style>
<body>
<div id="container">
<div id="header">
<h1 class="logo">Sowanee's</h1>
</div>
<div id="extra"><div class="navText"> <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> </div>
</div>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong></p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
Hi all, I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/ I have a horizontal navigation towards the top. Here are my queries: I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change. OR Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS? Please help!!! Thanks! Janusz I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px. I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions. Thanks for your help! Open in FF to see how it's supposed to work: Open in IE to see problem. Here's the HTML Code:
<div id="Menu">
<div id="nav_header">
<div id="text">
Admissions & Financial Aid
</div>
</div>
<ul id="nav_level_1">
<li id="submenu"><a href="../index.php">Applying to Union</a></li>
<ul id="nav_level_2">
<li id="nav_active"><a href="index.php">Types of Admission</a></li>
<ul id="nav_level_3">
<li><a href="Transfer.php">Transferring to Union</a></li>
<li><a href="Early.php">Early Decission</a></li>
<li><a href="Regular.php">Regular</a></li>
<li><a href="international.php">International Admission</a></li>
<li><a href="aop_heop.php">AOP/HEOP</a></li>
<li><a href="Medical.php">Eight-year Medical</a></li>
<li><a href="Law.php">Six-year Law</a></li>
<li><a href="MBA.php">Five-year MBA</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../Applications.php">Apply Online</a></li>
<li><a href="../Forms/index.php">Download Application Materials</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../../FAQs/index.php">Have a Question?</a></li>
<li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>
<li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>
<li><a href="../../interviews.php">Interviews</a></li>
<li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>
<li><a href="../../About/index.php">Admissions Staff</a></li>
<li><a href="../../AlumniAdmissions/index.php"></a></li>
<li><a href="../../Media/index.php"></a></li>
<li><a href="/union/admissions/Viewbook/index"></a></li>
<li><a href="/union/admissions/Alumni/index"></a></li>
<li><a href="../../sample.php"></a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
</div>
Here is the pertinent CSS Code:
/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color: #d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#nav_level_2 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
#nav_level_3 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#e5dece;
line-height:17px;
word-wrap: break-word;
}
/* End unordered list base styles */
/* To get indented, wrapping, text that's cross browser compatible
we need to additionally style the unordered lists and line items under each top <ul>
*/
#nav_level_1 li {
margin-left:20px;
}
#nav_level_1 li ul {
margin-left:-20px;
}
#nav_level_2 li {
margin-left: 40px;
}
#nav_level_2 li ul {
margin-left:-40px;
}
#nav_level_3 li {
margin-left:60px;
}
#nav_level_1 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 4px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 20px;
}
#nav_level_2 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 24px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 40px;
}
#nav_level_3 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 44px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 60px;
}
#Menu #submenu {
list-style-type: circle;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#submenu2 {
list-style-type:circle;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
I am going to heck right now trying to get this navigation to work. Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? I'm having a little trouble getting my navigation to have the effect of the nifty corner's script . [EDIT] I've put the relevant files on an example page, but it doesn't seem that Angelfire is allowing the javascript? [/EDIT] I've attempted, so far, to float the menu to the left, and then give each <li> display inline to get a horizontal menu. This part works in Fx1.0.7, but in IE6.0 each <li> is a 100% width? Any help would be greatly appreciated. I've never used the nifty corners before.. so far it hasn't been that hard, except for this episode... If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work and may have overlooked some errors. Code:
html,
body{
margin:20px auto 20px auto;
padding:0px;
background-color:#333;
font-family:Arial,sans-serif;
}
#container{
margin:auto;
width:700px;
min-width:300px;
background-color:#333;
}
#header{
color:#F60;
width:700px;
font-size:25px;
text-align:center;
background-color:#FFF;
font-family:'Arial Bold',sans-serif;
}
#menu{
margin:0px;
padding:0px;
text-align:center;
}
#menu #nav{
float:left;
padding:0px;
list-style-type:none;
margin: 0px 0px 15px 0px;
background-color:#333;
}
#nav li{
display:inline;
margin-left:5px;
margin-right:5px;
}
#nav li a{
padding:2px;
}
#content{
padding:10px;
background-color:#FFF;
}
* a{
color:#F60;
font-size:10px;
text-decoration:none;
vertical-align:middle;
}
Code: <div id='menu'><ul id='nav'> <li><a href='#' title='' class='tab'>LOREM</a></li> <li><a href='#' title='' class='tab'>IPSUM</a></li> <li><a href='#' title='' class='tab'>DOLOR</a></li> <li><a href='#' title='' class='tab'>SIT</a></li> <li><a href='#' title='' class='tab'>AMET</a></li> </ul></div> <div style='clear:both;'></div> Code:
function NiftyCheck(){
if (!document.getElementById || !document.createElement) return 0;
var b= navigator.userAgent.toLowerCase();
if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
return 1;
}
function Rounded(selector,bk,color,size){
var v= getElementsBySelector(selector);
for (var i=0; i < v.length; i++){
AddTop(v[i],bk,color,size);
AddBottom(v[i],bk,color,size);
}
}
function AddTop(el,bk,bColor,size){
var d= document.createElement('b');
var cn= 'r';
var lim= 4;
if (size && size=='small'){
cn= 'rs';
lim= 2;
}
d.className= 'rtop';
d.style.backgroundColor= bk;
for (var i=1; i <= lim; i++){
var x= document.createElement('b');
x.className= cn + i;
x.style.backgroundColor= bColor;
d.appendChild(x);
}
el.insertBefore(d,el.firstChild);
}
function AddBottom(el,bk,bColor,size){
var d= document.createElement('b');
var cn= 'r';
var lim= 4;
if(size && size=='small'){
cn= 'rs';
lim= 2;
}
d.className= 'rbottom';
d.style.backgroundColor= bk;
for(var i=lim; i > 0; i--){
var x= document.createElement('b');
x.className= cn + i;
x.style.backgroundColor= bColor;
d.appendChild(x);
}
el.appendChild(d,el.firstChild);
}
Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance Hi, im using different styles for my links on one page. my CSS for some links is not working properly in IE6. i have defined some rules for all the links in my CSS but for some specific links when i try to change the link color and the hover effect of the link, it is not effected. the color of the link remains same as default link. what is the problem. here is my css code. a:link { color:#ff8702; text-decoration: underline; font-weight:bold; } a:visited { color:#ff8702; text-decoration: underline; } a:hover { color:#ff8702; text-decoration:none; } .readmore { font-weight:bold; font-size:14px; width:94px; height:35px; background:url(images/read-more.gif) no-repeat; vertical-align:middle; padding:12px 0 0 13px;} .readmore a {color:#000000; text-decoration: none;} .readmore a:hover {color:#000000; text-decoration: underline;} when i assign the "readmore" class to any text, it does not take effect. Please help. I want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus: Code: <html> <head> <title>Link format test</title> <link href="StylesCSS/link1.css" rel="stylesheet" type="text/css"> <link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css"> </head> <body> Then I have applied the styles thus: Code: <a href="index.aspx" class="letterLink1">Home</a> <a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a> And both css files are as follow: link1.css Code:
a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
link2.css Code:
a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong? Thank you, Cesar Hey guys im updating a site that i originally didnt code, and for some reason any link will have a carrage return or something after it so that the next thing will start on a new line, so if were to put a link in the middle of a paragragh the next word would start on a new line??? what should i be looking for in the css to rectify this. i tried removing all the 'display : block' but that didnt work... thanks Hi, I have a simple table <table id="sometable"> <tr> <td> <a href="link1">link1</a> <td> <a href="link2">link2</a> </table> with a style sheet table#sometable {width: 100%;} table#sometable a:hover{background-color: #A9A9A9;} What I want is on a hover the whole cell changes color, not just the link. How can I do this? Also should I be using a table in the first place? Thanks Colin Hi all, I am having difficulty with the background for an image link. I have the following: 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>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block. Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. Hi, I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera. Anyone come across this before? Here's my CSS: Code: #section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}
Hi Everyone, I can't get my background image to display in Firefox the html looks like this: Code: <div id="textBack"> <div id="leftSide"></div> <div id="centerText"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br </div> <div id="rightSide"></div> </div> Here is my CSS: Code: #textBack
{
background:url(images/textBack.gif);
background-repeat:repeat-y;
width:902px;
height:inherit;
position:relative;
}
#leftSide
{
width:180px;
position:relative;
float:right;
}
#rightSide
{
width:180px;
position:relative;
float:right;
}
#centerText
{
width:540px;
position:relative;
float:right;
}
Can anyone tell me what it is I'm doing wrong? I would greatly appreciate it. Thanks. Hello, I'm having a problem that I can't seem to fix - and I've been at it for two days now, I think it's time for an outsider's point of view. First of all, I've googled and researched to no end about this - and others have had the same problem as me, but for some reason nothing that's been suggested has fixed it. With any luck it's just some stupid typo I'm missing or something . I'm using Dreamweaver CS3 to make a site, but I'm not using the WYSIWYG editor, I'm just using that to see what it looks like as a quick-view during development, and uploading it via FTP to the server to see a more accurate representation of it (basically, the code isn't written by DW). Here's the problem. In DW, the "background-image" tag in the CSS file is displaying all of the images perfectly, but when I upload the site - the images simply don't appear, but if you resize your browser window you can tell by the way the scrollbars are behaving that it is holding places for the images. I've tried everything I can think of, including using the "overflow" tag, trying different ways of writing the file paths (absolute vs. relative), and I've looked through every line of the code over and over again. CSS file: Code: @charset "utf-8";
/* CSS Document */
body
{
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-color: #000000;
background-color: #f5f0c4;
}
.pageholder
{
position: relative;
width: 1000px;
height: 750px;
margin-left: auto;
margin-right: auto;
}
.outerbg
{
position: absolute;
left: 50px;
width: 904px;
height: 654px;
margin: auto;
background-image: url(../images/bg/outer.png);
background: no-repeat;
}
.innerbg
{
position: absolute;
top: 100px;
left: 150px;
width: 702px;
height: 502px;
margin: auto;
background-image: url(../images/bg/inner.png);
background: no-repeat;
}
.footer
{
position: absolute;
top: 675px;
left: 154px;
width: 692px;
height: 32px;
margin: auto;
background-image: url(../images/bg/bar.png);
background: no-repeat;
}
main.html file: 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>Main Page</title> <link href="../css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="pageholder"> <div class="outerbg"></div> <div class="innerbg"></div> <div class="footer"></div> </div> </body> </html> Here's a link to the site it's being hosted on (and not showing images for some reason). And this is an image of what it looks like in DW (also has the file structure on the right of the image):URL If anyone can point out where I'm going wrong, thank you - it's appreciated! Hi Guys, I am new to CSS, i have an image (attached) and it will not display as a background image. The other images I have will no problem. It is def something about the image because i have renamed it e.t.c Could someone help? Image is attached! Can you get it to display? Charlie Hi all, thanks on the last post, hope you can help with this too. I'm trying to get an image to display in a box, and repeat all along the box (only a 1 pixel image). But for some reason its not being picked up. my code is: Code:
<body>
<div id="wrap">
<div id="innerwrap">
<div id="holding">
holding
</div>
</div>
</div>
</body>
and the css is this: Code:
#wrap{width:60em;height:43em;background:silver;margin:0 auto;text-align:left; padding-top:.1em;}
#innerwrap{ background-color:gray;margin:.5em;height:42em;}
#holding {background:#3F8BCA url(/img/topgradient.jpg) repeat-x scroll left top;}
I've tried to change the brackets to forward brackets, tried to and ", but nothing works, im sure the spelling etc is correct... any help would be great Kind regards MG |
|||||||