For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
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 :)
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]
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/