PDA

View Full Version : adding a 2nd menu


King Evil
09-01-2008, 01:16 AM
new to css so i'm not sure how to do this. my main menu is 'menu a' and 'menu a hover.' works fine. but now i want to make a second menu that i can edit differently than the first menu. how should i set it up? thanks!

edbr
09-01-2008, 03:10 AM
make a class. example
.two a hover{color:#000000:} etc

<a href="your_link.html" class="two">different colour link</a>

King Evil
09-01-2008, 03:22 AM
no, i need to keep the same format as:

#menu a {
display: block;
float: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
color: #FFFFFF;
font-style: normal;
line-height: normal;
background-image: url(images/img05.gif);
background-repeat: no-repeat;
background-position: left 75%;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 15px;
font-variant: normal;
text-transform: uppercase;

}

#menu a:hover {
color: #FF0000;
text-decoration: line-through;
}

edbr
09-01-2008, 03:37 AM
so what do you want to change, it still applies re class i just gave you a short example

King Evil
09-01-2008, 03:39 AM
i did it with your suggestion, thanks! but now i need to center it on the page.

also, is there a difference between a 'nav bar' and a 'menu?'

edbr
09-01-2008, 03:40 AM
nav bar menu are just names both could mean the same really
re centre the page i am pretty sure there is a tutorial on here will help you .
post back if you have problems. welcome to the forum BTW

Rob_Che
09-01-2008, 07:37 AM
i did it with your suggestion, thanks! but now i need to center it on the page.

Look at the tutorials on here... get 'wrapping' !'

King Evil
09-01-2008, 03:26 PM
i'm trying to center my menu, which starts with <div id="menu">how/where do i add <div class="wrapper">

Corrosive
09-01-2008, 04:19 PM
i'm trying to center my menu, which starts with <div id="menu">how/where do i add <div class="wrapper">

Place the wrapper around all your menu HTML in between your <body> tags. I.e. <div class ='wrapper"> should be before your menu and it's closing tag </div> should be straight after it. Is this what you mean?

King Evil
09-01-2008, 04:50 PM
followed instructions exactly and it doesn't work.

Corrosive
09-01-2008, 05:00 PM
followed instructions exactly and it doesn't work.

It should have worked. can you post your code or show an example online at all?

King Evil
09-01-2008, 05:50 PM
html:
<!-- star menu -->
<div class="wrapper">
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="unofficial.html">unofficial</a></li>
<li><a href="xxx">rare</a></li>
<li><a href="terms.html">terms</a></li>
<li><a href="collectors.html">collectors</a></li>
<li><a href="xxx" target="_blank">talk talk</a></li>
<li><a href="links.html">links</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<!-- end menu -->css:

body {
margin: 0;
padding: 0;
text-align: center;
min-width : 770px ;
color: #7F7772;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000000;
background-image: url(images/img01.jpg);
background-repeat: repeat-x;
background-position: center top;
}

div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}

Corrosive
09-01-2008, 05:59 PM
I think your issue is the 'div' before .wrapper in your CSS. .wrapper itself signifies that it is a class and you don't need the 'div' before it. Delete 'div' and see what that does.

.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}

Other than that it looks fine to me.

Wrapper would usually be an id btw because you should only need it once so would start with # (ignore me if that's not the case). It should work anyway.

King Evil
09-01-2008, 06:04 PM
deleted 'div' before .wrapper and that didn't do the trick.

domedia
09-01-2008, 06:04 PM
I think your issue is the 'div' before .wrapper in your CSS. .wrapper itself signifies that it is a class and you don't need the 'div' before it. Delete 'div' and see what that does.
This will make no difference. Adding 'div' in front of it just makes it a more specified CSS rule.

Corrosive
09-01-2008, 06:06 PM
This will make no difference. Adding 'div' in front of it just makes it a more specified CSS rule.

Ahhh, sorry guys. You're good at this Domedia...can u see what's wrong?

domedia
09-01-2008, 06:11 PM
Ahhh, sorry guys. You're good at this Domedia...can u see what's wrong? No there's no link to the page anywhere, is it?

King Evil
09-01-2008, 06:14 PM
http://alicecoopercollecting.com/

it's still in the dev stages, i just made it live so you could see it. i'm sure there's some code i need to clean up.

Corrosive
09-01-2008, 06:18 PM
http://alicecoopercollecting.com/

it's still in the dev stages, i just made it live so you could see it. i'm sure there's some code i need to clean up.

Alice Cooper. Cool :twisted:

The menu you talked about isn't wrapped like I explained.


<!-- star menu -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="unofficial.html">unofficial</a></li>
<li><a href="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&include=0&userid=aliceauctions" target="_blank">rare</a></li>
<li><a href="terms.html">terms</a></li>
<li><a href="collectors.html">collectors</a></li>
<li><a href="http://www.sickthingsuk.co.uk/forums/index.php" target="_blank">talk talk</a></li>
<li><a href="links.html">links</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<!-- end menu -->


That's the menu you wanted to wrap yes?

King Evil
09-01-2008, 06:23 PM
oops. i took it out because it actually made the menu move more to the left. i just uploaded the old version, wrapped.

King Evil
09-01-2008, 06:25 PM
it may look centered, but it's not. see this link:

http://alicecoopercollecting.com/index2.html

Corrosive
09-01-2008, 06:31 PM
it may look centered, but it's not. see this link:

http://alicecoopercollecting.com/index2.html

Sorry King Evil, you are confusing the cr*p out of me. You have shown us one link where your menu is centred, perfectly, using the wrapper. Then you upload index2 which is back where you started. What gives? :confused:

King Evil
09-01-2008, 06:37 PM
sorry to confuse you. the second menu uses the SAME code as the first. so, in theory, the second menu should be centered as well, right? the only difference is that i took off the last two links from the list. it's pulling from the same css file.

Corrosive
09-01-2008, 06:44 PM
sorry to confuse you. the second menu uses the SAME code as the first. so, in theory, the second menu should be centered as well, right? the only difference is that i took off the last two links from the list. it's pulling from the same css file.

I'm easily confused...ask Domedia :wink:

What CSS styling has your menu id got? I also take it there is no styling on the ul?

Rob_Che
09-01-2008, 09:53 PM
OK... let's see.

Your DIV "wrapper" is 770px wide - it's trying to contain your Menu which is 895px wide...

Start there ;)

Cary
09-02-2008, 12:33 AM
I've read through this, but I'm still not sure where a second menu comes into play. As far as the code you have goes, there are some changes you can make to help with menu centering and stacked columns.

Here's a modified portion of your html:
<!-- start menu -->
<ul id="menu">
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="unofficial.html">unofficial</a></li>
<li><a href="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&include=0&userid=aliceauctions" target="_blank">rare</a></li>
<li><a href="terms.html">terms</a></li>
<li><a href="collectors.html">collectors</a></li>
<li><a href="http://www.sickthingsuk.co.uk/forums/index.php" target="_blank">talk talk</a></li>
<li><a href="links.html">links</a></li>
<li class="current_page_item"><a href="contact.html">contact</a></li>
</ul>
<!-- end menu -->
<!-- start ads -->
<div id="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-8615689794659064";
/* 160x600, created 8/31/08 */
google_ad_slot = "8054880605";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- end ads -->

Here's some modified CSS:

#wrapper {
width: 900px;
margin: 0 auto;
}
#menu {
width: 56em;
height: 60px;
margin:0 auto;
padding: 0;
}
#ads {
float: right;
width: 160px;
padding: 0 105px 0 0;
}
#content {
float: left;
width: 500px;
padding-left: 105px;
color: #FFFFFF;
}
#footer {
clear: both;
width: 900px;
margin: 0 auto;
padding: 30px 0;
border-top: 2px solid #2B2B2B;
color: #FFFFFF;
}

Cary
09-02-2008, 12:58 AM
Oh, another thing...Remove "#menu ul" as it's not needed, and add "list-style:none" to #menu.

#menu {
width: 56em;
height: 60px;
margin:0 auto;
padding: 0;
list-style: none;
}

amanda
09-04-2008, 06:59 AM
Wrapper would usually be an id btw because you should only need it once so would start with # (ignore me if that's not the case). It should work anyway.

domedia
09-04-2008, 04:16 PM
Wrapper would usually be an id btw because you should only need it once so would start with # (ignore me if that's not the case). It should work anyway.
I agree Amanda. It does make sense making it an ID because you only have one wrapper, and it would be nice for future development to have an ID to hook something to with JS if it ever got needed.

Corrosive
09-04-2008, 04:19 PM
I agree Amanda. It does make sense making it an ID because you only have one wrapper, and it would be nice for future development to have an ID to hook something to with JS if it ever got needed.

Errrm, didn't I say exactly that two pages ago?

http://www.dreamweaverclub.com/forum/showthread.php?t=28718&page=2

domedia
09-04-2008, 05:03 PM
Errrm, didn't I say exactly that two pages ago?

http://www.dreamweaverclub.com/forum/showthread.php?t=28718&page=2
Ooops.. Don't mind me :wink: is that a cut'n'paste from your post?
/me silently walks out the back door.