HOW DOES THIS WORK!? Html help pleaaase!

The geek forum. PHP, Perl, HTML, hardware questions etc.. it's all in here. Got a techie question? We'll sort you out. Ask your questions or post a link to your own site here!

HOW DOES THIS WORK!? Html help pleaaase!

Postby Chibi0saka » Mon Aug 01, 2011 2:32 pm

I'm trying to make a drop down menu using html and css and I looked up a tutorial online that I followed exactly but when I apply it to my own menu nothing happens. I have my menu set up as an unordered list and I'm guessing the problem is that I'm trying to use two different styles in the list at the same time? Can anyone help?
[font="Verdana"][color="RoyalBlue"]NOTHING but the blood[/color][/font]
User avatar
Chibi0saka
 
Posts: 19
Joined: Fri Jan 01, 2010 9:41 am
Location: earth presently...

Postby Midori » Mon Aug 01, 2011 2:48 pm

I know some stuff about HTML and CSS, but we'll need some specific code excerpts if we're gonna be able to help you. Can you attach, link, or quote your HTML and CSS?
User avatar
Midori
 
Posts: 1805
Joined: Mon Sep 12, 2005 6:43 pm
Location: Mingling with local sentients

Postby Destroyer2000 » Tue Aug 02, 2011 5:31 am

If you are using in-line HTML statements, those will overwrite and cause problems when mixed with CSS. Either do it all in CSS, or do it all inline (CSS would be my suggestion).
My Flickr
My Travel Blog

[color="Red"]Distance is to Love as Wind is to Fire...it extinguishes the small, and ignites the great. - Unknown[/color]

[color="RoyalBlue"]“Falling in love with someone isn't always going to be easy... Anger... tears... laughter.. It's when you want to be together despite it all. That's when you truly love another. I'm sure of it.â€
User avatar
Destroyer2000
 
Posts: 1756
Joined: Thu Sep 11, 2003 9:00 am
Location: Fields of Athenry

Postby Arya Raiin » Tue Aug 02, 2011 8:14 pm

Give us a few excerpts please!

For the moment, my guess is that either you have embedded CSS conflicting with the CSS file, or in-line HTML that is overriding the CSS. I'm a fan of copying and pasting HTML and CSS when I can, it just makes things easier for me. XD in-line is easier for me, but it's not for everyone. But yes, we need some excerpts to figure out what the problem is. Sometimes using W3C's HTML and CSS validation thing helps.
Image
User avatar
Arya Raiin
 
Posts: 242
Joined: Tue Aug 04, 2009 10:33 am
Location: In a galaxy far, far away...

Postby Chibi0saka » Wed Aug 03, 2011 2:34 pm

Ok, I'm using css to style it and then linking to it in the html sheet. the css is like this:
#memorytrigger ul{

margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1 px solid #fff;
}

#memorytrigger ul li{

position: relative;

}

#memorytrigger li ul{

position: absolute;
left: 149px;
top: 0;
display: none;

}

#memorytrigger ul li a{

display: block;
text-decoration:none;
color: #777;
background:#999999;
padding: 5px;
border: 1 px solid #666666;
border-bottom: 0;


}

#memorytrigger li:hover ul{
display: block;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



and the html ul looks like this:

<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="book info.html">Book Information</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="speaking schedule.html">Speaking Schedule</a></li>
<li><a href="http://www.mymemoriesforyou.net/blog">Blog</a></li>
<li><a href="memory triggers.html">Memory Triggers</a></li>
<ul id="memorytrigger">
<li><a href="military.html">Military</a></li>
<li><a href="holidays">Holidays</a></li>
<li><a href="school">School</a></li>
<li><a href="romance">Romance</a></li>
<li><a href="1950s">1950's</a></li>
<li><a href="1960s">1960's</a></li>
</ul>
</ul>
</div>
[font="Verdana"][color="RoyalBlue"]NOTHING but the blood[/color][/font]
User avatar
Chibi0saka
 
Posts: 19
Joined: Fri Jan 01, 2010 9:41 am
Location: earth presently...

Postby armeck » Fri Aug 05, 2011 9:36 am

Chibi0saka (post: 1495077) wrote:Ok, I'm using css to style it and then
<li><a href="memory triggers.html">Memory Triggers</


for starters you aren't supposed to have spaces in the names of html files

also. when you want any functionality just html and css wont do it. you need javascript or something like that
Just some punk kid that likes techno music
User avatar
armeck
 
Posts: 1020
Joined: Wed Feb 04, 2009 11:52 am
Location: idek

Postby Midori » Fri Aug 05, 2011 1:18 pm

Okay, let's see what we can do about this.
First of all, when you write "#memorytrigger ul" you're telling it to look for a 'ul' element inside the object with the 'memorytrigger' id, which is not what you want. To look instead for a ul with that id, you should write "ul#memorytrigger" or, better yet, since ids are supposed to be unique, just '#memorytrigger'. So just remove all those extraneous 'ul' words from your CSS.

Next, if you intend to have the list pop up when you hover the mouse over the memorytrigger element, your selector "#memorytrigger li:hover" should be "#memorytrigger:hover li". What the first one says is "An li being hovered over inside #memorytrigger". What the second one says is "An li inside #memorytrigger if #memorytrigger is being hovered over". Word order is important in CSS, just as it is in English.

So, see if those two changes make it work.


armeckthefirst (post: 1495436) wrote:for starters you aren't supposed to have spaces in the names of html files
I'm not sure if that's necessarily true. It is considered bad practice according to some experts, but if it works, it works.

also. when you want any functionality just html and css wont do it. you need javascript or something like that
Actually if all you're doing is checking if an element is being hovered over or activated with the mouse, CSS is just fine for that. More modern versions of CSS even allow you to change things based on whether a checkbox is checked, and things like that. Actual programming or loading of content has to be done with Javascript, but things that are just presentation changes are better done with CSS these days.
User avatar
Midori
 
Posts: 1805
Joined: Mon Sep 12, 2005 6:43 pm
Location: Mingling with local sentients

Postby Arya Raiin » Fri Aug 05, 2011 6:57 pm

I agree with what Midori said! The 'ul's just complicate everything. The more code you have, the easier it is to have things go wrong... or so is my opinion. XD

Javascript is great! I don't know it very well, otherwise I'd write a bit of code to help you out. In the future, if you really want to get fancy I'd advise that you learn Java. :)
Image
User avatar
Arya Raiin
 
Posts: 242
Joined: Tue Aug 04, 2009 10:33 am
Location: In a galaxy far, far away...

Postby armeck » Fri Aug 05, 2011 10:37 pm

Midori (post: 1495503) wrote:
Actually if all you're doing is checking if an element is being hovered over or activated with the mouse, CSS is just fine for that. More modern versions of CSS even allow you to change things based on whether a checkbox is checked, and things like that. Actual programming or loading of content has to be done with Javascript, but things that are just presentation changes are better done with CSS these days.


yeah your right. perhaps i misunderstood what he meant by "drop down list"
Just some punk kid that likes techno music
User avatar
armeck
 
Posts: 1020
Joined: Wed Feb 04, 2009 11:52 am
Location: idek

Postby Midori » Sat Aug 06, 2011 3:12 am

Arya Raiin (post: 1495599) wrote:I agree with what Midori said! The 'ul's just complicate everything. The more code you have, the easier it is to have things go wrong... or so is my opinion. XD
In this case it's not that they make it too complicated]Javascript is great! I don't know it very well, otherwise I'd write a bit of code to help you out. In the future, if you really want to get fancy I'd advise that you learn Java. :)[/QUOTE]Despite their unfortunate naming similarities, Java and Javascript are entirely different languages for entirely different purposes. Javascript is a high-level language you use to do browser programming, whereas Java is a multi-purpose low-level langauge. Java can be used to create applets to embed in webpages, just like Flash, but it can't interact with the whole page the way Javascript can.

Otherwise, I agree entirely. :)
User avatar
Midori
 
Posts: 1805
Joined: Mon Sep 12, 2005 6:43 pm
Location: Mingling with local sentients

Postby Mithrandir » Sun Aug 07, 2011 6:19 pm

Midori (post: 1495503) wrote:I'm not sure if that's necessarily true. It is considered bad practice according to some experts, but if it works, it works.


There are some browsers and servers where that space will cause the page to not work.

armeckthefirst (post: 1495436) wrote:also. when you want any functionality just html and css wont do it. you need javascript or something like that


This is entirely dependent on what you mean by "functionality." For example, the new reviews system uses no javascript at all. The chat server, however, is riddled with it. ;)
User avatar
Mithrandir
 
Posts: 11071
Joined: Fri Jun 27, 2003 12:00 pm
Location: You will be baked. And then there will be cake.

Postby Slater » Thu Aug 11, 2011 12:44 am

This sounds like a great opportunity to learn jQuery :)

Menus such as these are a breeze, requiring just the markup and a handful of javascript statements to do the magic.

http://jquery.com/

You'd probably be interested in show() and hide().
Image
User avatar
Slater
 
Posts: 2671
Joined: Sat May 22, 2004 10:00 am
Location: Pacifica, Caliphornia

Postby Arya Raiin » Fri Aug 12, 2011 10:10 am

Midori (post: 1495708) wrote:Despite their unfortunate naming similarities, Java and Javascript are entirely different languages for entirely different purposes. Javascript is a high-level language you use to do browser programming, whereas Java is a multi-purpose low-level langauge. Java can be used to create applets to embed in webpages, just like Flash, but it can't interact with the whole page the way Javascript can.

Otherwise, I agree entirely. :)


LOL! I said Java instead of Javascript?? Guess that's because I had been messing around with a java related project earlier. Yea, I meant Javascript. ^.^

Never had any friends that used jQuery... maybe I should try it. Looks like it could save me some time.

Anyway, I'll get back on topic. I thought this would be handy:

http://javascript-array.com/scripts/simple_drop_down_menu/

I think this is what you're looking for, so if you wanted you could just copy, paste, and customize. :)
Image
User avatar
Arya Raiin
 
Posts: 242
Joined: Tue Aug 04, 2009 10:33 am
Location: In a galaxy far, far away...

Postby Slater » Fri Aug 12, 2011 8:38 pm

jQuery will definitely save you time; that's what it's made for! :)

We've been using jQuery Mobile at work recently for one of our projects. It's still in Beta but it's no less awesome for speeding up development. Presentation details and Ajax are a breeze with it. Some of the jQuery Mobile events are a bit poopy ('click' vs 'vclick', ugh), but it's far better than taking the time to do it from scratch with plain-old javascript.
Image
User avatar
Slater
 
Posts: 2671
Joined: Sat May 22, 2004 10:00 am
Location: Pacifica, Caliphornia

Postby Dante » Sun Aug 14, 2011 1:10 am

Nonsense! Nothing beats an ASP.NET webpage, where you just drag the drop-down list onto the page and edit the items in the properties bar. Then, after you click the button you can write the server-side logic in C#. Double click the button and huzzah! It creates the event for you. You just have to write the logic that is changed by the drop-down list!

Of course, I am a bit biased.
FKA Pascal
User avatar
Dante
 
Posts: 1323
Joined: Thu Mar 04, 2004 8:24 pm
Location: Where-ever it is, it sure is hot!

Postby seaglass27 » Thu Aug 18, 2011 6:36 am

Here's the HTML code for my site's menu:

<div id="logo">
<a href="http://www.theotakuhq.com" title="The Otaku HQ" style="background: none;"><img src="/images/logo.png" alt="The Otaku HQ" border="0" /></a>
</div><!-- /logo -->

<div id="header">

<div id="menu-left">
</div><!-- /menu-left -->

<div class="menu-middle">
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="/index.php">Home</a></li>
<li class="dir">About
<ul>
<li><a href="/about/author.php">The Author</a></li>
<li><a href="/about/history.php">History</a></li>
<li><a href="/about/faqs.php">FAQs</a></li>
<li><a href="/about/affiliates.php">Affiliates</a></li>
</ul>
</li>

<li><a href="/shop/shop.php">Shop</a></li>

<li class="dir">Freebies
<ul>
<li><a href="/resources/reviews/genrelist.php">Genre List</a></li>
<li><a href="/resources/events.php">Event Calendar</a></li>
<li><a href="/resources/dictionary.php">Otaku Dictionary</a></li>
<li><a href="/resources/rec.php">Recommended Sites</a></li>
<li><a href="/resources/lyrics/lyrics.php">Anime Song Lyrics</a></li>
<li><a href="/resources/wallpapers.php">Wallpapers</a></li>
<li><a href="/resources/fanart.php">My Fan Art</a></li>
</ul>
</li>

<li><a href="http://www.theotakuhq.wordpress.com" target="_ " style="background: none;">Blog</a></li>

<li><a href="/community/poll/poll.php">Poll</a></li>
</ul>

</div><!-- /menu-middle -->

<div id="menu-right">
</div><!-- /menu-right -->
</div><!-- /header -->

And here's the CSS that styles it:

#menu-left {
background: url(../images/menu-left.gif);
height: 27px;
width: 34px;
float: left;
}

#menu-right {
background: url(../images/menu-right.gif);
height: 27px;
width: 34px;
float: right;
}

ul.dropdown { font-weight: bold; }


.menu-middle ul.dropdown LI {
background: url(../images/menu.gif) repeat-x center;
PADDING-BOTTOM: 5px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
COLOR: #fff;
PADDING-TOP: 6px;
}

.menu-middle UL.dropdown LI:hover {
BACKGROUND-COLOR: #7a7a7a;
COLOR: #fff;
}

.menu-middle UL.dropdown A:link {
COLOR: #fff;
TEXT-DECORATION: none;
}

.menu-middle UL.dropdown A:visited {
COLOR: #fff;
TEXT-DECORATION: none;
}

.menu-middle UL.dropdown A:hover { COLOR: #fff }

.menu-middle UL.dropdown A:active { COLOR: #fff; }

.menu-middle UL.dropdown A { display: block; }

.menu-middle UL.dropdown UL {
MARGIN-TOP: 0px !important;
WIDTH: 122px;
}

.menu-middle UL.dropdown UL LI {
FONT-WEIGHT: normal;
background-color: #333;
background-image: none;
}

ul.dropdown {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown LI {
width: 122px;
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown UL {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown {
Z-INDEX: 597;
POSITION: relative;
FLOAT: left;
}

UL.dropdown LI {
LINE-HEIGHT: 1.3em;
ZOOM: 1;
FLOAT: left;
VERTICAL-ALIGN: middle;
}

UL.dropdown LI.hover {
Z-INDEX: 599;
POSITION: relative;
CURSOR: default;
}

UL.dropdown LI:hover {
Z-INDEX: 599;
POSITION: relative;
CURSOR: default;
}

UL.dropdown UL {
Z-INDEX: 598;
POSITION: absolute;
WIDTH: 100%;
VISIBILITY: hidden;
TOP: 100%;
LEFT: 0px
}

UL.dropdown UL LI { FLOAT: none }

UL.dropdown UL UL {
TOP: 1px;
LEFT: 99%
}

UL.dropdown LI:hover > UL { VISIBILITY: visible }

Let me know if this doesn't work and I'll see if I can help you.
seaglass27
 
Posts: 494
Joined: Wed Aug 17, 2011 1:04 pm

Postby Slater » Fri Aug 19, 2011 1:17 am

Well, with the relative links to images in there, it's probably not gonna look to great if we test it locally XD

Anyhow, it appears you're using CSS to do dropdown effects. Yes, it's possible to do it that way, but that's not what CSS is meant to do. For visual effects that are part of the user's interaction and experience in the page, the correct way to go is Javascript. CSS interactive states are good for styling buttons (eg, using sprites... it can be argued that not using sprites is the wrong way to do this) and the like, but not for dynamically hiding and showing elements that the user is to interact with based on their input's state.
Image
User avatar
Slater
 
Posts: 2671
Joined: Sat May 22, 2004 10:00 am
Location: Pacifica, Caliphornia

Postby seaglass27 » Fri Aug 19, 2011 6:19 am

Slater (post: 1498259) wrote:Well, with the relative links to images in there, it's probably not gonna look to great if we test it locally XD


Well, yes, you're going to have to create you own graphics. I put too much time into making the graphics for my site to just let everybody use them.
seaglass27
 
Posts: 494
Joined: Wed Aug 17, 2011 1:04 pm

Postby Mithrandir » Fri Aug 19, 2011 7:35 pm

Considering you link to the site in question directly in your sig, it would be trivial for anyone to just go grab them. XD

But we're getting a bit off topic.

Is the OP still having any issues?
User avatar
Mithrandir
 
Posts: 11071
Joined: Fri Jun 27, 2003 12:00 pm
Location: You will be baked. And then there will be cake.


Return to Computing and Links

Who is online

Users browsing this forum: No registered users and 110 guests