CSS - Defining Which Sections Compress/scroll And Which Dont

Hi Guys!

Most of the links in my document are set to #ffffff, because they have a dark background.

I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet:

PHP Code:
 a.content:link {
color: #0000FF; 
text-decoration: underline;
}

a.content:visited {
color: #0000FF; 
text-decoration: underline;
}

a.content:hover {
background-color: #6666FF;
text-decoration: underline;
} 





And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction?

Full CSS below!

Thanks Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}

div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}

}
#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: center;
height:140px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px; 
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #dedbcb;
background-color: #0000FF;
text-decoration: underline;} 

I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE.

Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works:

Code:

P
{
	color: black;
	font-size: 10pt;
	font-family:tahoma;
}

myown
{
	color: blue;
	font-size: 10pt;
	font-family: Tahoma;
}

<myown>This is my text</myown>

When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case.

Thanks.

Is it possible to define the size of a DIV, by distance to the edges?

very simple.
this may sound strange, but i figured css would be
the easiest solution.

i simply have one of 2 characters that will display in
each TD of a table. either Y or N.
is there anyway to specify the color of the
background, or TD, depending on the character within?

if its Y, make it red, and if its N, make it blue.
that all.

any ideas???

Hello

I have defined the following rules for anchors:
Code:

a:link {
	color: green;
 	text-decoration: none;
	text-transform: none;
 	list-style-type: disc;
 	font-family: Arial;
	font-size: 12px;
}

a:hover {
	color: blue;
	text-decoration: underline;
	text-transform: none;
 	list-style-type: disc;
	font-family: Arial;
 	font-size: 12px;
}

a:visited {
	color: orange;
	text-decoration: none;
	text-transform: none;
	list-style-type: disc;
	font-family: Arial;
	font-size: 12px;
}

a:active {
	color: red;
	text-decoration: none;
	text-transform: none;
	list-style-type: disc;
	font-family: Arial;
	font-size: 12px;
}

I have 2 links in the site:
Code:

<a href="1.html">1</a>
<a href="javascript: void test();">Test</a>

The first link obeys the rules defined above
The second link doesn't obey the hover rule for some reason.
My only guess is that triggering JavaScript code from links may cause this problem.
I am testing this on IE6
On Mozilla and Opera both links work fine

I would appreciate any help

Hello,

I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works.

The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work.

http://www.tpxdesign.com/test/Valliant/alpha/index7.php

My nav menu code and nav style sheet:

Code:

<!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav"> 
  <li><a href="demoreel.php" class="port">Portfolio</a> 
    <ul>
      <li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
      <li><a href="shorts.php" class="port">Shorts</a></li>
	  <li><a href="musicvid.php" class="port">Music Video</a></li>
	  <li><a href="comvid.php" class="port">Commercial</a></li>
	  <li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
	  <li><a href="gallery.php" class="port">Photo. Gallery</a></li>
    </ul>
  </li> 
  <li><a href="services.php" class="serv">Services</a> 
  </li> 
  <li><a href="newupdate.php" class="newe">News & Events</a> 
    <ul>
      <li><a href="newupdate.php" class="newe">News/Updates</a></li>
      <li><a href="eventblog.php" class="newe">Event Calendar</a></li>
    </ul>
  </li>
  <li><a href="bio.php" class="about">About Valliant</a>
    <ul>
      <li><a href="resume.php" class="about">Resume</a></li>
      <li><a href="bio.php" class="about">Biography</a></li>
	  <li><a href="contact.php" class="about">Contact</a></li>
    </ul>
  </li> 
  <li><a href="links.php" class="link">Links</a></li>
  <li><a href="index7.php" class="home">Home</a></li>
</ul> 
</div> 
</div>
<!--[if !IE]><!-- end nav --><![endif]-->

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 199px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 198px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}

how do you define the the color of a hyperlink before it has been clicked and after it has been clicked?

Thanks.

I have some CSS for forms as seen below. (depreciated version)

Code:

<div class="item">
   <div class="text">Your Name:</div>
   <div class="field"><input type="text" /></div>
</div>

...

form .text {
   float: left;
   width: 75px;
}

form .field {
   float: left;
}

Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use?

Hi to all, & this is my question:
say I have a css class such as:

.classA1 { color: RED; font-weight: bold; font-size: 11px }

Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example:

.classA2 = { color: GREEN; rest same as A1 }
.classA3 = { color: BLUE; rest same as A1 }
.classA4 = { color: YELLOW; rest same as A1 }

How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this...

Thanks a lot for your help,

Luca

Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content.

Here is my page:

[Not an actual business...just a learning project]

My Home Page

Here is My CSS file:

My CSS File

Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect.

(I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?)

Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE.

If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me!

Thanks for helping me learn...(in advance)

PWD

Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added.

Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information.

However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc.

I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats.

Thanks

Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks.

P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-)

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

The right column of this website just started appearing in the wrong place, as you can see he [deleted]

Unfortunately, i did not make the site but have been asked to fix it. I cant seem to find the cause of this at all, any help would be great, thanks!

Edit: Found the mistake, a WYSIWYG field in the admin that shows on the header was screwing up the page with invalid code.