CSS - A Href Title Color ?

I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed!

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

Hi.

Is there any way to:

a) Change background color of the title box that appears when you hover over an image AND

b) Reduce the delay it takes to appear?

Thanks.

Excuse me, I'm currently designing a website (Freelance) and I would like to know how to change the color of the title.

I would like to have the Title a different color. I would like to know if I could change it to get the title a different color than the Box so it will stand out more. If it is not clear I shall provide an image of what I would like to do and please provide me with Tips or Suggestions of What I should do.

h tt p:/ /i125.photobucket.com/albums/p61/lazypuffstone/help.png

EDIT: I apologize I did not give you the Coding

.contentbox1 {
width: 675px;
border: solid #7A6A53;
border-width: 1px 1px 1px 1px;
background-color: #D5DED9;

}

.contentbox1 ul li {
margin: 20px 20px 30px 0px;
background-color: #D5DED9;
list-style-type: none;
}

Dear Friends,

I have been trying to make a stupid title bar, that i did with tables, now using css. This is what the code for a titlebar looks like in table form:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10"> <img src="img_inside_article_title-bar_left.gif" width="10" height="30"></TD> <TD colspan=2 height="30" background="tile_inside_article_titlebar_bak.gif"> <p class="left"> <span class="strong_white">&nbsp;Title</span></p></TD> <TD width="14"> <img src="img_inside_article_title-bar_right.gif" width="10" height="30"></TD> </TR> </table>
and would like to convert it into css. All my attempts have been very wrong, and i need help. I'd give my css code, but it is sooo wrong.......that it would be better to start from scratch.

basically this is the idea:
(Left Corner Image)(Title area that streaches across width of web page)(Right Corner Image) HELP

Fz105

how may i define that <a name> is not related to general selector by <a> tag? e.g. i don't want when i mouse over <a name> to change its color defined ny a:hover. assidning separate class to them is nightmare.

Hi there,

this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site.

I know the #blah should be used to set an id for it, but here's my concern;
1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">).
2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different?

thanks in advance.

Code:

<div id="topNav">
	<ul id="cssdropdown">
		<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
			<ul class="subuls">
			<li><a href="a.php">AAA</a></li>
			<li><a href="b.php">BBB</a></li>
			</ul>
		</li>
		<li class="topNavSep"></li>
		<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
	</ul>
</div>

<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>

Hi,
I am trying to move
<a href="" class="atopNavTitle">---A---</a>
<a href="" class="atopNavTitle">---B---</a>
down 20px.
I have tried the above style but it does nothing.
What do I do wrong?

Hello Everybody,

I am trying to figure out why IE is cutting off the foot of my title. It works just fine in firefox. I tried setting a height and it showed the bottom but cutoff the top. If anyone has any suggestions as to why IE is cutting off the bottom I would be very thankful.

Website with Title cut off at bottom

Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out...

I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself...

What I'm trying to accomplish is the same thing, only with a div that has textual content....

I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings...

I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail....

I hope this is a decent enough description of the problem... anyway to accomplish this???

Hello!

could someone take a look at my site and tell me why the links inside my content are whacked out? when you click on them they jump around...

i have been trying for two days to figure out which other style i am using is interfering, but i cant find that little sucker...and i have deconstructed it several times...

i think i am just too close to the code and need another pair of eyes.

here a link to a page with the problems...its the sample menu links in the center of the page
green-bistro dot com on the menus page

oh, and another strange thing, like on this page, if i link to a page with .php in the extention, the link wierds out, but the mailto link works fine...

green-bistro dot com on the eco events page

thanks in advance for anyone who can help!!!

Hello experts!

I would like to style the font, background-color and border (possibly more) for those little yellow boxes that appear when you hover over an element with the ALT or TITLE attribute set.

Is there a default/built in selector for these, or does it require a round-about method?

A lot of people have been asking about this at work I'd love to be the first to find the answer (with your help of course)!

Can you style the tooltip box that pops up on hover over an object with the 'title' attrib set?

If so how?

Hours of googling have only led to some fairly complex DHTML/Java solutions that I don't like the look of.

Cheers,

John.

I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution?

Many thanks!

This is the code in question.

Code:

.ipsType_pagetitle, .ipsType_subtitle {	         font: 300 16px/1.3 Helvetica, Arial, sans-serif;          color: #141719;}

The circled title is what I want to remove.

http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg

The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title.

http://www.thechristianidentityforum.net/smf/pix/screenshot2.png

EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this.

I want to place the page title on the left and the pages logo on the right of the page. The logo must be directly accross from the title.

Can anyone suggest some CSS and html

Below is my feeble attempt

HTML:
<div id="header">
<p>Report Title
<span class="logo"><img src="logo.gif">
</span>
</p>
</div>

CSS:
#header p {
text-align: left;
}

#header .logo {
text-align: right;
}