So I've finally come to a light bulb moment on tying html and css together, I have a basic understanding of grid but I feel like most of the info on grid on youtube is out of date as none of it really lets me do what I want.
what I want to do is put two pictures side by side, I've even achieved that to a degree. I've used griddle-it to try to make it easier, it has, put the background column image on my page... 12 columns centered on the page. The problem i'm running into is that I can't seem to make the images so that there is a column before the first image, the first image is butting up against the boarder of the grid and i cant seem to get the 2nd image to move close to the other side of the grid. I've tried using prefix and suffix and alpha/ omega but it's not doing anything for this issue. So thats the 3 files I'm using other then reset.css. Also when I put in container_12 everything shifts to the left I think mostly what I'd like to know is where can I get reliably up to date info on grid so i can do page layout. I feel once i get page layout worked out I'll be in a good place. I'd like to be able to make nice webpages without having to use wordpress, not that wordpress is bad, I'd just like to be good at doing it this way. Thanks ahead of time.
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Camping</title>
/*<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">*/
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/campinggrid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/background.css" type="text/css" media="screen">
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(50, 211, 95);" alink="#000099" link="#000099" vlink="#990099">
<div class="container">
<div class="grid_12">
<h1 style="text-align: center; color: white;"><big>Welcome
to Helpful Hints for Camping</big></h1>
</div>
<div id="camping" class="grid_5 prefix_1">
<p> Camping is a very fun and
exciting way to pass the time.<br> It's
a way to see the beauty of our country or any other for that matter.
Camping has many benefits to our health and our peace of mind. On this
page I attempt to give some tips and tricks for new campers and maybe
even experiences ones.</p>
<img src="img/hiking.jpg" alt="Camping is fun">
</div>
<div id="campingincanada" class="grid_5 prefix_1">
<h2>Camping in Canada</h2>
<p>Camping in canada is alot of fun even if it is a bit cold,<br> but
that's alright, just bring a jacket</p>
<img src="img/couple-camping.jpg" alt="canadain camping">
</div>
</div>
</body>
</html>
GRID.CSS
/*
Width: 1000px
# Columns : 12
Column width:247px
Gutter : 4px
*/
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
{
margin: 0px 0px 0px 0;
float: left;
display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
width: 1000px;
margin: 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}
BACKGROUND.CSS
body {
background: url(http://griddle.it/1000-12-20) repeat-y center top;
}
}
#camping img {
margin: 0 0 0px 0;
}
#campingincanada img {
margin: 0 0 0px 0;
}
