|
CSS - Newbie Help: Background Colors
I am trying to create two different colored back grounds.
By everytime i go to page properties it seems to add within the space that I need a different color. I am using dreamweaver 8. How do I go about adding two different colors? Thanks in advance. Here is a sample picture of where i need the different colors to be: ... since i am a noob i guess i cant post urls.. I used draw layers to sepearte the page in three parts the top part is my banner middle is the navigation bar third is the body the draw layers are in between some background space I would like to make the background black and the layer backgrounds white.... anyone help? Similar TutorialsSuppose 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>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer_div {
width: 800px;
height: 300px;
background-color: red; }
.interior { background-color: #ffffff; }
</style>
</head>
<body>
<div id="outer_div">
<div class="interior">
<p>Hello I am some text. </p>
<p>How are you today?</p>
<p>Would you like some waffles?</p>
</div>
</div>
</body>
</html>
The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn). What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out). ANy help will be greatly appreciated. Thanks. TJ Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek 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. okay, so for my site i want all the backgrounds in a frame to have the same background image, so i made them all part of the class called sub, and in my .css file i have this line of code: body.sub {background-image: url(/images/body.jpg)} it doesnt work. now if i go into each page individually and put: <style type="text/css"> body {background-image: url(/images/body.jpg)} </style> then it works. why? oh yeha, i can change the background color from my .css file, but not the image, so: body.sub {background-color: #FFFFCC} does works. thanks for the help! Don't know if I got the language right on the headline? I've got the following css for my forms: .form table { border-collapse: collapse; color: black; border: 1px solid black;} and the markup looks like this <table class="form" width="100%" cellspacing="0"> however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class... any ideas... good http://www.rickweston.com/my_ucwdc/membership/register.php bad http://www.rickweston.com/judge/about_judge/index.php thnks for any help I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color. What could be the cause of this? Thanks. wait, i just figured out that its the image that is a different color... so my new question is, why? I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this? thanks Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here. I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file. My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file. The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer. Thanks in advance, -Jonathan Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks Excuse me but i am a little thick on this one: How do I create different colored link style for say a: 1. navigation bar 2. footer bar 3. main body Does making classes make sense in this situation doug I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
.arrows{
margin: 0px 0px 2px 5px;
}
.headingrule{
margin-right: 3em;
margin-left: 1em;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}
#maincontent{
margin-top: 1em;
margin-bottom: 1em;
margin-right: 200px;
}
.maincontentbox{
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
margin-left: 3em;
margin-right: 3em;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px 8px;
}
#rightcontent{
position: absolute;
width: 200px;
top: 1em;
right: 0px;
padding: 5px;
border: 1px solid #CCCCCC;
}
#footer{
background-color: #F0F0F0;
clear: both;
}
#wrapper {
position: relative;
width: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="maincontent">
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WELCOME...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WEEKLY SPECIALS...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<!--End Main Content Div-->
</div>
<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
<div id="rightcontent">
CONTACT INFO
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p> </p>
</div>
<!-- Footer Div Stretches Total Width -->
<div id="footer">
here's the footer
</div>
<!--End Wrapper Div -->
</div>
</body></html>
I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now. Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting? hello everyone, I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info. Code: .signalButton{
width:80px;
height:4;
background-color: #0066FF;
}
Thank You, Wasim Hello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code:
<style type="text/css">
body {
background-image: url(./images/pgbg.gif);
color: #000000;
/*the below link attributes does not work */
visited: color:#000000; text-decoration: none;
link: color:#000000; text-decoration: none;
focus: color:#000000; text-decoration: none;
active: color:#000000; text-decoration: none;
hover: color: #CC0000;
}
.header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}
.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}
.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}
.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}
</style>
Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */
#navcontainer {
width: 210px;
margin-left:109px;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}
#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}
#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}
#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}
#profile {
width:260px;
height:180px;
margin: 40px auto;
}
#memberlist {
width:250px;
height:300px;
float:left;
}
#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}
#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}
Here is the code for my page. Code:
<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>
<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>
<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>
</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>
Again I am new to CSS so bear with me here...I did search this forum before posting this... I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag. I can manage the select list with the following code: <option style={background:red;} value=1>red</option> <option style={background:yellow;} value=1>yellow</option> ...and so on... but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ... Is there a way to control the highlighting color of the select tag? Sorry if this has been answered before... i couldn't find an answer... I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links. Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me. A little background for you...the lists are as follows: 1 - a list of currently open jobs in the company 2 - a list of all jobs in the company Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database. |
|||||||