CSS - Simple But Tricky Header / Link Styling Question

Hi.

Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar.

Im trying to style it like this:



This is what it is currently like:



This is my current css:
Code:

#nav li {
	float: left;
	border-right: 0px solid #d5d5d5;
	text-align: center;
}

#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
	color: #FFFFFF;
	border-color: #2F2F2F;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
}

#nav li.active a {
	color: #FFFFFF;
	font-style:bold;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
	align: center;
}

This is a link: http://toyota.identityprojects.co.uk

Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it.

Can anyone help me out with this, ive wasted ages on this!

Hi,

I'm new to CSS and am using the weebly website builder. I need to add a link to my header image. Could anyone help me with this?

This is the CSS:

#header{
width: 961px;
height: 141px;
border-top: 2px solid #cccccc;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}

thank you!

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

this is what i got: a menuBox


Code:

<tr align="center" valign="top" height="120">
  <td height="120">
    <div class="menuBox">
      <div class="menuBoxHeader">Menu</div>
      <p><a href="blah-blah4">4.</a></p>
      <p><a href="blah-blah5">5.</a></p>
      <br>
      <p>some text>
    </div>
   </td>
</tr>

I use for the links

Code:

a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}

for the menuBox

Code:

.menuBox     { color: #c36;
 font-style: normal;
 font-weight: bold;
 font-size: 9px;
 line-height: 2px; font-family: Verdana;
 background-color: #fef;
 border: solid 1px #c36 }

and for the menuBoxHeader

Code:

.menuBoxHeader    {
	color: #efe;
	font-style: normal;
	font-weight: bold;
	font-size: 9px;
	line-height: 13px;
	font-family: Verdana, Arial, Helvetica;
	background: #c36 0px 0px;
	margin: 1px 0px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 16px }

So now my two questions.

1.
What do I have to do to let it look in all the browsers the same?
In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ).

2.
The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right?

I hope that someone can help me?

I want to do this design:
http://hermann.sonyextreme.com/upload/design.png
* means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px.

I've set it up like this:
Code:

<div id="container">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

But no matter what I try, the css just keeps ****ing with me
So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you

Thanks in advance
Hermann

Hi I have seen alot of sites having a top banner going across the page for example corkd.com When I try to create a table 100% width and put a bg color. It always shows the table one line below the top. How do I move it to way at the top? Or am I not doing it correctly?

I have a Header, and inside that header I want to have a Black empty I guess you would say mini Header that will be at the top of my main Header.

How would one glue the mini Header to the top of the Main Header?

Would one use Position: Relevant, Margin ? ?, top: ? Left: ?....?

Thank you

Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a).

Thanks so much.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
body{
	color: #fff;
	font: 10pt Arial, Helvetica, sans-serif;
}
* {
	margin: 0; 
	padding: 0; 
}
#header{	
	width:760px; 
	margin: 0 auto;
}
#header ul{ 
	height: 44px; 
	line-height: 44px; 
	display: block; 
	list-style: none; 
	background: #1F2C56; 
}
#header li{ 
	display: inline; 
	background: #395A8D;  
	float: right;  
}
#header li a{ 
	height: 44px; 
	line-height: 44px; 
	display: block; 
	width: 94px;
	text-align: center;	
border-left: 1px solid Black;  
	float: left; 
}
#header li a:hover{ 
	background: #1F2C56; 
	text-decoration: none;
}
#header .visual{ 
	height:263px; 
	background: #1F2C56;  
	border-top: 3px solid Black;   
}
a{ color: #FFFFFF; text-decoration: none; }
</style>
</head>
<body>
<div id="header">
	<h1>Welcome</h1>
        <ul>
            <li><a href="link8.html">Link 8 Link 8 Link 8</a></li>
            <li><a href="link7.html">Link 7</a></li>
            <li><a href="link6.html">Link 6</a></li>
            <li><a href="link5.html">Link 5</a></li>
            <li><a href="link4.html">Link 4</a></li>
            <li><a href="link3.html">Link 3</a></li>
            <li><a href="link2.html">Link 2</a></li>
            <li><a href="link1.html">Link 1</a></li>
        </ul>
	<div class="visual"> </div>
</div>
</body>
</html>

Hey all,

I have a problem. On my website I want the links in the navbar to go bold when you roll over them. However I want to keep the links on the page normal and have a different style for them? I am currently using a:link, a:hover etc.....

Any ideas would be appreciated!!! Thanks. Jack.

Thanks for taking the time to read my question.

I would like to make an horizontal nav. BUT I'd like 2 different sizes of buttons. The active page has a large button, and if you mouse over another button, it gets big also. I'm not entirely sure how to accomplish this. I've attached a pic of what I'm going for, and inserted my code thus far... and thus far, it's not working that great. I can put my images in the <li>s but I also need text there, so I have to use background-image in my css.

Thanks,

Brad


CSS:
Code:

.NavContainer {
float: left;
/*background-color:#FF0000;*/
padding: 0px;
margin: 89px 0px 0px 0px;
width: 800px;
}

.NavContainer ul li {
display: inline;
}

.NavContainer ul {
padding: 0px;
margin: 0px;
}

.NavContainer ul li {
width: 133px;
height: 101px;
/*background-color:#FF00FF;*/
}

.NavContainer ul li .Active {
background-image:url(Images/ButtonLarge.jpg);
background-repeat:no-repeat;
background-position:top;

}

.NavContainer ul li .NotActive {
background-image:url(Images/ButtonSmall.jpg);
background-repeat:no-repeat;
background-position:top;

}

HTML:
Code:

	<div class="HeaderContainer">
    	<div class="NavContainer">
        	<ul>
            	<li class="Active"></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
            </ul>
        </div>
    </div>

Hi all,

I am making a test page for a client. It's a VERY simple site (he's a simple guy ), but I am having a little trouble with something that's probably pretty easy. For some reason, though I just can't get it to cooperate.

The site is at www.bartlett-family.net/test

On the footer, you'll notice that it also has a few links and those links have the SAME properties (through the CSS) as the other page links on the left and right. I don't want that. I want the links in the footer to be WHITE at all times, whether clicked, hovered over, etc.

How can I do this?

Thanks!

Chris

ok, so after i click a link it goes to the css visited link.

.menu_1a a:link {color:#666666; text-decoration: none;}
.menu_1a a:hover {Background: #666666; color:white;}
.menu_1a a:visited {color:#666666; text-decoratoin: none;}

is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link

any ideas?
-kevin

I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to.

I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit.

I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images.

This diagram describes what I'm trying to do:

+----------------------------------------+
|........................................|
|..Fixed height header image.............|...Content
|........................................|...text
+----------------------------------------+...to
|........................................|...overlay
|........................................|...all
|..Expanding region (solid fill color)...|...three
|........................................|...regions
|........................................|...with
+----------------------------------------+...the
|........................................|...center
|..Fixed height footer image.............|...region
|........................................|...expanding
+----------------------------------------+


This is what I'm doing in my html:

Code:

<div class="contentArea">
     <div class="contentTop"></div>
     <div class="contentStretch"></div>
     <div class="contentBottom"></div>
     <div class="main-page-content">
         My Content Here
     </div> 
</div>

This is in my style sheet:

.contentArea{
border: none;
height:auto;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


.contentTop {
background: url('../images/contentTop.jpg') no-repeat left center;
border: none;
height: 276px;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}

.main-page-content{
border: none;
line-height: 100%;
padding: 0px;
width: 515px;
height: auto;
position:relative;
left:265px;
top:-610px;
}


.contentBottom {
background: url('../images/contentBottom.jpg') no-repeat left center;
border: none;
height: 317px;
line-height: 100%;
padding: 0px;
width: 785px;
vertical-align:bottom;
}

.contentStretch {
background: url('../images/StretchPic.jpg') repeat-y left center;
border: none;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave!

I've been at this for days and I'm at the point where I need help! Any suggestions?

Ron

FAQ what's having issues...

Hi!

I have an FAQ page that consists of a series of answer <ul>s nested under question <li>s. A little javascript shows the active answers alongside the question. The questions are supposed to align vertically with the answers and with a constant margin.

Using relatively positioned parent li's and absolutely positioned child uls is doing the trick for all but ie 6-7, which are not respecting the left:400px declaration in a predictable (to me, at least) way. The answers are floating right and left based upon the width of the question.

Any help would be greatly appreciated!

Thanks..

I have a menu that needs to be pixel perfect.
It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far.

It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning.

eg
li#main-nav-3 a:hover{ width:83px; background position:-227px 0;}
...
<li id="main-nav-3"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...

on rollover:

...
<li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...


I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't.

Anyone else faced a similar problem?

Link to the problem page:
http:sidouglas.net/cmx/tourism/
The rollovers are : Business a nd About NZ.