CSS - Automatically Generating Code ...

Solution included in post below --- thanks.

Hi, I am rewriting a series of webpage in CSS. the pages have a two column
layout with a top area which has a banner effect.

What I would like to do is to have the top and the left div's contain the same info on all pages. So instead of manually putting the contents of these
div's in each page I would like to just create the contents in one file
say top.html and left.html and load them in each page by using some sort of link. This would make any changes to the contents easy, edit one file instead of many.

I am CSS newbie so I would be greatful for any pointers.

Thanks,
R Haynes

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

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?

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 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">&nbsp;</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">&nbsp;</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...

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;}

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,
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

Sorry....wrong info here....been up too long.
I'll regroup and repost this with hthe correct info.

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!

Please look at this page:

http://validator.w3.org/check?uri=w...=Inline&group=0

As you can see all the script codes are in need of helping to pass. I am trying to clean this page up and the rest but need advice to how to do so. For example, it is telling me not to use the & sign in the script but I am afraid to replace it with the & or & . What should I do here or how can I fix these errors? Should I be using a different Doc type or something?

Thanks!!!

I am building a new navigation menu which works fine as you can see below:
http://www.hotlinkhosting.com/test/menu.php

However, the following version does not:
http://www.hotlinkhosting.com/test/menu.php?.

The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help.

Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors.

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.