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)?

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>

it works thanks

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

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

Regards, Arkinder

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');
}

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

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

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

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>

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

Member Avatar for bben95

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/

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.