Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-08-2012, 05:29 AM   PM User | #1
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
need help with dropdown & more

Hi, i need help with dropdown, I have no idea how to do this because i never do dropdowns but here's my html codes

Code:
<!DOCTYPE html>

<html>
<head>
<meta name="keywords" content="donatinon,rsps,near-reality,pvp,pking,hacks,haxs,hacks,rsps,runescape,runescape private server,rs-ps,rune-server,soulsplit,guides,tizenx-rsps,sparc mac,best pvp,bh,bounty hunter,#1 server, rsps server,econmy,spawn,711 revision,rsps help,rsps coding,runelocus"> <meta name="description" content="Experience one of the MOST UNIQUE Runescape private server out there. PKing is #1 to us, so if you love pking, join!" />

	<meta charset="UTF-8">
	<title>TizenX - Rsps</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
	<div id="header">
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					
					<li>
						<a href="http://tizenx-rsps.com/forums"><span>Forums</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/webclient.html"><span>Webclient</span></a>
					</li>
				</ul>
				<ul id="secondary">
					<li>
						<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Download</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/vote/index.php"><span>Vote4cash</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Donate</span></a><a href="http://tizenx-rsps.spreadshirt.co.uk/"><span>Merchandise</span></a>
					</li>

				</ul>
			</div>
			<a id="logo" href="http://tizenx-rsps.com/index.html"><img alt="LOGO" src ="images/Tizenxmas2.png" ></a>
		</div>
	</div>
	<div id="adbox">
		<h1><font color="#ffffff">TizenX News</font> </h1>
		<font color="#ffffff">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><p><font face="Verdana">
</font>&nbsp;</p><p><font face="Verdana">
</font>&nbsp;</p><p><font face="Verdana">11-30-1
</font><font face="Verdana"> 
<a href="http://usuarios-online.com/en/stats/9bcc7ef8bc82baf08dad412c26b529bb" target="_blank" id="uox_link"
  
  rel="9bcc7ef8bc82baf08dad412c26b529bb">Online Users</a> </font></p><p><b>What is this item you say?
  Well, this is now known as the L33T Partyhat. It's called L33T because it's
  for the most wealthiest people in the game. How is this so rare you say? Well,
  every new member will now receive a blank partyhat on login. You can craft the
  partyhat into a L33T Partyhat by right clicking &gt; Craft. So why's it so
  rare? Well, in order to craft
it, you need to have obtained the current in-game rares in your inventory!</b></p><p><b>
            Image:</b></p><p><b>
       --- Still To Be Discovered ---</b></p></blockquote></font>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<h1><font color="#ffffff">Choose one</font> </h1>
		<ul>
			<li>
				<a href="http://tizenx-rsps.com/webclient.html"
 ><img alt="Img" src ="images/java 1.png" ></a>
			</li>
			<li>
				<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><img alt="Img" src ="images/java 2.png" ></a>
			</li>
			<li>
				<a href="http://tizenx-rsps.com/youtube.html"><img alt="Img" src="images/youtube2.png"></a>
			</li>
		</ul>
	</div>
	<div id="body">
		<div id="contents">
			<ul id="articles">
				<li>
					<h1>Why Us?</h1>
					<p><font color="#ffffff" face="Verdana">We are such a unique 
  server. We dedicated our time in providing the best pvp possible. The server 
  is 100% pvp based, and we thrive to bring our players the best content! 
  </font>
						                               
					</p>
									</li>
				<li>
					<h1>Donate</h1>
					<p><font color="#ffffff" face="Verdana">Without your generous 
  donations, TizenX wouldn't be what it is today. We require funding for our 
  $750 a month loadout. This includes dedicated webhosts, website hosts, DDoS 
  protection and our domain.</font>
						                              					</p>
									</li>
				<li>
					<h1>Vote!</h1>
					<p><font color="#ffffff" face="Verdana">Voting on every link 
  will bring attention to the users that are viewing us on the toplists, etc. So 
  if you vote &amp; put us on the toplist to #1, people migth be curious &amp; 
  join our server.</font>
						                                     <br><br>
					</p>
									</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div class="background">
			<div class="body">
				<div class="subscribe">
					<h3>Recieve Updates(beta)</h3>
					<form action="http://tizenx-rsps.com/index.html" method="post">
						<input class="txtfield" >
						<input type="submit" class="button" name="submit_button" value="Submit Query">
					</form>
				</div>
				<div class="posts">
					<h3></h3>
					<p>
						</p>
				</div>
				<div class="connect">
					<h3> </h3>
									</div>
			</div>
		</div>
		<span id="footnote">
<p align="center"><font face="Arial"><strong><a 
href="http://www.copyrightauthority.com/copyright-symbol"><font 
color=#ffffff>Copyright</font></a><font color="#ffffff">&nbsp;&nbsp;2012 tizenx - 
All Rights Reserved // Web Design By Morphine</font></strong></font></p></span>
	</div>
<div></div>
</body>
</html>
Where you see "Download" text, i would like that to be a dropdown, if anyone can do it for me thanks!


2nd help:

Please look in the attachments to see what i'm talkin about.
Attached Thumbnails
Click image for larger version

Name:	for coding forums teamspeak.jpg
Views:	86
Size:	49.3 KB
ID:	11773  
legendrock7 is offline   Reply With Quote
Old 12-08-2012, 08:36 AM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello legendrock7,
Your ul menu is not formed correctly to be a dropdown. It should be more like this -
Code:
<ul>
        	<li>Linky</li>
        	<li>Linky</li>
        	<li>Linky
                <ul>
                    <li>dropped Linky</li>
                    <li>dropped Linky</li>
                    <li>dropped Linky</li>
                </ul>
            </li>
        	<li>Linky</li>
        	<li>Linky</li>
        </ul>
Look at a demo of mine of a CSS dropdown menu here.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-08-2012, 07:03 PM   PM User | #3
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
[QUOTE=Excavator;1298279]Hello legendrock7,
Your ul menu is not formed correctly to be a dropdown.

i mess up bad when i try to add it, can you do it for me?
legendrock7 is offline   Reply With Quote
Old 12-08-2012, 07:08 PM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Did you look at the demo? Click on the Preview/Markup/CSS links in the upper right, it shows you exactly how to do it. Pretty much all you'd have to do is change out the anchor links/text and adjust your sizes to suit.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-08-2012, 07:16 PM   PM User | #5
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Hello legendrock7,
Your ul menu is not formed correctly to be a dropdown. It should be more like this -
Code:
<ul>
        	<li>Linky</li>
        	<li>Linky</li>
        	<li>Linky
                <ul>
                    <li>dropped Linky</li>
                    <li>dropped Linky</li>
                    <li>dropped Linky</li>
                </ul>
            </li>
        	<li>Linky</li>
        	<li>Linky</li>
        </ul>
Look at a demo of mine of a CSS dropdown menu here.
Quote:
Originally Posted by Excavator View Post
Did you look at the demo? Click on the Preview/Markup/CSS links in the upper right, it shows you exactly how to do it. Pretty much all you'd have to do is change out the anchor links/text and adjust your sizes to suit.
When i try to add the
Code:
 <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
my whole design/nav bar gets mixed up.
legendrock7 is offline   Reply With Quote
Old 12-08-2012, 09:25 PM   PM User | #6
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Show us the entire current version of your menu. The snippet you posted is either incomplete or invalid.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-09-2012, 01:15 AM   PM User | #7
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Show us the entire current version of your menu. The snippet you posted is either incomplete or invalid.
the current venison of the guide you've given me that i edited onto my site? I deleted the test file.
legendrock7 is offline   Reply With Quote
Old 12-09-2012, 01:17 AM   PM User | #8
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Quote:
Originally Posted by legendrock7 View Post
the current venison of the guide you've given me that i edited onto my site? I deleted the test file.
We need to see what you're working on right now to know what it's doing. A link is always best, complete code and CSS otherwise.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-09-2012, 01:19 AM   PM User | #9
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
We need to see what you're working on right now to know what it's doing. A link is always best, complete code and CSS otherwise.
I haven't updated the site with my new files (i edited earlier) (not the dropdown) so i don't know if you want to download it?


link: http://www.mediafire.com/download.php?l0wnrezw78tbr1y
legendrock7 is offline   Reply With Quote
Old 12-09-2012, 01:43 AM   PM User | #10
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
I'm not clear where you want your dropped menu. Exactly what link would be the parent and what links would be dropped?
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-09-2012, 03:25 AM   PM User | #11
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
I'm not clear where you want your dropped menu. Exactly what link would be the parent and what links would be dropped?
on my original post, i posted my html code, & i want one "text" to be a dropdown so it'll be like

>Download

-Link #1

-Link #1

__

If you can do this later & help me on my 2nd question?
legendrock7 is offline   Reply With Quote
Old 12-09-2012, 04:19 PM   PM User | #12
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Look at this for your drop -
new markup -
Code:
<body>
	<div id="header">
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/forums"><span>Forums</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/webclient.html"><span>Webclient</span></a>
					</li>
				</ul>
				<ul id="secondary">
					<li>
						<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Download</span></a>
                        	<ul>
                            	<li><a href="#"><span>Linky</span></a></li>
                            	<li><a href="#"><span>Linky</span></a></li>
                            </ul>
					</li>					<li>
						<a href="http://tizenx-rsps.com/vote/index.php"><span>Vote4cash</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Donate</span></a>
					</li>
				</ul>
			</div>
			<a id="logo" href="http://tizenx-rsps.com/index.html"><img alt="LOGO" src ="images/TizenX 2.png" ></a>
		</div>
	</div>
and some CSS -
Code:
#navigation ul li a span {
	padding: 5px 10px 5px 7px;
}
#navigation ul li a:hover, #navigation ul li.selected a {
	background: url(../images/bg-menu-selected-left.png) no-repeat left center;
	color: #fcf3b2;
}
#navigation ul li a:hover span, #navigation ul li.selected a span {
	background: url(../images/bg-menu-selected-right.png) no-repeat right center;
}
#navigation ul#primary {
	float: left;
}

#navigation ul#secondary {
	float: right;
}
ul#secondary li {position: relative;}
ul#secondary ul {
				position: absolute;
				margin: 0;
				padding: 0;
				left: 0;
				top: 31px;
				visibility: hidden;
			}
				ul#secondary li:hover ul {visibility: visible;}
					ul#secondary li ul li {float: none;}

/** Adbox **/
#adbox {
	width: 960px;
	margin: 0px auto 24px;
	position: relative;
}
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Users who have thanked Excavator for this post:
legendrock7 (12-09-2012)
Old 12-09-2012, 06:33 PM   PM User | #13
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Look at this for your drop -
new markup -
Code:
<body>
	<div id="header">
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/forums"><span>Forums</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/webclient.html"><span>Webclient</span></a>
					</li>
				</ul>
				<ul id="secondary">
					<li>
						<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Download</span></a>
                        	<ul>
                            	<li><a href="#"><span>Linky</span></a></li>
                            	<li><a href="#"><span>Linky</span></a></li>
                            </ul>
					</li>					<li>
						<a href="http://tizenx-rsps.com/vote/index.php"><span>Vote4cash</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Donate</span></a>
					</li>
				</ul>
			</div>
			<a id="logo" href="http://tizenx-rsps.com/index.html"><img alt="LOGO" src ="images/TizenX 2.png" ></a>
		</div>
	</div>
and some CSS -
Code:
#navigation ul li a span {
	padding: 5px 10px 5px 7px;
}
#navigation ul li a:hover, #navigation ul li.selected a {
	background: url(../images/bg-menu-selected-left.png) no-repeat left center;
	color: #fcf3b2;
}
#navigation ul li a:hover span, #navigation ul li.selected a span {
	background: url(../images/bg-menu-selected-right.png) no-repeat right center;
}
#navigation ul#primary {
	float: left;
}

#navigation ul#secondary {
	float: right;
}
ul#secondary li {position: relative;}
ul#secondary ul {
				position: absolute;
				margin: 0;
				padding: 0;
				left: 0;
				top: 31px;
				visibility: hidden;
			}
				ul#secondary li:hover ul {visibility: visible;}
					ul#secondary li ul li {float: none;}

/** Adbox **/
#adbox {
	width: 960px;
	margin: 0px auto 24px;
	position: relative;
}
thanks!

Also, can you help me with my 2nd question? It's posted on the original post.
legendrock7 is offline   Reply With Quote
Old 12-09-2012, 07:28 PM   PM User | #14
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Quote:
Originally Posted by legendrock7 View Post
thanks!

Also, can you help me with my 2nd question? It's posted on the original post.
The writing on the image you attached is too blurry to read, no idea what you're wanting to do.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-09-2012, 07:32 PM   PM User | #15
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
The writing on the image you attached is too blurry to read, no idea what you're wanting to do.
i'll re-do the picture so i can show you.
legendrock7 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:21 AM.


Advertisement
Log in to turn off these ads.