Im new to webdesign so I started a very simple project. I tried to make a navbar with 4 buttons spread evenly. However, when i set the width to 25% fot the li, the last element of the bar doesnt fit on the page but instead goes under the other ones. I want them all to spread evenly.
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/style.css">
<title>Untitled Document</title>
</head>
<!-- Nav Bar -->
<div id="#nav">
<ul>
<li><a class="red" href="#nav">Home</a>
<li><a class="orange" href="#OverOns">Over ons</a>
<li><a class="yellow" href="#Nieuws">Nieuws</a>
<li><a class="green" href="#Contact">Contact</a>
</ul>
</div>
<!-- End Nav Bar -->
<!-- Slider -->
<div class="slider">
</div>
<!-- End Slider -->
<body>
</body>
</html>
#charset "utf-8";
/* CSS Document */
/* Fix padding and marg options in different browsers */
* {
margin:0;
padding:0;
}
.red {
background-color:#F00;
}
.orange {
background-color:#F90;
}
.yellow {
background-color:#FF0;
}
.green {
background-color:#0F0;
}
.slider {
}
ul {
position:fixed;
top:0px;
margin:0;
width:100%;
list-style-type:none;
border:0;
padding:0;
overflow:hidden;
background-color:#FF;
}
li {
float: left;
width:25%;
border-right:1px solid #000;
}
li:last-child {
border-right:none;
}
li a {
display: block;
padding: 18%;
color:#FFF;
text-align:center;
text-decoration:none;
}
li a:hover {
opacity:0.5;
}
This is usually because when elements are displayed as inline-block, space between the elements is rendered as text. To fix this, set the font-size on the parent to 0, then reset the font-size on the child. The default font-size on most browsers is 16px.
Also, borders will normally add to the width of an element, instead of being included in it. You have a 1px wide border on these elements, so it is 25% + 2px (one for either side) wide. Use box-sizing: border-box to include the width of the border in the sizing of the element.
Here is a simple example.
dl {
font-size: 0;
}
dd {
font-size: 16px;
display: inline-block;
margin: 0;
width: 25%;
text-align: center;
}
a {
display: inline-block;
padding: 7.5px 20px;
border: 1px solid #f9fd42;
border-radius: 5px;
color: #000;
text-decoration: none;
}
<dl>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
</dl>
Usually this happens when you have some sort of padding/margin/border between elements. Easiest way to solve this is to reduce your width from 25%. Make sure the combined width is under 100%. Right now that's why your elements are going below.
What you are trying to achieve would make the elements with absolutely no space between them. Use something around 96% total. That's 24% for each li.
Alternate solution:
Set this property --> box-sizing: border-box;
and then set your width to 25%. That should solve it. What you're essentially trying to do is to make the width of the element + padding + border + margin = 25%
Do that by using a width class and refrain from using inbuilt styling.
Welcome to web programming
You've a 1px border in the li, so this border take the space of other elements, in other words, the size of li is 25% plus 1 px of the border.
Verify your CSS.
This is your code.
li {
float: left;
width:25%;
border-right:1px solid #000;
}
Try this.
li {
float: left;
width:25%;
border-right:0;
}
That's because you have a border-right, meaning each li block has a total width of 25%+1px and the last one can't fit.
Since you probably want to keep that border and having the four buttons covering all the space you can do something like this:
li {
float: left;
width: calc(25% - 1px);
border-right:1px solid #000;
}
that way you remove that 1px that's causing the problem. Unfortunately calc() isn't supported by some of the older browsers: calc() caniuse.com
Hope this can help you out ;D
Related
You can go to my test page here: https://socialstamp.me.uk/new/testpage.php
The buttons to your left (under balance), only the top half of them can be clicked, bottom half doesn't work/click. I've checked the CSS styling file and can't find anything, I've tried many solutions but nothing works.
Button code:
<ul>
<li id="l2"></li>
<li id="l3"></li>
<li id="l4"></li>
<li id="l5"></li>
<li id="l6"></li>
<li id="l7"></li>
<li id="l8"></li>
</ul>
CSS:
#dashContainer .col-md-2 li {
display:block;
height: 40px;
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#l2 {
background-image: url('../img/menu/btn3.jpg');
}
#l2:hover {
background-image: url('../img/menu/btn3h.jpg');
}
#l2:active {
background-image: url('../img/menu/btn3h.jpg');
}
And so on for several buttons...
The issue is <li> tags have 41px height but <a> tags doesn't have any height except font-size. By default <a> tags displayed inline so your clickable area just taking up space as <a> tags font size. There are too many ways to fix it.
First option : ( original answer )
By giving height and width to <a> tags as container:
#dashContainer .col-md-2 li a {
display:block;
height:100%;
width:100%;
}
Second option :
By adjusting <a> padding. No need give height to li tags if it is not important for UI.
#dashContainer .col-md-2 li {
display:block;
/* height: 40px; */
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#dashContainer .col-md-2 li a {
padding:20px 0px;
}
Third option :
By giving height to <a> tags.
#dashContainer .col-md-2 li {
display:block;
/* height: 40px; */
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}
#dashContainer .col-md-2 li a {
display:block;
height:40px;
line-height:40px; // for text vertical align
width:100%;
}
I'm surprised the buttons work at all. While you define the size of the <li>, there is nothing defining the <a> and so in theory it should be of size 0, and therefore unclickable.
Make sure to apply your widths and heights to the link itself!
this issue can be resolved if you will add a css height 41px in links.
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/
below is the sample of my websites navigation div
when i reduce the size of the window the other links gets on next line instead of being fixed to therir postion.here is the cose and css.
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id=navigation>
<ul id="navigation-bar">
<li>Home</li>
<li>Gallery</li>
<li>Images</li>
<li>Softwares</li>
<li>Contact</li>
<br><br>
</ul>
</div>
</body>
</html>
and here is the css
div#navigation {
width:100%;
background-color:#000;
border-top:2px solid #5d6869;
border-bottom:2px solid #5d6869;
}
#navigation-bar {
list-style: none;
margin: 0px;
}
#navigation-bar li {
display: inline;
float: left;
}
#navigation-bar li a {
padding: 0em 1em 0.08em 1em;
text-decoration: none;
color:#fff;
font-size:1.8em;
}
#navigation-bar li a:hover {
text-decoration: none;
color:#fff;
background:#5d6869;
}
can anyone help me whats the reason?
It's because your li elements are floated left. Floated elements, when the parent's width is not wide enough to fit, automatically move to the next line. It's their built in behavior
If you want them to stay on the same line and be hidden when the parent is not wide enough, you can give them display:inline-block and give the parent a set height, say height:35px;, and also give the parent overflow:hidden;
Demo Here of that approach
EDIT based on your comment below
In that case, give the parent a min-width. Demo here
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets\sets1.css">
</head>
<style type="text/css">
body /* site bg color */
{
margin: 0;
background-color:#b0c4de
}
#navbar ul {
margin: 0;
padding: 5px;
cellspacing: 0;
cellpadding: 0;
border: 0;
list-style-type: none;
background-color: #8B008B;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: #8B008B;
}
#navbar ul li a:hover {
color: #0EC6D7;
background-color: #8B008B;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="images/logo.png" alt="Site Logo" height="50" width="68"></img></li>
<li>Forum's</li>
<li>Chat's</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
</body>
</html>
added margin: 0; to body tag and it works like fb header covering whole top of page no white space or ignorant breaking or any thing like that also its cross browser so thanks alot .thank all you users who have helped me with this
Set the margin to 0px in the body
body{
margin:0px;
background-color:#b0c4de
}
This will remove any white spaces around the body
If you want the navigation bar to span the top of the entire page try setting the width to 100%
#navbar{
position:relative;
width:100px;
height:auto;
background-color: #8B008B;
}
This will make a Magenta bar across the top of the page. Not sure about what height you want so I get it to auto so it will re-size depending on the content. You can then place your logo image inside this div.
If you mean a "sticky" header then use position:fixed
#navbar{
position:fixed;
top:0;
left:0;
}
You may need to define width, z-index, or anything else specific to your design, but this is the basic idea.
If you didn't mean sticky, then maybe william got the answer right.
You need to put margin: 0; in the body tag. I recommend to use a reset style that you can find in google to reset all spaces that browsers put.