CSS Forum

**Hatsuharu** · 06:40 PM

Hi there

I did a simple menu but i can't change his position, it always show up at the top of the image, i tried to change it using position: relative; and position: absolute; (using top or left) at #menu{...} but didn't wotk. Does anyone know how can i change the position of the menu? or what am i doing wrong?.

If i use position: relative; in body{....}; it change the position of the layout (i don't want that. By the way, i'm using two css files, one for the layout and the other things and one for the menu.

Css code:

Code:

#menu{
font: 80% "Trebuchet MS", Verdana;
margin: 0;
/*width: 200px;*/
position: realtive;
left: 55px;
}

#menuh ul, li { list-style-type: none; }

#menuh ul{
margin: 0;
padding: 0;
}

#menuh li { float: left; }

#menuh a{
text-decoration: none;
color: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}

#menuh a#first { border-left: 1px solid #ACCFE8;}
#menuh a#hover { background: #DBEBF6; }

HTML Code

Code:

.... <body>
<div id="container">
 <div class="top"></div>
 <div class="inf">
  <div id="menuh">
   <ul>
     <li><a href="#menuh" di="first"> Opción 1</a></li>
     <li><a href="#menuh">Opción 2</a></li>
     <li><a href="#menuh">Opción 3</a></li>
   </ul>
  </div>/*Menú*/
 </div>/*Info*/
 <div class="post"><b>text </div>
 <div class="footer"></div>
</div> 
</body>.....

Thanks (playing with

**persist1** · 09-08-2006, 12:04 AM

...Problem is, there's nothing wrong with the markup or styles you posted. If you can put a test article online, the problem will be inarguably reproduced and anyone who's interested in helping you will be better able to figure out what's going wrong.

**LadynRed** · 09-08-2006, 12:16 AM

Lets see the REST of the CSS and HTML and we might be able to figure it out.

**ADAM Web Design** · 09-08-2006, 12:05 PM

Better yet, post the page so we can see it.

**Hatsuharu** · 09-08-2006, 04:17 PM

Hi there

Ok, guys check it here please. >> Link <<

Css code (bc.css)

Code:

/* CSS Document */
#container{
background-color: #fff;
color: #fff;
width: 726px; /**/
margin: 0px auto; /**/
background: #000 url(body.jpg) repeat-y;
}

body{
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 10px;
}

/*Layout images*/

.top /*726x324*/{
width: 726px;
height: 324px;
margin: 0px; 
float: center;
background-image:url('top.jpg');
background-repeat: no-repaet;
}

.inf /*726x154*/{
width: 726px;
height: 154px;
margin: 0px;
float: center;
background-image: url('inf.jpg');
background-repeat: no-repeat;
}

.footer /*726*86*/{
width: 726px;
height: 86px;
margin: 0px;
float: center;
background-image: url('footer.jpg');
background-repeat: no-repeat;
}

h6{ font-size: 10px; color: #ff8000; }

h4 { font-size: 13px; }

h3 { font-size: 12px; color: #c0c; }

.borde { border-bottom: 1px dotted grey; }

.profile{
width:130px;
height:350px;
position: relative;
left: 567px;
margin: 0px;
top: 16px;
}

.post{
width: 350px;
height: auto;
position: relative;
left: 57px;
margin: 0;
}

Css code (ms.css)

Code:

/* Menu */
#menu {
font: 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
margin: 20;
/*width: 200px;*/
position: relative;
left: 55px;
}

#menuh ul, li { list-style-type: none; }

#menuh ul{
margin: 0;
padding: 0;
}

#menuh li { float: left; }

#menuh a{
text-decoration: none;
color: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}

#menuh a#first { border-left: 1px solid #ACCFE8;}

#menuh a#hover { background: #DBEBF6; }

Merci

**LadynRed** · 09-08-2006, 07:15 PM

This one's easy:

#menuh{
margin-left: 50px;
}

Or however many pixels you want to push it over, up, down, etc.

**Hatsuharu** · 09-09-2006, 09:56 AM

Quote:

Originally Posted by LadynRed

This one's easy:

#menuh{
margin-left: 50px;
}

Or however many pixels you want to push it over, up, down, etc.

Did work!, and yep that was easy sorry i'm kinda new with all this css stuff, thank you so much for your help.

Ps. Can you recommend me some book or good tutorial about CSS, please?.

**LadynRed** · 09-09-2006, 01:39 PM

Sure

HTML*Utopia: Designing*Without*Tables Using*CSS, 2nd*Edition - SitePoint Books

Eric Meyer on CSS: Home

**ADAM Web Design** · 09-09-2006, 03:11 PM

Index DOT Css: Index Page is also a good place for pure syntax questions.

**Hatsuharu** · 09-10-2006, 08:36 PM

Thanks for the links.