Web Design Forums

Marie · 13-03-2008, 11:38

Hi,

I'm a new member

I'm currently working on my third year university project and am having some problems with css rollovers...

ive sorted out my right navigation, but would like 2 small navigation bars under my header but at the moment these are stuck on the left hand side,

does any one have ideas of how I can move these two links over to the right hand side?!?

Many Thanks
Marie

Anxious · 13-03-2008, 11:40

Have you used float:left?

Marie · 13-03-2008, 11:45

yeh ive tried that... hmmm

but now I'm working thinking I might have to minus the margins?!?

Anxious · 13-03-2008, 11:46

Could you post your CSS so we can see what you've got so far?

Marie · 13-03-2008, 11:49

this is that section below:

#navcontainer1 ul /*navigation bar under header*/
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer1 li { margin: 0 0 4px; }
#navcontainer1 a
{
display: inline;
color: #CCCCCC;
background-color: #42093d;
width: 130px;
padding: 4px 6px 3px 5px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
height: 15px;
float: left;
margin: 0px;
}
#navcontainer1 a:hover
{
background-color: #713e6d;
color: #;
}

Anxious · 13-03-2008, 11:54

Do you also have the html so we can see where it is?

Is the navigation on the same line as the header? It may be that your display:inline is causing it to jump up.

Marie · 13-03-2008, 12:09

</head>

<body>
<div class="position"id="header"><p><img src="Images/Header2.gif"></p>

<div id="navcontainer1">
<ul class="navcontainer1">
<a href="#">Forum</a>
<a href="#">Tell a friend</a>
</ul>
</div>

<div id="navcontainer">
<ul class="navcontainer">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Breaking News</a></li>
<li><a href="#">Interesting Issues</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="content">
<p><img src="Images/Content.gif"></p>
</div>

thats a bit of my code, and its the tell a friend and forum section that I want under my header on the right hand side?!?

ne ideas?

Anxious · 13-03-2008, 12:18

Ok, try this:

Quote:

#navcontainer1 ul /*navigation bar under header*/
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer1 li
{
margin: 0 0 4px;
}

#navcontainer1 a
{
text-align: right;
color: #CCCCCC;
background-color: #42093d;
width: 130px;
padding: 4px 6px 3px 5px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
height: 15px;
margin: 0px;
}

#navcontainer1 a:hover
{
background-color: #713e6d;
}

I think the 'display:inline' is probably causing you problems. Take out the float too and insert text-align:right. That might work?

Marie · 13-03-2008, 12:26

hmmm...

I've just floated right and it seems to have worked,

it it ok to use both float right and left for the same website?

Anxious · 13-03-2008, 12:28

Quote:

Originally Posted by Marie

hmmm...

I've just floated right and it seems to have worked,

it it ok to use both float right and left for the same website?

Yes, it's fine to use both.

Edit: I've just realised I said 'float:left' in my first post, when it should have been 'float:right'. Doh! Mountain out of a molehill, sorry!

Marie · 13-03-2008, 12:35

Thanks...

13-03-2008, 11:38	#1 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	Css Help Hi, I'm a new member I'm currently working on my third year university project and am having some problems with css rollovers... ive sorted out my right navigation, but would like 2 small navigation bars under my header but at the moment these are stuck on the left hand side, does any one have ideas of how I can move these two links over to the right hand side?!? Many Thanks Marie

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

13-03-2008, 11:40	#2 (permalink)
Anxious Crimp Crimp Crimp Join Date: Jun 2007 Location: Glasgow Posts: 2,551	Have you used float:left?

13-03-2008, 11:45	#3 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	yeh ive tried that... hmmm but now I'm working thinking I might have to minus the margins?!?

13-03-2008, 11:46	#4 (permalink)
Anxious Crimp Crimp Crimp Join Date: Jun 2007 Location: Glasgow Posts: 2,551	Could you post your CSS so we can see what you've got so far?

13-03-2008, 11:49	#5 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	this is that section below: #navcontainer1 ul /navigation bar under header/ { margin: 0; padding: 0; list-style-type: none; } #navcontainer1 li { margin: 0 0 4px; } #navcontainer1 a { display: inline; color: #CCCCCC; background-color: #42093d; width: 130px; padding: 4px 6px 3px 5px; text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-style: normal; height: 15px; float: left; margin: 0px; } #navcontainer1 a:hover { background-color: #713e6d; color: #; }

13-03-2008, 11:54	#6 (permalink)
Anxious Crimp Crimp Crimp Join Date: Jun 2007 Location: Glasgow Posts: 2,551	Do you also have the html so we can see where it is? Is the navigation on the same line as the header? It may be that your display:inline is causing it to jump up.

13-03-2008, 12:09	#7 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	</head> <body> <div class="position"id="header"><p><img src="Images/Header2.gif"></p> <div id="navcontainer1"> <ul class="navcontainer1"> <a href="#">Forum</a> <a href="#">Tell a friend</a> </ul> </div> <div id="navcontainer"> <ul class="navcontainer"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Breaking News</a></li> <li><a href="#">Interesting Issues</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="content"> <p><img src="Images/Content.gif"></p> </div> thats a bit of my code, and its the tell a friend and forum section that I want under my header on the right hand side?!? ne ideas?

13-03-2008, 12:26	#9 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	hmmm... I've just floated right and it seems to have worked, it it ok to use both float right and left for the same website?

13-03-2008, 12:35	#11 (permalink)
Marie Registered User Join Date: Mar 2008 Posts: 21	Thanks...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)