I'm a bit frustrated. I made a menu inline and blocked and centered it, but it's still a little to the right. I could adjust it with margin, but I think there's a better way to do it. Thank you for your help, I really appreciate it.
Here's the HTML:
<body>
<div id="home">
<div id="header">
<h1>Josh Lamstein</h1>
</div>
<div id="book">
<div id="topbar">
<ul id="menu">
<li>About</li>
|
<li>Stories</li>
|
<li>Blog</li>
|
<li>Resume</li>
</ul>
</div>
And here's the CSS:
#home{
width:900px;
height:480px;
margin:0 auto;
}
#book{
width:100%;
height:50%;
margin:0 auto;
background-color:;
text-align:center;
}
#topbar{
width:100%;
height:20%;
background-color:blue;
display:inline-block;
list-style:none;
list-style-type:none;
text-align:center;
margin:auto;
}
#menu{
list-style-type:none;
background-color:;
display:block;
display:inline;
font-family:"helvetica neue", helvetica, sans-sarif;
font-variant:small-caps;
font-size:1em;
letter-spacing:.5em;
margin:auto;
}
#menu li {
display:inline;
}
That's because browsers apply a default padding-left property to HTML list elements such as <ul> (Google Chrome set -webkit-padding-start: 40px;).
You could reset the padding property by:
#menu {
/* other CSS declaration here ... */
padding: 0; /* <-- Reset the default padding of user agent stylesheet */
}
Here is the JSBin Demo.
Related
I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,
Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?
JSBin code of my html and css code
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
How come position:absolute makes my h2 disappear?
To avoid the default margins in general, you can add margin: 0; to html and body.
To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.
In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.
html, body {
margin: 0;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right: 30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
Add padding-top: 50px (the menu height) to body.
body {
padding-top: 50px;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Miko</title>
<link href="#" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<h2>About The Page</h2>
<p>To Be Added</p>
<footer>
<p>Web Design</p>
</footer>
</body>
</html>
JSBin
Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.
you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here
use position absolute and fixed when you want to stick element to specific position.
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding:0;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
}
li {
display:inline;
}
footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}
if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.
I need a horizontal navigation bar with the words "HOME", "DRAWINGS", "STORE", and "CONTACT" evenly spread across the page. Right now my CSS looks like this:
<style type="text/css">
<!--
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
-->
</style>
My HTML looks like this:
<body>
<div>
<ul>
<li>HOME</li>
<li>DRAWINGS</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
</body>
And here is what the web page looks like: http://i.imgur.com/st4m0RR.jpg
Obviously I would also like to get rid of the underline and I need the text to be in black. Not sure what I'm doing wrong. Thanks in advance for any help.
You could set the li elements to float:left..
Like
ul{
width:100%;
margin:0;
height:35px;
font-size:16px;
color:black;
font-family: Arial;
font-weight:bold;
text-align:center;
display:inline;
padding:0;
list-style-type:none;
}
ul li {
float:left;
margin-right:15px;
}
ul li:last-of-type {
margin-right:0px;
}
}
you have to put this in the:
a{
float:left;
color:#000;
text-decoration:none;
padding;5px;
}
edited:
to put it to the center you have to give the container a width, 315px for example here, but put it in % or em better....and add a padding to a
div {
width:315px;
margin: 0 auto;
}
http://jsfiddle.net/Fy5v8/
I haven't been able to solve this issue, or seen it before—it's subtle, but I of course want it to be perfect. I don't see any reason why it should be displaying strangely.
The bottom of the image and the navigation should be aligned, but are not. Here is the incorrect version in firefox:
http://jamimiles.com/firefox.png
Or visit it on your own browsers. Thanks so much for your help!
#header {
font-family: georgia, serif;
width:800px;
height:65px;
font-size:20px; font-size:2rem;
color:#3a3b59;
text-transform: uppercase;
text-align:left;
padding:0 0 30px 0;
margin-top:0;
border-bottom: none;
float:left;
position:relative;
}
#header ul li {
list-style-type:none;
line-height:20px; line-height:2rem;
float:right;
}
#header li {
padding-left:20px;
}
#header ul {
margin-top:52px;
padding:0;
float:right;
margin-bottom:0;
}
#header img {
padding:0;
border:none;
float:left;
}
That's the CSS. Here is the header band.
<div id="header">
<img src="images/namebanner3.png">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>resumé</li>
</ul>
</div>
Try tweaking the img px. You are currently set at 851px by 141px
<img height="#" width="#" style="-webkit-user-select: none"
src="http://jamimiles.com/firefox.png">
I was attempting to vertical align some text in a li element, but the only way I could do it was applying display:table-cell; and vertical-align:middle; to the li element.
When I do this, it causes the entire navbar to lose its horizontal center. I have done very much Googling and have not found a solution.
HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x200/000/fff.jpg"></div>
<div class="h_nav">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Web Hosting</li>
<li>Web Design</li>
<li>Consulting</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
/** All code is written in chronological form as with the HTML code.
* h. = header.element
* b. = body.element
* sl./sr. = sidebarleft or right.element
**/
.h_logo{
background-repeat:no-repeat;
width:800px;
height:200px;
margin:auto;
position:static;
}
.h_nav{
position:inherit;
margin-top:10px;
}
.h_nav li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:150px;
height:35px;
background-color:black;
}
.h_nav a{
text-decoration:none;
color:#FFFFFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
JSFiddle
You could add this to your CSS:
nav ul {
display: table;
margin: 0 auto;
padding: 0;
}
So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:
jsfiddle
CODE:
<!DOCTYPE html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
padding:0 6%;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
To fix the horizontal pushing:
Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
width: 15%;
text-align: center;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
line-height:14pt;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
<!DOCTYPE html>
<html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
</html>
Add a max-height: 30px; to #navigation.
In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.