After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
Related
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
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
I am refining a responsive navigation menu, and would like to have the menu icon clicked to have the drop down menu instead of the hover effect. I am using a Google jquery so I am not sure if that is all ready scripted in the script src or not, and would I have to create the drop down menu manually in jquery or just an easy CSS or html5 fix. Thanks for any feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
#media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
Use CSS to style and hide your menu and do the following:
Load jQuery (I can't see that in your code)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
And you can do something like this (to show and hide the menu on click)
$('#menu-icon').click( function(){
$('nav ul').toggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Where "menu" is the variable value of your menu. you can declare it like.....
$(function() {
var menu = $('ul li');
});
hope it will help you..... :D
Rj
I made a simple site using stack-able divs inside of a wrapper div. The problem is that every time I add content to the , it suddenly adds a space of some type, and I cannot get rid of it. The content in the divs will be dynamic so the height won't be always the same.
Why does this happen? Is it a problem the div or the content itself?
Image below the div's without content
Image below the div's with content
My CSS
#charset "utf-8";
/* CSS Document */
/* Basic */
body {
background-color: #666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 900px;
height: auto;
margin: 10px auto;
position: relative;
background-color: #999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#header {
width: 900px;
height: 180px;
background-color: #9C0;
}
#menubar {
width: 900px;
height: 36px;
background-color: #906;
}
#content {
width: 900px;
height: 350px;
position: relative;
background-color: #036;
}
#footer {
width: 900px;
height: 40px;
position: relative;
background-color: #F90;
}
/* Nav */
#nav {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
}
#nav li a:hover {
color: #000;
background-color: #fff;
}
My 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menubar">
<ul id="nav" >
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Looking at the CSS you provided, it seems that you are forgetting to normalize it. Add at the very least this to the top of your CSS file:
* {
margin: 0;
padding: 0;
}
This will remove any browser specific margins or padding from elements, which may be causing the whitespace.
There's also a css script called Normalize.css which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
You can download it from: http://necolas.github.com/normalize.css/
for me I had the same issue with CSS NORMALIZER
and I just add this css code to the main container:
border: 1px solid transparent;
seems to be working on all major browsers along with IEs except IE6 gives you a black border b'cause as you may know IE6 does not support TRANSPARENCY
hope this helps :-)
I know this is a typical question but I cannot find the solution. My CSS drop down menu works fine everywhere but IE9. The drop down simply doesn't work in IE9. Any advice? Thank you.
Here is the menu HTML:
<div id="menu">
<ul>
<li><span>Needs Assessment</span>
<ul>
<li>History1</li>
<li>Team1</li>
<li>Offices1</li>
</ul>
</li>
<li><span>Design and Development</span>
<ul>
<li>History2</li>
<li>Team2</li>
<li>Offices2</li>
</ul>
</li>
<li><span>Prepare and Implement</span>
<ul>
<li>History3</li>
<li>Team3</li>
<li>Offices3</li>
</ul>
</li>
<li><span>Debrief and Measure</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
<li><span>Resources</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
</ul>
</div>
Here is my CSS for this menu:
#menu {
width: 942px;
height: 47px;
border: solid 0px #000;
}
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
}
#menu li ul {
position: absolute;
margin: 0px;
padding: 0px;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
color: #fff;
}
#menu li li a:hover {
color: #ccc;
}
#menu ul li a {
display: block;
width: 188px;
padding: 12px 0px 10px 0px;
background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
border: solid 0px black;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-align: center;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
border: solid 0px black;
}
#menu a:hover span {
color:#bbb;
}
As Sparky672 said, your HTML is hopelessly invalid. You should fix it.
However, to fix the specific problem you're having, all you need to do is add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, IE is in quirks mode.
Without seeing a demo, I have no idea if this will solve it, but you have a syntax error in your CSS. Missing the opening (.
This way always works for me...
background-image: url(http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png);
Edited as per comments and demo URL:
You have some serious HTML validation errors. (Edit #2: Originally, the very first listed error was a missing doctype which will throw IE in quirks mode.)
You have this in the top of your page...
<html>
<head>
<title>Debrief and Measure</title>
</head>
<body>
<html>
<head>
<title>Discover Simulation</title>
</head>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link href="/Laerdal/_LOCAL_CONTENT/usa/css/discoversimulation.css" rel="stylesheet" type="text/css">
<body>
Notice all the duplicate <html>, <body> and <head></head> tags.
Then at the bottom of your page...
</body>
</html>
<div align="center">
<div id="whitebox">
...snipped...
</div>
</body>
</html>
Notice the extraneous </body></html> tags.
As an aside: align="center" has been deprecated.