|
CSS - Help Understanding Code
Similar TutorialsHello, I am trying to make my own webpage, and i downloaded an opensource html document along with the css files. It all works fine, except that i want to change the color of links on the page ( currently its just an underline ) i would like them to be blue. My problem is i have no idea which part of my css file does this? Can anyone help, the color portion of the css file is he Quote: html{height: 100%;} body { background: #837560; color: #70695A; } blockquote { background: #FFFFFF; color: #70695A; border-color: #767676; } #main { background: #FFFFFF url(back.png) repeat-y; color: #70695A; } #links, #footer, #menu, #menu li a { background: #FFFFFF url(menu.png); color: #DBD7D1; border-color: #D7D7D7; } #links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #DBD7D1; } #logo { background: #FFFFFF url(logo.jpg) no-repeat; color: #70695A; } #logo h1 { background: transparent; color: #FFFFFF; } h1, #column2 h1 { background: transparent; color: #CE7014; border-color: #CAAE90; } /*hover color on menu at top*/ #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { background: #FFFFFF url(menu_hover.png); color: #70695A; } /*This is text color of the main text*/ #content, #column2 a, #column2 a:hover { background: transparent; color: #70695A; } /*This will effect link on right colum your sidebar*/ .sidebaritem, .sidebaritem a, .sidebaritem a:hover { background: transparent; color: #DBD7D1; } .sbihead { background: #FFFFFF url(sbi_header.png); color: #70695A; } .sbihead h1 { background: transparent; color: #70695A; } .sbilinks li a { background: #FFFFFF url(link.png); color: #DBD7D1; } .sbilinks li a:hover { background: #B7B7B7; color: #CE7014; } input, textarea { background: #FFFFFF; color: #70695A; border-color: #CAAE90; } The links i want to change are all in "column2". Thanks: I've been doing a little bit of experimenting with YUI grids, and I have to admit I'm having some trouble understanding how they work. I've noticed that when you define a couple of columns, the columns are floating, but the parent container automatically expands with the child content. As far as I know, the only ways to do that are to float the parent container, or set overflow: auto (or hidden) to the parent. Using Firebug, it appears neither of these are happening. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" />
</head>
<body>
<div id="doc4">
<div class="yui-g" style="border: 1px solid black">
<div class="yui-u first">
<p>Column one</p>
</div>
<div class="yui-u">
<p>Column two</p>
<p>Column two</p>
<p>Column two</p>
</div>
</div>
<!-- normal setup, parent doesn't expand -->
<div style="border: 1px solid black">
<div style="float: left; width: 49.2%">test</div>
<div style="float: right; width: 49.2%">test</div>
</div>
</div>
</body>
</html>
What am I missing? Hi guys, I run a web comic that's dynamically generated with PHP by placing component graphics on a page with CSS layers. I'm in the middle of a big redesign of it and in the new version I'm trying to use relative positioning instead of absolute positioning like I did before. In the original version, the comic itself was a fixed height and so the menu that appeared below was in a fixed position. I bumped it down the page by using a 1x1 transparent image as a spacer. But in the new version the comics will be of variable height. In order to keep the comics from overlapping the menu, I wanted to have each element bump the next element down depending on its size. But relative positioning is not behaving the way I'm expecting and after reading a bunch of stuff on the web, I'm still confused. Right now I'm just testing it out with three blocks: the title graphic, the "no comic found" error, and the copyright. The copyright is supposed to appear below the error message, but when I bump the error message down away from the title graphic with "position: relative; top: 100px", the copyright block doesn't take this into account and appears just under where the error message WOULD have been had I not given it a relative offset. What I want to know is how to get all the divs to adhere to the offsets of the divs that came above it so that they will continue to appear below each other like the normal HTML flowlayout. Currently, all three blocks are inside a container div so that the content will stay centered if the window is resized. Sorry if this is confusing, I'm not really sure how to explain it. Hello all, I had a simple question, I don't understand why all my html code move and not only my body code in the html. Actually, I only want that the code inside the <body> and </body> move with margin or padding. But I wrote a line that only draw a line of color, and cannot understand she is moving alsot when I adapt the css. Here is my html file : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>This is our title.</title> <link rel="stylesheet" media="screen" type="text/css" href="./myCss.css" /> <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /> </head> <table width="100%" bgcolor="#003399" style="height: 17px;" border="0" fra me="hsides" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"></td></t r></tbody></table> <body class="ourBodyWiki"> <a href=.>start</a></br> <p> Bienvene sur la premiere page de dokuwiki ! </p> <p> Commencons par creer deux liens : </p> <ol> <li class="level1"><div class="li"> Notre premier lien : <a href="linux.html" cl ***="wikilink1" title="linux.html">Linux</a></div> </li> <li class="level2"><div class="li"> Deuxieme lien : <a href="bsd.html" class="wi kilink1" title="bsd.html">BSD</a></div> </li> <li class="level2"><div class="li"> Troisieme lien : <a href="microsoft.html" cl ***="wikilink1" title="microsoft.html">Microsoft</a></div> </li> </ol> <p> Ceci est une premier version ! </p> </body> </html> And here is my css file, in the same directory as the html file : Code:
.ourBodyWiki{
margin: 10px;
padding: 20px;
}
p{
margin: 0px;
}
Can someone help me please ? I am still newbie in css and html but I only need to do simple things. I am working on a site design and I have a div that is on another z-index because I wish it to appear on top. I would like that div position to be relative to the a parent div. Here is a link to the current issus: http://www.rustbug.com/the19thhole/index.html page code. I have the div for the logo div within the page for now: 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>Untitled Document</title>
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Wrapper">
<div id="myDiv"
STYLE="position:relative;
z-index: 2;
top:20px;
left:135px;
height:287px;
width:358px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',sizingMethod='scale');"/>hello</div>
<div id="Navigation">
<ul id="mainNav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#" class="active"><span>gallery</span></a>
<li><a href="#"><span>directions</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
</div>
<div id="Container">
<div id="Topcurve"><img src="images/topCurve.gif" height="8" width="689" border="0" /></div>
<div id="Headerbar"><img src="images/headerBar.gif" height="48" width="670" border="0" /></div>
<div id="Titleimage"><img src="images/titleImage.gif" height="207" width="670" border="0" /></div>
<div id="Contentcontainer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div id="Footer">
<p>The 19th Hole / #27 Main Street / at the Royal Dane Mall / St. Thomas, V.I. 00802<br />
phone: 340-777-8811 / email: ehcsnow@yahoo.com</p>
</div></div>
<div id="Bottomcurve"><img src="images/bottomCurve.gif" height="20" width="689" border="0" />
</div>
</div>
</body>
</html>
here is the css Code:
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
background:url(../images/background.jpg)
}
body {
text-align: center;
}
#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
width: 765px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto;
border:1px solid white;
}
#Container {
color: #333;
clear: both;
width: 689px;
background:url(../images/containerBackground.gif) repeat-y;
margin: 0 auto;
}
#Topcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Headerbar {
clear: both;
width:670px;
margin: 0 auto;
padding-right:4px;
}
#Titleimage {
clear: both;
width:670px;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Contentcontainer {
clear: both;
width:650px;
margin: 0 auto;
margin-top:6px;
padding:5px;
border:1px solid #009900;
}
#Logo {
z-index: 2;
position:absolute;
top:20px; left:135px;
width:358px;
height:287px;
}
#Footer {
clear: both;
width:670px;
height:50px;
background:url(../images/footerBar.gif) no-repeat;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Bottomcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Navigation {
font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin-left: 275px;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainNav li {
float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight:bold;
color: #FFF;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
text-decoration: none;
color: #66cc00;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#mainNav li a.active {
background-attachment: scroll;
color: #359a02;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px;
}
#mainNav li a.active span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px;
}
#mainNav li a.active:hover {
color: #66CC00;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
/*#Logo {
position:relative;
z-index:2;
top:20px; left:135px;
width:358px;
height:287px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader;
}*/
Any help would be greatly appreciated. Thanks! Stephen Hi, I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik... I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details. REgards Chad My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice. Anyone have any pointers or tutorials that you think might be worth checking out? TIA. I am trying to create a menu that uses drop downs (only 1 deep) and I seem to be running into problems. I've used code that I've tried to tweak but seem to be having problems. I'm sure there is code in here that I don't need, but I don't know what I can remove and what I can't. My biggest current problem is that I want a) to have more room between the menu items (to space them out) but I can't seem to find where to set that? and b) I can't seem to figure out how to set the width of the drop down items...I've tried everywhere! Here is a link to the page: http://www.thespinzone.com/temp/csshelp.html and here is the code for the css I'm using Code:
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: #FFFFFF;
text-align: center;
padding: 0;
margin: 0em;
}
#container {
width: 745px;
background: url(cssbg2.gif) center right no-repeat;
text-align: left;
border: 0px solid #FF0000;
margin: 0 auto;
}
#nav, #nav ul {
float: right;
width: 353px;
height: 96px;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 20px;
border-width: 10px 10px;
margin: 0 0 0 0;
}
#nav a {
display: block;
width: 8em;
width: 4em;
color: #7C6240;
text-decoration: none;
padding: 0.25em .5em;
}
#nav li {
float: left;
padding: 0;
width: 1em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #FF0000;
border: 0px solid #FF0000;
}
</style>
sdf
hi... what does this css code mean.. body table table table table#plv table td{color:#fff} ? and how would the html code look like? is this for tables with no class tags attach to it.. I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code: /******************************** Main Navigation ****** * Global topmenu navigation, degrades gracefully to css * if Javascript is disabled. Else applies fade effect. */ #navcontainer { height:50px; float: right; width:1014px; position:relative } /* Menu Body */ ul#navigation { height:35px; list-style:none; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; float: left; } /* Float LI Elements - horizontal display */ ul#specialnav li { float:left; display: block; } /************ SPECIAL NAV ************************/ #specialnav { height:50px; width:185px; position:relative; } /* Link - common attributes */ #specialnav a { background:url('specialnav.png') no-repeat scroll top left; display:block; height:35px; width:185px; position:relative; z-index:10; line-height:2.5em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#fff; font-size:14px; text-align:center; text-decoration:none; padding-left: 0px; padding-right: 0px; } /* Specify width and background position attributes */ #specialnav li.isactive a { background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link (on hover) - common attributes */ #specialnav li.highlight a:hover { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; height:35px; width:185px; line-height:2.5em; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link - common attributes */ #specialnav li.highlight a:active, #specialnav li.highlight a:focus, #specialnav li a:active, #specialnav li a:focus { background:url('specialnav.png') no-repeat scroll 0 -70px; display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* fade effects start here */ /* Span (on hover) - common attributes */ #specialnav a span.animate { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; position:absolute; line-height:2.5em; top:0; left:0; height:100%; width:100%; z-index:10; cursorointer; } /* Shift background position on hover */ ul#navigation li a span { background-position:0px -35px; } /* Shift background position on hover for the class: "isactive" */ ul#navigation li.isactive a span { background-position:0px -35px; } span.trans {display:none;} For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong? here is the code: Code: css
*
{
margin: 0px;
padding: 0px;
}
html
{
width: 100%;
height: 100%;
}
body
{
height: 100%;
width: 100%;
background-color: /*#E0F8F7 */#989B9F;
margin: 0px;
padding: 0px;
}
#login_box
{
background: url( '../images/login2.png' ) no-repeat center center;
position: fixed;
width: 319px;
height: 417px;
top: 50%;
left: 50%;
margin-top: -209px;
margin-left: -160px;
}
#input_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 230px;
margin-left: 55px;
}
#lock
{
border: none;
position: fixed;
background: url( '../images/lock.png' ) no-repeat;
width: 10px;
height: 13px;
margin-top: 287px;
margin-left: 270px;
}
#forgot
{
position: fixed;
margin-top: 362px;
margin-left: 50px;
}
#login_box h1
{
color: #EDF2F7;
font-size: 10px;
text-align: left;
font-family: arial, sans-serif;
}
.input
{
width: 200px;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
border: solid 1px #85b1de;
background: url( '../images/gr.png' ) repeat-x #EDF2F7;
background-position: top;
padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
border: solid 1px #31677B;
}
#login_box p
{
font-weight: bold;
color: #478FAB;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
}
#button_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 360px;
margin-left: 190px;
}
.button
{
border: none;
width: 103px;
height: 38px;
text-indent: -1000em;
cursor: pointer;
background: url( '../images/login_button.png' ) no-repeat center center;
}
in Internet Explorer: Incorrect in Firefox, Opera, Chrome... ( Any code compliant browser ) Correct ....Any help please? i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!! what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity? how do i input filters? how do i input tablelayout(like CSS or HTML)? where do i insert tags for the scrollbar, which also has not worked for me? Code:
<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300;
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>
<body>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
<area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
<area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
<area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
<tr>
<th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
<td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
</tr>
<tr>
<th height="211" scope="row"> </th>
</tr>
<tr>
<th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
<tr>
<th width="198" height="18" scope="row">New Events!!! </th>
</tr>
<tr>
<th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
</p></th>
</tr>
</table></th>
</tr>
<tr>
<th height="32" scope="row"> </th>
<td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br>
<b>Last Updated:</b> January 25, 2006
</td>
</tr>
</table>
<p><br>
<br>
</p>
</body>
</html>
this is also an attached code. btw i am working w/ dreamweaver. Code:
<style type="text/css">
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
</style>
this is the last one Code:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
Hi guys I've a website, pure css, tableless It looks good in Firefox, Opera, etc. etc. It looks VERY bad in IE Look: Firefox http://img465.imageshack.us/img465/4333/shot14jr.png Internet "Explorer" http://img378.imageshack.us/img378/8224/shot22cv.png Website files for download here... http://rapidshare.de/files/11673865/website.zip.html Does any1 know how to fix css or web to look good in IE also ? Thanks a lot in advance I often see css code with "greater than" sign like this: html>body #centercontent { margin-left: 201px; margin-right:201px; } what does this mean? What is the difference with body #centercontent { margin-left: 201px; margin-right:201px; } Thanks for the enlightment. Greetings everyone! I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon. My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css? Thanks in advance! - Dehumanizer I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page. So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file. Thanks in advanced! Sorry....wrong info here....been up too long. I'll regroup and repost this with hthe correct info. Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference Hello. I'm interested in creating areas within my web page similar to the attachment, that show formatted code. I can handle most of it - using specific font(s), a green left-border, perhaps some banding for alternate rows, etc. But is it possible to create automatic numbering without having to insert separate 'li' elements for each row? Would I have to entity reference lots of characters within the code? Indenting might be troublesome? Perhaps there is some site that already makes this css publicly available? Andy. Can anyone help me to transform this table in css code ? <table width="1000" border="1" bordercolor="#FFCCFF"> <tr> <th width="500"> <img src="111.jpg" </th> <th width="500"> <center> <font face="Tahoma" size="60" color="#330033"> 111 </font> </center> </th> </tr> </table> |
|||||||