Horizontal Menu Using Lists Problem

This is a discussion on "Horizontal Menu Using Lists Problem" within the Web Page Design section. This forum, and the thread "Horizontal Menu Using Lists Problem are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 26th, 2007, 11:30
Junior Member
Join Date: Dec 2006
Location: London
Age: 20
Posts: 33
Thanks: 0
Thanked 0 Times in 0 Posts
Horizontal Menu Using Lists Problem

Ok, so technically i am new to using horizontal menus using lists and css.

And Im having trouble with my latest test.

CSS:
Code: Select all
#wrapper1 /* First Wrapper For logo and nav */
{
width:900px;
}

#tl /* top half of circular image */
{
float:left;
background-image:url(/images/t1.png);
margin:0px;
padding:0px;
width:200px;
height:144px;
}



#tr1 /* Seperate section top right, which will introduce text */
{
float:right;
height:115px;
width:700px;
}

#nr1 /* the navigation bar */
{
background-image:url(/images/nav.png);
float:right;
height:29px;
width:700px;
}

#nr1 ul li /* The attempted list */
{
    margin-left: 0;
    margin-bottom: 0;
    margin-top:0px;
    list-style: none;
    display: inline;
}



#wrapper2 /* New wrapper for content */
{
width:900px;
}

#bl /* bottom half of circular image */
{
clear:both;
background-image:url(/images/b1.png);
width:200px;
height:57px;
}
With a simple list:

Code: Select all
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
http://beta-designz.co.uk/manicgaming/index.html (Without list)
http://beta-designz.co.uk/manicgaming/index2.html (With list)

I need it to sit perfectly within the nav, i know im doing something wrong, but don't know what.

Regards,
J.

Last edited by josephman1988; Oct 26th, 2007 at 13:56.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 26th, 2007, 12:26
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Menu Using Lists Problem

Second link doesn't work
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 26th, 2007, 13:57
Junior Member
Join Date: Dec 2006
Location: London
Age: 20
Posts: 33
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Menu Using Lists Problem

Apologies,both links have changed. =]
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Oct 26th, 2007, 14:01
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Menu Using Lists Problem

Wow ... alot of useless divs in there but without seeing the final result ... who knows!

Anyways ... your problem is that you haven't defined or maybe I should say, refined, the margins and padding associated with the UL element you are using for your navigation.

As you know (or may not), all elements have default settings whether font styling (bold or italics and size) or margins and padding.

so ... just play around with the margin and padding property for that <ul> and you should be all set.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Oct 26th, 2007, 14:10
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,777
Thanks: 0
Thanked 16 Times in 16 Posts
Re: Horizontal Menu Using Lists Problem

Ive found your soloution.. Simply add

Code: Select all
* {
margin:0;
padding:0;
}
At the top of your CSS.
__________________
Marc
Staff Manager - Webforumz.com


Want to be a moderator? PM me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Oct 26th, 2007, 14:13
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal Menu Using Lists Problem

That's not really the best solution.

No Margin For Error
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

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 On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is it possible to make a simple horizontal css menu without using lists? jonnymorris Web Page Design 9 Sep 21st, 2007 13:59
horizontal menu hover problem darran Web Page Design 6 Aug 28th, 2007 16:43
CSS Horizontal Menu Bar - IE Problems!! swillicott Web Page Design 47 Jul 23rd, 2007 21:42
Problem displaying a horizontal menu cmssken1 Web Page Design 1 Apr 19th, 2007 16:34
CSS horizontal menu trademarkd Web Page Design 1 Jan 9th, 2007 07:10


All times are GMT. The time now is 06:36.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42