Centering Menu

Question

sirlink99 56 Practically a Master Poster

13 Years Ago

I am trying to center a simple navigation menu (horizontal). this is my script so far:

<head> 
<title>Home</title><link rel="menu" href="menu.css" 

type="text/css" />
<style type="text/css">
body {background-image:url('backg.jpg');}
.center
body{ 
text-align:center; /*centers for IE5*/ 
#menu_box{ 
text-align:center; /*overrides the centering from 

above*/ 
width:675px; /*5 menu items at 135px width (8px padding 

+ 2px border + 125px width)*/ 
margin:0 auto; /*centers in compliant browsers*/ 
 


ul{
list-style:none;
margin:0;
padding:100;
}
li
{
float:left;
}

a:link,a:visited
{

display:block;
display:circle;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:33ff33;
text-alaign:center;
padding:10px;
}
a:hover,a:active{
background-color:#ff6633;
}
} 

</style>

</head>

<body>
<center>
<img src="banner.jpg" alt="banner" width="800px" 

height="150px"/>
</center>
<span style="cursor:pointer">
<center>
<div id=menu>


<ul>
<li><a href="#home">Home</a></li>
<li><a href="#plist">Player List</a></li>
<li><a href="#pics">Pictures</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</center>
</span>
</body>

it seems like there are several errors and does anyone know of a html + css editing program (like netbeans or eclipse for java)?

css menu web-design

4 Contributors
11 Replies
204 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by bben95

All 11 Replies

prathameshz 0 Newbie Poster

13 Years Ago

hey, try this code,
and let me know what happens

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Home</title>
<link rel="menu" href="menu.css" type="text/css" />

<style type="text/css">

body 
{
    background-image:url('backg.jpg');
    margin:0px;
    padding:0px;
}

.wrapper
{
    width:800px;
    height:auto;
    margin-left:auto;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:0px;
}

.menu
{ 
height:60px;
width:800px; 
float:left;
}


ul
{
    list-style-type:none;
    width:500px;
}

li
{
float:left;
text-align:center;
}

a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#33ff33;
padding-top:10px;
padding-bottom:10px;
}

a:hover,a:active
{
background-color:#ff6633;
}
</style>
</head>

<body>
<div class="wrapper">
<img src="banner.jpg" alt="banner" width="800px" height="150px"/>

<div class="menu"> 
<center>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#plist">Player List</a></li>
<li><a href="#pics">Pictures</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</center>
</div>

</div>
</body>

</html>

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

Arkinder 93 Posting Pro in Training

13 Years Ago

Here are a few. I've used most of them at one point or another, and they work well enough.

Regards, Arkinder

Edited 13 Years Ago by Arkinder because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sirlink99 56 Practically a Master Poster · Answer 1 · 2010-12-06T19:42:01+00:00

sirlink99 56 Practically a Master Poster

13 Years Ago

it works thanks

sirlink99 56 Practically a Master Poster · Answer 2 · 2010-12-06T20:45:16+00:00

do you happen to know of some scripting program for html and css that is better then notepad?

sirlink99 56 Practically a Master Poster · Answer 3 · 2010-12-07T02:32:03+00:00

thanks for the editors and how would I add in a background picture over the background picture? there is the main background and then there is the wrapper div and I would like to add in another background picture there.

I put

background-image:url('tile.jpg');

script into the

.wrapper

part of the script and it didn't work. How would I solve this problem?

it looks like this:

.wrapper
{
width:800px;
height:auto;
margin-left:auto;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;

background-image:url('tile.jpg');
}

woops never mind -_- i forgot to put the folder

the fix

.wrapper
{
width:800px;
height:auto;
margin-left:auto;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;

background-image:url('images/tile.jpg');
}

Arkinder 93 Posting Pro in Training · Answer 4 · 2010-12-07T06:53:15+00:00

Check to make sure your using the correct path for the file. First let's check your code. Try this for the background image, if it loads then it's most likely the file path.

http://www.google.com/images/logos/ps_logo2.png

Regards, Arkinder

prathameshz 0 Newbie Poster · Answer 5 · 2010-12-07T14:54:21+00:00

hey,
its better to use Adobe dreamweaver or Micosoft Expression Web

Arkinder 93 Posting Pro in Training · Answer 6 · 2010-12-07T22:09:15+00:00

Yes, let's all use text editors that code for IE. A browser that is 12 years behind web standards, and that will never do anything right. Neither are by any means, better.

Never use IE as a test browser. Always use a modern browser such as Firefox, Safari, Opera, or Chrome to code your pages. Then go back to see how badly IE has screwed it up. All of the bugs in IE are known, as well as the fixes.

Regards, Arkinder

sirlink99 56 Practically a Master Poster · Answer 7 · 2010-12-07T22:22:22+00:00

I figured out how to make the blue translucent and it works, but the blue still doesn't cover all of the text and I don't know why.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Home</title>
<link rel="menu" href="menu.css" type="text/css" />

<style type="text/css">

body 
{
    background-image:url('images/backg.jpg');
    margin:0px;
    padding:0px;
}

.news
{
    width:800px;
    margin-left:30px;
    margin-right:30px;
}

.newsbg{
    width:740px;
    background-color:rgba(142,229,238,0.5);

}


.wrapper
{
    width:800px;
    height:auto;
    margin-left:auto;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:0px;

    background-image:url('images/tile.jpg');
}

.menu
{
    margin: 0 auto;
    height:60px;
    width:800px; 
    float:left;
}


ul
{
    list-style-type:none;
    width:500px;
}

li
{
float:left;
text-align:center;
}



a:link,a:visited
{
    display:block;
    width:100px;
    font-weight:bold;
    color:#ffffff;
    background-color:#33ff33;
    padding-top:10px;
    padding-bottom:10px;
}


a:hover
{
    background-color:#ff6633;
}

a:active
{
    background-color:#ff0000;
}

[warning]
{
    color:#990000;
    margin-left:10px;
}
[thanks]
{
    float:right;
    margin-right:10px;
}

[news]
{
    margin-left:10px;
    margin-right:10px;
    color:#000000;
    

}

[newstitle]
{
    margin-left:10px;
    margin-right:10px;
    color:#CC0000; 
    
}


</style>
</head>

<body>
<div class="wrapper">
    <img src="images/banner.jpg"  alt="banner" width="800px" height="150px"/>

    <div class="menu"> 
        <center>
        <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#plist">Player List</a></li>
        <li><a href="#pics">Pictures</a></li>
        <li><a href="http://styxcity.byethost33.com/forum/index.php">Forum</a></li>
        <li><a href="#contact">Contact</a></li>
        </ul>
        </center>

    </div>
    <h1 warning="warning">Rescent News</h1>


    <br />
    <div class="news">
        <div class="newsbg">
            <h1 newstitle="test title"><u>First Post</u></h1>
            <h4 news="test News">This will be the styx city  website eventually (hopefully). Please give me suggestions on the Official styx city forum or the new one just made. </h4>
            <h4 news="note"> Please use your minecraft account as name when signing up for the forum (so we can tell who is who).</h4>
            <h4 news="Pages">Only the home page and the forum are working so far.</h4>
            <h5 thanks="Signature">Thanks, 99rock99</h5>
        </div>
    </div>
</div>


</body>

</html>

Arkinder 93 Posting Pro in Training · Answer 8 · 2010-12-07T22:38:16+00:00

As I posted in your other thread,

[thanks]
{
    float:right;
    margin-right:10px;
}

Has the float property. This removes it from the normal flow of the page, so the containing divisions (newsbg) is not stretching down to cover it. You can either remove the float, or give newsbg a set height.

Regards, Arkinder

bben95 · Answer 9 · 2010-12-14T02:49:09+00:00

do you happen to know of some scripting program for html and css that is better then notepad?

Notepad++ is good and it works with many languages. And its free.
http://notepad-plus-plus.org/

Centering Menu

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers