|
CSS - Body Background Color
i have a problem dynamically setting the html background color when i initially set it with css.
if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks Similar TutorialsMy problem is that I need to get the Body Background color that is in a css file using php to then introduce this color to an applet. My CSS file has: BODY { FONT-SIZE: 12px; COLOR: #6699ff; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #CC6699; SCROLLBAR-SHADOW-COLOR: #CC6699; SCROLLBAR-3DLIGHT-COLOR: #CC6699; SCROLLBAR-ARROW-COLOR: #CC6699; SCROLLBAR-TRACK-COLOR: #FFFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #CC6699; FONT-FAMILY: "Times", serif; } But I use different CSS so very time I change the file I need to know in the php page what BACKGROUND-COLOR it has. I haven't succeed in getting the Javascript's DOM to tell me what the body's background color is... Here's the code I got Code:
mybody = document.getElementsByTagName("body");
alert(mybody.getAttribute("background-color"));
//alert(mybody.style.backgroundColor);
Nice references I looked up from are http://www.mozilla.org/docs/dom/technote/tn-dom-table/ http://www.sitepoint.com/print/rough-guide-dom http://www.mozilla.org/docs/dom/domref/dom_style_ref.html http://developer.apple.com/internet/webcontent/dom2ii.html Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here? Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Hi all, I would like to be able to have the body background change when moving from page to page. Is it possible, without javascript. Code: body {
margin: 0px;
padding: 5px 0px 5px 0px;
background: url(blue2.jpg) fixed;
} {
Specifically the surrounding blue2.jpg that frames the page. page link css link Thanks. Hello, I had a site exactly how I wanted to and messed up a css file. I am almost back to where I was but I am having an issue with the background image of the body element. Please look at this layout - Client Website . Notice how the hardwood floor does not go all the down? I have the image sized to 1500 pixels high and yesterday I did not have this issue. Also, when I outline elements in FF I see the body element seems to fall short. Any help would be appreciated. Tom #bg-one { background: white url(some.png); } #bg-two { background: white url(someother.png); } =========== ... </head> <body id=bg-one"> ... ... </head> <body id=bg-two"> Hi everyone, this is my first post and I hope it's easily resolved. I'm new to CSS and working through CSS - The Missing Manual while slowly overhauling an old table-based web journal on the side. I'm trying to do the following: Left - navbar (~200px) Center - journal postings (~600px) Right - fixed image (~200px) // I want this to always be in sight I've gotten the first two nailed down nicely, but I'm having a really hard time with getting the fixed image to work. In extreme shorthand, the code relationship looks like this: <body> <nav-journal-image-wrapper width=1000> <nav-journal-wrapper width=800> <nav width=200> <journal width=600> </njw> </njiw> With the extra 200px of width in the final wrapper, I've been able to get the background image to be fixed and show nicely to the right of my navbar and journal post by making it the same 1000px in width. If the window is stretched, everything stays where it belongs - you just see more body background color. The problem is, when the window is condensed the final wrapper - despite having a set width - also is squeezed and my background image recedes under the journals. What I don't understand is why my navbar and journals seem impervious to small windows, but the wrapper around them with the background image is not? My code validates, and the relevant parts of the CSS start now: Code: <style type="text/css">
body {
background-color:#333;
}
/* without this wrapper, the background in #nav-post-portrait-wrapper aligns
with the screen right, not the wrapper's right */
#final-wrapper {
background-color:red;
width: 1034px;
margin: 0 auto 0 auto; padding: 0;
}
/* this gives me an extra 200px on the right to show the fixed background image */
#nav-post-portrait-wrapper {
margin: 0;
padding: 0;
width: 1034px; /* sets the max but doesn't seem to be preventing collapse */
background-color: white;
background-image: url(CSS-TESTING/background-portrait-2.png);
/* the image is also 1034px wide - I want this wrapper's width to be frozen! */
background-repeat: no-repeat;
background-position: top;
background-attachment:fixed;
}
/* this groups the navbar and postings together */
#nav-and-post-wrapper {
background-color:#0F0;
margin: 0;
padding: 0;
width: 828px; /* prevents collapse */
}
/* begin nav sidebar CSS code */
#mainNav-wrapper {
float: left;
top: 0;
margin: 0; padding: 0;
height: 312px;
width: 210px;
}
ul#mainNav {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
width: 200px;
border-left: 2px solid #930;
border-top: 2px solid #930;
border-right: 2px solid #930;
}
ul li {
width: 200px;
margin: 0; padding: 0;
height: 60px;
border-bottom: 2px solid;
border-bottom-color:#930;
}
/* end nav sidebar CSS code */
/* begin journal post CSS code */
#post-wrapper {
margin-left: 214px;
}
.post {
background-color:#6F9;
border: 2px solid #930;
width: 600px;
height: auto;
margin: 20px 0 0 0;
padding: 0;
}
/* end journal post CSS code */
</style>
<body bgcolor="#FFFFFF">
<div id="final-wrapper">
<div id="nav-post-portrait-wrapper">
<div id="nav-and-post-wrapper">
<div id="mainNav-wrapper">
<ul id="mainNav">
<li><a href="aboutme.htm" id="nav-about-me"></a></li>
<li><a href="journalmain.htm" id="nav-journal-main"></a></li>
<li><a href="beverageguide.htm" id="nav-beverage-guide"></a></li>
<li><a href="guestbook/index.php" id="nav-graffiti"></a></li>
<li><a href="contact.htm" id="nav-contact"></a></li>
</ul>
</div>
<div id="post-wrapper">
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
</div> <!-- closes post-wrapper div id -->
</div> <!-- closes nav-and-post-wrapper div id -->
</div> <!-- closes nav-post-portrait-wrapper div id -->
</div> <!-- closes final-wrapper div id -->
</body>
Thank you very much! Hey All, It's been a while, and my CSS knowledge is a bit rusty (not that it was ever all that;-). Anyway... Working on a custom wordpress admin write panel, I have a table with dynamic classes in a helper.css for indicating row status(includes .myclass tr:hover), which works great everywhere EXCEPT in our old friend IE6. Turns out that the wordpress "global.css" for admin panels defines the following: Code:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi g,
cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt ,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{ margin:0;padding:0;border:0;outline:0;background:transparent;}
where, though I can't remember how I stumbled onto it, upon removing "background:transparent;" in wp admins global.css everything is hunky dory in IE6 too -- ok, not the tr :hover{ because IE6 only supports :hover on <a>s. but at least the row classes are displayed with no other discernible impact on this or any other admin pages in IE6 or any other browser. Of course, I don't want to go changing wordpress core code just to scratch my little itch, but I was hoping someone might suggest a means of overriding the background:transparent in wp admins global.css either in my own helper.css or in the on the page itself? Hi All Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE: http://www.flatsinbraunton.co.uk/ce/ 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>Colin Essery Carpets</title>
<style type="text/css">
html {
font-family:Helvetica,Arial,sans-serif;
}
body {
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-body.jpg);
background-repeat:repeat-x;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
#logo {
position:absolute;
left:0px;
top:78px;
width:327px;
height:102px;
}
#headstrap {
position:absolute;
left:327px;
top:78px;
width:473px;
height:102px;
}
img {
border-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
</div>
<div id="headstrap">
<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
</div>
</div><!--END CONTAINER DIV -->
</body>
</html>
Any help welcome thanks Rich I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. Hullo, I have an issue here that I have been trying to find a solution for for the past week, but I suppose I don't really know what exactly to look for. I want to make a background that consists of different horizontal color strips. The reason I do not want to use an image and repeat it is because the strips are different in height. I want them to shrink/expand vertically keeping their proportion to each other ( instead of repeating vertically) in case the screen used to view the website is smaller/ bigger than mine. I tried creating different elements using <div id="name"> and assigning a background color and define a percentage for the height, however this doesn't work because the element has to have text inside it to expand according to it. I do not want to assign fixed heights because as I said I want them to expand and shrink proportionally. If you know a way to do this even if it is not CSS please let me know. All help is appreciated. Thanks. Hello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. Having an issue with the background color in a div. The color shows up in I.E. but not in Firefox. I have a div with a width of 100%. Inside the div is an unordered list with two list items. Here is the css: div#nav { width: 100%; margin: 0; background-color: #EAE9E4; } #nav ul {margin: 0; padding: 0; } #nav li { list-style: none; float: left; margin: 0; padding: 0; width: 15%; font-size: 11px; line-height: 20px; white-space: nowrap; } Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color. Any help appreciated. i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color. is there any way that i can set so that their choice will stay throught their surfing ? any thoughts ? hanks Hey Guys! I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script. If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction? Thanks! Here is a link to my page: shipswatchdotcom/forum/vanilla/aaa.html Here is the css script: Code: #Body {
margin: 0;
width: 99.9%;
position: relative;
background: #F6F6F2;
}
#Head {
background: #B8D4B8;
padding:0;
margin: 20px 20px 0;
text-align: left;
position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
background: #F6F6F2;
border-bottom: 1px solid #3b5998;
}
.Banner {
padding: 10px;
text-align: left;
position: relative;
background: #F6F6F2;
}
.Banner ul {
background: #B8D4B8;
padding: 0;
margin: 0;
}
.Banner ul li {
display: inline;
padding: 0;
margin: 0;
}
.Banner ul li a {
font-weight: bold;
padding: 3px 6px;
font-size: 11px;
color: #336633;
display: inline-block;
}
.Banner ul li a:hover {
background: #E5F0E5;
}
.Banner ul li a.SignOut {
font-weight: normal;
position: absolute;
top: 10px;
right: 10px;
}
.Banner ul li a span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 1px 2px 0 1px;
background: #F6F6F2;
border-right: 1px solid #F6F6F2;
border-bottom: 1px solid #F6F6F2;
color: #F6F6F2;
font-size: 9px;
position: relative;
top: -3px;
}
#Content {
float: none;
width: auto;
margin: 0 280px 0 10px;
background: #F6F6F2;
}
#Panel {
float: right;
margin-right: 10px;
background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
width: 200px;
margin-right: 4px;
background: #F6F6F2;
}
div.SearchBox {
margin-bottom: 6px;
}
body.Profile div.SearchBox {
display: none;
}
body.Profile #Content {
float:none;
width: auto;
margin: 0 10px 0 280px;
background: #F6F6F2;
}
body.Profile #Panel {
margin: 0 0 0 10px;
background: #F6F6F2;
}
form.Activity textarea {
width:99%;
background: #F6F6F2;
}
#Foot div {
width: auto;
background: #F6F6F2;
}
body.Post #Content {
width: auto;
margin:0 20px;
background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
width:99%;
background: #F6F6F2;
}
#ConversationForm form {
border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
clear: none;
}
#DiscussionForm form {
background: #F6F6F2;
border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
background: #F6F6F2;
border-bottom:1px solid #ccc;
}
/* Tabs */
div.Tabs {
background: #F6F6F2;
padding: 0;
border-bottom: 1px solid #aaa;
}
div.Tabs ul {
padding: 0 8px;
white-space: nowrap;
}
div.MessageForm {
padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
font-size: 11px;
margin: 0;
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
color: #336633;
text-decoration: none;
padding: 8px 10px;
line-height: 11px;
}
div.Tabs li a:hover {
text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
background: #F6F6F2;
color: #336633;
margin: 0;
border: 1px solid #aaa;
border-bottom: none;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
display: inline-block;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-decoration: none;
padding: 6px 10px;
position: relative;
top: 1px;
}
div.Tabs li a span {
line-height: 1;
font-size: 80%;
padding: 0 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: normal;
background: #F6F6F2;
color: #4A7023;
margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
font-size: 11px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-top: 1px solid #aaa;
background: #F6F6F2;
margin:0;
padding:4px 8px;
}
div.HeadingTabs ul {
margin: 8px 0 0;
}
body.Discussion a.Bookmark {
margin: 6px 2px;
}
div.Preview {
border: 1px solid #aaa;
background: #F6F6F2;
margin:0 0 8px;
padding: 8px;
}
.Foot {
background: #F6F6F2;
border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
border: none;
color: #4A7023;
line-height: 1;
padding: 0;
text-decoration: none;
}
div.MorePager a:hover {
color: #4A7023;
text-decoration: underline;
}
body.add #Content {
margin: 0 10px;
background: #F6F6F2;
}
/* Panel Boxes */
#Panel div.Box {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: #F6F6F2;
padding: 0;
}
div.Box h4 {
color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
background: #F6F6F2;
border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
background: #F6F6F2;
}
#Status {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #eee;
color: #000;
line-height: 1.6;
padding: 3px 6px;
margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
margin: 0;
padding: 0;
}
body.Profile ul.PanelInfo li a {
font-size: 12px;
display: block;
padding: 0 6px;
background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
background: #F6F6F2;
}
/* Sign In Page */
body.Entry #Content {
text-align: center;
margin: 0 auto !important;
}
body.Entry #Content div.Box {
background: #F6F6F2;
border: 0;
}
div.Methods {
border-left: 1px solid #ccc;
}
/* Messages */
div.DismissMessage {
background: #F6F6F2;
border: 1px solid #ccc;
padding:6px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
color: #000;
}
div.Warning {
background: #d00;
border: 1px solid #b00;
color: #F6F6F2;
text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
color: #F6F6F2;
}
#Content div.Box {
color: #000;
background: #F6F6F2;
border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
border: none;
}
/* Autocomplete */
.ac_results {
border: 1px solid #d7d8da;
color: #000;
border-top: 0;
background-color: #F6F6F2;
}
.ac_results li {
border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
border-bottom: 0 !important;
}
.ac_results strong {
background: #F6F6F2;
}
.ac_over strong {
background: #F6F6F2;
}
.ac_over {
background: #3b5998;
color: #fff;
}
Hi there people, I have a question about CSS but before I start off asking this question I'll introduce myself. I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer". Ok so now you know me a little, I'll start off asking my question. Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it). So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes? Tnx, Dwight |
|||||||