I found some free source code online for a nice menu bar that I like. It came with its own stylesheet which worked fine, but it jacked up a lot of the vertical alignment on my existing site. I want the menu bar and all tables centered on every page--simple. But because of this new stylesheet, everything is kinda centered, but not quite, and sometimes it's way off center.
I can fix any page, case by case, by playing around with margin-left in various elements, but this is tedious, and whenever I add a menu item, or put 2 tables side by side, etc, the horizontal alignment gets all jacked up again. I'm looking for a simple, universal way to center my menu bar and tables so that when menu items are added or removed, or tables get wider or placed side-by-side, all the centering stays correct.
First, a visual:
As mentioned, I can get everything to align perfectly only if I change styles on a page-by-page basis and tweak it differently on each page. I'm looking for a global solution.
The body tag has a width set:
<body style="width:720px;margin: 50px auto">
The menu source instructions said I have to set a width on body, which I've never done before on other web pages. If I don't do it, all the alignment goes way off. It seems ideal to not have to set a body width, I'm guessing that's causing problems.
The HTML for the menu bar looks like this:
<ul id="nav" style="margin-top:-95px">
<li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
<!--<li>RefSlot</li>-->
<li>Organization
<ul>
<li>Create New Member</li>
<li>Your Members</li>
<li>Sites</li>
<li>Archived Groups</li>
</ul>
</li>
<li>Create Group</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
CSS on top-level UL:
#nav {
margin: 0;
padding: 7px 6px 0;
background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
CSS on each LI:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
What can I do to force my content to center? Currently I'm having to tweak around with margin-left on BODY or TABLEs, etc, different on each page. Thanks in advance.
Working example: http://www.refslot.com/_stackdemo.html
Add following code to your css file:
body {
margin: 0 auto;
}
or change your body tag like this:
<body style="width: 720px; margin: 0 auto;">
Related
Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I've spent almost an hour trying to get my navigation menu to look nice.
I'm using Twitter Bootstraps's flat css menu.
For some reason, the first item of the menu has a taller height than every other item in the menu - as seen here:
How can I get the height of the first item the same as every other list item in the list?
I've tried:
Explicitly setting the height of the first list item. Nothing changes.
Removing padding from the menu. Nothing changes.
Removing margin from the menu. Nothing changes.
Here's a jsfiddle showing my problem in action. I know the code in the fiddle is a bit messy right now, but I'll work on this later on after I fix this problem.
Code from the fiddle:
HTML:
<img id="profile_circle" style="height:25px;width:25px;;border-radius: 16px;float:right;margin-top:10px;border:2px solid #DDD8CE;cursor:pointer;" src="https://secure.gravatar.com/avatar/3ab5cad18247b67090e61f59b47ef7c4?size=20" alt="">
<div style="width:160px;min-height:100px;background-color:white;z-index:3;position:relative;top:40px;left:240px;-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2),inset 0 0 0 #000;-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;" class="grey_box">
<ul class="dropdown-menu">
<li>My profile</li>
<li>My university</li>
<li>My dumps</li>
<li>My notes</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</div>
CSS:
.dropdown-toggle:focus{outline:0;}
.dropdown-menu{z-index:1000;display:block;padding:5px 0;list-style:none;font-size:14px;background-color:#ffffff;background-clip:padding-box;margin:0px !important;}
.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333333;white-space:nowrap;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#ffffff;background-color:#428bca;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#428bca;}
.grey_box {
background-color: #FFF;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 3px solid #DDD8CE;
}
The extra height of the first item comes from your image (profile_circle). This image has set the floating-style (float:right). The div with your menu inside "floats" besides this image, but the style .dropdown-menu>li>a says block-layout in addition with clear:both for the links in your menu, which places the whole menu "below" the image.
I have a <ul> which contains many lis and divs. The li's are autogenerated from inputs and labels, and the divs are floated right and serve as tooltips to explain each input.
The code is something as follows:
<ul>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
</ul>
This works fine in firefox and IE8, but in IE7, it assumes that each div is part of the previous <li>, and completely drops the </li> tags from the interpreted source code (found out from IEtester's View Source Code dev tool). Anyone know why this is happening and how to ammend it?
CSS:
.tooltip { float: right; width: 140px; font-size: 0.9em; padding: 9px 9px 9px 15px; margin-top: 15px; }
You can't have div inside the <ul> directly. They can go inside the <li> elements though. This may or may not help with the problem you're having but should be fixed to make sure it isn't the cause.
<ul>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
</ul>
I have an ordered list that I am trying to mark up the HTML can be seen below:
<ol class="main tags">
<li class="main">Gump...</li>
<li>We ar...</li>
<li>We a...</li>
</ol>
The CSS looks like this:
ol.tags {
list-style: decimal none outside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 16px 0px 0px 60px;
}
And the result looks like this:
http://gumpshen.com/images/temp/Gumpshen_OL.png
I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?
Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list
I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.
You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.
It looks like you will want to add your own counter to your list.
you can use the
background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li
One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.
Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.
Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.
Sorted it here is what I done:
First I added a span tag around the content:
<ol class="main tags">
<li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
<li><span>We are web design & development studio who are passionate about what we do.</span></li>
<li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>
The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:
ol.tags {
list-style: decimal none inside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 26px 0px 0px 20px;
}
ol.tags li span {
margin: -24px 0px 0px 50px;
display: block;
}