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
Related
I found this menu sample on W3Schools. I'm trying to create a menu bar on my MVC layout page. My was looking very sloppy and I liked how this one looks. I pasted it into my website and it works as shown, but I don't understand how it is being styled. I don't see any height or vertical alignment settings. Is it the padding style that does it? Are ul and li tags commonly used for this kind of menu? I would have used something like a span tag to do this and not ul or li tags.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
</html>
The height is being set by the default CSS styling in addition to some padding applied to the links. The default CSS height for the ul element is auto, meaning that it will fill space (i.e. be as tall) as its children.
What this means is that it is taking the font-size / line-height of the links and adding padding, which is 14px on both top and bottom. That height becomes the height of the entire list / navigation bar.
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
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/
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.