CSS Forum

**Arch_Angel_X** · 01-31-2007, 04:58 PM

Hi Guys,
I am trying to make a global navigation.
So far, I can figuring it out how to make the global navigation and I just quite confuse how I can add a small downward facing arrow for the link that is active. (green)

this my css code

Quote:

#mnavcontainer {
position:absolute;
top:177px;
left:16px;
width:793px;
height:50px;
background-color: #ffffff;
font:13px arial, sans-serif;
font-weight:bold;
}

#mnavlist a
{
text-decoration:none;
}

#mnavlist a:link {
color:#006600;
}

#mnavlist a:visited {
color:#006600;
}

#mnavlist a:hover {
color:#339933;
text-decoration: underline

}

#mnavlist li.inline {
display: inline;
padding-left: 12px;
padding-right: 12px;
border-right: 1px dotted #066;
}

#mnavlist li.last {
display: inline;
padding-left: 12px;
padding-right: 12px;
border-right: 0px;
}

HTML Codes

Quote:

**LadynRed** · 01-31-2007, 09:14 PM

Quote:

#mnavlist li.last {
display: inline;
padding-left: 12px;
padding-right: 12px;
border-right: 0px;

Add
background: url(downarrow.gif) no-repeat;

You'll have to adjust left padding to push the text off the graphic.

**Arch_Angel_X** · 04:52 AM

Hi Lady,

thanks for the reply but somehow the arrow still there even though when the mouse is not on hover.

**Arch_Angel_X** · 02-01-2007, 05:09 AM

okay, I solved the problems for the last post but I got another problem
for example: my mouse hover to the item1, it push the other item 12px more.
if i don't do padding-right, then the arrow will be blocking the text

this is my last css code.

Quote:

#mnavlist a:hover {
color:#339933;
text-decoration: none;
background:url("../images/downarrow.gif") no-repeat;
background-position: right bottom;
padding-right: 12px;

}

**LadynRed** · 02-01-2007, 03:18 PM

Are the other items 12px to the right even when not hovered ??
Can you give us a URL or post the rest of your css and html ?

**Arch_Angel_X** · 02-01-2007, 09:11 PM

okay lady in red, I will post my codes

but there is something seriously more troubling me.
The web doesn't showed up on IE

http://www.designstamp.com/dev/bclung

**GrayKard** · 09:27 PM

It appears to me that your index page has no file extension. So IE can't find it.

Try adding it so the file name looks like this: bclung.html

**Arch_Angel_X** · 02-01-2007, 09:36 PM

huh thats weird I name my index page as index.html

**LadynRed** · 02-01-2007, 09:39 PM

Umm.. no offense but that page is a mess. everything just shows up in a single column on the left side !

**Arch_Angel_X** · 02-01-2007, 09:49 PM

really? thats weird because on firefox,safari, and opera is different

**GrayKard** · 02-01-2007, 09:54 PM

Quote:

Originally Posted by Arch_Angel_X

okay lady in red, I will post my codes

but there is something seriously more troubling me.
The web doesn't showed up on IE

http://www.designstamp.com/dev/bclung

Ok, when I go to that link using IE it wants me to download a file called bclung. If I do that its an extensionless file. If it add html to it, it seems to be your index page.

But if I go to this URL in IE I get the correct page. http://www.designstamp.com/dev/bclung/index.html

Not sure what is going on.

**Arch_Angel_X** · 02-01-2007, 09:56 PM

uff i dunno too
I change the index page became home.html

IE is always amazed me with its magic

and anyway, I am on Mac, so its hard for me to do testing on internet explorer

**Arch_Angel_X** · 02-01-2007, 10:00 PM

okay lady this is my current
html codes

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<title>Golf Privilege Club-Golf and Save-Buy Membership Book Today</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="header1">
<a href="http://www.golfandsave.ca"><img src="images/header/logo.jpg" alt="headerlogo" /></a>
</div>

<div id="header2">
<img src="images/header/header2.jpg" alt="header2" />
</div>

<div id="header3">
<img src="images/header/header3.jpg" alt="header3"/>
</div>

<div id="mnavcontainer">

<ul id="mnavlist">
<li class="inline"><a href="home.html" id="home">ABOUT THE GOLF PRIVILEGE CLUB</a></li>
<li class="inline"><a href="participating.html" id="Participate">PARTICIPATING GOLF COURSES</a></li>
<li class="last"><a href="buymembership.html" id="buymembership1">BUY MEMBERSHIP BOOK TODAY!</a></li>
</ul>
</div>

</div>
<div id="main">
<div id="content1">
<img src="images/golfad.jpg" alt="golfad" />
</div>
<div id="content2">
</div>
<div id="text">
<p style="color:#ffffff">
Don't miss out on reduced green fees, golf vacation packages and more!
<a href="buymembership.html" id="buymembership2">Buy
Your Golf Privilege Club® Membership Book for a low price of $35</a> and enjoy:
</p>
</div>
<div id="text2">
<p style="color:#ffffff">
2 for 1 and 4 for 3 green fees offers
</p>
</div>
<div id="text3">
<p style="color:#ffffff">
455 courses in all, with more than 200 new courses to choose from this year.
</p>
</div>
<div id="text4">
<p style="color:#ffffff">
multiple and unlimited discount plays & more!
</p>
</div>
<div id="text5">
<p style="color:#ffffff">
Plus valuable discounts on golf vacation to resort in San Diego, Nevada, Scottsdale, Palm Springs, and much more.
</p>
</div>

</div>

<div id="content3">
<div id="ads">
<div id="ads1a">
<a href="participating.html"><img src="images/ads1.gif" alt="greatdealsongolf"/></a>
</div>
<div id="ads1b">
<a href="http://www.golf2007.kintera.org"><img src="images/ads2.gif" alt="pacificgolfmagazine"/></a>
</div>
<div id="ads1c">
<a href="http://www.golfandsave.ca/golfwest.htm"><img src="images/ads3.gif" alt="traveldiscount"/></a>
</div>

</div>
</div>

<div id="sponsorcontainer">
<div id="sponsor1">
<a href="http://www.cknw.com/"><img src="images/cknw.gif" alt="cknwnewstalk980"/></a>
</div>
<div id="sponsor2">
<a href="http://www.canada.com/globaltv "><img src="images/global.gif" alt="globalTV"/></a>
</div>
<div id="sponsor3">
<a href="http://www.golfholidayswest.com/ "><img src="images/golfholidaywest.gif" alt="golfholidaywest"/></a>
</div>
<div id="sponsor4">
<a href="http://www.canadawide.com/pacificgolf.php?id=5"><img src="images/pacificgolf.gif" alt="pacificgolf"/></a>
</div>
<div id="sponsor5">
<a href="http://www.ticketmaster.ca"><img src="images/ticketmaster.gif" alt="ticketmasterCA"/></a>
</div>
<div id="sponsor6">
<a href="http://www.van.net/"><img src="images/vannet.gif" alt="ticketmasterCA"/></a>
</div>
<div id="sponsor7">
<a href="http://www.saskgolf.ca/"><img src="images/sas.gif" alt="sasgolf"/></a>
</div>
<div id="sponsor8">
<a href="http://www.saskgolfer.com/"><img src="images/saskgolfer.gif" alt="saskgolfer"/></a>
</div>
<div id="sponsor9">
<a href="http://www.hot93.com/"><img src="images/hot93.gif" alt="hot93fm"/></a>
</div>
</div>
</div>
<div id="bottom">
<img src="images/bottom.png" alt="bottomline"/>
</div>

<div id="footer">
<div id="ftcontent1">
<img src="images/bclungsm.gif" alt="BCLung"/>
</div>

<div id="navcontainer">
<div id="wlist">
<p>Websites:</p>
</div>
<ul id="navlist">
<li class="inline"><a href="http://www.bc.lung.ca" id="BCLung">British Columbia</a></li>
<li class="inline"><a href="http://www.ab.lung.ca" id="ABLung">Alberta</a></li>
<li class="inline"><a href="http://www.sk.lung.ca" id="SKLung">Saskatchewan</a></li>
<li class="last"><a href="http://www.mb.lung.ca" id="MLung">Manitoba</a></li>
</ul>
</div>
<div id="design">
</div>
<div id="notice">
<p>All proceeds from the Golf Privilege Club® go to lung health research, programs and services</p>
</div>
</div>

</body>
</html>

my CSS

Quote:

html {
height:100%;
width:780px;
margin:0px auto; padding:0px;
}
body {
font-family: Helvetica, Arial, sans-serif;
height:100%;
width:780px;
margin:0px auto; padding:0px;
color:#000;
background-color: #D6DEBD;
}
h2 {
color:#484848;
font-size:20px;
word-spacing: -2px;
}
h3 {
color:#24478D;
font-size:16px;
}
h3.clear {
clear: right;
}
h4, h5, h6, h7 {
font-size:10px;
}
h2, h3, h4, h5, h6, h7 {
background-color:transparent;
}
p {
line-height:15px;
}

a, a:link, a:active, a:visited {
outline: none;
}
img {
border:0px;
}
.replace {
text-indent:-9999px;
border: 0px;
}
.selected {
font-weight:bold;
}

.underlined {
text-decoration: underline;
}
.italic {
font-style:italic;
}
#container {
float:left;
width:816px;
margin:0px auto;padding:0px;
background-color: #D6DEBD;

}

/* Home page
------------------------------*/
/* header */

#header {
top:0px;
width:815px;
height:225px;

}
#header1 {
position:absolute;
top:20px;
left:10px;
width:306px;
height: 157px;
background-color: #ffffff;

}
#header2 {
position:absolute;
top:20px;
left:315px;
width:263px;
height:157px;
background-color: #ffffff;

}
#header3 {
position:absolute;
top:20px;
left:578px;
width:231px;
height:167px;
background-color: #ffffff;

}

/*
------------------------------*/
/* main navigation */

#mnavcontainer {
position:absolute;
top:177px;
left:16px;
width:793px;
height:50px;
background-color: #ffffff;
font:13px arial, sans-serif;
font-weight:bold;
}

#mnavlist a
{
text-decoration:none;
}

#mnavlist a:link {
color:#006600;
}

#mnavlist a:visited {
color:#006600;
}

#mnavlist a:hover {
color:#339933;
text-decoration: none;

}

#mnavlist li.inline {
display: inline;
padding-left: 2px;
padding-right: 20px;
border-right: 1px dotted #066;

}

#mnavlist li.last {
display: inline;
padding-left: 2px;
padding-right:20px;
border-right: 0px;

}

/*
------------------------------*/
/* main content */

#main {
top:225px;
width:810px;
height:461px;
}

#content1 {
position:absolute;
top:227px;
left:16px;
width:333px;
height: 382px;
padding-top:0px;
}

#content1b {
position:absolute;
top:227px;
left:16px;
width:333px;
height: 382px;
padding-top:0px;
}
#content1c {
position:absolute;
top:227px;
left:16px;
width:546px;
height: 382px;
padding-top:0px;
background-color:#ffffff;
}

#content2 {
position:absolute;
top:227px;
left:349px;
width:207px;
height: 382px;
padding-top:0px;
background-image:url("../images/green.jpg");

}
#content2b {
position:absolute;
top:227px;
left:349px;
width:207px;
height: 382px;
padding-top:0px;
background-image:url("../images/greenb.jpg");

}

/*
------------------------------*/
/* text files */
#text {
position:absolute;
top:233px;
left:355px;
width:160px;
height: 120px;
padding-top:2px;
padding-left:18px;
font:12px helvetica, sans-serif;

}
#text2 {
position:absolute;
top:342px;
left:405px;
width:90px;
height: 45px;
padding-left:8px;
font:9px helvetica, sans-serif;
}

#text3 {
position:absolute;
top:386px;
left:405px;
width:98px;
height: 70px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text4 {
position:absolute;
top:454px;
left:405px;
width:98px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text5 {
position:absolute;
top:494px;
left:405px;
width:122px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text1b {
position:absolute;
top:233px;
left:355px;
width:160px;
height: 120px;
padding-top:2px;
padding-left:18px;
font:13px helvetica, sans-serif;

}

#text1c {
position:absolute;
top:213px;
left:7px;
width:250px;
height: 120px;
padding-top:2px;
padding-left:18px;
font:12px helvetica, sans-serif;

}

#text2b {
position:absolute;
top:282px;
left:355px;
width:140px;
height: 45px;
padding-left:18px;
font:10px helvetica, sans-serif;
}
#text2c {
position:absolute;
top:42px;
left:9px;
width:250px;
height: 45px;
padding-left:18px;
font:12px helvetica, sans-serif;
}

#text3b {
position:absolute;
top:385px;
left:392px;
width:98px;
height: 20px;
padding-left:8px;
font:11px arial, sans-serif;
}

#text3c {
position:absolute;
top:150px;
left:105px;
width:150px;
height: 120px;
padding-left:8px;
font:12px helvetica, sans-serif;
}

#text4b {
position:absolute;
top:425px;
left:392px;
width:98px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text5b {
position:absolute;
top:455px;
left:392px;
width:20px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text6b {
position:absolute;
top:485px;
left:392px;
width:20px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}

#text7b {
position:absolute;
top:515px;
left:392px;
width:100px;
height: 60px;
padding-left:8px;
font:9px arial, sans-serif;
}
/*
------------------------------*/
/* buy membership selection */

#selectregion {
position:absolute;
top:18px;
left:15px;
width:208px;
height: 300px;
padding-left:8px;
font:12px arial, sans-serif;
font-weight:bold;
}

#regionlist
{
margin-left: 0;
line-height:18px;
padding-left: 2px;;
list-style: none;
}

#regionlist li
{
padding-left: 12px;
background-image: url("../images/arrow.gif");
background-repeat: no-repeat;
background-position: 0 .5em;
}

#regionlist a
{
text-decoration:none;
}

#regionlist a:link {
color:#006600;
}

#regionlist a:visited {
color:#006600;
}

#regionlist a:hover {
color:#003300;
text-decoration: underline

}

#content3 {
position:absolute;
top:227px;
left:555px;
width:254px;
height: 382px;
padding-top:0px;
background-color: #ffffff;
}
#content3b {
position:absolute;
top:227px;
left:555px;
width:254px;
height: 382px;
padding-top:0px;
background-color: #ffffff;
}
#content3c {
position:absolute;
top:227px;
left:510px;
width:299px;
height: 382px;
padding-top:0px;
background-color: #ffffff;
background-image:url("../images/book.jpg");
}

#ads {
position:absolute;
top:4px;
left:26px;
width:214px;
height: 372px;
padding-top:0px;
background-color: #ffffff;
}

#ads1a {
position:absolute;
top:1px;
left:0px;
width:214px;
height:115px;
padding-top:0px;
}

#ads1b {
position:absolute;
top:126px;
left:0px;
width:214px;
height:115px;
}

#ads1c {
position:absolute;
top:251px;
left:0px;
width:214px;
height:115px;

}

#borderint {
position:absolute;
top:0px;
left:6px;
width:249px;
height: 382px;
padding-top:0px;
background-color: #ffffff;
background-image:url("../images/border.gif");
}
#intext1{
position:absolute;
top:10px;
left:15px;
width:180px;
height: 60px;
font-weight:bold;
font-size:14px;
}

#intext2{
position:absolute;
top:30px;
left:0px;
width:180px;
height: 50px;
font-weight:bold;
font-size:14px;
}

#intext3{
position:absolute;
top:225px;
left:15px;
width:195px;
height: 150px;
font-size:12px;
}

#intext4{
position:absolute;
top:315px;
left:15px;
width:125px;
height: 30px;
font-size:12px;
font-weight:bold;
}
#intext4 a{
text-decoration:none;
}

#intext4 a:link{
color:#006600;
text-decoration:none;
}
#intext a:visited{
color:#003300;
text-decoration:none;
}

#intext a:hover{
color:#003300;
text-decoration:none; }

#intbutton
{
position:absolute;
top:85px;
left:15px;
width:180px;
height:132px;

}

#getflashplayer
{
position:absolute;
top:315px;
left:148px;
width:88px;
height:31px
border-style: solid;
border-width: 0px

}

#ads3 {
position:absolute;
top:4px;
left:5px;
width:150px;
height: 102px;
padding-top:0px;
background-color: #ffffff;
}

#sponsorcontainer {
position:absolute;
top:609px;
left:16px;
width:794px;
height:60px;
padding-top:0px;
background-color:#ffffff;
}

#sponsor1
{
position:absolute;
top:10px;
left:20px;
width:55px;
height:34px;
}

#sponsor2
{
position:absolute;
top:10px;
left:92px;
width:74px;
height:34px;
}

#sponsor3
{
position:absolute;
top:10px;
left:186px;
width:90px;
height:34px;
}

#sponsor4
{
position:absolute;
top:10px;
left:296px;
width:70px;
height:34px;
padding-top:0px;
}

#sponsor5
{
position:absolute;
top:10px;
left:386px;
width:90px;
height:34px;
}

#sponsor6
{
position:absolute;
top:10px;
left:496px;
width:70px;
height:34px;
}

#sponsor7
{
position:absolute;
top:5px;
left:566px;
width:70px;
height:34px;
}

#sponsor8
{
position:absolute;
top:5px;
left:632px;
width:70px;
height:34px;
}

#sponsor9
{
position:absolute;
top:10px;
left:700px;
width:70px;
height:34px;
}

#bottom {
position:absolute;
top:669px;
left:16px;
width:806px;
height:23px;
}

/*
------------------------------*/
/* footer content */

#footer {
position:absolute;
top:687px;
width:812px;
height:90px;
padding-top: 4px;
background-color: #D6DEBD;
}

#ftcontent1 {
position:absolute;
top:5px;
left:18px;
width:166px;
height:34px;
background-color: #D6DEBD;
}

#wlist {
position:absolute;
top:-3px;
left:-16px;
width:60px;
height:30px;
background:transparent;
font: 11px arial,sans-serif;
font-weight:bold;

}

#notice {
position:absolute;
top:30px;
left:160px;
width:600px;
height:20px;
font: 10px verdana,sans-serif;
}

#design {
position:absolute;
top:3px;
padding-top:0px;
left:615px;
width:200px;
height:20px;
font: 10px verdana,sans-serif;
}

#navcontainer {
position:absolute;
left:254px;
width:330px;
height:30px;
background-color: #D6DEBD;
font:10px arial, sans-serif;
font-weight:bold;
}

/*
------------------------------*/
/* fotter navigation */

#navlist a
{
text-decoration:none;
}

#navlist a:link {
color:#006600;
}

#navlist a:visited {
color:#006600;
}

#navlist a:hover {
color:#003300;
text-decoration: underline

}

#navlist li.inline {
display: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #066;
}

#navlist li.last {
display: inline;
padding-left: 3px;
padding-right: 3px;
border-right: 0px;
}

This website is for temp I just make the website more friendly because it was from table design and they want to make it exactly like that design.

**Arch_Angel_X** · 10:48 PM

OMG! lady in red! you are right! thats look horrible!

I just went to my next door computer and saw it at IE

oh god what should I do then

edit: hoff apparently someone accidentally delte my css files on the server *huff**
please do tell me if there is something weirdness

**LadynRed** · 02-02-2007, 11:11 AM

Deleting the CSS file would cause that, yes -- and I use FF 2.0 on WindowsXP.

Put your CSS file back on your server for one thing.

Now when I go to your site I get a directly listing. Your host is not set up to use home.html as the default page ! You either need to set that up, or go back to index.htm(l) or default.htm(l).

Part, if not all of your problem is that you've got EVERYTHING set to position:absolute. Not a good idea, and it does cause many problems. Learn to use the normal document flow and floats for your layout.

**Arch_Angel_X** · 02-02-2007, 04:19 PM

Thanks Lady for the information but yes, I do fully-realize that I use everything on the absolute position. Personally, I don't like to do it but this happens because of the works that I am doing. They created from tables and they just ask me to do it fast job and compatible with xhtml standard BUT without any changes from the previous design which is based on graphics. I cut down like almost 100 graphics files. oh for the url is because this is only for beta testing

Anyway, for those of you have problems checking the browser comp
I suggest to use this web based service
http://browsershots.org/ --> free one

http://www.sitevista.com/index.asp --> need to pay