I have looked around for many solutions and I am currently redoing the code of a website I own as I had all of my CSS individually laid out on each HTML page. Eventually I had too many pages to handle, and I decided to make a stylesheet to clean it all up but my EVERYTHING was a mess. Indentation, comments, etc...
Currently, I am working on my Navigation Bar on the Website, but for some reason which I can't figure out (I've tried many things) the bar is positioned exactly in the middle which leaves a small amount of white space at the top, left and right of the bar. Here is the HTML:
ul { /* unordered list properties */
list-style-type: none; /*takes out bullet points */
margin: 0; /* scaling */
padding: 0; /* scaling */
overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
float: left; /* move item to the left */
font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
display: block; /* display style */
color: #ffffff; /* text colour */
text-align: center; /* centres the text */
padding: 19px; /* vertical padding */
text-decoration: none; /* remove any text effects */
font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
background-color: #639ddf; /* set the background colour */
font-size: 20px; /*set the font size to 20 pixels */
}
<nav> <!-- begin navigation element -->
<div id="menu"> <!-- create and start new element with the id: menu -->
<ul> <!-- begin unordered list -->
<li>Home</li><!-- list items -->
<li>Competitions</li>
<li>Builds</li>
<li>Images</li>
<li>Videos</li>
<li>Fight Club</li>
<li>Articles</li>
<li>Forums</li>
<li>Tools</li>
<li>News</li>
<li>Shop</li>
<li>Allies</li>
<li>More</li>
</ul> <!-- end the unordered list -->
</div> <!-- end the 'menu' element -->
</nav> <!-- end navigation element -->
Thanks all in advance, I hope I have provided enough info and please don't be too harsh with my over-commenting or anything just keep those opinions to yourself. As for my question structure and code, please correct me on anything I've done wrong and point out how I can fix. Thank you very much for taking your time to read this,
Is this what you're looking for?
Link to JSFiddle
If so, in your CSS. Add this
body {
margin: 0px;
}
None of the solutions I've were working for me, but I found one that did. In my CSS:
.navbar{
margin-left: -15px;
margin-right: -15px;
}
It seemed like mine had about 15 pixels of margin on just that I couldn't get away by setting the margin to 0.
It looks like the browser default css style is adding margin: 8px; to the body. To remove it add this to your css:
body {
margin: 0;
}
Setting margin on your nav to 0px and setting body padding to 0px; should works.
I tried left:0; It worked like a charm!
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.
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I'm working on a website, and it works perfectly in Chrome/Firefox, but I'm experiencing two issues in IE8 and 9.
In IE9, the navigation menu in the header doesn't display.
In IE8, the entire header is screwed up. The title, subtitle, and navigation menu all appear above the main header image instead of on top of it. (Click here to see what it looks like).
I'm sure these are really simple fixes, I just couldn't find them. Thanks in advance.
Edit for code. HTML:
<div class="heightWrapper">
<h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
<h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
<img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
<nav class="topNavigationMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Media</li>
<li>Newsletter</li>
<li>Partnership</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
.heightWrapper {
height: 100%; /* To position the navbar at the bottom of the div */
margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
float: left;
position: relative;
bottom: 3.9em;
margin-bottom: -3.9em;
z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
float: left;
}
.topNavigationMenu li a {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2em;
font-weight: bold;
text-decoration: none;
color: #004080;
float: left;
padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
background-color: #004080;
color: #fff;
}
Fix for navigation menu in IE9
Apply position:relative to your heightWrapper and
Apply position:absolute to .topNavigationMenu (You already have bottom: 0 set). You should also remove the float:left from .topNavigationMenu.
As for the IE8 issues, neither header nor nav are HTML 4 elements, and IE 8 doesn't support HTML 5. Try including modernizer (http://modernizr.com/) in the head section of the page, or another HTML5 shiv. That should allow you to style them in IE7/8.
IE8
The reason is your layout. In your layout, there are 3 things:
h1
h2
menu
Now for the h's, you have used fonts not present in browers, or computers using #font-face. Internet Explorer doesn't support many CSS3 commands such as #font-face, causing your menu to be on the top.
The Solution:
Make the whole header a image and then put the menu.
IE9
I don't know but most probably the same. And don't forget about checking errors.
My text menu items are not vertically aligning correctly in IE6 in my horizontal menu.
Example - http://blacktownworkersgroup.worldsecuresystems.com/bwc09/home
They seem to be ok in Firefox 3 and IE7.
I've made the background red for each item to make it more obvious.
Any ideas?
chage this class
#nav_468891 li { /* all list */
list-style: none;
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
you can delete "vertical-align: middle;"
For some reason this class outputs ok in IE but in Firefox the words and the lines ( | ) are not centered:
.horz_list li {
display: inline;
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
This is the page for the output:
<div id="top_nav">
<ul class="horz_list">
<li>Nuevas</li>
<li>Comentarios</li>
<li class="last">Enviar</li>
</ul> <!-- ul.horz_list -->
</div> <!-- top_nav -->
If anyone know why is this, thanks.
Try changing the li's properties
.horz_list li{
display: block; /* block level */
float: left; /* float them inline to the left */
overflow: hidden; /* this will force the div to stretch to it's contained element */
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
... or if you want what Ben described, the whole block centred, use
.horz_list {
margin: 0 auto;
}
Ensure it's containing block has a width, even if it's 100%.
If you're trying to get your list items to be horizontally centered, this is accomplished differently in IE vs. other browsers. Try setting margin-left:auto;margin-right;auto on your <ul>:
.horz_list {
margin-left: auto;
margin-right: auto;
}
Probably the reason for the extra spacing in Firefox is that if you set the LI as display:inline, the newline in your HTML code creates an extra space (just like if you type "lorem(newline)ipsum" the words may appear side to side in the page with a space between them).
Try, for example, to stick the <LI> tags together like this <li>....</li><li>.... and I think this will remove the unwanted spaces.
If you don't like to put it all into a single line, alex's suggestion works, but you may have to add a <div style="clear:both"></div> after the closing UL, because of floated elements.