I have a navigation bar which works fine, but I want to add padding and a height to each link.
Whenever I do so, It make all the links except the first one taller than they are supposed to be. This does not work in Fiddle for some reason, so here is the code:
(CSS)
body {
overflow-x:hidden;
font:13px arial;
background-color:#171120;
margin:0;
}
nav {
height:100px;
width:100%;
padding:10px;
padding-top:30px;
background-image:url('nav_bg.png');
border-bottom: 3px solid #302342;
}
nav #header {
color:#FFFFFF;
font:bold 56px arial;
float:left;
}
nav ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
margin-top:20px;
margin-right:180px;
overflow:hidden;
}
nav ul li {
float:left;
}
nav ul li a:link,a:visited {
display:block;
width:180px;
##################################If you add height or border or padding, the links become taller!
background-color:#333333;
text-align:center;
font:bold 26px arial;
color:#ffffff;
text-decoration:none;
}
(HTML)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<title>Testing...</title>
</head>
<body>
<nav>
<div id="header">Testing...</div>
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</nav>
</body>
</html>
Why can't I add height, padding or border on the links without them suddenly becoming taller?
This is well know and annoying problem.
This can be solved using "box-sizing"
See this link for a tutorial
This explanation is very relevant:
"The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. We can now safely declare our textarea to be of 100% width, including pixel-based padding and border, and accomplish out layout perfectly."
Related
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
(No answers have worked as of yet, please keep answering)
http://gyazo.com/952d354b05e4a4a4cef08e74f8b0253d
http://gyazo.com/e8cc5ae0bcd0464eb074c4674d2896fb
As you can see from these images, I have created the navbar for my website but my website is too wide, it means that you have to scroll to reach the end of it, how would I change the width so it only goes up to the end of the navbar?
That is all my CSS for the navbar that I have used:
#title {
position:relative;
margin:17px 1680px 30px 15px;
}
#banner {
border:1px solid #4A4A4A;
width:1903;
height:110;
background-color:#4A4A4A;
margin-left:0px;
position:absolute;
top:-10px;
border-radius:15px;
}
#navbar {
position:fixed;
left:50%;
margin-top:2px;
}
ul {
list-style-type:none;
margin:-115px;
}
li {
display:inline;
padding:9px;
border:4px solid;
font-family:Bebas;
font-size:25px;
font-weight:bold;
color:#FFFFFF;
border-radius:10px;
background-color:#000000;
margin-left:2.5em;
}
This is my HTML code aswell:
<html>
<head>
<link type="text/css" rel="stylesheet" href="todd.css"/>
<title>Home</title>
</head>
<body bgcolor="#ABABAB">
<div>
<div id="banner">
<img src="file:///C:/Users/Todd/Desktop/Todd.png" id="title">
<div id="navbar">
<ul>
<li>Home</li>
<li>Not Finished</li>
<li>Not Finished</li>
<li>Not Finished</li>
<ul>
</div>
</img>
</div>
</div>
</body>
</html>
A couple things I see here...
Your navbar has this line:
width:1903;
If you don't want the navbar to be so wide, you should shrink this way down.
Additionally, if you want to keep the site from expanding so wide, you can also set the width for the html and body tags, like so:
html, body {width: 1024px}
Hopefully that helps...
EDIT
At second glance, I see your margin is also set very wide here:
margin:17px 1680px 30px 15px;
Shrinking the 1680 down will keep the bar from expanding so wide. This appears to be the main cause of your title bar extending out so wide.
If you use min-width the size of the page should minimise in order to fit all the content in.
#banner {
min-width: 1903px;
}
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)
I'm working on a site for a client of mine, the issue I am having is that whenever you resize the window the buttons on the navigation bar all squish together. The cause of the issue isn't apparent to me so I came here to ask for some help. Also the navi bar looks fine for me when the browser window is maximized, but for my client she sees the twitter button in the middle of the page. I think it's just a resolution issue as her screen is smaller than mine but is there a way to resolve this?
website:
the crue cart
HTML
<title>the crue cart</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><div id="logo">
<h1 class="thecruecart">the crue cart
<img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
<h1 class="wholesnackerie">whole snackerie<h1>
</div></li>
<!--Who What When Where Why Help!-->
<li class="navigation">Who<span class="green">?</span></li>
<li class="navigation">What<span class="green">?</span></li>
<li class="navigation">When & Where<span class="green">?</span></li>
<li class="navigation">Why<span class="green">?</span></li>
<li class="navigation">Help<span class="green">!</span></li>
<li class="navigation">ORDER<span class="green">!</span></li>
<li class="navigation"><div id="share">
<iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div></li>
</ul>
</div>
<div id="navbar"></div>
<div id="title">
<h2 class="title">Catering? Hungry?</h2>
</div>
<div id="body">
<p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
<br/>
<p>Want to chat? <span class="chunky">Email us: hello#thecruecart.com</span></p>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<p class="ft">© the crue cart 2010. All Rights Reserved.</p>
</div>
</body>
CSS
#font-face {
font-family: chunkfive;
src: url("fonts/Chunkfive.otf") format("opentype");
}
#font-face {
font-family: aller;
src: url("fonts/aller.ttf") format("truetype");
}
#font-face {
font-family: tgheros;
src: url("fonts/tgheros.otf") format("opentype");
}
#font-face {
font-family: tgheros-bold;
src: url("fonts/tgheros-bold.otf") format("opentype");
}
html {}
body {
width:auto;
height:100%;
background-color:#ffffff;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
h1, h2, h3, h4, h5, h6 {
font-family:chunkfive;
color:#0000ff;
margin:0px;
}
h1 {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin:0px;
padding:0px;
}
h1.thecruecart {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin-left:auto;
}
h1.wholesnackerie {
font-family:chunkfive;
color:#44aa00;
font-size:15px;
margin-left:40px;
}
h2.title {
font-size:35px;
margin-top:10px;
margin-left:10px;
}
h2 a{
font-size:35px;
color:#44aa00;
margin-top:10px;
margin-left:10px;
}
img {
margin:0px;
}
img.leaf {
position:relative;
top:2px;
left:-8px;
}
p {
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.order{
font-family:tgheros-bold;
font-size:16px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.facebook {
display:inline;
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:5px;
}
p.ft {
color:#0000ff;
font-family:chunkfive;
font-size:14px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
a {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
text-decoration:none;
margin:0px;
padding:0px;
}
a:link, a:visited, a:hover, a:active {
}
a.navigation {
color:#0000ff;
font-family:chunkfive;
font-size:20px;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0px;
padding:0px;
}
li {
float:left;
}
li.navigation{
display:inline;
position:relative;
top:33px;
float:left;
margin-left:45px;
}
iframe {
display:inline;
margin-top:0px;
margin-left:10px;
}
/*Facebook Stuffs*/
/*Twitter Stuffs*/
.chunky {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
.green {
color:#44aa00;
}
.clearfooter {
height:1px;
clear:both;
}
#container {
min-height:100%;
margin-bottom: -20px;
position: relative;
}
#header {
display:block;
width:auto;
height:58px;
padding-right:5px;
padding-left:5px;
}
#logo {
margin-top:0px;
margin-left:10px;
}
#navbar {
display:block;
width:auto;
height:2px;
background-color:#0000ff;
}
#share {
display:inline;
margin:0px;
}
#body {
width:1330px;
margin:0px;
margin-bottom:30px;
padding:0px;
}
#footer {
display:block;
width:auto;
height:10px;
position:realtive;
text-align:center;
clear:both;
}</code>
Problem is, is that you don't have a fixed width container you have width:100%, the site is liquid.
You need to set a width on a container and it will play nice!
You have set the body width to 1330px. If you are really making a site for a client, you might be better of going with the "standard" maximum width of 960px. That way the site will work properly on most screen sizes.
Some reading that sides the magic number: http://cameronmoll.com/archives/2009/04/is_it_time_to_move_beyond_960/
ps. You should not set the width to the body element itself, some older browsers are quite quirky with it, I think at least IE6 does not understand it, but cannot check now since I'm don't have it close to hand.
I don't think you have posted all the CSS styles in your question. Nevertheless, you have to fix the width of the navigation bar element in css. You could use a fixed width for your header div, but I'd use another div or ul for the navigation items and use fixed width on those, so that the rest of the items in the header can still float around.
You don't have a doctype and are in quirks mode. Add this to your first line and see where we stand: <!doctype html>
There are quite a few ways of styling your navigation, and I made a variation on your layout to illustrate how you might approach it.
Please see my variation at: http://jsfiddle.net/audetwebdesign/YzrUn/ and my following comments and explanation.
CSS Styling
You can take advantage of CSS selectors and get rid of unnecessary classes, thus simplifying your style sheet.
Keep the logo as a separate div in the header and use the ul list to mark-up your navigation links.
You can either typeset your logo or use an image. Fixing the with of the logo div helps a bit, the height can be set to auto or fixed if you are using an image.
Let's float the logo div to the left and see how this all works out.
Add the blue border to the header to serve as a visual separator.
The Flexible Navigation Bar
Set the margin of the 'ul' list so that it clears the logo div. Since the logo is floated
left, the left margin is needed otherwise the links will overlay the logo.
We float the li elements to the left, add some margins, and then display the a navigation links as block's, add some padding.
Note how I used the b to add the green punctuation, simpler than span+class.
Finally, add a class to the last li element so that you have a hook to style the iframe and other bits related to the social media sites.
How This Works
In my demo, you can vary the width of the output window.
As you make the window narrower, the links (include the social media bits) will wrap around to the right of the logo and the header panel will expand vertically, thus allowing all the links to be accessible on smaller screens or to people who prefer to use a narrow browser window.
This way you don't have to fix the width of the page unless you have other reasons to do so.
You can adjust padding on various elements to get the vertical alignment that you need. I think that there are enough adjustable elements here to take care of any eventualities in your design.
Finally, for best results, use a strict doctype, otherwise, quirks mode in IE may cause issues.