Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Trying To Create This Vertical List
Old 04-27-2007, 10:47 PM Trying To Create This Vertical List
Experienced Talker

Posts: 33
Trades: 0
Hi All,

I am trying to create this specific vertical list.

The challenge that I am having is trying to create the static sub menu BUT not the drop down like the usual drop down menu.

I have been trying to make it but so far nothing works
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 04-27-2007, 11:51 PM Re: Trying To Create This Vertical List
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
If you can post some code or a link to the page if it's online somewhere it will be easier to help with specifics, but the general approach is going to be to nest one list inside another.

HTML Code:
<ul>
 <li>menu item 1</li>
 <li>menu item 2</li>
 <li>menu item 3
  </ul>
    <li>sub-menu item 1</li>
    <li>sub-menu item 1</li>
   </ul>
  </li>
 <li>menu item 4</li>
</ul>
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 04-29-2007, 12:33 AM Re: Trying To Create This Vertical List
Experienced Talker

Posts: 33
Trades: 0
Hi guys,thanks for the comments

I am having problem because the links that I want to be nesting is not nesting also, I want most of my text go the right side little bit.

other than that I am trying to do anchor linking
for example, when I click to one of my button its go to the same page with tothe other but directly going to the bottom page/middle page

my html codes:
Code:
div id="navcontainer">
                <ul id="navlist">
                    <li id="active"><a href="#" id="current">Home</a></li>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="#">Properties for Sale</a></li>
                </ul>
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Brisbane</a></li>
                        <li><a href="#">Bali,Indonesia</a></li>
                        <li><a href="#">Re Sale</a></li>
                <ul id="navlist">
                    <li><a href="#">Commercial Properties</a></li>
                </ul>
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Bali</a></li>
                <ul id="navlist">
                    <li><a href="#">Location Maps</a></li>
                    <li><a href="#">Property Management</a></li>
                    <li><a href="#">Migration</a></li>
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Lawyer/Solitor</a></li>
                    <li><a href="#">Travel/Accomodation</a></li>
                    <li><a href="#">Calculators</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Disclaimer</a></li>
                </ul>
            </div>
my css codes:
Code:
    #navcontainer
{
width: 173px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font:12px verdana, sans-serif;
background-color: #950014;
color: #333;
}

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


#navcontainer li a
{
display: block;
padding: 3px 3px 2px 0.1em;

background-color: #950014;
color: #fff;
text-decoration: none;
width: 100%;
}

 #navcontainer li a { width: auto; }

#navcontainer li a:hover
{

background-color: #cc6633;
color: #fff;
}

Last edited by Arch_Angel_X; 04-29-2007 at 03:17 AM..
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
Old 04-29-2007, 07:14 AM Re: Trying To Create This Vertical List
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Quote:
because the links that I want to be nesting is not nesting
Thats because your sub cat <li> links are outside of the <ul>s

a few minutes playing time gets this
HTML Code:
 <div id="navcontainer">
                <ul>
                    <li id="active"><a href="#" id="current">Home</a></li>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="#">Properties for Sale</a></li>
<ul class="level_2">
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Brisbane</a></li>
                        <li><a href="#">Bali,Indonesia</a></li>
                        <li><a href="#">Re Sale</a></li>
</ul>
                </ul>
                <ul>
                    <li><a href="#">Commercial Properties</a></li>
                </ul>
<ul class="level_2">
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Bali</a></li>
</ul>
                <ul>
                    <li><a href="#">Location Maps</a></li>
                    <li><a href="#">Property Management</a></li>
                    <li><a href="#">Migration</a></li>
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Lawyer/Solitor</a></li>
                    <li><a href="#">Travel/Accomodation</a></li>
                    <li><a href="#">Calculators</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Disclaimer</a></li>
                </ul>
            </div>
CSS Changes
HTML Code:
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer ul.level_2 {
	text-indent:30px;
}

#navcontainer li a
{
display: block;
/*padding: 3px 3px 2px 0.1em;*/

background-color: #950014;
color: #fff;
text-decoration: none;
width: 100%;
}

/* #navcontainer li a { width: auto; }*/

#navcontainer li a:hover
{

background-color: #cc6633;
color: #fff;
}

http://www.candsdesign.co.uk/article...nordered-list/

you have several items with the same id of "navlist" only ONE element can have that ID, for several identically styles elements you should use class

Quote:
when I click to one of my button its go to the same page with tothe other but directly going to the bottom page/middle page
No idea we can't see the code you have used.
But I would suspect it's because that's where the only named anchor is.

A url would give us more of a chance.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 04-29-2007, 10:19 AM Re: Trying To Create This Vertical List
Experienced Talker

Posts: 33
Trades: 0
Thanks Chris!

thats really help me a lot othe than that I tried to apply
Code:
#navcontainer li a:hover
                {

                    background-color: #cc6633;
                    }
but again its not working with the codes above.

hmmm what I am trying to said about "anchoring" for example:
I have 5 links but actually all off the links just go to one page but the only different things is link 1 after you clicked id going to the bottom of the page, link 2 is going to the middle of the page

I remembered it long time ago I can do it with dreamweaver but now, I am trying to learn more css and xhtml from the scratch
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
Old 04-29-2007, 09:41 PM Re: Trying To Create This Vertical List
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
If I'm understanding what you want on the page that the links go to you want to add an id or name parameter to elements on the page.

So for the the place you want people to get to in the middle of the page you need to add that attribute. It could be any xhtml element I think. I'll assume you have a level 2 heading. Your code would be

<h2 id="middle">Middle of the page heading</h2>

You can call the id anything you want.

In the menu your link would look like:

<a href="pathToThePage#middle">Link to middle of page</a>

The part you want to pay attention to is the #middle at the end. As long as it matches what you have on the other page it will work. It's called 'named anchors' if you want to look up more on it.

It's usually not the best though to use them in navigation like you are. It has a tendency to confuse people. Someone who clicks the link that takes them to the top of the page and then clicks the link to take them to the middle of the page won't necessarily realize they're on the same page.

Named anchors tend to get used more within one page. If you have a long page you might create an in page table of contents that uses them.

I'm not saying you shouldn't use them like you're planning, but I wanted to mention the possible confusion it can create.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to Trying To Create This Vertical List
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.32113 seconds with 12 queries