Anyway to implement this into CSS? [Archive]

Click to See Complete Forum and Search --> : Anyway to implement this into CSS?

jdiddy45

03-15-2005, 12:51 PM

i'm trying to have it so when you have mouse over a link, a popup of links appear under link, which i guess is java however i need the style to match the layout of page/navbar/links which has been done in CSS by a friend. Now he tried doing it by hacking code because CSS drop down menu stuff couldn't be seen in internet explorer. but i been to plenty sites with my internet explorer that have the put mouse over link, popup of more links underneath it, cant i do that an easier way in the css with java or dhtml into the css or something, if so please let me know how lol.
my page is:
http://www.geocities.com/silvermicrecords

also if i cant, im just trying to put something basic into the css navbar until i can put something fancier in or my friend can who's super busy. I put in java script for drop down box in a css somebody made me, and i wanted it under the artist link in navbar on top of my page, but when i put it in, kinda like half under home and half under artist. is there any code that i can do to align it perfectly under artist so it's totally aligned under just that.

heres script i found for drop down box:
</script>
<form name="abcd">
<select name="a">
<option value="entrigue.html">Entrigue

</select>
<input type="button" value="Go" onclick="go()">
</form>

heres navbar code on my site:
</div>

<div id="navbar">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="#">Artists</a> </li>

<li> <a href="#">Discography</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="contact.html">Feedback</a> </li>
<li><a href="#">Booking</a> </li>
<li><a href="#">Pictures</a> </li>
<li><a href="links.html">Links</a> </li>
</ul>
</div>

<div id="content">

Triumph

03-15-2005, 01:12 PM

Java? :confused:

jdiddy45

03-15-2005, 01:19 PM

well i got that code off java site, im new to website stuff, so i just need help aligning that under artists, and i'd like to put one aligned under discography too in navbar.

Triumph

03-15-2005, 01:25 PM

I think you mean Javascript, not Java.

jdiddy45

03-15-2005, 01:28 PM

whatever, but telling me that doesnt help my very needed help lol

also the thread drop down menu image kinda relates to the fancy thing id want to do with links on my page, dont know how to do that for my specific navbar. I also can do the older drop down look which i have script for and listed in first message of this thread but couldnt get it align under artist.

mrnor3

03-15-2005, 02:46 PM

Try this manual:
http://www.w3.org/Style/CSS/
And click on the on the css 2.1 spec which is very good.
And if you look through the forums I am sure you will find an answear for your problem, i found a menu today, searching for aproxamently the same problem as you.

Best regards Marius

jdiddy45

03-15-2005, 06:03 PM

didn't really help me at all. kinda what i want to do is on another old thread but id need code for it to work and blend in with my page, but one message on thread that had basically what i wanted was by BonRouge on thread: http://www.webdeveloper.com/forum/showthread.php?s=&threadid=59565
:

something like this:
http://bonrouge.com/test/rollover.htm

code:--------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
a {
text-decoration:none;
}
ul {
width:50px;
}
ul h2, li {
height:20px;
margin:0;
padding:0;
}
ul h2 img {
display:block;
}
ul h2 {
background-image:url(wine20b.jpg);
}
ul li:hover h2 img, ul li.sfhover h2 img {
display:none;
}
ul li ul {
display:none;
}
ul li:hover ul, ul li.sfhover ul {
display:block;
}
ul li ul li:hover, ul li ul li.sfhover {
background-color:#FF0000;
}
</style>
<script type="text/javascript">
//suckerfish//

sfHover = function() {
var sfEls = document.body.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
</head>
<body>
<ul id="nav">
<li><h2><img src="wine20a.jpg" alt="" /></h2>
<ul>
<li><a href="#">Red</a></li>
<li><a href="#">White</a></li>
<li><a href="#">Pink</a></li>
</ul>
</li>
</ul>
</body>
</html>

jdiddy45

03-15-2005, 06:04 PM

i'm very basic at html and know nothing so like if i dont have code to copy and paste in, i pretty much cant handle anything fancy lol.

jdiddy45

03-16-2005, 11:30 AM

heres my code, can anybody insert code so that artists and discography have when you put mouse on link in navbar, popup dropbar comes up under link.

I need under Artists to pop up a link called-
Entrigue
(entrigue.html)
and under Discography i need links to popup-
Soup Kitchen
(soup.html)
The Triple Threat
(triple.html)

I only know basic html and somebody else did CSS, they couldnt get drop down menu to work for ppl with IE, since can't predict everybody in world browsers, need it to work on all browsers. So can anybody insert code needed and paste it back to me?

my header code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>SilverMic Records</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

<meta http-equiv="content-script-type" content="text/javascript" />

<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="imagetoolbar" content="no" />

<style type="text/css">
/*ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
/* width: 10em;*/
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul { display: block; }
li:hover ul{ display: block; }
li:hover ul, li.over ul{ display: block; }
*/
</style>
<style type="text/css">
body {
background-color: #000;
font-size:11px;
font-family: verdana, arial, helvetica, sans-serif;
color: #FFF;

}
#container {
width: 780px;
border: 1px solid silver;
margin: 20px;
margin-left: auto;
margin-right: auto;
background: #000 url(nav.gif) repeat-y;

}
#banner {

background-color: #000;
border-bottom: 1px solid silver;

}
#content {
margin-top: 3px;
padding: 5px;
/*margin-left: 120px;*/
/*margin-right: 120px; */
background: #000 url(nav.gif) repeat-y;

border: 1px solid silver;
}

#sidebar-a {
float: left;
width: 100px;
margin: 0;
margin-top: 3px;
margin-right: 5px;
margin-left:5px;
display:inline;
padding: 5px;
background: #000 url(nav.gif) repeat-y;
;
border: 1px solid silver;
}
#sidebar-b {
float: right;
width: 100px;
margin: 0;
margin-top: 3px;
margin-left: 5px;
margin-right:5px;
display:inline;
padding: 5px;
background: #000 url(nav.gif) repeat-y;

border: 1px solid silver;
}
#footer {
clear: both;
height:auto;
margin-top: 5px;
background-color: #000;

border: 1px solid silver;
}
#footer #footer_left {
display: inline;
float: left;

}

#footer #footer_right {

display: inline;
float: right;

margin-right: 10px;
}

.navpic {
background:#000;
width: 80px;
\width: 90px;
w\idth: 80px;
border: 1px dotted silver;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
color:#fff;
font-weight:bold;
margin-left: auto;
margin-right: auto;

text-align: center; /*center in IE 5.5*/
}
img {
border: 0px none;
}
A:link {
text-decoration: none;
color: #819ebb;
}
A:visited {
text-decoration: none;
color: #819ebb;
}
A:hover {
text-decoration: underline;
color: #d6dbe0;
}
.news {
margin-top: 1px;
border: 2px solid #819ebb;
width:425px;
padding: 6px 6px 6px 6px;
margin-bottom: 5px;
margin-left:25px;
margin-right:25px;

text-align: center; /*center in IE 5.5*/

}
#navbar {
margin-top : 1px;
margin-left : 25px;
}

#navbar ul {
list-style : none;
margin : 0;
padding : 0;
text-align : center;
}

#navbar li {
display : block;
float : left;
}

#navbar li a {
color : #fff;
display : block;
width : 70px;
text-decoration : none;
background-color: #000;
padding : 2px 10px;
border: 1px solid silver;
}

#navbar ul li a:hover {
color : #819ebb;
background : #000;
}

#navbar a:active {
background : #819ebb;
color : #000;
}
#news p{

/*add style to the news*/
}
div>#navbar{
margin-bottom:2.0em; /*Hack*/
}

.clearing {
clear: both;
}

</style>
<script type="text/javascript"><![CDATA[//><!]]></script>

</head>

<body>

<div id="container">

<div id="banner">
<img src="silvermic.gif" height="120" width="780" alt="SilverMIc" />

</div>

<div id="navbar">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="#">Artists</a> </li>

<li> <a href="#">Discography</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="contact.html">Feedback</a> </li>
<li><a href="#">Booking</a> </li>
<li><a href="#">Pictures</a> </li>
<li><a href="links.html">Links</a> </li>
</ul>
</div>

<div id="content">

jdiddy45

03-16-2005, 05:00 PM

Can anybody please help me?

spufi

03-16-2005, 06:33 PM

http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.htmldog.com/ptg/archives/000050.php

jdiddy45

03-16-2005, 06:56 PM

still doesnt help me put code in right place of CSS so i dont mess page up that somebody designed for me that i didnt do.

Triumph

03-16-2005, 11:30 PM

The problems with IE are probably because of this:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />