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">
Related
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;
}
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
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.
I keep having this trouble whenever I code.
I set the height to 100%. I want the div to reach the bottom of the page no matter how much information is in it with the exception of a 300px margin at the bottom.
Currently I have not set the margin at the bottom yet.
As you can see, it does not reach the bottom of the page and I want it too. I realize your computer it may, since my screen is fairly big.
The DIV is called "wrapper".
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper"></div>
</body>
</html>
CSS
body{
background:#fffffc;
margin: auto auto;
}
#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}
#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}
#headerlinks li{
display:inline;
padding-left:25px;
}
#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}
.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-46px;
position:relative;
clear: right;
}
#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}
#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#wrapper{
position:relative;
top:-62px;
margin-left: auto;
margin-right: auto;
width:90%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
Here's the solution I always use.
http://www.cssstickyfooter.com/
You set:
html, body {height: 100%;}
Add your 300px bottom padding to main wrapper and then negative margin -300px to footer to overlay it above that padding.
Use a huge wrapper for everything except the footer:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
Check out that link for more.
Cheers!
Using height 100% will take up 100% height of the container - so you'd need to set body and html to 100% height too.
I think that you wanna stick the #wrapper at bottom of the page (except some space from bottom)
I've changed your code in the fiddle: http://jsfiddle.net/FgGn5/
#wrapper{
position:absolute;
bottom:20px;
margin: 0 5%;
width:90%;
height:20px;
background:red;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
It needs an absolute position to stick to the bottom. Because of the absolute position, we are forced to specify margin-right and margin-left. Fortunately because of the percent base width, it's simple.
Hope it helps.
In my experience, you'll have the best success across the various common browsers by employing a JavaScript solution. I would strongly suggest using jQuery to make your life a little easier. Then you could essentially set the #wrapper DIV equal to the body height minus the #header and #quicklinks. It would look something like this:
var windowHeight = $(window).height();
var headerHeight = $('#header').outerHeight(false);
var linksHeight = $('#quicklinks').outerHeight(false);
var wrapperHeight = windowHeight - (headerHeight + linksHeight);
$('#wrapper').css('min-height', wrapperHeight);
Note: I'm making using of min-height, because the contents of the #wrapper DIV may actually already push it to the bottom of the screen.
See this fiddle for a quick and dirty example: http://jsfiddle.net/HLJJc/
I'm creating a navigation menu using HTML and CSS for a library OPAC. There seems to be unwanted top padding in each li item which results in a persistent gap between items in the menu. This is visible both in the latest firefox and in IE 9.
My HTML is:
<div class="menu_div">
<ul>
<li id="mainnav">Find Information</li>
<li>Catalogue</li>
<li>Databases</li>
<li>Guides</li?
</ul>
</div>
My CSS reads:
.menu_div ul
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
list-style:none;
text-indent:10px;
color:#000000;
}
.menu_div ul li
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
list-style:none;
background:#CCC;
line-height:20px;
border-bottom:1px solid #333;
color:#000000;
}
.menu_div ul li a
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
text-decoration:none;
color:#FFF;
display:block;
color:#000000;
}
.menu_div ul li a:hover
{
background: #293895;
color:#FFFFFF;
}
.menu_div ul li#mainnav
{
background:#293895;
font-weight:bold;
color:#FFFFFF;
}
The screenshot shows the 'gap' I am talking about, in between the two items (cursor hovering over the 2nd item):
http://postimage.org/image/5dxn7j56z/
Any help would be greatly appreciated.
This is most likely caused by a line height being set, this is generally inherited from something in the code that surrounds your list. Try appending line-height: 1em; to the CSS of each element in order to remove that extra spacing.
Edit: If you view the JSfiddle located here: http://jsfiddle.net/pCAfk/ there is no spacing since there has been no inherited line-height.