I have my header and section inside my wrapper and inside the header and section is an image. I'm just trying do one simple thing - take the parent wrapper and it's child elements and center them on the page. No matter what I do, it stays flushed to the left corner of the screen. Below: Html and CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katie Simone Music</title>
<link rel="stylesheet" a href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/header1.png">
</header>
<section>
<img src="images/pic.png">
</section>
</div>
</body>
</html>
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
}
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katie Simone Music</title>
<link rel="stylesheet" a href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/header1.png">
</header>
<section>
<img src="images/pic.png">
</section>
</div>
</body>
</html>
add text-align:center to the #wrapper style
#wrapper{
max-width:940px;
margin:0 auto;
text-align:center;
padding: 0 5%;
}
Try to add also this:
body {
text-align: center;
}
#wrapper{
max-width:940px;
margin:0 auto;
padding: 0 5%;
text-align:center;
}
Working DEMO
Related
No matter what I try, there is still a visible margin between the div and the top/right/left of the screen.
<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<div class="container-fluid" id="topBackground">
<h1>first</h1>
</div>
</body>
</html>
CSS:
#topBackground{
background-color:#310048;
height:500px;
float:auto;
margin:0 auto;
max-width:100%;
}
Header has default margin so you have to remove it and also set body margin: 0 auto;
body{
margin: 0 auto;
}
#topBackground{
padding:0;
background-color:#310048;
height:500px;
float:auto;
margin:0 auto;
max-width:100%;
}
h1{
margin:0;
}
https://jsfiddle.net/rghhwrm5/
Why is there a margin in the ul? The navbar goes directly below and out of the header when I float left or right. If I remove Ul it doesnt drop below. I dont understand it. How do I fix it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
}
ul{
margin:0;
padding:0;
width:25%;
float:left
}
li{
display:inline;
}
There is no margin on the UL, it just appears that way as it is inside your container, which has margin: auto on it, which centers the #container element on your page and has 80% width.
Move your nav outside of the container if you want it to float to the left of the body, or use:
position: absolute;
left: 0;
width: 100%;
instead of floating it and it will go to the left of the nearest relative container (in this case the body as nothing is set with position: relative.
EDIT: Also, your links are not structured correctly:
<li>NAV1</li>
Should be: <li>NAV1</li> if you want NAV1 to be the text of the link
It's not about margin,because there is no margin, there is not enough space of ul. Im not sure what do you want to achieve but u can remove width: 25%; from ul.
Try this way.
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
overflow: auto;
}
ul{
margin:0;
padding:0;
width:100%;
float:left;
}
li{
display:inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I have noticed that when I have text in my inline-block divs they move down instead of staying in place how can I fix this so that is stays in line with the others with text inside?
Screenshot
HTML
<html>
<head>
<title>My Web site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
</head>
<body>
<div id="container">
<div id="jumbotron">
</div>
<center>
<div class="listbox">
<h1>exapmle</h1>
</div>
<div class="listbox">
</div>
<div class="listbox"></div>
</center>
<!-- container end div -->
</div>
</body>
</html>
CSS
#container{
height:100%;
width:100%;
background-color: #669999;
padding: 5px 5px 5px 5px;
}
.listbox{
height: 250px;
width: 250px;
background-color: #003333;
display:inline-block;
border-radius:5px;
}
#jumbotron{
margin:2px auto 5px auto;
background-color:black;
border-radius:5px;
height:450px;
width:900px;
color:#ffffff;
}
Apply vertical-align:top; to your .listbox CSS class. This issue is due to default vertical-align value (baseline) , so when there is text, it affects baseline for all inline elements and pushes one with text down.
JSFiddle
It's happening, because browser is trying match the baseline of all inline elements.
Add vertical-align: middle to .listbox
Its because of the <h1> tag you are having here:-
<div class="listbox">
<h1>exapmle</h1>
</div>
You haven't specified any rule for it. Try adding this to your CSS:-
h1 { float: left; }
i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.
This is my html and css
CSS
#header, .img
margin:0px;
padding:0px;
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="header">
<div class="logo">
<a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
</div>
</div>
</body>
</html>
Try this:
body
{
margin:0px;
padding:0px;
}
Consider approaching it purely in CSS, like so;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px auto;
width: 960px;
}
.logo {
display: block;
width: 200px;
height: 200px;
background-image: url('gif.gif');
}
.logo:hover {
/* Some hover styling here */
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.
Try reset your css before your start do anything.
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
</style>
I make a simple test with css reset above and works fine. Just paste before all css in your html file.
Add to the body:
body{margin:0px; padding:0px;}
You can eliminate this kind of problems if you use reset.css or normalize.css
so I keep having this weird problem that I have never seen before ... as we all know, a div is inside a body and we can make body margin 0 and padding 0 to cover the entire page with height and width 100% ... The problem is, when I try to margin a div inside the body THE ENTIRE BODY moves :S .. and to my surprise if I use firebug and hover over the body, its not the entire page. its just slightly bigger than the dive ... here is the code (first part is HTML, second is CSS)
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS:
html{
}
body{
width: 100%;
height:100%;
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
Thats the way it works, margins collapse. What are you trying to do? You could just set the background-color on the HTML tag, or use CSS's top/left properties to position the div.
See also: http://www.w3.org/TR/CSS21/box.html
As TJHeuvel already said, this is collapsing margin. There are two solutions to this: set padding on the parent element (body in this case) or border. You can read more about it here: http://complexspiral.com/publications/uncollapsing-margins/
HTMl CODE
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS
html{
}
body{
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
TRY THIS