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:

Code:

#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;
}

HTML Code:

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

Thread: Positioning in CSS

Thread Tools

Search Thread

Positioning in CSS

Bookmarks

Bookmarks

Posting Permissions