I'm creating my first responsive website. I have a navbar inside a container that is centered horizontally.
Everything has a size with a percentage (is there a term for this?). The navbar scales down when I resize the window correctly. But my last list item (navbar item) will move down.
I have tried a lot with the min-width stuff, and I know it has something to do with this. But all solutions on the internet say I should give the navbar (or the ul?) a fixed width (xxxx px). This I don't want because I want it to fully scale.
HTML:
<body>
<div id="container">
<nav>
<ul>
<li><span class="navbaritem">Test1</span></li>
<li><span class="navbaritem">Test2</span></li>
<li><span class="navbaritem">Test3</span></li>
<li><span class="navbaritem">Test4</span></li>
<li><span class="navbaritem">Test5</span></li>
</ul>
</nav>
</div>
</body>
CSS:
#charset "utf-8";
/* CSS Document */
html
{
width:100%;
height:100%;
}
body
{
background-image:url(images/background.png);
background-repeat:repeat;
min-height:100%;
margin:0px;
overflow: auto;
}
#container
{
height:100%;
width:73.20%;
background-color:#00CC00;
margin: auto;
left:0; right:0;
top:0; bottom:0;
position:absolute;
}
#navbar
{
min-width:100%;
min-height:13.28125%;
position:absolute;
background-color:#FF0000;
}
nav {
position:relative;
background-color:#FF0000;
color: #888;
display: block;
width:100%;
height:13.28125%;
}
nav ul
{
list-style-type:none;
width:100%;
height:100%;
margin:0;
padding:0;
}
nav li
{
display: table;
float:left;
border-style: solid;
border-width: 1px;
border-color:#333;
width:20%;
height:100%;
text-align:center;
box-sizing:border-box;
}
.navbaritem
{
font-family: Cambria;
color:#CCCCCC;
font-size:36px;
display: table-cell;
vertical-align: middle;
}
You can change the width of the menu item to 20% and apply box-sizing:border-box. Your problem was due to insufficient width at smaller screen sizes when you are mixing border size in px and width in %.
See the fiddle
Related
I am trying to build a nav-bar that stays on top, fixed and in the middle. But if the screen size is large enough some unused space can be used left and right according to my needs and also there's a bit of space in the middle.
Now, if someone resizes the browser window, I need to start stripping off the unused space from the screen and keep only the essential divs of the parent div.
For reference have a look at Facebook's Desktop navbar.
How do I achieve this with html and css?
Also, if someone resizes so much that the objects will be affected anyway, I would want them to just getting cut off the screen without altering their positions.
<html>
<head> <style>
.navbar {
position:fixed;
background: #000;
height: 30px;
width: 100%}
.logo_div{
margin-left:7%;
float:left;
width:32px;
display:inline-block;
height:32px;
}
.search_div {
width: 450px;
display: inline-block;
margin-left:15px;
float:left;
}
#search_box {
width:100%;
border-radius:5px;
border:1px solid #819597;
padding:4px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-right:none;
height:24px;
font-family: Arial;
font-size:16px;
font-weight:lighter;
outline:none;
}
#search_box:focus {
border-right:none;
background-color:#FCFCDA;
}
li {
text-decoration:none;
padding:5px;
padding-bottom:0px;
margin:1px;
margin-top:0px;
list-style:none;
display:inline-block;
}
.menu {
padding:3px;
float:left;
display:inline-block;
padding-left:10px;
}
ul {
margin-top:0px;}
#static_head{
width:1024px;
margin:0 auto;
position:absolute;
text-align:center;
}
.user_controller {
display:inline;
margin:0 auto;
height:100%;
width:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar" id="dHeaderfixed">
<div id="static_head">
<div id="logo_div" ></div>
<div class="search_div">
<form action="search.php" method="get" id="search_form" name="livesearch">
<input type="text" id="search_box" name="query"></form>
</div>
<div class="menu">
a list of things
</div>
<div id="ui_user_control">some stuff</div></div>
</div></div></div>
Now, the blank unused spaces should be in the navbar at the left of the logo div, this will be as long as required according to screen size. Again there will be unused space between the search box and the menu div and another unused space at the right of the menu div, so when the user resizes the browser window, all of those elements stay in the middle,and if resized further, the screen just cuts them out instead of altering their positions. Thanks!
https://jsfiddle.net/xhzxduz2/2/
CSS
nav {
position: fixed;
left: 0;
top: 0;
background: red;
height: 48px;
min-width: 320px;
width: 100%;
}
.content {
max-width: 960px;
margin: 0 auto;
color: white;
background: blue;
height: 100%;
}
HTML
<nav>
<div class='content'>
YOUR MENU HERE
</div>
</nav>
I have a menu bar that I have created using the li tag and css in order to make it horizontal. However, when I open it up in Chrome it won't work and is not there at all.
However, when I use IE it is fine.
My code is below:
any help will be very appreciated:
#Navigation {
margin-left:350px;
padding-left:0px;
height:10px;
width:890px;
font-family:Helvetica;
font-size:16px;
}
li {
list-style-type:none;
margin:0;
padding:10px;
float:left;
display:block;
width:210px;
}
Home
About Us
Our Stores
Contact Us
You can set li elements percent width like 20% and set margin: 0 auto to align to the center of your page:
#Navigation {
/*margin-left:350px;*/
padding-left:0px;
height:10px;
width:890px;
font-family:Helvetica;
font-size:16px;
margin: 0 auto;
text-align: center;
}
li {
list-style-type:none;
margin:0;
padding:10px;
float:left;
display:block;
width: 20%;
}
<div id="Navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Our Stores
</li>
<li>Contact Us
</li>
</ul>
</div>
For one, you need to clear your floated elements. You can set overflow: hidden on the ul or use a clearfix. The real issue here is that on top of your fixed width li's being 210px you have added 10px of padding to all of them which makes the total width 920px, bigger than the 890px width of the parent #Navigation. Use box-sizing: border-box to force the padding inward and to not effect the width of the element:
ul{
overflow: hidden;
}
li{
list-style-type:none;
margin:0;
padding:10px;
float:left;
display:block;
width:210px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
FIDDLE
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
When I change the resolution of my navigation bar it glitches. Here is my HTML;
<!--Start header-->
<div id="header">
<div id="nav_header">
<ul id="list-nav">
Troll Happy
<li>iPhone Fail</li>
<li>Forever Alone</li>
<li>Rage Comics</li>
<li>Derpina</li>
<li>Okay face</li>
<li>Forums</li>
</ul>
</div>
</div>
<!--End header-->
And my CSS;
#header {
height:66px;
background-color:#000;
position: absolute;
width: 100%;
left:0;
}
#nav_header {
height:50px;
margin-left:100px;
}
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
}
ul#list-nav li {
display:inline;
font-family: Century Gothic, sans-serif;
font-size:13px;
font-weight:bold;
}
ul#list-nav li a {
text-decoration:none;
padding:15px 0;
width:110px;
color:#eee;
float:left;
text-align:center;
border-right:1px solid #353535;
}
You can see what is happening here;
trollhappy.co.uk
As you can see, if you change the resolution the navigation bar goes very glitchy!
Thanks again guys and girls
you just small mistakes, it follows;
u remove the margin-left:100px, insted margin:0px auto; and set width:840px;
#nav_header {
height: 50px;
margin: 0 auto;
width: 840px;
}
ok i understand the misstake, u set the body tag then work perfectly,,,,
body{
margin:-18px 0px 0px 0px;
}
ok friend on small changes do this,u add the min-width:1000px;
#header {
background-color: #000000;
height: 70px;
left: 0;
min-width: 1000px;
position: absolute;
right: 0;
}
Your <li><a> elements are being floated left, which means they'll overspill their container if they can't all fit in a single line because the container is horizontally too small.
For simplicity's sake you'll want to just hide the links rather than implement some nice graceful degradation for smaller screens (just make sure it looks nice with a browser window 960px wide). Just apply the overflow: hidden; style to #nav_header.