CSS/HTML help...

Calling all nerds! Talk tech in this forum.

Moderator: Boni

Post Reply
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

CSS/HTML help...

Post by Tyler. »

Ok so I'm working on my website and I want to have a drop down menu for each album so I can have "vinyl", "casettes", "CD's" and "miscellaneous". I really have no idea how to do it at all, I've googled around a bit but they don't appear to speak English on tech forums.

So when you hover on "cheshire cat" for example, it has the menu drop down below it and then each button links to it's page. Sounds simple but I dunno how to do it... Here's the website if you need to look.
http://tyler1942gd.com/

The menu is made out of this:
Spoiler: show
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="pre1994.html">Pre-Cheshire</a></li>
<li><a href="cheshirecat.html">Cheshire Cat</a></li>
<li><a href="duderanch.html">Dude Ranch</a></li>
<li><a href="eots.html">E.O.T.S</a></li>
<li><a href="toypaj.html">T.O.Y.P.A.J.</a></li>
<li><a href="untitled.html">Untitled</a></li>
<li><a href="sideprojects.html">Side Projects</a></li>
</ul>

This is the style stuff:
Spoiler: show
ul#menu a {
padding-top: 7px;
display: block;
width: 106.6px;
height: 28px;
text-decoration: none;
color: white;
margin-top: -21px;
background: #6e6d6d;
background: -moz-linear-gradient(top, #6e6d6d, #101010);
font-size: 14;
}

ul#menu {
text-align: center;
list-style: none;
width: 891px;
margin: auto;
}

ul#menu li {
float: left;
}

ul#menu a:hover {
background: black;
color: white;
background: #6e6d6d;
background: -moz-linear-gradient(top, #101010, #49494a);
}

ul#menu a:active {
color: black;
background: black;
}

Sorry if I have bad coding or anything lol. Not sure how many people here are good with HTML or CSS. But even if you could point me in the right direction, not necessarily just feeding me code it would be nice. Thanks.
Image
User avatar
Resident Skumfuk
All Killer No Filler
Posts: 1571
Joined: Fri Jul 09, 2010 11:22 pm
Age: 19
Gender:
Instrument 1: guitar
Location: US

Re: CSS/HTML help...

Post by Resident Skumfuk »

I reaallyy have no experience with html/css , but ill try to help you find whatever.. hows this?

http://www.echoecho.com/htmlforms11.htm
Last edited by Resident Skumfuk on Mon Jul 11, 2011 5:41 am, edited 1 time in total.
Image
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

I sorta figured out a way so you can lock the topic if you want. It's still fucked but I think I can just mess around with it till it's right by myself now
Image
User avatar
Boni
Administrator
Administrator
Posts: 5831
Joined: Sat May 19, 2007 12:17 pm
First name: Christopher
Age: 28
Gender:
PSN ID: BoniBoyBlue
Twitter: @boniboyblue
Location: Scotland
Contact:

Re: CSS/HTML help...

Post by Boni »

Use JavaScript.
[donate][/donate]
User avatar
HugoDisasters
Jessica Kill
Posts: 2979
Joined: Sat Jan 09, 2010 4:19 pm
Gender:
n00b: You.
AKA: HHUGGZ
Instrument 1: Guitar
Instrument 2: Vocals
Instrument 3: Piano
Location: Sweden

Re: CSS/HTML help...

Post by HugoDisasters »

As Bobby said, Javascript is the way to go

Here you go a quick sample of how to run it down
http://javascript-array.com/scripts/sim ... down_menu/

Click to view the fullsize image.http://i34.tinypic.com/10e1sli.jpg[/imgwidth]
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

I put the Javascript in the head and it's just appearing as text at the top of the page. Do you know why it would do that?
Image
User avatar
Jake
Administrator
Administrator
Posts: 3196
Joined: Wed Jun 27, 2007 12:31 pm
First name: Jake :O
Age: 25
Gender:
Last.fm Username: Boneloner
Twitter: broughjc
Location: Portsmouth, England
Contact:

Re: CSS/HTML help...

Post by Jake »

Javascript is not the way to go.

CSS is much better.
Image
<3 Sumfan


Donate to TNS:
[donate][/donate]
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

Tyler. wrote:I put the Javascript in the head and it's just appearing as text at the top of the page. Do you know why it would do that?
Oops forgot to put <script></script>
Jake! wrote:Javascript is not the way to go.

CSS is much better.
Oh man now what do I do :balling: :balling: :balling:
Image
User avatar
Boni
Administrator
Administrator
Posts: 5831
Joined: Sat May 19, 2007 12:17 pm
First name: Christopher
Age: 28
Gender:
PSN ID: BoniBoyBlue
Twitter: @boniboyblue
Location: Scotland
Contact:

Re: CSS/HTML help...

Post by Boni »

Jake! wrote:Javascript is not the way to go.

CSS is much better.
JavaScript is much easier though considering he is not a pro-web developer. He can more of less just Google JavaScript menu and tweak the code to his liking. Although, I've got to ask why you didn't just use a CMS?
HugoDisasters wrote:As Bobby said, Javascript is the way to go

Here you go a quick sample of how to run it down
http://javascript-array.com/scripts/sim ... down_menu/
Bobby? Plus, I never said it was the way to good, I simply said use it because it's easier for beginners.
[donate][/donate]
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

Thanks guys. I can get the javascript to work how I want pretty much so I'm gone with that for the moment.

One problem I have is when you go into the drop down menu options, the top menu bit becomes un-highlighted

Like you can see on here http://tyler1942gd.com/ . If you go to 'Cheshire Cat' it becomes black, but if you go down to Cassettes then it doesn't stay black since it isn't hovered on any more. Do you know how I can make it still have the black hover property while the mouse is on something else?
Last edited by Tyler. on Mon Jul 11, 2011 2:38 pm, edited 1 time in total.
Image
User avatar
Filespit
Bunkface
Posts: 146
Joined: Thu May 27, 2010 12:17 am
First name: Peter
Age: 23
Gender:
Last.fm Username: Filespit
Location: Sweden

Re: CSS/HTML help...

Post by Filespit »

Tyler. wrote:Thanks guys. I can get the javascript to work how I want pretty much so I'm gone with that for the moment.

One problem I have is when you go into the drop down menu options, the top menu bit becomes un-highlighted

Like you can see on here http://tyler1942gd.com/ . If you go to 'Cheshire Cat' it becomes black, but if you go down to Cassettes then it doesn't stay black since it isn't hovered on any more. Do you know how I can make it still have the black hover property while the mouse is on something else?
Since it's a hover function it doesn't stay black, as you said yourself. I do know one solution, but I don't know if it's what you seek. Anyway, I suppose you have something like this in your CSS;

div.something:hover {background: black;}

Now add this to your code;

div.something:visited {background: black;}

This way the links you click will stay black once you have clicked (or visited) them once. So if you click on "Cassettes" under "Cheshire Cat", it will be black the next time you "open" the drop down menu.
Image
User avatar
Jake
Administrator
Administrator
Posts: 3196
Joined: Wed Jun 27, 2007 12:31 pm
First name: Jake :O
Age: 25
Gender:
Last.fm Username: Boneloner
Twitter: broughjc
Location: Portsmouth, England
Contact:

Re: CSS/HTML help...

Post by Jake »

No. Don't do that. It will stay black all the time once you visit it.
Image
<3 Sumfan


Donate to TNS:
[donate][/donate]
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

Yeah it'll keep it black but then I need it to go back to the gradient after I take the mouse off that drop down. I'll keep looking around for an answer if there is one
Image
User avatar
Jake
Administrator
Administrator
Posts: 3196
Joined: Wed Jun 27, 2007 12:31 pm
First name: Jake :O
Age: 25
Gender:
Last.fm Username: Boneloner
Twitter: broughjc
Location: Portsmouth, England
Contact:

Re: CSS/HTML help...

Post by Jake »

use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>
Image
<3 Sumfan


Donate to TNS:
[donate][/donate]
User avatar
Tyler.
Chuck
Posts: 2080
Joined: Sun May 02, 2010 3:01 pm
First name: Tyler
Age: 22
Gender:
n00b: Gutter Dreams
Instrument 1: Guitar-Bass-Piano
Instrument 2: Trumpet-Drums
Instrument 3: Didgeridoo
Location: Australia

Re: CSS/HTML help...

Post by Tyler. »

Jake! wrote:use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>
I've never used Javascript before besides copy pasting, but I'll try figure it
Image
User avatar
Boni
Administrator
Administrator
Posts: 5831
Joined: Sat May 19, 2007 12:17 pm
First name: Christopher
Age: 28
Gender:
PSN ID: BoniBoyBlue
Twitter: @boniboyblue
Location: Scotland
Contact:

Re: CSS/HTML help...

Post by Boni »

Tyler. wrote:
Jake! wrote:use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>
I've never used Javascript before besides copy pasting, but I'll try figure it
Now is the best time to learn then.
http://www.w3schools.com/js/default.asp
[donate][/donate]
Post Reply