grid and me

darbok · March 29, 2014

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>

/*<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">*/

</head>

<h1 style="text-align: center; color: white;"><big>Welcome

to Helpful Hints for Camping</big></h1>

</div>

<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>

</div>

<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>

</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;

}

davej · March 29, 2014

My humble opinion? The grid schemes are overkill for most people and add complexity that you simply don't need. And for a simple page all you need is ONE file, not the confusion of several files.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Camping</title><style>body{color: rgb(0, 0, 0);background-color: rgb(50, 140, 95);background-image:url('http://naturescrusaders.files.wordpress.com/2010/05/boreal-forest-canada.jpg');}#wrapper{width: 1000px;background-color: rgb(50, 211, 95);text-align: center;margin:0 auto;min-height:600px;opacity:0.90;border-radius:30px;border:1px solid #000;}h1{font-size:36pt;color: white;}img{width:500px;background-color:#ccc;margin:8px;border:2px solid #000;}div.group img{width:300px;}p{margin:4px 10px;}</style></head><body> <div id="wrapper"><h1>Welcome to Helpful Hints for Camping</h1><p>Camping is a very fun and exciting way to pass the time. It'sa 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 thispage I attempt to give some tips and tricks for new campers and maybeeven experiences ones.</p><img src="img/pic00.jpg" alt="Camping is fun"/><h2>Camping in Canada</h2><p>Camping in canada is alot of fun even if it is a bit cold, butthat's alright, just bring a jacket.</p><img src="img/pic01.jpg" alt="Canadian camping"/><p>Images are inline-blocks and can easily be grouped together side by side...</p><div class="group"><img src="img/pic00.jpg" alt="Camping is fun"/><img src="img/pic01.jpg" alt="Canadian camping"/></div></div></body></html>

darbok · March 29, 2014

what should i do then for page layout?

davej · March 29, 2014

To me "page layout" just means getting things positioned where you want them to be positioned. You enter the content in the correct order into the HTML and then you apply a few styles to move it exactly where you want it to appear with the desired size, font, color, margins, border, etc... Do you have a specific page layout problem in mind? I consider the grid system to be overly complicated unless you are seeking to become a professional web designer.

darbok · March 29, 2014

like my original issue.. I'd like to put things next to each other instead of stacked... can i do that just with columns? if so, how do I get them in the right place in the column?

davej · March 29, 2014

HTML has a natural flow from top to bottom and left to right. For block elements "float" or "inline-block" can be applied to get them to sit next to each other. Can you perhaps provide an example layout problem?

darbok · March 29, 2014

i dont think i have very specific issue, i think my frustration is trying to get things to be next to each other, I've seen html's nature to put things up and down, but I haven't seen the left to right without grid or columns or i guess flex box.

davej · March 29, 2014

Flex-box is supposed to be very good, but I don't know how well supported it is yet. The only tricky thing to learn with ordinary layout is how to use "float" -- which requires some practice. The next time you have a frustrating layout just post it here and we will walk you through it.

darbok · March 29, 2014

hmm alright, I'll need to investigate the uses and difference of float and block i guess.

davej · March 29, 2014

If you are happy with things mostly being centered you may not even need "float." Inline-blocks such as images will sit next to each other if they fit on the line together. If you want images to sit next to each other all you have to do is make sure the width (or min-width) of the page (or wrapper div) is wide enough to hold them all. As you can see in the example I provided above, a wrapper with a fixed width simplifies things because the flow of the page remains constant. If the page width was set only by the browser window then everything would flow to fit whatever the new width was.

Here is another version which avoids the opacity being applied to the images...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Camping</title><style>body{color:#000; background-color: rgb(50, 140, 95);background-image:url('http://naturescrusaders.files.wordpress.com/2010/05/boreal-forest-canada.jpg');}#wrapper{width: 1000px;text-align: center;margin:0 auto;min-height:600px;}#overlay{position:absolute;z-index:-1;top:20px;left:5%;right:5%;min-width:1000px;background-color: rgb(50, 211, 95);height:1400px;opacity:0.80;filter:alpha(opacity=80); /* IE8 */border-radius:30px;border:1px solid #000;}h1{ font-size:36pt;color: white;}img{width:500px;background-color:#ccc;margin:8px;border:2px solid #000;}div.group img{width:300px;}p{margin:4px 8%;font-size:14pt;}footer{margin-top:15px;font-size:12pt;font-style:italic;font-weight:bold;}</style></head><body> <div id="wrapper"><h1>Welcome to Helpful Hints for Camping</h1><p>Camping is a very fun and exciting way to pass the time. It'sa 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 thispage I attempt to give some tips and tricks for new campers and maybeeven experiences ones.</p><img src="img/hiking.jpg" alt="Camping is fun"/><h2>Camping in Canada</h2><p>Camping in Canada is alot of fun even if it is a bit cold, butthat's alright, just bring a jacket.</p><img src="img/couple-camping.jpg" alt="Canadian camping"/><p>Photos can be side by side...</p><div class="group"><img src="img/hiking.jpg" alt="Camping is fun"/><img src="img/couple-camping.jpg" alt="Canadian camping"/></div><footer>©Copyright 2014 Darbok</footer></div><div id="overlay"></div></body></html>

Steven · April 1, 2014

I agree with Davej that, for the most part grids are overkill. But, that being said, I've recently finally gotten around to implementing one. I'm using Zurb's Foundation. It can be pretty overwhelming, but I just started out with a custom download with nothing but the grid itself. It's actually a joy to use, but it isn't for every project.

grid and me

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in