CSS - Css Question: Is This Legit / Supported / Compliant?

If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much.

If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width]

The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered?

Hi everyone. I was wondering if it was possible to create a link from already existing text on a page by reworking the styles in the cssstylesheet file? I'm currently editing around a shopping cart for a client but i was wondering if I could take a bit of a shortcut using css instead.

Thanks for your time.

Pablo

OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean ....


http://www.geocities.com/jezman2002/index.html

You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean

I just wondered if there was any easy way to do this ???

-Thanks-

i am having a small issue with font size in browsers.

i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers

when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created.

the problem i am facing is with firefox only and all other browsers work fine

only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers

i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant.

i have the following in the css file
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #ffffff;
font: normal 12px Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}



please advice.

any help will be greatly appreciated.

thanks.

I am currently working on a site: www.wirelessguy.net

I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only.

I made the site template in a php file, then I include that file on all my pages that I create.

How can I get pages to load in the middle section of the site?

I'm not sure is this question relating to css or javascript. Pls help. thanks alot

Q1:
What are the ways you can deal with x-browser issues? What are the pros and cons of each?


Thanks,
Gary

how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly.

Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look.

http://www.cooperworkskilns.com

CSS:

http://www.cooperworkskilns.com/styles/layout.css

Hi,

I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++?

Thank you,
Cem

Code:

<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>

<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>

hi,

I have a div that holds everything in called #bgcontain. This is just viewable in 800x600. An would center if the browser res is higher.

I would like to place an advert on the right of this div that 'appears' if some has a higher res. So this advert would be off center. I have tried to put the advert div inside #bgcontain and relatively position it but I cant seem to get there, can any help point me in the right direction

thanks

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

I got the following...

Line : 0 font-family: You are encouraged to offer a generic family as a last alternative

here is the .css file

any suggestions as how to make a font family non generic.

Code:

<!--
body{
	margin: 10px 10px;
	font-family: "Arial",Times;
	background-color: #FAEBD7;
}
form{
	padding: 2px;
	font-size: 10pt;
	line-height: 12pt;
	font-family: "Arial",Times;
}

input{
	background-color: #FAEBD7;
	border: solid 1px #000000;
}
div{
	width: 700px;
	padding: 10px;
	background-color: #FAEBD7;
}
div#header{
	height: 25px;
	color: #8E2323;
	font-size: 12pt;
	font-weight: 600;
	line-height: 14pt;
	text-align: center;
	letter-spacing: 2px;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
a{
	padding: 2px;
	color: #8E2323;
	font-size: 11pt;
	line-height: 16pt;
	text-decoration: none;
}
a.na{
	color: #000000;
	font-size: 11pt;
	font-family: "Arial",Times;
}
td#navContainer{
	padding: 5px;
	color: #000000;
	font-size: 11pt;
	text-align: left;
	line-height: 11pt;
	font-variant: small-caps;
}
p#footer{
	width: 565px;
	padding: 5px;
	font-size: 11pt;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
td#footer{
	width: 565px;
	padding: 5px;
	font-size: 11pt;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
div#viewContainer{
	width: 550px;
	padding: 10px;
	font-size: 11pt;
	text-align: left;
	font-family: "Arial", Times;
	border-left: solid 1px #000000;
}
p#copyright{
	width: 700px;
	padding: 5px;
	font-size: 8pt;
	line-height: 10pt;
	text-align: center;
	font-variant: small-caps;
	font-family: "Arial",Times;
}
//-->

Hello, I am in the process of re-doing a page of my site in CSS...the working page is he http://www.tombraiders.net/katie/test/index.html

CSS file he http://www.tombraiders.net/katie/test/style_index.css

I have the body part semi transparent so you can see through to the background a little bit. Now my problem is that the header is also transparent, which is what I don't want.

Does anyone know how I can isolate the body so the header is not transparent as well?

Thanks

You're probably not going to fully understand what I'm asking, because I can't describe things well, but just try. Okay?

I've seen websites that have the navigation on the left side in a panel. And when you click a link on there, the page loads in the bigger panel on the right. But, the whole page doesn't reload (in other words only the big right panel reloads). I'm pretty sure they use CSS for that, not frames. Because when I look at the code on those certain pages, I can see that they use style sheets. Are you still following?

My question to you is, how do you target the link to shoot into that panel???

I can't figure it out. Maybe you can. Feel free to ask any questions.


Later,
a fellow geek (and proud of it!)
~Sam~
Marvelgirl@ameritech.net
http://www.x-mencharacters.com