PDA

View Full Version : Can't figure this out...need help!



Pooky
Jan 29th, 2010, 02:02 PM
Hello everyone! I'm still what you call old school using tables and such in my html pages. I am trying to learn how to use CSS and I'm creating a web site for my school using a free template to help me learn quickly on how to use it. I thought I was on the right path until now and I really need help.

I am trying to insert a horizontal drop down menu and I'm just creating a huge mess. I want to place it by the title/header that is on the layout I'm working with. Every time I try, I can not get the menu to sit along side of it.

I should also mention, that I want to make the menu have a transparent background, and I can't figure that either.

I then discovered when I uploaded the template that the flash movie is not working either. I put it in the place where it had and image.

I hope someone here could help me out. My school really needs me to get this done for them and I'm just frustrated.

Thank you,
Ily

Here's the HTML: designbyily.com/api/index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title : Innovation
Version : 1.0
Released : 20080123
Description: A wide two-column design suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Innovation by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">API</a></h1>
<p>&nbsp;&nbsp;earn a career in less than a year</a></p>
</div>

</div>
<!-- end header -->
<div id="headerbg">&nbsp;
<script type="text/javascript">
AC_SW_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,1,1,0','name','Movie1','width','909','height','261','title','Movie1','id','Movie1' ,'src','Movie1','pluginspage','http://www.adobe.com/shockwave/download/' ); //end AC code
</script><noscript>
<param name="src" value="http://www.designbyily.com/api/Movie1.swf" />
<embed src="Movie1.swf" width="909" height="261" pluginspage="http://www.adobe.com/shockwave/download/" name="Movie1"></embed>
</object>
</script></div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<!-- start latest-post -->
<div id="latest-post" class="post">
<h1 class="title">Welcome to API - Gainesville Campus!</h1>
<p class="meta">&nbsp;</p>
<div class="entry">
<p><img src="images/img05.jpg" alt="" width="135" height="135" class="left" /><strong>The
American Professional Institute</strong> offers seven career paths
that you can complete in less than a year. It is easy to
get started,*and for those who qualify, financial aid is
also available. Day and evening classes are offered for many
programs, and API provides job placement assistance for our
graduates. We have convenient locations in Decatur, Gainesville,
Macon and Milledgeville.</p>
<p>&nbsp;</p>
<h2>&nbsp;</h2>
<blockquote>
<p>ďA blockquoted paragraph. </p>
</blockquote>
<p>An example of an ordered list:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
</ol>
<h3>Heading Level 3: Followed by an Unordered List</h3>
<ul>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
<li>Maecenas vitae orci vitae tellus feugiat eleifend.</li>
<li>Etiam ac tortor eu metus euismod lobortis</li>
</ul>
<p><img src="images/img05.jpg" alt="" width="135" height="135" class="right" />Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. </p>
</div>
</div>
<!-- end latest-post -->
<!-- start recent-posts -->
<div id="recent-posts">
<div class="post">
<h2 align="center" class="title">Request Information</h2>
<p class="meta">Complete the form to receive additional information on the
career that interests you.!</p>
<div class="entry">
<p>&nbsp;</p>
</div>
</div>
<div class="post">
<h2 align="center" class="title">Our Campuses<small><a href="#"></a></small></h2>
<div class="entry">
<p>&nbsp;</p>
</div>
</div>
<div class="post">
<h2 class="title">&nbsp;</h2>
<div class="entry">
<p>&nbsp;</p>
</div>
</div>
</div>
<!-- end recent-posts -->
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="s" name="s" value="" />
<input type="submit" id="x" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Admissions</h2>
<ul>
<li><a href="#">Financial Aid</a></li>
<li><a href="#">Request More Information</a></li>
<li><a href="#">Apply Now</a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2>Education</h2>
<ul>
<li><a href="#">Massage Therapy</a></li>
<li><a href="#">Medical Assistant</a></li>
<li><a href="#">Certified Nursing Assistant</a></li>
<li><a href="#">Personal Trainer</a></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2>Resources</h2>
<ul>
<li><a href="#">Career Services</a></li>
<li><a href="#">Student Services</a></li>
<li><a href="#">Student Services</a></li>
<li><a href="#">Massage Clinic</a></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
<p id="legal">©2010 API- American Professional Institute. All Rights Reserved.
| </p>
</div>
</body>
</html>

CSS:


/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 0;
padding: 0;
background: #FEEDB9 url(images/img01.jpg) repeat-x left top;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #2F4600;
}

form {
margin: 0;
padding: 0;
}

fieldset {
margin: 0;
padding: 0;
border: none;
}

input, textarea, select {
font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}


h1, h2, h3 {
font-weight: normal;
color: #5F8700;
}

h1 {
letter-spacing: -1px;
font-size: 2.2em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

p, ul, ol {
}

p {
}

.blockbg {
background: #D9D785;
}

blockquote {
font-style: italic;
border: #D9D785 1px dashed;
background: #ECE29F;
margin: 0;
padding: 0px 20px;
font-size: 16px;
color: #A1B635;
}

ul {
}

ol {
}

a {
color: #4E7301;
}

a:hover {
text-decoration: none;
}

small {
}

hr {
display: none;
}

img {
border: none;
}

img.left {
float: left;
margin: 0 15px 0 0;
border: #D9D785 1px dashed;
}

img.right {
float: right;
margin: 0 0 0 15px;
border: #D9D785 1px dashed;
}

/* Header */

#header {
width: 920px;
height: 155px;
margin: 0 auto;
letter-spacing: -1px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#headerbg {
margin: 0 auto;
width: 920px;
height: 250px;
margin-bottom: 20px;

}

/* Logo */

#logo {
float: left;
width: 950px;
}

#logo h1, #logo h2, #logo p {
float: left;
margin: 0;
text-transform: none;
}

#logo h1 {
padding-top: 80px;
text-align: center;
font-size: 4em;
color: #299762;
}

#logo h1 a {
color: #FEEDB9;
}

#logo p {
padding-top: 100px;
text-transform: none;
font-size: 1.8em;
color: #ABC13A;
}

#logo h2 a, #logo p a {
color: #ABC13A;
}

#logo a {
text-decoration: none;
}

/* Menu */


/* Page */

#page {
width: 920px;
margin: 0 auto;
padding-top: 20px;
}

#latest-post {
float: left;
width: 590px;
padding: 0px 20px 0px 20px;
line-height: 25px;
font-size: 16px;
}

#recent-posts {
float: right;
width: 250px;
padding: 0px 20px 20px 20px;
line-height: 25px;
font-size: 16px;
}

#recent-posts .entry {
}

#recent-posts .entry a {
}

#recent-posts .more {
background: url(images/img04.gif) no-repeat left 50%;
padding-left: 20px;
}

.post {
}

.post .title {
margin: 0;
}

.post .meta {
margin: 0;
padding-bottom: 10px;
padding-top: 10px;
line-height: normal;
font-size: 13px;
color: #A2B736;
}

.post .meta a {
color: #7F9C1E;
}

.post .entry {
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: #D9D785 1px dashed;

}

/* Sidebar */

#sidebar {
clear: both;
width: 920px;
background: #ECE29F;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
display: block;
float: left;
width: 200px;
padding: 15px;
}

#sidebar li ul {
line-height: 1.8em;
border-top: #77881F 2px dashed;
}

#sidebar li li {
display: list-item;
float: none;
width: auto;
padding: 0 0 0 10px;
line-height: 35px;
border-bottom: #A1B635 1px dashed;
}

#sidebar h2 {
margin: 0 0 10px 0;
padding-left: 20px;
background: url(images/img03.jpg) no-repeat left 50%;
color: #5F8700;
}

#sidebar a {
text-decoration: none;
color: #4E7301;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Footer */

#footer {
width: 920px;
height: 100px;
margin: 0 auto;
padding-top: 20px;
background: #F5E7AC;
}

#footer p {
margin: 0;
padding: 15px;
}

#legal {
float: left;
}

#links {
float: right;
}

#wrapper {
width: 100%;
background: #5C8400;
}


DROP DOWN MENU:


.jqueryslidemenu{
font: bold 12px Verdana;

width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;

color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

tomws
Jan 29th, 2010, 03:26 PM
I don't see a menu at that link or in the html you've posted. Inserting the html would be a good place to start. :D

Pooky
Jan 29th, 2010, 03:59 PM
I took it off because it messed everything up.

But here is the html for the menu I got from Dynamic Drive


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>


I'm not sure where to include this so that it will align with the API title I have on there.
Thanks for reply. :)

tomws
Jan 29th, 2010, 04:24 PM
You've said that you want it placed "by" the header and "align[ed]" with it. I assume you mean that you want it placed to the right of the tagline in the header. Not quite sure as those terms are ambiguous.

If that's the case, you'd probably want to place it inside the header div. I might cut the width of the logo div - no need to full width - and place the menu div after that. Float both left and clear floats. See what happens. Maybe like this:

<div id="header">
<div id="logo"></div>
<div id="myslidemenu"></div>
</div>
Whatever path you choose, you'll get the quickest help by having the "broken" layout online for people to see. There are lots of people here who, unlike me, can take a look and know within a minute how to fix your problem. It might take a little longer to get an answer if they need to guess your intended design and what you might be seeing.

Pooky
Jan 29th, 2010, 04:44 PM
Yes I want it placed to the right of the tag line. I added the html code for the drop down menu and uploaded to the link I provided. Now you can't see the bottom half of the pay with the textual stuff.

I've been looking over tutorials and I just can't seem to get what I'm doing wrong.

Thank you so much for the help you all are giving me. I'm just having a hard time grasping CSS.

And of course the menu is not even showing up correctly.

This is the menu I want, but with a transparent background. http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

tomws
Jan 29th, 2010, 05:06 PM
I think you overlooked part of the instructions for that menu. You forgot to tie in your javascript and css files. :o That part on the page that says:

The CSS/ JavaScript: The below code should be added to the HEAD section of your page

That means that you need to add that code to the head section of the page! Add that in, adjusting the paths as necessary, and see what happens.

Pooky
Jan 29th, 2010, 05:22 PM
Oh darn, I had taken it out and forgot to put it back on. Sorry about that. Ok, I included the code and now you can see it, but it's not aligning correctly. Plus the flash is not working and the bottom portion of the template with text is not showing up either.

You guys are awesome for helping me.

Iliana

tomws
Jan 29th, 2010, 06:25 PM
I'm not sure on the Flash thing. Not paying attention to it, really. Once the layout is fixed, take another look at that.

Look back at my advice in post #4. That works with the addition of removing the width from the menu div and adding top padding to match the stuff to the left (I used 100px). I trimmed the width of the logo div to 440px and added an empty div to clear the floats.

EDIT: By the way, I'd probably remove/comment that Flash/javascript section from the body and remove/comment the associated script tag in the head. That will help to isolate problems. The javascript there may be affected by the javascript necessary for your fancy menu.

Pooky
Jan 29th, 2010, 07:20 PM
Tom you've been awesome. Ok I did what you mentioned and the menu now aligns but it's wrapping around now that I took the margin off the menu.

I also noticed that when you hover over the menu links, the drop down shows underneath the flash (which doesn't work-playing around with that).

EDITED: I got the flash working but it's overlaying on the text area. So now I just need to figure out how to get the menu not to wrap around and how to get the flash to sit above the text area (below the header/menu area).

Pooky
Jan 29th, 2010, 07:51 PM
Alright now... I figured out how to get the flash working and placed the flash above the text area! :)

The menu is aligned correctly, but "Item 4" is now showing up before "Item 1". Now sure why the order has been messed up. The sub menu's are showing up behind the flash and I do not know what to do. Any suggestions?

Thank you so very much! :)

tomws
Jan 29th, 2010, 09:18 PM
The menu order is backwards because it's floating right instead of left. That means the first element in the code is pushed to the right, the second pushed up next to it, and so on. Floating left would order them according to the order in the code, but that would require a little repositioning to get your menu where you want it. Reversing the order might be a little easier, but it might also be confusing when coming back later to work on the code.

I don't have any suggestions for making the menu appear over the flash. I know it's a common problem, but I don't know the solution. A forum search might help. FWIW, since the Flash is just an image rotator, you could easily replace it with a jquery substitute, and you're using jquery for the menu anyway.

Pooky
Jan 29th, 2010, 09:36 PM
Well I positioned the title and the menu by changing the padding. I was hoping that the sub menus will then have enough room to show up and not behind the movie. Unfortunately that didn't work. That's the only problem I have left to figure out. :(

Tom thank you so much for helping me. Maybe someone else will know how to get the sub menu to show up above the menu.

As for putting the movie I don't know how to replace it with a jquery like you mentioned.

Thanks again,

Iliana