Jump to content

Recommended Posts

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;
}
Link to post
Share on other sites

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>
Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...