Log in

View Full Version : Resolved Positioning in CSS


froggy
11-16-2008, 07:03 PM
Hi there,

I am trying to position an image (logo) the to the right of the logo I would like some text links.

I have used the - number in the margin so that my links would move up and show next to my logo. However, I have been told this will not work in some browsers and only work in IE. How can I code the css so it works in all browsers? I have included the code bellow. Thank you in advance for any help.

CSS For the image and navigation:


#container {
width: 800px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

/* ----------logo-------------- */
#banner {
text-align: left;
padding: 0px;
margin: 0px;
}
/* -----------menu1--------------------------- */
#navigation {
text-align: center;
margin: -47px 0px 0px 263px;
width:505px;
height:33px;
padding: 0px;
background-color:#0099FF;
}
.nav1{
width: 100%;
overflow: hidden;
color:#FFFFFF;
}
.nav1 ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 16px Verdana;
list-style-type: none;
}
.nav1 li{
display: inline;
margin: 0;
}
.nav1 li{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 16px; /*padding inside each tab*/
color: #000000;
}
.nav1 li a:visited{
color: #000000;
}
.nav1 li a:hover{
color: #FFFFFF;
}


<body>
<div id="container">
<div id="banner" ><img src="raglanfestlogo.gif" width="263" height="139" /></div>
<div id="navigation" class="nav1">
<ul>
<li><a href="http://www.raglan-festival.org">About</a></li>
<li><a href="http://www.raglan-festival.org">Contact</a></li>
<li><a href="http://www.raglan-festival.org">Schedule</a></li>
<li><a href="http://www.raglan-festival.org">Sponsors</a></li>
<li><a href="http://www.raglan-festival.org">Links</a></li>
</ul>
<div id="rightcornerbox"><img src="rightcorner.gif" /></div>
</div>
rest of page
</div>
BLiZZaRD
11-16-2008, 07:07 PM
Don't quite follow what you are after. Do you have a link to the page or an image to help illistrate what you want done?
froggy
11-16-2008, 07:32 PM
I am trying to re-code this site in css

www.raglan-festival.org

I am having trouble with the menu bars at the top of the page. I basicaly want to know how to get the menu in that possition and be cross browser compatible.

I have used the code above and #navigation is where the top menu is held but to get it to show next to the image i used the code margin: -47 0 0 0;

However in some browsers i have been told the -47 will not work.

How can i do the image and menu in css relative positioning?

Hope this helps....its a difficult one to explain.

Thank you for taking the time to help.
Snookerman
11-16-2008, 07:34 PM
Can you post a link to the new page, or attach it here? It would make it easier to help you.
froggy
11-16-2008, 07:42 PM
I have attached the files.

Any problems let me know.

Thank you
froggy
11-16-2008, 07:45 PM
the html in a txt document
Schmoopy
11-17-2008, 02:32 AM
I haven't looked through your code, but I've found relative positioning can be a pain, in IE sometimes images / text will stay in the same place when the window is resized. In most cases I usually try and take out the position relative, and try using floats with different values for the margin, as I've found this the best solution, give it a try.
Snookerman
11-17-2008, 09:02 PM
Have you fixed the problem yet (it looks fine with me)? If so, ad the Resolved prefix by editing your first post.