You are viewing our Forum Archives. To view or take place in current topics click here.
#11. Posted:
Imp
  • Shoutbox Hero
Status: Offline
Joined: Jan 01, 201113Year Member
Posts: 1,957
Reputation Power: 401
Status: Offline
Joined: Jan 01, 201113Year Member
Posts: 1,957
Reputation Power: 401
Please stop bickering on this forum. All i ever see now is members offending other members with either their lack of knowledge, or difference of opinions.

I from now on will be coming down hard on members that abuse this forum if this continues.

If you do not have any constructive help for the member posting the question, please refrain from posting.


OP: To assist you, here is a basic menu written as an Unordered List in this example.

<head>
      <title>List example: main menu</title>
      <style type="text/css">
         body {
            font-family:arial;
            font-size:.8em;
            color:black;
            background-color:white;
            margin: 0;
            padding: 0;
         }
      
         #mainmenu {
            margin:0;
            padding:0;
         }

         #mainmenu ul {
            background-color:#336699;
            text-align: center;
            margin: 0;
            padding: .3em 1em;
         }
         
         #mainmenu li {
            list-style-type: none;
            display: inline;
         }

         #mainmenu li a {
            font-size: 1em;
            color: white;
            background-color: transparent;
            text-decoration: none;
            padding:.3em 1em;
         }
         
         #mainmenu a:hover {
            color:white;
            background-color:black;
         }
      </style>
   <style type="text/css"></style></head>
   <body>
      <h1>List example: main menu</h1>
      <div id="mainmenu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Hosting</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
      </div>
   

</body>


the menu is live here

[ Register or Signin to view external links. ]

This will be a good basis to start, but obviously will need work to add your own menus and colours etc. Move the Style sheet to your own CSS file.

I apologise to you for the unnecessary posting on your topic.
#12. Posted:
kpempire
  • Challenger
Status: Offline
Joined: Jan 20, 201410Year Member
Posts: 115
Reputation Power: 4
Status: Offline
Joined: Jan 20, 201410Year Member
Posts: 115
Reputation Power: 4
Imp wrote Please stop bickering on this forum. All i ever see now is members offending other members with either their lack of knowledge, or difference of opinions.

I from now on will be coming down hard on members that abuse this forum if this continues.

If you do not have any constructive help for the member posting the question, please refrain from posting.


OP: To assist you, here is a basic menu written as an Unordered List in this example.

<head>
      <title>List example: main menu</title>
      <style type="text/css">
         body {
            font-family:arial;
            font-size:.8em;
            color:black;
            background-color:white;
            margin: 0;
            padding: 0;
         }
      
         #mainmenu {
            margin:0;
            padding:0;
         }

         #mainmenu ul {
            background-color:#336699;
            text-align: center;
            margin: 0;
            padding: .3em 1em;
         }
         
         #mainmenu li {
            list-style-type: none;
            display: inline;
         }

         #mainmenu li a {
            font-size: 1em;
            color: white;
            background-color: transparent;
            text-decoration: none;
            padding:.3em 1em;
         }
         
         #mainmenu a:hover {
            color:white;
            background-color:black;
         }
      </style>
   <style type="text/css"></style></head>
   <body>
      <h1>List example: main menu</h1>
      <div id="mainmenu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Hosting</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
      </div>
   

</body>


the menu is live here

[ Register or Signin to view external links. ]

This will be a good basis to start, but obviously will need work to add your own menus and colours etc. Move the Style sheet to your own CSS file.

I apologise to you for the unnecessary posting on your topic.


This is exactly what I was about to post minus the preview, Great job.
#13. Posted:
Wilez
  • TTG Addict
Status: Offline
Joined: Apr 29, 201113Year Member
Posts: 2,192
Reputation Power: 99
Status: Offline
Joined: Apr 29, 201113Year Member
Posts: 2,192
Reputation Power: 99
-K9 wrote
Abbreviate wrote
Nicasus wrote It's hard for me to tell what you want to do here, considering your HTML is quite a mess. Here is something that might help you out, it shows how to create basic tables:

[ Register or Signin to view external links. ]


..Or you could do it the proper way and never ever ever use tables for page layout.

[ Register or Signin to view external links. ]


Well define "Proper way?" Some people have a different idea of what's proper or not. Tables, in my experience, are absolutely great for navigation bars. But again, it comes down to personal opinion on that matter.


Tables should be used for tabular data, not for positioning elements on a webpage.

OT: It's much easier to use a stylesheet for your styling.
Replace 'position: absolute' with 'position: relative' then add 'float: right'
I think that should work for what your trying to do.
#14. Posted:
Kalooma
  • Junior Member
Status: Offline
Joined: Sep 04, 201311Year Member
Posts: 66
Reputation Power: 2
Status: Offline
Joined: Sep 04, 201311Year Member
Posts: 66
Reputation Power: 2
try making you navMenu like...
//code begins
HTML:
div class="navMenu">
<ul id="parentMenu">
<li>Home</li>
<li>stuff</li>
<li>Options</li>
<ul id="nestedMenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</ul>

CSS:
#navMenu {
float: right;
}
// code ends

Correct me if i'm wrong!
#15. Posted:
phpBB
  • TTG Senior
Status: Offline
Joined: Dec 31, 201112Year Member
Posts: 1,274
Reputation Power: 54
Status: Offline
Joined: Dec 31, 201112Year Member
Posts: 1,274
Reputation Power: 54
Kalooma wrote try making you navMenu like...
<!-- CODE BEGINS -->
<HTML>
<div class="navMenu">
<ul id="parentMenu">
<li>Home</li>
<li>stuff</li>
<li>Options</li>
<ul id="nestedMenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</ul>
</div>
</HTML>

<STYLE>
#navMenu {
float: center; /*So it floats in the center of the page */
}
#navMenu ul{list-style-type:none;} /*So theres no bullets beside menu*/
</STYLE>
<!-- CODE ENDS -->

Correct me if i'm wrong!

Fixed your code, you didn't close the div tag, the comments wouldn't have worked (Don't think).. And the css wasn't in style tags.. (You could also put it in a new file called theme.css, and in your main text/html file put this code at top:

<HEAD>
<link rel="stylesheet" type="text/css" href="theme.css">
</HEAD>
#16. Posted:
7en
  • V5 Launch
Status: Offline
Joined: Aug 16, 201212Year Member
Posts: 598
Reputation Power: 29
Status: Offline
Joined: Aug 16, 201212Year Member
Posts: 598
Reputation Power: 29
phpBB wrote *snip*


There's still quite a number of problems in your code.

Here's it fixed yet again; [ Register or Signin to view external links. ]
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.