This question already has answers here:
CSS Margin: 0 is not setting to 0
(12 answers)
Closed 6 years ago.
I want to remove the white spaces around (as you can see in the image there's a thick white spaces on every corner), how can I do that? It seems that it is created by default and needs something to do to remove that. I've tried to add margin: -10px but it looks like not the right way to do as it messes up the view on the below content.
Here's my code:
header, footer {
padding: 1em;
color: white;
font-family: "Calibri";
background-color: #000000;
clear: left;
text-align: center;
}
/* Navbar start */
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: "Calibri";
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #009933;
}
/* Navbar end */
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav li {
float: none;
}
nav ul {
list-style-type: disc;
padding: 0;
margin: 10px;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<ul class="navbar">
<li>Home</li>
<li>Peripherals</li>
<li>Gallery</li>
<li>About</li>
</ul>
<nav>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</nav>
<article>
<h1>Item1</h1>
<p>Description for item1 here.</p>
</article>
<footer>Copyright (c) KPA</footer>
</body>
</html>
the problem is margin of your body element. set like this
body {margin: 0;}
css reset
This css reset by eric meyer is simply amazing. It will remove those spaces.
The other way around is to set
margin: 0;
padding: 0;
You have to add a line style css at top of page.
html,body{ margin:0}
You can use the CSSReset library or:
body {
margin: 0;
padding: 0;
}
Try
.article{
padding: 0em;
}
Similar with .nav{padding: 0em;}
Related
i want to make my navigation bar look like this http://www.templatemonster.com/demo/51347.html
what i achieved is this
please while correcting the code , do state the reason behind it. it will of great help. thanks
also the social networking icons shown are in black and the hover effect gives it a red color. is it an image or that can be achieved solely with help of css ?
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
display: inline;
padding-left: 20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left;
}
.navbar ul {
list-style: none;
margin: 0;
float: left;
padding: 30px 15px;
}
.navbar ul li {
display: inline;
padding: 15px;
border-right: 2px solid black;
color: white;
font-weight: bold;
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"</li>
<li><img src="twitter.png"</li>
<li><img src="feed.png"</li>
<li><img src="google.png"</li>
</ul>
</div>
<nav class="navbar">
<ul>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
</body>
</html>
Floats and percentages of the container width is a good way to go, especially, if you can't afford to have a fixed width container. Don't forget to adjust font-size, to make sure text doesn't bloat it's container's size and remains on a single line.
Also, for this to work you only need floats on "li" elements themselves. And never forget to clear the floats (clearfix class provided).
P.S. It would be much harder to achieve without use of "box-sizing: border-box;", here's a good article about box-sizing css property
The code:
<header class="headwrap">
<nav class="navbar">
<ul class="clearfix">
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
* {
/* Very important part, set on all elements for simplicity. */
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 15px;
}
.navbar ul li {
/* float it to have no issues with whitespace between inline-blocks */
float: left;
padding: 15px;
/* borders from both sides */
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
/* total width 100% / 5 elements */
width: 20%;
}
/* No left border for the first one */
.navbar ul li:first-child {
border-left: none;
}
/* No right border for the last one */
.navbar ul li:last-child {
border-right: none;
}
/* Helps with floats inside */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
About clearfix
And here's the fiddle
Assign a fixed width to .navbar ul li, like
.navbar ul li {
width: 120px;
}
(try with different values)
Hi this is my first reply. I created this JS Fiddle to show you how to do it. Just click on the link for a working example with all source and drag the demo portion of the screen wider to fit it all on - this template will be easy to make mobile friendly but as a guide you should always start designing for 320px not 1024+
Hope this helps - please accept my answer if you like my response... its my first post too :-)
Note the follow css is to ensure ALL elements have padding and border included in their specified width and height so using padding/borders does NOT increase their total size. Google 'css box sizing' for more info on this
body {
background-color: #ccc;
margin: 0;
padding: 30px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
*, *:before, *:after{
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;}
Hover effect can be done with CSS only. try this
.socialbuttons ul li:hover {
background: #cb3529;
}
and transitions effects
.socialbuttons li img {
transition: all 0.3s ease 0s;
}
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
So I'm trying to fill in the header part above the border fully in colour. But there seems to be like 3px of white space that's just bordering the entire page. I made the margin and padding for the entire page 0 so I'm a little confused. Here's the page code:
<DOCTYPE html?>
<head>
<title> Brittany Corl - Web Developer</title>
<link rel="stylesheet" href="CSSCoding.css">
<div id="MainHeader"><img id="HeaderPhoto" src="HeaderPhoto.png" height="100 px" width="100 px">
<center><h1>Brittany Corl - Web Developer/Graphic Designer</h1></center></div>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Work</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</body>
here's the CSS:
html {
width: 100%;
margin: 0;
padding: 0;
}
h1 {
font-family: tahoma;
font-size: 40px;
padding-top: 30px;
padding-bottom: 29px;
border-bottom: medium solid black;
}
#HeaderPhoto {
float: left;
padding-right: 20px;
}
#MainHeader {
background-color: #e0ffff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
font-family: verdana;
font-size: 20px;
}
a:link, a:visited {
display: block;
width: 120px;
color: white;
background-color: #99C0F2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #5FA0F5;
}
Add the following to your css.
body {
margin: 0px;
padding: 0px;
}
Try setting the margin and padding to zero for the body of the page.
body
{
width: 100%;
margin: 0;
padding: 0;
}
or just add ,body after HTML
I'm playing around with some HTML5 and CSS3 and trying to build a single static page for now.
Currently working on the navigation menu with one of the items being a drop down menu.
When I hover above the drop down item, the item is pushing the items on its left and right away.
Could someone explain to me why this is happening? I have very little HTML or CSS experience, I just started putting something together.
The CSS is based on many tutorials on the internet for making drop down navigation menu's. I've stripped most of the code down to the "very basic" to get this working.
Edit: Any tips to make the CSS cleaner are welcome as well.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
I think the issue is that your secondary menu UL is wider than your primary menu LI containing it. When the embedded UL switches from display:none to display:block it increases the width of the parent LI.
A couple possible solutions:
specify a width for your main menu LIs, e.g.:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
Use position: absolute to take the embedded UL out of the layout flow, e.g.:
nav ul ul {
display: none;
position: absolute;
}
Both of these options have some issues with your current layout, though, and would required you to rework things a bit. Hopefully this is helpful in terms of pointing you in the right direction.
Try by like bellow:
nav>ul { display: inline-block; list-style: none; }
I want to put a title (a larger font than other text in navbar) on the left hand side of my navbar, so far i have achieved getting it on the left side but the text is being half cut, like half the text is outside the navbar and half of it is inside it. How can i get the text to stay fully inside the navbar?
CSS
<style>
#navbar ul {
margin:0 auto;
padding: 10px;
list-style-type: none;
text-align: center;
background:#1c1c1c;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: calibri;
font-size: large;
text-decoration: underline;
font-weight: 200;
border: 0.5px solid #242424;
border-radius: 2px;
padding:.3em 1em;
color: #ffffff;
background-color:transparent;
}
#navbar ul li a:hover {
color: #000;
background-color: #ffffff;
border-radius: 5px;
color:#1c1c1c;
}
#navbar {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
z-index:0;
}
#navbar {
overflow: hidden;
}
#navbar h1 {
float: left;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ClickonDeal.com.au-Electronics</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<div id="navbar">
<h1>Click</h1>
<ul>
<li>Stuff</li>
<li>more stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</form>
</ul>
</div>
</div>
</html>
You have a couple of errant closing tags that are throwing errors, but that's not what's causing you trouble.
Likely issue is that H1 in most browsers will have default margins that are pushing it out of whack.
I'd investigate adding a css reset (start at http://necolas.github.io/normalize.css/) but in the mean time, you can fix this by setting margins to 0 on your h1:
#navbar h1 {
float: left;
margin: 0;
}
Here's a simple jsfiddle showing that change: http://jsfiddle.net/adnrw/BjCBf/1/ (h1 color changed to white so we can see it)
Add the below CSS to your code:
#navbar h1 {
float: left;
margin:0;
}
Check this JSFiddle