Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by sabecs
at 2024-07-28 19:09:59
ModifyPoint:500 Replies:10 POST_ID:828628USER_ID:11493
Topic:
Cascading Style Sheets (CSS);;
Hi,
any ideas on how to centre the menu below would be appreciated.
any ideas on how to centre the menu below would be appreciated.
<html><head><style type="text/css">#navbar {margin:0 auto;}#navbar li{ list-style: none; float: left; text-align: left; font-size: 14px; font-weight: bold;}/* main top menu */#navbar li a{ display: block; padding-left: 20px; padding-right: 20px; color: #256243; height:30px; line-height:30px; text-decoration: none; font-weight: bold;}/* main top menu hover*/#navbar li a:hover { color:#8CC866;}#navbar li a.navbar_active_main{ color: #000000; font-weight: bold;}#navbar li:first-child { border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-radius-topright: 5px;}#navbar li:last-child { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px;}#navbar li ul{ display: none; width: auto; z-index:500; min-width: 160px;}#navbar li:hover ul{ display: block; position: absolute; margin: 0; z-index:500; padding: 0;}#navbar li:hover li{ float: none; background-image: url(/images/ourstore_button_bg.png); background-repeat: repeat;}#navbar li:hover li a{ border-bottom: 1px dotted #white; color: #fff; min-width: 160px;}#navbar li:hover li a.navbar_active_sub{ color: #FFF; font-weight: bold; background-color: #526D1B;}#navbar li li a:hover{ background-color: #799826;}#navbar li li a:active { color: #000;}#menu_container{ width: 100%; height:34px;}#menu_top{ margin: 0 auto; width: 982px; height:30px; border-bottom: 4px solid #256243;}</style></head><body><div id="menu_container"> <div id="menu_top"> <ul id="navbar"> <li ><a href='#'>Home</a></li> <li ><a class="navbar_active_main" href='#'>About Us</a></li> <li ><a href='#'>Design </a><ul><li><a href='#'>Things to Consider</a></li> </ul></li> <li ><a href='#'>Constructions</a></li> <li ><a href='#'>Maintenance</a></li> <li ><a href='#'>Gallery</a><ul><li><a href='#'>Water Features</a></li> <li><a href='#'>Paving</a></li> <li><a style="background-color:#"#FFFFFF href='#'>Project 3</a></li> </ul></li> <li ><a href='/259/Contact_Us/Contact-Us.html'>Contact Us</a></li> </ul> </div></div></body></html> 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:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59:60:61:62:63:64:65:66:67:68:69:70:71:72:73:74:75:76:77:78:79:80:81:82:83:84:85:86:87:88:89:90:91:92:93:94:95:96:97:98:99:100:101:102:103:104:105:106:107:108:109:110:111:112:113:114:115:116:117:118:119:120:121:122:123:124:125:126:127:128:129:130:131:132:133:134:135:136:137:138:139:140:141:
Author: sabecs replied at 2024-08-05 16:18:26
Thanks zappafan2k2, this was perfect.
Sorry for late response, I thought I had already accepted your solution.
Sorry for late response, I thought I had already accepted your solution.
Expert: duncanb7 replied at 2024-07-29 08:14:23
I tried this, but it is same as before, did you try this and working on your broswer ?
Accepted Solution
Expert: zappafan2k2 replied at 2024-07-29 07:36:06
500 points EXCELLENT
Then try changing line 101 (currently blank) to
and line 6 to
Expert: duncanb7 replied at 2024-07-29 07:31:25
Last one again,I mean using table with ul and li (not meaning just using table tag only )
Okay just follow zappafan2k2 's suggestion, it might meet your requirement
Okay just follow zappafan2k2 's suggestion, it might meet your requirement
Author: sabecs replied at 2024-07-29 07:27:06
Thanks for your help and feedback, I don't really want to go backwards and start using tables but I also can't give the menu an actual width as it generated via a CMS and the menu width may change?
Expert: duncanb7 replied at 2024-07-29 07:23:35
sabecs, just follow zappafan2k2 's instruction or method, he is always correct or to
what he said or say
Finish his suggestion first, I have no more advice here
Duncan
what he said or say
Finish his suggestion first, I have no more advice here
Duncan
Expert: zappafan2k2 replied at 2024-07-29 07:09:48
Look, I don't want to start a debate here. Sabecs, you're almost there. Simply add width: 700px; to line six and you should have it.
If you want reasons why using tables for layout, simply google using tables for layout and you will find a host of articles and posts that detail the reasons why you shouldn't.
And using a block element with fixed width and auto margin has been around for a long time. Just make sure you use a valid !DOCTYPE (which you should anyway).
If you want reasons why using tables for layout, simply google using tables for layout and you will find a host of articles and posts that detail the reasons why you shouldn't.
And using a block element with fixed width and auto margin has been around for a long time. Just make sure you use a valid !DOCTYPE (which you should anyway).
Expert: duncanb7 replied at 2024-07-29 06:45:36
Just put in a table that will help on compatiable for all broswer that
I used to do since experienced a lot of this issue.
Fixed table will be better but not neccessary and that depend on your wish or requirement.
Might be you look at its(apple.com samsung.com) updated page ,and why they changed
it to html5 ? The reason might be table tag for ul and li that is not the best but
what you said that doesn't mean table tag with ul and li is NOT better than the one without table tag.
If you have time, you can switch to other html tag better than table tag.
Be reminded, sometimes, browser version is always changing but it doesn't mean
it is better version than previous one
I used to do since experienced a lot of this issue.
Fixed table will be better but not neccessary and that depend on your wish or requirement.
Might be you look at its(apple.com samsung.com) updated page ,and why they changed
it to html5 ? The reason might be table tag for ul and li that is not the best but
what you said that doesn't mean table tag with ul and li is NOT better than the one without table tag.
If you have time, you can switch to other html tag better than table tag.
Be reminded, sometimes, browser version is always changing but it doesn't mean
it is better version than previous one
Expert: zappafan2k2 replied at 2024-07-29 06:19:34
I respectfully disagree with Duncan. I checked out Samsung's main site. Their top navigation menu is a <ul> that's floated to the right within a <div>, so it's not centered. I checked out apple.com, and they are using a <ul> within a <nav> tag, which is an HTML5 element. Their <nav> tag has a fixed width, and margin: 0 auto; that's how they center it.
And that's how I personally have come to center a navigation menu: give it a fixed width, and use margin: auto to center it. If you change line 6 in your code above (which is currently blank) to say
And that's how I personally have come to center a navigation menu: give it a fixed width, and use margin: auto to center it. If you change line 6 in your code above (which is currently blank) to say
I think you will get what you want. You may have to play around with the width to get it closer, I was just estimating it.
Here's a jsfiddle.
Here's a jsfiddle.
Expert: duncanb7 replied at 2024-07-29 01:33:45
Normally, webpage designers will use table to do CSS for menu with ul and li tag
that will be easy control the width, text-align, or other thing.
ul and li is in problem with div,li,ul tag alignment in most browsers and give your
different webpage result on different browers.
And using table advantage that be good and fit for all browsers
if you don't believe, go to take a look big company webpage menu such as apple, samsung home page
So I encourage you "don't use auto width in CSS"
Putting all ul and li tag in a table with td tag and set text-align:center
and width and height in CSS or tag
<div>
,<table><tr>
<td><ul>
<li>.....
</table>
</div>
Duncan
that will be easy control the width, text-align, or other thing.
ul and li is in problem with div,li,ul tag alignment in most browsers and give your
different webpage result on different browers.
And using table advantage that be good and fit for all browsers
if you don't believe, go to take a look big company webpage menu such as apple, samsung home page
So I encourage you "don't use auto width in CSS"
Putting all ul and li tag in a table with td tag and set text-align:center
and width and height in CSS or tag
<div>
,<table><tr>
<td><ul>
<li>.....
</table>
</div>
Duncan
