0

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

4
Contributors
11
Replies
12
Views
7 Years
Discussion Span
Last Post by bben95
0

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 by mike_2000_17: Fixed formatting

0

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

0

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

Regards, Arkinder

Edited by Arkinder: n/a

0

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

Edited by sirlink99: n/a

0

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

0

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>
0

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

0

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/

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.