CSS - Links In Navbar Lower Than Others

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Hi all,

I recently started making a site is css and I had no problems until I came to making the navigation bar. Now I want to have like a button effect on the text so I made this:

Code:

a.navbar:link {
	display:block;
	position:absolute;
	height:25px;
	width:150px;
	background-color:#FFCC99;
	top:40px;
	left:0px;
	z-index:1;
}

The only problem is that if I apply this to all my navbar links they overlap each other because the positioning is always the same.

Any help much appreciated!

Jack.

Firstly I'm a new member here so hi to everyone.

I am fairly new to css. I am trying to create a navbar menu with css, I have used ul and li for the links and its positioned on the left hand side of the page, just where i want it, but my problem is I cant seem to get my text paragraphs to lie at the side of the navbar, they either are above it or below it, obviously im doing something wrong but not sure what.



Many Thanks.

I found a horizontal Dropdown menu I really want to emulate he Austin360.com

What I like about it is that the widths of the top level list items adjust to the widths of their text -- rather than all being the same width. Also the top level list appears to "stretch" horizontally, filling up the entire width of the container. (Although I can't see any widths anywhere in the stylesheet!) How'd they do that?

Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS.

Here's my CSS for the navbar formatting:
Code:

#navbar ul { 
		margin: 10px auto auto auto; 
		padding: 6px; 
		list-style-type: none; 
		text-align: left; 
		background-color: #000;
		font-family: arial;
        } 

#navbar ul li {  
		display: inline; 
		font-family: arial;
        } 

#navbar ul li a { 
		text-decoration: none; 
		padding: .2em 1em; 
		color: #ffffff; 
		background-color: #000000; 
		font-family: arial;
        } 

#navbar ul li a:hover { 
		color: #000000; 
		background-color: #ffffff; 
		font-family: arial;
        } 

And here's the code I have in the body of my HTML that adds each of the items to the navbar:
Code:

<div id="navbar"> 
	<ul> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="irc.html">IRC</a></li>
		<li><a href="about.html">About</a></li>		
		<li><a href="contact.html">Contact</a></li> 
	</ul> 
</div>

Anyone have any ideas on how I would do this?

Thanks.

www. cooperworkskilns.com

The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it.

This isn't working in IE. Lol, its created a rather interesting stairstep effect.

Is there a way to make it span evenly across the page without adjusting the width of each <li>?


Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line.

#navbar ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navbar li { margin: 0 0 0 0; }

#navbar a
{
float:left;
display: block;
text-align:center;
color: #000;
background-color: #FFF;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

#navbar a:hover
{
background-color: #003366;
color: #FFF;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif.

what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css.

should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated.

I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example:

www . cooperworkskilns . com

The Home button should be at the bottom left of the header.

Here's the pertinent css:

#header{
margin:0px 0px 10px 0px;
padding:0px;
width: 700px;
height: 125px;
border-bottom: 1px solid #666;
background-image:url(../img/header.gif);
}

#navbar{
margin:0px 0px 0px 0px;
padding:0px;
width: 700px;
}

Hello,

This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway...

I finally got my buttons to work! It's time for the Smirnoff!

But my button are still giving me ...!

Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking...

Everything checks out with W3C except my buttons. Here's the html:
Code:

<div>
<span id="navcontainer1" class="button1">
<ul>
<li>
<a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span>

<span id="navcontainer2" class="button2">
<ul>
<li>
<a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer3" class="button3">
<ul>
<li>
<a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer4" class="button4">
<ul>
<li>
<a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer5" class="button5">
<ul>
<li>
<a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li>
</ul>
</span></div>

Don't laugh...they work! Here's the stylesheet:
Code:

.button1 {
position: relative;
bottom: 100px;
right: 40px;
}

#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}

#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}

.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}

#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}

.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}

#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}

.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}

#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}

.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one. 
left: 520px;
}

#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}

#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}

W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!)

I was just thinking if they could somehow "validate" then maybe they would be more predictable.

Any suggestions?
Thanks

..

Greetings,
I am attempting to increase the space between the navigation links listed on the left column of this index page.
fop27.org/fopnet/FPT/
I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page.
I have minimal knowledge of css and would greatfully appreciate any assistance.
All the Best!

Thanks to the forum I've worked out a prior issue but 2 remain in regards to the secondary navigation bar.

1. Width - If I use a value of 25% for the pages with 4 sub-links (i.e. "The Music" main) it spans the full width of the right column but in IE6 it pushes the box below it down abot 10px. In OP7, NS6, NS7 & Mozilla1.7 it displays properly.

2. a:hover - I can't seem to figure how to make the hover effect respond to mousing over all parts of the box. It only activates when hovering over the text portion. Works properly in the main-nav but not for the sub-nav (note - this is also ONLY IE related). Really not important unless it is an easy fix.


I have tested this site in IE6, NS6.2, NS7.1, OP7.5, Moz1.7. I know v4 browsers are a lost cause but if you could confirm success/failure in others I would appreciate it.

Regards,
Golem2

I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav.

Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16

If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16

In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from
a list apart.

Here are the things I'm struggling with:

1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left.

2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area.

The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css

The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list)

Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless.

Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute.

Thanks!