naiani
01-30-2008, 06:35 PM
Hi everyone!
I'm working on a new design and I don't why the hell when I apply float:right to a horizontal menu, the items have their order inverted.
It's supposed to be:
Home About Resume Links Contact
But when I apply float:right to the #menu ul li a, the order turns into:
Contact Links Resume About Home
I had never seen such thing before.
Here's the CSS:
html, body {
height: 100%;
}
body {
background-color: #fff;
margin: 0;
padding: 0;
font-size: 75%;
color: #000;
}
hr {
display: none;
}
div#container {
background: url(bgbarra2.png) repeat-y 0 0;
margin: -1px 0 0;
padding: 0;
width: 700px;
min-height: 100%;
text-align: left;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
div#title {
margin: 0;
padding: 0;
width: 252px;
float: left;
text-align: right;
}
div#title h1 {
display: none;
}
img#nome {
padding: 20px 10px 0 0;
}
img#deco {
margin-right: 2px;
/*border-right: 2px solid #000;*/
}
div#content {
margin: 0 1em 0 262px;
padding: 0;
}
div#menu {
width: 100%;
font-size: 1.4em;
font-weight: bold;
}
div#menu ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: right; /* This apparently isn't doing anything, although I know it's supposed to be here */
}
div#menu ul li {
display: inline;
}
div#menu ul li a {
float: right; /* This is the problematic one */
color: #000;
border-bottom: 3px solid #f00;
text-decoration: none;
margin: 0 3px;
padding: 0;
}
div#clear {
clear: left;
}
* html #container {
height: 100%;
}
The weird thing is that I've used the same horizontal menu technique, and this is the first time I have problems with it.
Here's the html:
<html>
<head>
<title>Naiani</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Naiani</h1>
<img id="nome" src="title.png" /><br />
<img id="deco" src="rodape.gif" />
</div>
<hr />
<div id="content">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<p>Random Text</p>
<p>Last Photo</p>
</div>
<div id="clear"></div>
</div>
</body>
</html>
I've tried this html both WITH and WITHOUT the #menu div, but the results are the same.
There's another issue: if you notice the div#container section, it has a top border of 1px, and -1px top margin. I had to do this because, for some reason, if I set the top margin to 0, it won't do anything, the top margin is still there, as if it's set to 10px or something. I have no idea why is that.
Can someone help me with both things? Thanks!
I'm working on a new design and I don't why the hell when I apply float:right to a horizontal menu, the items have their order inverted.
It's supposed to be:
Home About Resume Links Contact
But when I apply float:right to the #menu ul li a, the order turns into:
Contact Links Resume About Home
I had never seen such thing before.
Here's the CSS:
html, body {
height: 100%;
}
body {
background-color: #fff;
margin: 0;
padding: 0;
font-size: 75%;
color: #000;
}
hr {
display: none;
}
div#container {
background: url(bgbarra2.png) repeat-y 0 0;
margin: -1px 0 0;
padding: 0;
width: 700px;
min-height: 100%;
text-align: left;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
div#title {
margin: 0;
padding: 0;
width: 252px;
float: left;
text-align: right;
}
div#title h1 {
display: none;
}
img#nome {
padding: 20px 10px 0 0;
}
img#deco {
margin-right: 2px;
/*border-right: 2px solid #000;*/
}
div#content {
margin: 0 1em 0 262px;
padding: 0;
}
div#menu {
width: 100%;
font-size: 1.4em;
font-weight: bold;
}
div#menu ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: right; /* This apparently isn't doing anything, although I know it's supposed to be here */
}
div#menu ul li {
display: inline;
}
div#menu ul li a {
float: right; /* This is the problematic one */
color: #000;
border-bottom: 3px solid #f00;
text-decoration: none;
margin: 0 3px;
padding: 0;
}
div#clear {
clear: left;
}
* html #container {
height: 100%;
}
The weird thing is that I've used the same horizontal menu technique, and this is the first time I have problems with it.
Here's the html:
<html>
<head>
<title>Naiani</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Naiani</h1>
<img id="nome" src="title.png" /><br />
<img id="deco" src="rodape.gif" />
</div>
<hr />
<div id="content">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<p>Random Text</p>
<p>Last Photo</p>
</div>
<div id="clear"></div>
</div>
</body>
</html>
I've tried this html both WITH and WITHOUT the #menu div, but the results are the same.
There's another issue: if you notice the div#container section, it has a top border of 1px, and -1px top margin. I had to do this because, for some reason, if I set the top margin to 0, it won't do anything, the top margin is still there, as if it's set to 10px or something. I have no idea why is that.
Can someone help me with both things? Thanks!