I'd like to figure out how to get control of gaps between my divs. I had set up the jello layout and started to work on my navigation bar, when gaps got all messy. Tried to backtrack everything and got left with just my divs in a default flow layout and gaps. Here is the html code:
body {
background-image: url("images/ozadjeCrno.jpg");
background-size: 100%;
background-repeat: repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
}
#container{
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
#header{
width: 900px;
height: 100px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation{
width: 900px;
height: 30px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation ul li{
display: inline;
}
#logoLeft{
margin: 20px;
width: 140px;
height: 60px;
}
#logoRight{
margin: 20px;
width: 110px;
height: 60px;
float: right;
}
#sidebar{
background-color: rgba(207, 207, 207, 0.94);
width: 255px;
height: 100px;
}
#main {
background-color: rgba(207, 207, 207, 0.94);
height: 100px;
}
#footer{
background-color: rgba(207, 207, 207, 0.94);
}
.shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.roundedCorners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<html>
<head>
<title>Solska Impro Liga</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spletka.css">
</head>
<body>
<div id="container">
<div id="header" class="shadow roundedCorners">
<img id="logoRight" src="images/logo1.png" alt="logo1">
<img id="logoLeft" src="images/logo2.png" alt="logo1">
</div>
<div id="navigation" class="shadow roundedCorners">
<ul id="navButtonsList">
<li>DOMOV</li>
<li>ŠILARJI</li>
<li>O ŠILI</li>
<li>ARHIV</li>
<li>ENG</li>
</ul>
</div>
<div id="sidebar" class="shadow roundedCorners">
<h1>SIDEBAR</h1>
</div>
<div id="main" class="shadow roundedCorners">
<h1>MAIN</h1>
</div>
<div id="footer" class="shadow roundedCorners">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
I wanted to post a screenshot, but I can't since I need 10 reputation points :/
Thank you for your time,
best regards.
The reason you have gaps between divs is because of heading tags. Use overflow: hidden for your parent divs than heading margin won't go out of box and than add margin to your parent divs so you can control distance between them.
If you don't want to use overflow: hidden than you can change heading tag margin to padding. Than again you can control distance between parent divs with margin.
Certain child elements have a default margin, which is causing your issues:
<ul id="navButtonsList"> is adding (for most browsers) 1em or 100% margin-top and -bottom. Same with all your <h1>'s.
You could do a "reset" at the top of your CSS, like:
ul, h1 { margin: 0; }
Related
Below is the CSS that effects a div with three p's. I can't figure out how to reduce the "white space" above the first p within the border.
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
I can create the same border around just one p and the border will wrap tightly around the top of the p, but I want one boarder around all 3 p's.
Does that make sense? Technically, there is also "white space" below the last p but I'm okay with how that looks visually.
Thanks for the help!
Below is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
Below is the CSS:
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
You got two ways to do this
First you can tagert the first p child of your div and remove the padding top
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child {
margin-top: 0;
}
<div id="animal-info">
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
Or you can adjust the top padding of your div
padding: top right bottom left;
Hope this helps :)
#animal-info {
max-width: 256px;
padding: 0px 8px 8px 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
<div id="animal-info" >
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
This would be the end result in your example using the first child method
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child{
margin-top: 0px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
I have multiple images that take up the entire screen and auto resize (positioned absolutely and some JavaScript) however for the life of me I can not get content to be placed UNDER that div. I put the images in a div container and that div is positioned relative to every other one. The div with the necessary content is relative as well. The images are absolute within a relative div. Can someone take a look at my code and let me know exactly whats going on? I just can't figure it out, and after all the research I have done I do not see why it isn't working. Thank You! Below is the external style sheet and the HTML. I believe the issue is within the actual HTML for div cycler (where the images are), because I embedded the style within the HTML for that div and the content at least does fall under the top divs (defined in style sheet).
#charset "utf-8";
/* CSS Document */
#mainbody
{ margin:0px; padding: 0px; border: 0px; overflow: scroll;}
#topnav.mainnav {
background-color: rgb(27, 89, 127);
height: 45px;
width: 100%;
max-width: 3000px;
max-height: 45px;
border: 0;
margin: 0 auto;
margin-top: -45px;
padding: 0;
text-align: center;
/*box-shadow: 2px 2px 3px 2px #333;*/
display: table; position: fixed;z-index: 4;
}
#linktable.listlink { height: inherit; width: 50%; margin: 0 auto; position: relative; display: table; text-align: center;}
ul {list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: rgb(27, 89, 127); height: 45px; width: 760px;}
li {float: left;}
li a.other { display: block; padding-top: 10px; padding-left: 14px; padding-right: 14px; margin: 0; border: 0;
height: 45px; color: #FFF; text-decoration: none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;
}
li a:hover { background-color: rgb(131, 139, 146); -o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
/* ...and now for the proper property */
transition:.3s }
li a.current { background-color: rgb(238, 237, 240); color: rgb(27, 89, 127); padding-top: 10px; padding-left: 14px; padding-right:14px; margin: 0; border: 0; display: block; text-decoration: none;
height: 45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;}
#namebar.topname {
background-color: rgb(238, 237, 240);
height: 123px;
min-width: 760px;
width: 100%;
max-height: 123px;
display: block;
position: relative;
border-bottom: 2px solid rgb(131, 139, 146);
margin-top: 45px;
text-align: center;
padding-top: 0px;
}
img.dfrelogo { margin-top: 0px; width: 359px; height: 123px}
img.firstimagehome {width: 100%; max-width: 5472px;min-width:760px; height: auto; box-shadow: 4px 4px 4px #333333; text-align: center;}
#homefirstimage {margin-top: 0px; text-align: center;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Dean Flint Real Estate!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/main.css" id="main" media="screen and (min-width: 800px)" type="text/css" />
<link rel="stylesheet" href="stylesheet/mini.css" id="mini" media="screen and (max-width: 799px)" type="text/css" />
<style type="text/css">
#cycler{ position:relative; width: 100%; max-width: 5472px;min-width: 359px; float:left; display: table}
#cycler img{position:absolute;z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
#cycler img.active{z-index:3; width: 100%; max-width: 5472px;min-width: 359px; height: auto;text-align: center;opacity: 100; float:left}
</style>
</head>
<body id="mainbody">
<nav>
<div id="topnav" class="mainnav">
<div id="linktable" class="listlink">
<ul>
<li>HOME</li>
<li>AGENTS</li>
<li>FEATURED LISTINGS</li>
<li>CURRENT LISTINGS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="namebar" class="topname"><img src="images/temp/dfrelogo.jpg" class="dfrelogo" /></div>
</header>
<section>
<div id="cycler">
<img src="images/front_page/frontimage.jpg" />
<img src="images/front_page/frontimage2.jpg" class="active" />
<img src="images/front_page/frontimage3.jpg" />
</div>
</section><br />
<footer>
<div style="position: relative;" ><p>This text should go UNDER the above pictures</p></div>
</footer>
<script type="text/javascript">
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 4s
setInterval('cycleImages()', 6000);
})</script>
</body>
</html>
Do you needed this, '#cycler img{position:absolute}'.
If you remove the absolute position of the 'img' tag in the cycler div, the text will go down as you needed.
#cycler img{z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
This will do.
To know about absolute position this is a good short answer.
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
what i have in the code:
wrapper div outemost which in css i made to width of auto so all the inner divs have to align
inside my container div which inside of wrapper container div contains both sidebars which should be same height. Instead they don't do this and Im not sure why. Instead of having two sidebars I would like to keep the right sidebar and strect the content from the left sidebar from the left to the right sidebar.
Another major problem is that the right sidebar keeps overflowing its text and when i tried overflow:hidden it just hid evrything outside of the sidebar div which isn't what I want
here is jsfiddle so you can better see it. I want to stop overflowing on the right sidebar
and when the left sidebar is width to touch the right sidebar then under the content of the leftsidebar is where i want the buttons becuase they go out the screen when I widen the width.
http://jsfiddle.net/b6bW4/
<!DOCTYPE html>
<html lang="en">
<html>
<title>Building Blocks to Html</title>
<head>
<SCRIPT language=JavaScript>
var updated = document.lastModified document.write("Last modified: " + updated)
</script>
<script src="start.js"></script>
<meta name="keywords" content="HTML, Hyper Text Markup Language, />
<meta name="description" content="HTML in easy steps. Introductory tutorial for beginners." / >
<meta name="author" content="Miguel Castaneda" />
<meta charset="UTF-8">
<meta name="robots" content="all, nofollow" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<div id="wrapper">
<!-- wrapper holds everything should be auto -->
<div id="mod"></div>
<!-- end of mod -->
<center>
<a name="top"></center>
<center>
Bottom
</center>
<div id="mainmenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- end of mainmenu -->
<div id="container">
//container holds content and sidebar
<div id="sidebar">
<p>HELLLLLLLLLLLEEEwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwMwwwwwwwwwwwwwwwwwwwwwwwwwEwwwwwwawawakdjadjlkajdlk;asmdksm.a</p>
</div>
<!-- end of sidebar -->
<div id="content">
<p >
<!-- browser picks first one in array if not in cpu then goes to 2nd font //-->
<tt>
Programmer: Miguel Castaneda(iSten23)
<br>
</br>
Head First HTML5 Programming
<br>
</br>
THIS SITE IS FOR EXPERIMENTAL PURPOSES, IS NOT INTENDED FOR COMMERCIAL PURPOSES.
</p>
</tt>
</div>
<!-- end of content -->
</div>
<!-- end of containeer-->
<center>
Top
<div id="leftrightB" >
<UL id="ul-list">
<li>
<a id="rightB"href="basic5.html" class="addborder" >
<img src="arrow1.png" height="40" width="40" alt="Link to next page">
</a>
</li>
<li>
<a id="leftB"href="basic7.html" class="addborder">
<img src="arrow.png" height="40" width="40" alt="Link to next page">
</a>
</li>
</ul>
</div>
<!--end of leftrightB -->
<div id="footermenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- END OF FOOTERMENU -->
<a name="bottom"></div>
<!-- END OF WRAPPER-->
</body>
<style>
#ul-list li {
}
a:hover {
color: #00f000;
text-shadow: 0px 2px green;
}
.addborder:hover {
border: 1px solid #000000;
}
#sidebar {
position: absolute;
right: 0;
margin-top: 2px;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
<!-- //white-space: nowrap;
//overflow: hidden;
//word-wrap: break-word -->
}
#wrapper {
width: auto;
}
#content {
position: absolute;
left: 0;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
}
<!-- img {
border-width: 1px;
border-color: Black;
}
--> .table {
display: table;
<!-- Allow the centering to work */ --> margin: 0 auto;
}
ul#ul-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#ul-list li {
display: inline;
}
#mainmenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
position: absolute;
top: 50px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#mainmenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#mainmenu li {
display: inline;
padding: 20px;
}
#mainmenu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#mainmenu a:hover {
color: #F90;
background-color: #FFF;
}
#footermenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #52D7E5;
//main color of the menu border-radius: 8px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#footermenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#footermenu li {
display: inline;
padding: 20px;
}
#footermenu a {
text-decoration: none;
color: #00F;
// padding: 8px 8px 8px 8px;
}
#footermenu a:hover {
color: #F90;
background-color: #17861A;
//color of gover over iterm
}
rightleftB {
display: table-cell vertical-align: bottom;
}
#wrapper {
width: 100%;
}
</style>
</html>
I think you need this...
Result
body{
overflow: hidden;
}
Got an issue here regarding making other div-elements hidden when and other div has been visible.
As you see in my code below, when f.ex. star trek have been visible, I want pacific rim and world war z to disappear using z-index.
My HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img alt="pacificrim image" src="../bilder/pacificRim.jpg">
<p>Blahblahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img alt="startrek image" src="../bilder/starTrek.jpg">
<p>blahblahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img alt="worldwarz image" src="../bilder/worldWarZ.jpg">
<p>blahblahblah</p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<img alt="pacificrim poster" src="../bilder/pacificRim.jpg">
</div>
<div id="startrekPoster">
<img alt="startrek poster" src="../bilder/starTrek.jpg">
</div>
<div id="worldwarzPoster">
<img alt="worldwarz poster" src="../bilder/worldWarZ.jpg">
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
The CSS code
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
}
#startrekContent, #worldwarzContent{
z-index: -1;
height: 0;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target{
height: 100%;
z-index: 10;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
As you see I need Pacific Rim to be the standard movie that show up when people vist the website, and the other should be visible when I target them. Then the movie I target should be visible. Per now, Pacific Rim is ALWAYS visible and in the background of the other movie.
So if i f.ex. choose to target the star trek movie, and then so the world war z movie. I see the Pacific Rim movie behind when the transition is working.
I am not allowed to use javascript, so is there a way I can get this working?
Thanks!
jsfiddle.net/f8ns4 - JSFiddle to show what i mean!
Give your individual movie divs a background color so you cant see whats underneath it.
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
background-color: rgb(230, 231, 232);
}
Demo: http://jsfiddle.net/f8ns4/1/
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.