Photoshop Forums - View topic - ahhh need help!!! this is nuts on Photoshop Contest

Post new topic

Photoshop Contest Forum Index - General Discussion - ahhh need help!!! this is nuts - Reply to topic

Goto page 1, 2 Next

Oscar

Location: Northern California

Fri Feb 16, 2007 3:56 am Reply with quote

This is just driving me insane, i been trying to make a drop down menu but i just cant figure out how so I'm in need of expert advice Surprised

...

Here is the code:

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="style (screen)" />
<title>Theleadguy</title>
<style type="text/css">

</style>
</head>

<body>

<div id="preload"></div>

<div id="header">
<h1>JFK<span>HS<span class="style3">.org</span></span></h1>
<big>Titans</big>
</div>

<div id="menu">
<ul>
   <li><a href="#">Academics</a></li>
   <li><a href="#">Athletics</a></li>
   <li><a href="#">Students</a></li>
   <li><a href="#">Library </a></li>
   <li><a href="#">Calendar </a></li>
   <li><a href="#">Parents </a></li>
   <li><a href="#">Contact </a></li>
</ul>
</div>

<div id="main">
<div id="container">

<div id="subnav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="child"><a href="#">Link</a></li>
<li class="child"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="child"><a href="#">Link</a></li>
<li class="child"><a href="#">Link</a></li></ul>
</div>

<div id="extras">
<h2>links</h2>
<p>
<a href="http://www.google.com">Career Center </a><br />
<a href="http://apple.com">Testing Center </a><br />
<a href="http://yahoo.com">PTSA</a></p>
<h2>extras</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus.</p>
</div>

<div id="content">
<h1>welcome</h1>
<h2>to PaulTheLeadGuy.com </h2>
<img class="right" src="img.gif" alt="" />
<p>hello</p>
<div id="box1"><p class="center"><img class="box" src="img.gif" alt="" /></p><h2>project 1</h2>
<p class="box">hello hello hello hello hello .</p>
</div>
<div id="box3"><p class="center"><img class="box" src="img.gif" alt="" /></p><h2>project 3</h2><p class="box">hello hello hello hello hello .</p>
</div>
<div id="box2"><p class="center"><img class="box" src="img.gif" alt="" /></p><h2>project 2</h2><p class="box">hello hello hello hello hello .</p>
</div>

<div id="footer">© PaulTheLeadguy.com | Graphics by <a href="http://www.finestcall.tk">OARE</a></div>

</div>

</div>
</div>

</body>

</html>

And this is what i want to drop down into more options

Quote:

<div id="menu">
<ul>
<li><a href="#">Academics</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Library </a></li>
<li><a href="#">Calendar </a></li>
<li><a href="#">Parents </a></li>
<li><a href="#">Contact </a></li>
</ul>
</div>

Please guys, if i don't figure out this by Saturday I'm a goner... from my class that is Confused

supak0ma

Location: Photoshop Nation

Fri Feb 16, 2007 4:49 am Reply with quote

please post the stylesheet!

Oscar

Location: Northern California

Fri Feb 16, 2007 4:57 am Reply with quote

This is the Style Sheet

Code:

body {
margin: 0 0 0 0;
background-color: #fff;
}

a {
text-decoration: none;
color: #06f;
}

a:hover {
text-decoration: underline;
color: #06f;
}

#preload {
width: 0;
height: 0;
display: inline;
background-image: url('menubg.jpg');
}

#header {
width: 100%; height: 150px;
margin: 0 0 0 0;
background-color: #3b3b3b;
vertical-align: bottom;
z-index: 1;
}

#header h1 {
display: block;
position: absolute;
margin: 116px 0 0 0;
padding: 0;
background-color: transparent;
color: #fff;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 35px;
font-weight: 400;
z-index: 4;
width: 191px;
top: -2px;
height: 60px;
left: 4px;
}

span {
color: #06f;
}

#header big {
float: right;
margin: 50px 0 0 0; padding: 0;
color: #444;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
font-size: 100px;
letter-spacing: -11px;
}

#menu {
position: absolute; top: 150px;
width: 100%;
height: 61px;
margin: 0 0 0 0;
background-color: #000;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
z-index: 3;
text-align: center;
}

#menu ul {
margin-top: 20px;
}

#menu ul li {
display: inline;
}

#menu ul li a {
background-color: transparent;
background-repeat: repeat-x;
padding: 14px 20px 14px 20px;
font-size: 0.8em;
font-family: 'century gothic', verdana, sans-serif;
color: #666;
font-weight: bold;
text-decoration: none;
border: solid 1px #000;
}

#menu ul li a:hover {
background: #06f url('menubg.jpg') repeat-x top;
color: #fff;
text-decoration: none;
border: solid 1px #fff;
}

#main {
position: absolute; top: 211px;
width: 100%;
background: url('main.jpg') repeat-x top;
}

#container {
width: 90%;
margin: 0 auto;
padding-top: 50px;
font-family: arial;
font-size: 0.9em;
}

#subnav {
clear: left;
float: left;
width: 140px;
padding: 0;
font-size: 0.6em;
font-family: verdana, arial, sans-serif;
}

#subnav ul {
list-style: none;
width: 140px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#subnav li {
margin-bottom: 1px;
}

#subnav li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #cccccc;
display: block;
padding: 5px;
background: #3b3b3b;
border-right: 10px solid #fff;
}

#subnav li a:hover {
background: #06f;
color: #ffffff;
border-right: 10px solid #06f;
}

#subnav .child {
font-size: 0.9em;
padding: 0;
}

#subnav .child a {
height: 14px;
padding-left: 10px;
border-right: 10px solid #fff;
background: #bbb;
color: #666;
}

#subnav .child a:hover {
color: #06f;
background-color: #e0e0e0;
border-right: 10px solid #fff;
}

#content {
margin: 0 160px 10px 165px;
border-right: 1px solid #ccc; padding: 0 20px 0 0;
line-height: 1.6em;
color: #666;
font-size: 0.9em;
}

#content p {
padding-bottom: 5px;
}

h1 {
margin-top: 0px;
color: #06f;
letter-spacing: -2px;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
}

h2 {
margin-top: 20px;
margin-bottom: 10px;
color: #666;
letter-spacing: -1px;
font-size: 1.3em; font-weight: 400;
font-family: 'trebuchet ms', 'century gothic', verdana, sans-serif;
}

.right {
float: right;
margin: 0 0 8px 12px;
padding: 4px;
background-color: #FFF;
border: 1px solid #CCC;
}

#footer {
padding: 5px;
margin-top: 50px;
margin-bottom: 3px;
color: #aaa;
font-size: 0.7em;
text-align: center;
border-top: 1px solid #ccc;
}

#extras {
clear: right;
float: right;
width: 140px;
margin-left: 10px;
margin-bottom: 20px;
padding: 0;
color: #666;
}

#extras p {
line-height: 1.5em;
margin: 0 0 1.5em 0;
font-size: 0.7em;
}

#box1 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
width: 30%;
float: left;
margin: 0 2px; text-align: left;
padding: 1px;
}

#box2 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
margin: 0 auto;
width: 30%; text-align: left;
padding: 1px;
}

#box3 {
background: #fff url('boxbg.jpg') repeat-x top;
border: 1px solid #ccc;
width: 30%;
float: right;
margin: 0 2px; text-align: left;
padding: 1px;
}

#box1 h2, #box2 h2, #box3 h2 {
margin-left: 4px;
}

.center {
text-align:center;
display:block;
margin-top: 15px;
}

.box {
margin: 0 4px 10px 4px;
line-height: 1.3em;
font-size: 0.8em;
border: 0;
}

yello_piggy

Location: Vienna/Austria/Europe

Fri Feb 16, 2007 5:11 am Reply with quote

my "html4 for dummies"-bible says:

<select name="menu">
<option value="Academics">Academics</option>
<option value="Athletics"> Athletics</option>
.
.
.
</select>

you can use the "multiple"-attribute within the "select"-element, if you want to chose more than one option by holding "Alt" or "Ctrl"-button.

never tried this out, but most of the stuff in this book does work.

_________________

supak0ma

Location: Photoshop Nation

Fri Feb 16, 2007 5:12 am Reply with quote

this is not an easy thing to do, you have a long way to go to achieve what you want and unfortunately i don't have the time to guide you thru it, but i'll give you a link to a good tutorial http://www.seoconsultants.com/css/menus/tutorial/ or search for "suckerfish". Good luck. Smile

Oscar

Location: Northern California

Fri Feb 16, 2007 5:44 am Reply with quote

Damn and eggs... yup to hard

Scratch the whole idea and I'm just going for simple Laughing

PROCCCCCCCCC delete this thread please!!... I'm to lazy to go through with it. Laughing

Wait proc don't delete it just yet Laughing

sorry i still got some 1000 questions that my teacher back at school does't know and unfortunately i don't have any where else to ask Crying or Very sad

I really need help guys... this is going to be the school website and i have all this pressure on me Confused

Don't do it for me do it for the education of the future...

*That sounded cool huh Laughing

Grefix

Fri Feb 16, 2007 6:02 am Reply with quote

something like this: http://davidtony.net/finestcall/ ?

not tested in all browsers yet,
works in ff and opera
ie7 does repositions it a bit oddly, but can be worked out with a small hack (no time at the moment) (but who likes IE anyway.. )

view the html source for info
and the reedited css (small addition, commented)
http://davidtony.net/finestcall/style.css

_________________
I used to do stuff around here

Oscar

Location: Northern California

Fri Feb 16, 2007 6:39 am Reply with quote

Yeah like that grfix, but i decided to scratch the drop down menu... it's unnecessary at the moment.

I do have more question if you want to help me Rolling Eyes

pretty please Laughing

Well the page with the "contacts" is a bit long ... since there is all the staff and teachers and such ... well at the top of the page there is the ABC's

A B C- D E F- G H I -J K L- M N O - P Q R - S T U - V W X - Y Z

i want them to click on a letter and that is going to take them down the page to where the names bigging with that letter are...

how do i go on about this? anyone? grefix? superman? proc?

blade_in_exile

Location: lancashire

Fri Feb 16, 2007 6:47 am Reply with quote

finestcall wrote:

hi FC well the answer to this part is fairly easy all you have to do is create a hyper link with the page that takes it to the relevant letter like so...

Code:

<a name="C">C</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="C">C</a>

and so on for other letters, remeber to change both a names to match

hope this helps

_________________
chopper with training wheels

Oscar

Location: Northern California

Fri Feb 16, 2007 7:00 am Reply with quote

Hey blade... that sounds like i have no clue what you said Confused

Here is the code

Code:

<div id="content">
<h1>Staff</h1>
<h1 class="style4"> A B C- D E F- G H I -J K L- M N O - P Q R - S T U - V W X - Y Z </h1>
<h2>JFKHS.org Home of the Titans </h2>
<img class="right" src="img.gif" alt="" />
<table id="table1" cellpadding="0" border="0">
<tbody>

Maybe you can give me an example Surprised

blade_in_exile

Location: lancashire

Fri Feb 16, 2007 7:15 am Reply with quote

finestcall wrote:

Hey blade... that sounds like i have no clue what you said Confused

Here is the code

Code:

Maybe you can give me an example Surprised

Code:

<hi class="style4">
<a href="ABC">A B C</a> -
<a href="DEF">D E F</a> -
........... and so on
<a href="YZ"">Y Z </a>

then at the place where ABC starts you have this
<a name="ABC">A B C</a>

hope that helps a little more

_________________
chopper with training wheels

Grefix

Fri Feb 16, 2007 7:20 am Reply with quote

what you need is anchors

a anchor is made like a normal link (except there's no href attribute.

example

Code:

<a name="anchorA" >Letter A</a>
all names listed here with a
<a name="anchorB" >From B</a>

then you need a link that points to that anchor, but instead of using a 'normal url' you use something like #anchorname

Code:

This is basically the same as blade said, but tried to explain it in another way

_________________
I used to do stuff around here

Oscar

Location: Northern California

Fri Feb 16, 2007 7:35 am Reply with quote

ahhhh it worked Mr. Green

Thanks grefix and blade you guys are my heros...

Grefix

Fri Feb 16, 2007 7:48 am Reply with quote

_________________
I used to do stuff around here

Oscar

Location: Northern California

Fri Feb 16, 2007 8:18 am Reply with quote

uhh hairless legs Surprised

Goto page 1, 2 Next

Photoshop Contest Forum Index - General Discussion - ahhh need help!!! this is nuts - Reply to topic

View previous topic
View next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

FAQ

Memberlist

Usergroups

Profile

inbox

Navigate PSC

Contests	open completed winners prizes events rules rss
Galleries	votes authentic skillful funny creative theme winners
Interact	register log in/out forum chat user lookup contact

Stats	monthly leaders hall of fame record holders
PSC	advantage news (rss) faq about links contact home
Help	faq search new users tutorials contact password

Adobe, the Adobe logo, Adobe Photoshop, Creative Suite and Illustrator are registered trademarks of Adobe Systems Incorporated.
Text and images copyright © 2000-2006 Photoshop Contest. All rights reserved.
A venture of ExpertRating.com

	Photoshop Contest.com Creative Contests. Real Prizes. Essential Resource.	You are not logged in. Log in or Register