would you be able to help me to position my navigation - "wrapperNav" completely left in the browser so there would be no gap between the blue navigation and the browser edge?
thanks a lot.
code: http://codepen.io/anon/pen/hKsCe
<header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</header>
#logo,
#adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
Fixed, you just needed to add in padding-left: 0px; to nav ul
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Administrace odkazů</title>
<link href="adminstyle2.css" rel="stylesheet" type="text/css">
<style type="text/css">
#logo, #adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
nav ul {
padding-left:0px;
}
</style>
</head>
<body>
<header>
</header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor "credentials"</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</body>
</html>
#wrapperNav ul {
margin: 0;
padding: 0;
}
As need to be updated, I did on your example, try it once.
As a best practice you have to use css re-set for better styling. Because HTML tags has its own padding and margins, so using a re-set css, you can re--set them and control by yourself. Use following link for more. http://meyerweb.com/eric/tools/css/reset/
You are missing a reset. For example, put in your css:
* {
padding: 0;
margin: 0;
}
I have changed your code check it.
[http://codepen.io/anon/pen/Dvcgr][1]
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Can i remove blank spaces between nav buttons, manteining them centered? I've tried removing inline-block in li a but i think something it's wrong, i think is the display: inline-block the problem but i'm not sure...
Can someone help me? Thanks in advance.
nav ul {
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d; }
nav ul li {
margin: 0px;
padding: 0px;
display: inline; }
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red; }
nav ul li a:hover {
background: #949fb4; }
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>The Project</li>
<li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
The reason why it happens is because, when using elements with inline-block they are treated the same way as words in a text. Then the line-breaks and tabs you have between the elements will count as spaces.
To fix it, simply set nav ul to display: table:
nav ul {
display: table;
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
nav ul li {
margin: 0px;
padding: 0px;
display: inline;
}
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red;
}
nav ul li a:hover {
background: #949fb4;
}
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>The Project</li>
<li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
You can also remove all the spaces, line-breaks and tabs, between your elements (which I wouldn't recomment), or use Flexbox with justify-content: center like this:
nav ul {
display: flex;
justify-content: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
You can read more about it her: CSS-Tricks: Fighting the Space Between Inline Block Elements
There's a weird little trick for dealing with this issue, simply remove the spaces in your <li> elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li><!--
--><li>The Project</li><!--
--><li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
See JSFiddle
What should I do to align the first 3 buttons in the center of the bar?
#navbar{
list-style-type: none;
position: relative;
top: -4px;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #212121;
}
In your navigation bar you can put these three in one separate div and then align it to center
Hello friends to center a that your
menu options (nav) you only need
to use the text-aling rule: center;
,why ? Because the menu list are
formed by '' li '' or '' ul '' and we
only apply this rule to list and
ready :), greetings from mexico;)
<html>
<head>
<style>
body{
margin: 0px;
}
.navbar{
height: 60px;
background-color: #bbb;
line-height: 60px; //this will center inline elements in your navbar
}
.container{
margin-left: 5%;
margin-right: 5%;
}
.btn{
background-color: white;
padding: 10px 20px;
width: 100px;
border: none;
border-radius: 2px;
display: inline;
}
.nav{
display: inline;
list-style-type: none;
}
.nav li{
display: inline;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar">
<div class="container">
<ul class="nav">
<li><button class="btn">Button1</button></li>
<li><button class="btn">Button2</button></li>
<li><a class="btn"><a> Button</a></li>
</ul>
</div>
</nav>
</body>
The above code should work for you. I have shown buttons using anchor tag and also button tag
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
I need to vertically align with CSS multiple elements inside my header.
At the moment, I am using this structure:
-Header
-Content div (This only set my width to 940 with paddings of 10px each side)
-Element 1 (Height: Known, 50px)
-Element 2 (Height: Unknown, bigger fonts)
-Element 3 (Height: Unknown, smaller fonts)
So I need to vertically align to the middle (50% of my header - size of the element) all of my elements and I need to make it cross-browser compatible...
I've found some suggestion by searching such as using a floater div, however I had a hard time trying to align all of my elements since they are not all of the same size...
EDIT
As requested, here is my HTML and CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/mediadevis.css" />
</head>
<body>
<header>
<div class="content">
<div id="logo"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Nos services</li>
<li>Notre compagnie</li>
<li>Nous joindre</li>
</ul>
</nav>
<div id="lang">English</div>
</div>
</header>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #336699;
}
header{
background-image:url('../IMG/bg_top.png');
height: 90px;
}
nav > ul{
float: left;
list-style-type:none;
margin:0;
margin-left: 10px;
padding:0;
color: #ffffff;
}
nav > ul > li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;
}
.content{
margin: auto;
width: 940px;
padding-right: 10px;
padding-left: 10px;
}
#lang{
float: left;
}
#logo{
background-image:url('../IMG/logo.png');
height: 50px;
width: 180px;
float: left;
}
Try these suggestions from Smashing Magazine:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
Specifically, try this code, using the TOP, LEFT, RIGHT, and BOTTOM properties to position your elements:
HTML
<div class="magix">
magix!
</div>
<div class="more-magix">
More Magix!
</div>
CSS
.magix{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.more-magix {
background: blue;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 500px;
right: 0;
width: 100px;
}
OR, check out Chris Coiyer's methods:
http://css-tricks.com/centering-in-the-unknown/
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.