|
CSS - Need Quick Help With Css List And Colors
I need to make a list of these movies in CSS, and I'm a bit of a noob.:
Pulp Fiction The Matrix Lost In Translation V for Vendetta Fight Club It needs to have the following: *** a separate CSS document to be the style sheet *** horizontal lines and blank lines between items as described above *** assorted colors for different pieces of information *** class selectors to cause some pieces of information to be Underlined and/or in large type *** the enlarged first-letter effect *** a horiziontal line in an in-line style as described above *** an assortment of generic fonts Can someone help me out with this? I know its easy but I'm struggling with CSS. Thanks! Similar TutorialsHi all, Probably easy, but I'm stumped... At this test page, I have now included a little horizontal image spacer image IN the list on the right. You'll notice that it has a bullet just like the text links do. I want the image right where it, preferably with no space above or below it between the "Resume" & "I Can Help" links. If I close the UL tag after Resume, then re-open it before I Can Help, the gap is too big. So I threw the image directly into the list! But I gotta kill the bullet. How? CSS FILE. Thanks! Chris figured it out. don't know how to delete 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? 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 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 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 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 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>
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 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 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>
Suppose 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. 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? 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? 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... Hi guys I've this code, it looks fine in IE (damn..) but it does not look in Firefox Code:
body {
scrollbar-track-color: #D8AFAF;
scrollbar-face-color: #660000;
scrollbar-highlight-color: #927373;
scrollbar-3dlight-color: #663333;
scrollbar-shadow-color: #660000;
scrollbar-darkshadow-color: #660000;
scrollbar-arrow-color: #FF0000;
}
What's wrong ? - my Firefox version (1.0.1) - the css code ? thanks 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 is it possible to blend colors of an image on a website? I would assume it would be done in css or javascript, so i decided to ask here. Anyways i have a two colored image, and one color is transparent. I'm hoping that there is a way i can just change the one color that is opaque to whatever I want. Can this be done on the website without creating a different image for every color i want? hi all ! I have this code that defines a scroll table: Code: div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:975px;
font-weight: bold;
}
And this css that controls what should or shouldnt be printed. Code: @media print{
TH.noprint, TD.noprint, P.noprint, table.noprint
{
display: none;
}
}
@media print{
div.scrollingDiv{
height: auto;
width: 1000px;
vertical-align:middle;
font-size-adjust:
}
}
THe problem is that when I print the table the colors inside that table are not printed... I have no clue what it could be. Any idea is appreciated. THanks in advance! 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. |
|||||||