Search the Community
Showing results for tags 'page layout'.
Found 2 results
-
Hi, I am having trouble with the page bottom of my website. It is not showing consistently when viewed in different browsers. Chrome and internet explorer seem to be pretty similar, however in safari the information sometimes spills over the page bottom. What is the best way around this? Do i need to get some kind of code to get the different browsers to respect the spacing on my page? Please have a look at: http://www.mygraphicdesign.com.au/pagebottom/faq/index.html What can i do to make this display correctly at the bottom in the different browsers! Another page is: http://www.mygraphicdesign.com.au/pagebottom/index.html As an example Dont look at the other pages as they are the old site. The two posted above are my new site so only for these two pages please. The only solution i have thought of so far was to make the page bottom really really big so that at least it does not get cut off on some of the browsers, but it doesn't really look that great =( Please help!!!! I have no idea how to fix this!!!
-
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; }
