I Need A Bit Of Help With My Site's Css. - Hovering over links and whatnot.

arcanistherogue

Aug 6 2005, 06:22 AM

Hey guys. I am working on my websites CSS, and you can see said site at http://arcanis.trap17.com , and the Cascading Style Sheet is http://arcanis.trap17.com/style.css . I need help with the navigation links, the links on the left side.

There is a problem with them that I just can't solve, I want the hovering Gray box to be a fixed size, like my friend Ricapar. See how his navigation blocks are all one size? I want mine to be like that. I am also going to edit the block so that the gray has a lighter blue border, but I can do the simple things myself.

Then, there is one more thing I wanted to do. I want to have it so that the Content section (the one that currently has the "DeathMatchin'" Title.) to have its own little scrollbar, sort of like a sudo-frame. basically, I want the site to stay one fixed height, and this would fix it. I want the site to be 800-1024 pixels tall (ill see which looks better) then with those the little scrolly section.

I don't know how to do the top part at all, I just learned CSS this year, coming from archaic HTML lessons, circa 1997.

Thanks to anyone who helps,

- Arcanis

rvovk

Aug 6 2005, 07:04 AM

I guess you want to have navigation bar like this. Oke first you need to do is definition of Navigation bar in CSS which is:

CODE

/***************** Navigation *****************/

#Menu {
padding:0px 0px 0px 0px;
margin:0px;
width: 109px;
}

ul {
margin: 0;
padding: 0;
list-style: none;
font: normal 11px verdana, serif;
width: 109px; /* Width of Menu Items */
border-bottom: 1px solid #56A4DC;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
width:70px;
font: normal 10px verdana, serif;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #605E5E;
background: #A2BFD2; /* IE6 Bug */
padding:2px 1px 2px 10px;
border: 1px solid #56A4DC;
border-bottom: 0;
border-right: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: #AECBAF; background:#FFFFFF; } /* Hover Styles */

ul li#uberlink a:hover { color: #AECBAF; background:#FFFFFF;} /* Hover Styles */

li ul li a { padding: 2px 2px 2px 18px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

li#uberlink a { color: #605E5E; background:#FFFFFF; }

Div #Menu defines area of your navigation bar. #Menu width defines width of navigation. Ul font defines your fonts, li ul code defines sub-menus but you will probably not need them, but leave them there for future if needed then. border can be set to 0 if not needed, if needed you can change their width (1px=1pixel, 2px=2pixels). Color of borders is changed with changing all codes of borders #56A4DC to your needs. Background and color of links is set by:

CODE

ul li a {
color: #605E5E;
background: #A2BFD2; /* IE6 Bug */

Color is for font colors and background for background of links.

Hover effect background and color of font is changed here:

CODE

ul li a:hover { color: #AECBAF; background:#FFFFFF; } /* Hover Styles */

Active link are defines by declaration of li id name to this:

CODE

Meaning that this page has this li id's name set to be active and it is presented with this CSS declaration:

CODE

li#uberlink a { color: #605E5E; background:#FFFFFF; }

Again backgeound and color of active links can be changed in this part of code. Other pages will not have index page set as active, but li id will be set to uberlink if we have page named gallery.htm to this code:

CODE

If you don't need active links then just name every link in HTML to:

CODE

You noticed there is no uberlink declaration. Hope this was helpful.

Working example is:here.

Cya.

truefusion

Aug 6 2005, 12:08 PM

QUOTE(arcanistherogue @ Aug 6 2005, 02:22 AM)

Then, there is one more thing I wanted to do. I want to have it so that the Content section (the one that currently has the "DeathMatchin'" Title.) to have its own little scrollbar, sort of like a sudo-frame. basically, I want the site to stay one fixed height, and this would fix it. I want the site to be 800-1024 pixels tall (ill see which looks better) then with those the little scrolly section.

CODE

<div style="overflow: auto; height: ##; width: ##">
[Put content in here]
</div>

Change ## with a defined number.

Tyssen

Aug 6 2005, 12:58 PM

QUOTE(arcanistherogue @ Aug 6 2005, 04:22 PM)

There is a problem with them that I just can't solve, I want the hovering Gray box to be a fixed size

CODE

ul li a { display: block; width: x; height: x; }

rvovk

Aug 6 2005, 02:55 PM

LOL, I wrote totaly new script, but arcanistherogue just wanted solution for his problem. I guess I have tutorial sindrom.

fffanatics

Aug 7 2005, 12:45 AM

The easiest way to get the background hover to be the same size is just to put all those in a table like structure using divs like my site and just use the onmouseover part of the link tag to change the class of the div to a new class that has background color the one you want Just check out my code for leftmenu to see how that is done if you want.

Tyssen

Aug 7 2005, 06:47 AM

QUOTE(fffanatics @ Aug 7 2005, 10:45 AM)

That's not the easiest way - that's a harder way to do it. The hover element in CSS is there so you don't need to use javascript.

strangerbox

Sep 6 2005, 07:28 AM

Try writing styles for each of the following: #navigation, #navigation ul, #navigation ul li, #navigation ul li a, and #navigation ul li a:hover.

Put size rules in #navigation ul li -- that way they will carry over to #navigation ul li a and a:hover.

Similar Topics

Keywords : sites css hovering links whatnot

Which Proxy Sites Can Be Used To Access The Websites? - when in a firewall enviornment (26)
My university lately instaled a firewall that prevents us from accessing certain websites I heard
there are some proxy websites that will enable us to circumvent this firewall can you post some
links of such websites? /laugh.gif" style="vertical-align:middle" emoid=":lol:" border="0"
alt="laugh.gif" /> /laugh.gif" style="vertical-align:middle" emoid=":lol:" border="0"
alt="laugh.gif" /> Edited topic title & description ...

Favorite Social Networking Sites - (5)

Your Sites Worth - (15)

This may have been posted a year ago since I seem to remember it...
http://directory.sootle.com/website-worth/ It calculates links/content and tells you how much your
site is worth. Mine is worth $5 my friends is worth almost 700 euros. Post how much yours
is! I wonder if you could/would sell your site if any of this would be accurate....

How Do You Arrange To Complete Your Sites? - (10)

Question is abit stupid, reading it back to myself. But what I want to express, is how do YOU make
build up your website and aim to complete it. For example, at the moment I have quite a big project
to do with my MAIN website. So i've added plain pages to each section so people know what to
expect. Each time I finish a section, I will add that to the news for veiwers to see and take a look
at the new complete section....

Free Uploading Sites - (0)

Hopefully this topic will be helpful for those who are running low on diskspace on their trap17
account, or want to upload large files, such as media etc. QUOTE 4 Shared 25 MB per
file, 500 MB storage space, account expires after 30 days without a log-in
http://www.4shared.com/faq.jsp 11 MBit 40 MB, 45 days, no partial files, i.e. no
multi-part archives http://www.11MBit.in 35 MB 35 MB online storage space
http://www.35mb.com/help.html All Files
http://www.AllFiles.ru/cgi-bin/ldspgen20.pl?id=1〈=en All my Data - d...

Essential Sites For Web Developers - (7)

A collection of Websites that are very useful for the Web Designers. In this first part I've
listed the available various validation sites and site checkers and analyzers more sites will be
added in the forthcoming parts. Part -1 : Validators, Checkers & Site Preview QUOTE
HTML Validator - http://validator.w3.org/ HTML Validator (Multiple Pages) -
http://htmlhelp.com/tools/validator/ Mobile Web Validator - http://validator.w3.org/mobile/
CSS Validator - http://jigsaw.w3.org/css-validator/ Accessibility Validator -
http://www.cast.org/...

What Are The Sites You Visit Often? - A small survey, please post your views.... (15)

Hello Everyone... I'm in idea of developing a new website. But, I don't know the "topic" or
"content" about which the site is to be published. So, I want to study about the nature of the
websites that people visit often for either their work-purpose or personal work. Apart from the
sites like email, discussion forums, online groups (like yahoo groups), social networking sites
(like OrKut) what are the sites you visit often? Please post your reply in the following format.
It'll be useful for me..., Copy / Paste This Unit and Fill-up the details. QUOTE O...

Go Music - One of the cheapest sites around (0)

I just wanted to share this site with everyone out here http://www.gomusic.ru This is a great
site offering probably one of the cheapest prices around for mp3's. The site is russian website
but content is in English. As far as what music they have available .. they have it all.. I mean
from ther latest out there to some of those I havent seen around CD's. The average price I
found dor an entire album was no more than 2.50 in US Currency. and avergae price per song if you
are just downloading singles i hvae seen prices at just .15 cents. So I suggest t...

A Website With Features To Promote Your Sites - (0)

www.linksdealing.com firstly such a site if its going to make you come in the top of google and
yahoo it should be there.. but it is not.. the site has a page rank of 0/10 so onwhat basis do u go
there.. the only way to make ur site more popular u come to a site with page rank 6/10 so mayb in
that site's forum you register and start posting a bit and put ur site's link in the siggy..
even that will get a bit of incoming links.. but then if tat site is ready 2 give you a link in its
main page ul be boosted.. also submit your site to se's like lycos or exci...

Two Different Web Sites/hosts...use Same Domain? - Is that possible? (2)

Alright so like the topic said I want to be able to have two different sites with the same name. I
am signing up to become a reseller but all I get is a store and I don't get any web space and
what not. I want to be able to use that though for my hosting site and also be able to have it go
to my design site and forum on Trap17. Is there anyway I can do that? Have two subdomains one for
design and one for hosting? I figured I could use a redirection if I can't so when you type in
the url for my host it goes to the sit but then the url will change and people w...

Deciphering Code - Code disassembling process of major sites (3)

Can anyone actually get the code from the home pages of MSN, Yahoo!, Yahoo! Canada and eBay?
I tried view Source and then copied it into an HTML editor, it took a while to decipher the code.
How can I make my websites look like Yahoo! or MSN's if I cannot understand why they used
the CSS in the first place? Do they use special software to design the page? By the way, if you can
give me some tips on how to make my front page like theirs, it would be greatly appreciated....

Graphics Tutorials - Sites - (1)

V-----Photoshop-----V CODE http://www.thewebmachine.com/
http://www.good-tutorials.com/ http://www.stridingstudio.com/tutorials/
http://www.computerarts.co.uk/tutorials/2d/ http://www.deepspaceweb.com/
http://www.phong.com/tutorials/ http://www.spoono.com/tutorials/photoshop/
http://www.eyewire.com/tips/photoshop/ http://www.spyroteknik.com/
http://www.dubtastic.com/ http://www.designsbymark.com http://www.effectlab.com/
http://www.jlswebsource.com/tutorials.html http://www.designsbymark.com/ http://www....

Mcafee Siteadvisor - Checks general security of many sites (4)

I stumbled across the SiteAdvisor service from the SiteAdvisor plugin I installed in Firefox (not
that I use Firefox or anything....I truthfully like Opera). It can give you a general security
review of most sites on the Web, and you can easily submit one that isn't (like for example,
trap17.com is listed and reviewed, but nyceducated.info and mesivtaofroslyn.info aren't - I
submitted both). They analyze the number and content of emails that the site sends, the safety of
downloads from the site, the safety of other sites that the site links to, and displays a nic...

Chat Sites - What is with chat sites? (4)

You can never go to a chat site anymore! Without like wierd people and sex offenders. I go to
this chat site and out of no where 10 people try to send me pictures. It was really wierd. I heard
that cops and other law enforcement go onto chat sites and act like teenage girls. They tell them
the adress and when they come they get a very bad suprise! I hope all of those se offenders get
tossed right into jail. Has this happened to anyone? Has anyone tried it to you? Thats why I stay
away from chat sites I stick with A.I.M....

Your Php-nuke Sites - (3)

was talking to a few mates 2day and they i said i should start to use php-nuke as i use frontpage
and wanted to try something else. so what do you guys think about it. easy to use and update? any
good mods? themes? websites and links to your own php-nuke site would be great off to install it and
see how i get on...

Kill All Warez Sites - (2)

I dont see how so many people could get away with making warez sites, its illegal, no questions
asked. But like, ive seen so many warez sites that have been up forever and no one does anything
about it. If i owned software that people where posting, i would call the FBI on there asses. like,
pretty soon no one is ever gonna buy like Norton antivirus legitly and there just gonna give up on
making virus definitions because it costs too much and there not making enough money. But there has
to be a reason there still up, maybe because it only links posted and there not uploa...

Adding ?phpsessid= To My Site - How can i add the PHPSESSID to my links on my site (1)

Hi not sure if this is in the right place but move it if it isn't. Ok i have a website and
trying to use CuteNews and other things on my site that uses cookies to login but my com.
doesn't have cookie function and i've tried fixing so that is not an option so i am trying
to find out how to add PHPSESSID support to all my links on my site: an example is on
www.fffanatics.trap17.com where all links contain things like:
index.php?PHPSESSID=23872742yfw8f2984uf and so on and how can i get tat on my site. Thanks...

The Best Sites - of free sms.. (3)

A list of the best Free SMS sites /wink.gif" style="vertical-align:middle" emoid=";)" border="0"
alt="wink.gif" /> theSMSzone.com QUOTE You have the power to specify what the
receiver will think the message is from. You can put ANY mobile number or alphanumeric character in
the "From" field when sending a message. Our messages work for almost every mobile phone provider in
the world and can be received by any phone which is capable of receiving SMS messages. You can send
to multiple receipients by separating them with commas (,) or spaces. You can view yo...

How To Enabling Right Click On Sites That Disable It - (4)

Lots of web sites have disabled the right click function of the mouse button... it's really,
really annoying. This is done so that you don't steal (via right-click->save picture) their
photos or images or any other goodies. Unfortunately, it disables ALL right-click functionality:
copy, paste, open in new window. It's easy to change, assuming your using IE 6: Click
"Tools"->"Internet Options" Click the "Security" tab Click "Custom Level" Scroll down to the
"Scripting" section Set "Active Scripting" to "disable" Click "Ok" a couple of times. You'll
proba...

Free Domain Name Sites - (1)

Can anyone list any free domain name sites? the only ones i know are cjb.net and .tk, i'd to
know what free domain sites are most recommendable. thanks...

Informative Site Links - (1)

//--Informative site --// For liabrary and other informative stuff. 1. http://wikipedia.org 2.
http://questia.com 3. http://nupedia.com 4. http://encarta.msn.com 5. http://worldbook.org 6.
http://textfiles.com 7. htttp://articlecity.com 8. http://www.gutenberg.net 9.
http://www.promo.net/pg 10. http://liabray.thinkquest.org 11. http://physicsforums.com These
are some of the informative sites,More stuff i will post soon......

Affiliation? - Wish to trade links? (18)

As most of you know, as if the large banner under this doesn't give it away, I run the website
ZROenergy (hosted by the great Trap17). Anyways, to the subject. During the pass few days I've
received an average of 60+ hits. At the beginning of this month I was receiving 100+ hits on
average. I'm linked to around 35 websites - some receive less than 10 hits a day - others a
little bit less than me - and only a few receive my amount if not more. I'm linked with Becca,
from Trap17, who runs Vintage Fairy (dot) com. (Which is a sexy website I must say.. drop ...

2 Sites From One Host - (2)

i am thinking about getting a host like dreamhosts or something and i was wondering if i can have 2
sites with one host? can i do that?...

Free Web Sites? - READ THE FINE PRINT! (4)

When signing up for all those red-hot free web sites out there, be sure to read the user agreements,
carefully. I know you're all sweet, gentle, wonderful people, but if some evil gremlin got into
your code and uploaded something less than desireable to your web site, YOU COULD BE LIABLE FOR MORE
THAN JUST HAVING YOUR SERVICE CANCELED. Here is a quote from the user agreement for the .TK free
sites. "In addition to your indemnification obligations set forth in Section 14.2 herein, in the
event we determine that you have violated any of the terms of this Agreement, y...

Best Ways To Generate Traffic - How do you guys promote your sites? (17)

I was wondering what kind of ways you guys promote your sites and how you try to generate traffic.
There are obviously the standard ways like submitting to search engines, free for all links,
reciprocal links, but is there something else? I read on another board, a guy created a screen
saver and uploaded it to free download sites. Because the download sites always have your URL and
you can also put your site in the screen saver itself, it is a good way to promote. Other ideas?...

File transfer/ links - (3)

how do I host a 11meg file on my page?...

Looking for bit, sites, css, hovering, links, whatnot

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE