brynn Posted June 14, 2013 Share Posted June 14, 2013 (edited) Hi Friends,Several years ago, I learned the most basic version of HTML, where you could create a webpage layout using tables to define various sections on the page. Having recently learned that some of the tags I learned are no longer supported (in HTML5), I've set about to learn CSS. (I'll never need to code a really complex page -- just a few fairly simple pages now and then.) I've completed the Basic, Styling and Box Model tutorials here, and a few of the Advanced ones. And I've successfully made a simple page with background image and mostly text. What I haven't discovered yet, is how to define various sections of a webpage. It looks like, with CSS, tables are really only used for traditional tables. (I have that impression, because webpage layout isn't mentioned at all, in the Tables tutorial.) It looks like you could use boxes to lay out a webpage, but unless I somehow missed it, I don't see any examples throughout all the CSS tutorials. So my questions: How do you create a webpage layout using CSS? Do you use tables, like with the basic kind of html? Or boxes maybe? I found the display:inline declaration, and tried to use a span class to set 2 boxes side by side, but it didn't work. (div neither) Here's a copy of part of another page I made, which I'm just using for practice now. The boxes are on top of each other. Assuming boxes are a reasonable way of making a webpage layout, I would want 3 boxes side by side, with a little space in between. (Actually, what I want the 3 boxes for, is to contain 3 columns of text links, maybe without any borders or background. So if there's a better way than what I'm thinking, I'd be interested to hear about it.) Thanks for your help Edit -- I removed the code in this msg because it wasn't even close to what I needed. Now I've made something closer to what I need, but I have some more questions. Please see msg #5. Edited June 14, 2013 by brynn Link to comment Share on other sites More sharing options...
Goodthing07 Posted June 14, 2013 Share Posted June 14, 2013 Hello, Im not sure if I fullynunderstand your question but this is a the tutorial on how to layout a web page using divs instead of a table. http://www.w3schools.com/html/html_layout.asp . Hopefully that is of some help to you but if not maybe somebody else can come along and solve your problem. Link to comment Share on other sites More sharing options...
brynn Posted June 14, 2013 Author Share Posted June 14, 2013 (edited) Well, I've come up with a couple of ideas. 1 would be to set absolute positions. But I just found the float tutorial, and that seems to be a good solution, at the moment. I'll let you know how it goes But I'd still be interested to learn how webpage layouts should be approached, with CSS Thanks again! EditOh sorry, Goodthing07. I don't know how I missed your message. Thank you very much. I will have a look at that right away! Edit #2Oh yes, that exactly what I mean. I used to do that with tables. Hhmmm....I guess it looks like it can be done with div elements too, along with float. So that's what I'm working on. I'll let you know how it goes Edited June 14, 2013 by brynn Link to comment Share on other sites More sharing options...
brynn Posted June 14, 2013 Author Share Posted June 14, 2013 (edited) Ah-HA!! Yes, I've gotten it working, more or less. Still a few tweaks needed, but I've got 3 side by side "boxes" which are div elements! We can close this topic now or call it solved or whatever. And thank you very much! Edited June 14, 2013 by brynn Link to comment Share on other sites More sharing options...
brynn Posted June 14, 2013 Author Share Posted June 14, 2013 (edited) Hi again,Ok, I guess it's not as solved as I thought I've made a simple layout using 3 div elements, but I still have 1 problem with it. This seems like an easy question that you've probably heard a hundred times. When I resize the page, the div elements move and change dimensions. Also, both the div elements and other text on the page moves so that it overlaps the left graphic border. Is there any way to prevent that? Thank you very much Here's the code, in case you need it: <!DOCTYPE html><html><head><style>.icbg{background-image:url('url-of-img');background-repeat:repeat-y;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:1.0em;margin-left:15%;}.iccont p{text-align:left;}.iccont h1{text-align:center;font-size:1.4em;}.iccont h2{text-align:center;font-size:1.2em;font-weight:bold;}.iccont h3{text-align:left;font-size:1.2em;font-weight:normal;text-decoration:underline;}.iccont ol{list-style-type:decimal;}.iccont ul{list-style-type:disc;}a:link {color:#442178;}.beg{max-width:30%;background-color:#ffeeaa;float:left;margin:3px;padding:10px;}.int{max-width:30%;background-color:#aaeeff;float:left;margin:3px;padding:10px;}.adv{max-width:30%;background-color:#ffaaee;float:left;margin:3px;padding:10px;}p.unfl{clear:both;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1>Inkscape Tutorials</h1><br><br><div class="beg"><p>paragraph and some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><div class="int"><p>paragraph and some more extra text because the background colors didn't work</p><p>paragraph</p><p>paragraph</p></div><div class="adv"><p>paragraph and some more extra text because the background colors didn't work</p><p>paragraph</p><p>paragraph</p></div><p class="unfl">paragraph</p><h2>head2</h2><h3>head3</h3><ol><li>list item</li><li>list item</li><li>list item</li><li>list item</li><ul><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol></div></div></body></html> Edited June 14, 2013 by brynn Link to comment Share on other sites More sharing options...
newseed Posted June 14, 2013 Share Posted June 14, 2013 Are you trying to make the site a fixed width or fluid? You can adjust the css for the class .icbg by adding width: 990px; /*adjust to suit*/ . Also, instead of using width you can use min-width: 800px; /*adjust to suit*/ to tell it to keep a minimum width. If you are going to use fixed width then you can use margin: 0 auto; for class .icbg to center your page. Link to comment Share on other sites More sharing options...
brynn Posted June 15, 2013 Author Share Posted June 15, 2013 It's been my understanding that % should be used as much as possible, to allow the page to look ok across all different kinds of screen sizes and resolutions. So that's why I'm using %. When you suggested 990 px and 800 px, are those the best sizes for fixed widths, that will still look ok on all different kinds of screens? Unless I'm misunderstanding you, I don't think I would want to center the .icbg div, because the background graphic is a pattern type of border along the left side of the page. That's why there's a 15% left margin, so it won't cover up the graphic pattern border. The reason I decided to use a left side border, rather than something like a frame, or border around the whole page, is for the same reason I used % -- so it would still look ok on any kind of screen. If I use a graphic background that is a fixed width, it's the same problem. (I actually had a fixed width at 1 point, but it was a nightmare trying to get the background image exactly the right size so it didn't try to tile itself. And I assumed that it was only going to look right on my screen, or any screen just like mine. So I went to %.) Maybe I'm still missing something about this fixed width vs percent? Link to comment Share on other sites More sharing options...
newseed Posted June 15, 2013 Share Posted June 15, 2013 It's been my understanding that % should be used as much as possible, to allow the page to look ok across all different kinds of screen sizes and resolutions. So that's why I'm using %.Using % can be challenging when you are trying to cater to all types of screen sizes from smartphone to tablets to desktops. If you want your site to look exactly the same then you have to use % for everything including font sizes, padding, margins, line-heights, etc. When you suggested 990 px and 800 px, are those the best sizes for fixed widths, that will still look ok on all different kinds of screens?The 990 is my default standard width because it's the most common and easiest to read. Think of it as a 8.5 x 11 paper. It's far easier to read than if you were to use the entire wide screen. However, it doesn't mean you can't use % but instead it means you have to become more aware of how easy or difficult for the user to read the content. The min-width can be anything you want. I mentioned this because you may want your design to be fluid but then the layout breaks when it's sized down to a certain point. Unless I'm misunderstanding you, I don't think I would want to center the .icbg div, because the background graphic is a pattern type of border along the left side of the page. That's why there's a 15% left margin, so it won't cover up the graphic pattern border. The reason I decided to use a left side border, rather than something like a frame, or border around the whole page, is for the same reason I used % -- so it would still look ok on any kind of screen. If I use a graphic background that is a fixed width, it's the same problem. How about small screens like smartphones? Already you are consuming 15% of it's screen size leaving the rest to be crunched in. You best option is to define css for each type of screen size using media query so that it lays out nicely for all types of devices. Link to comment Share on other sites More sharing options...
brynn Posted June 15, 2013 Author Share Posted June 15, 2013 (edited) Oh wow, I never even thought of smart phones and tablets! It's enough of a challenge for me, to just consider different computer screens. So you're saying that it can be written in the code, that the browser should look to see what size the screen is, and present the page accordingly? Interesting to see on the same page you linked, a poll asking for opinions on whose resposibility it should be, to see that a webpage looks good on mobile devices -- the page's designer or the mobile device. (I'm not quite sure how the device could do that, but this (mobile devices) is FAR outside my understanding. ) That would indicate to me, that perhaps the issue is debatable, even among the pros.....yes? Because this will not be a stand alone webpage, I think I can put aside the issue of mobile devices, at least for now. I have no idea how the site, for which this article is destined, handles mobile devices. And while occassionally I may have members using a mobile device, perhaps to check messages, I don't think it's likely they would be reading my article from a mobile device....at least not presently. But that's definitely something I'll want to consider in the near future! Ok, for now..... The page doesn't have to look exactly the same on all screens. I can live with little spacing issues here and there. But if an image gets shifted, or say 3 images which are supposed to be side by side, get stacked on top of each other when the window is made smaller -- that wouldn't be ok with me (.....unless every single other option has been eliminated, for whatever reason). If you want your site to look exactly the same then you have to use % for everything including font sizes, padding, margins, line-heights, etc.Well, I used % as much as I thought was possible. I don't remember seeing anything about using % for padding and margins. But I'll try it. What about images, where you have to put the width and height in pixels, in the img tag? Are images the only exception to the "all percent" requirement? Or is there some way to code so that the image stays put? Ohh....maybe using float? How do you write the font size in percent? Oh wait, I already know something about that. In the Font Styling tutorial, it showed how to use percent and em together, so it will work in all browsers. Is that what you mean? The min-width can be anything you want. I mentioned this because you may want your design to be fluid but then the layout breaks when it's sized down to a certain point.Are you saying that using a min-width will prevent the layout from breaking down when the window is smaller? Thanks for your help Edited June 15, 2013 by brynn Link to comment Share on other sites More sharing options...
newseed Posted June 15, 2013 Share Posted June 15, 2013 (edited) Oh wow, I never even thought of smart phones and tablets! It's enough of a challenge for me, to just consider different computer screens. So you're saying that it can be written in the code, that the browser should look to see what size the screen is, and present the page accordingly? Interesting to see on the same page you linked, a poll asking for opinions on whose resposibility it should be, to see that a webpage looks good on mobile devices -- the page's designer or the mobile device. (I'm not quite sure how the device could do that, but this (mobile devices) is FAR outside my understanding. ) That would indicate to me, that perhaps the issue is debatable, even among the pros.....yes?It's like the browser wars a few years ago forcing IE and other browsers to start using W3C compliant. Even today there still some differences between IE10 and Firefox but not much. Because this will not be a stand alone webpage, I think I can put aside the issue of mobile devices, at least for now. I have no idea how the site, for which this article is destined, handles mobile devices. And while occassionally I may have members using a mobile device, perhaps to check messages, I don't think it's likely they would be reading my article from a mobile device....at least not presently. But that's definitely something I'll want to consider in the near future!Don't be surprise by how many people use their mobile devices to view websites. I don't have any statistic but the demand is increasing. Ok, for now..... The page doesn't have to look exactly the same on all screens. I can live with little spacing issues here and there. But if an image gets shifted, or say 3 images which are supposed to be side by side, get stacked on top of each other when the window is made smaller -- that wouldn't be ok with me (.....unless every single other option has been eliminated, for whatever reason). Well, I used % as much as I thought was possible. I don't remember seeing anything about using % for padding and margins. But I'll try it. What about images, where you have to put the width and height in pixels, in the img tag? Are images the only exception to the "all percent" requirement? Or is there some way to code so that the image stays put? Ohh....maybe using float?Remove the width and height from your image tag and apply the css to have only width: 100% (no need for height but you can use either one or both). The image file itself has to be sized to fit the maximum screen size for it to be visually of good quality. The drawback is the for those using mobile devices will require to download the same size (in KBs) file but it will shrink down visually to fit. The solution is to use media query to download a smaller file specifically for the device's screen size. See that link I gave you about media query. How do you write the font size in percent? Oh wait, I already know something about that. In the Font Styling tutorial, it showed how to use percent and em together, so it will work in all browsers. Is that what you mean?font-size: 100%; Are you saying that using a min-width will prevent the layout from breaking down when the window is smaller?Yes. Keep in mind that some mobile devices (including tablets) have a setting to display desktop view which will allow your site to fit a smaller screen. The drawback for the user's point is that it can be either too small to read or have to deal with left/right scroll. There are also a meta tag that might help some:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">You might google this since I don't have any in depth details about this but I know there are many other parameters you can add to it. Edited June 15, 2013 by newseed Link to comment Share on other sites More sharing options...
brynn Posted June 15, 2013 Author Share Posted June 15, 2013 Oh, thank you so much -- what a wealth of info I've learned here! Just a couple more questions, for clarity. When I set the minimum width, should that be in percent, just like everything else? Or should it be in pixels? I've actually tried both percent and pixels, as well as a mix of both. Either way, it prevents my side by side div elements from getting stacked up, when I make the page smaller. But the one on the left, and left edge of the text, still slightly overlap the graphic border on the left. When you say use text size 100%, do you mean like in the tutorial, where you use 100% in the background element and em in the p and h elements? Or do you mean ALL percent? 100% text appears to make the 1em size of text. So for headings and stuff, I would have to use values over 100%, like 140%, for example. Is that what you meant? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 15, 2013 Share Posted June 15, 2013 If you use percentage it will still remain fluid, and the layout could still be broken, you want the minimum pixel width before the sites layout becomes broken. Link to comment Share on other sites More sharing options...
brynn Posted June 16, 2013 Author Share Posted June 16, 2013 Ok, I have everything % except for the minimum width. But I'm still getting some text overlapping the left border image. Maybe it's something about how I have it set up? Here's the current code, below (it's just a practice page). I left the real URL of the background image, so you can see what I mean about the left border (if you wanted to open in your browser). But here's a screenshot for convenience. Hhmmm...... I thought I had made the background image in such a way that it's not fixed, but maybe I'm wrong. Maybe it's fixed after all? Maybe that's the problem? Oooohh....I'll bet that's it! Ok, well I've had a long day coding, so I think I shut down for the night, and pick it up fresh tomorrow. But I'll bet I can make that background image.....maybe 200 to 300 px narrower, and that will be enough to solve the problem. I'll let you know how it goes tomorrow. Everyone who's made comments in this topic, thank you very, very much! <!DOCTYPE html><html><head><style>.icbg{background-image:url('http://forum.inkscapecommunity.com/tp-files/tp-articles/images/lbbg1.png');background-repeat:repeat-y;max-width:100%;min-width:800px;font-size:100%;}.iccont{font-family:Verdana,Geneva,sans-serif;font-size:100%;margin-left:12%;}.iccont p{text-align:left;}.iccont h1{text-align:center;font-size:140%;}.iccont h2{text-align:center;font-size:120%;font-weight:bold;}.iccont h3{text-align:left;font-size:120%;font-weight:normal;text-decoration:underline;}.iccont ol{list-style-type:decimal;}.iccont ul{list-style-type:disc;}a:link {color:#442178;}.beg{max-width:30%;background-color:#ffeeaa;float:left;margin:0.5%;padding:1%;}.int{max-width:30%;background-color:#aaeeff;float:left;margin:0.5%;padding:1%;}.adv{max-width:30%;background-color:#ffaaee;float:left;margin:0.5%;padding:1%;}p.unfl{clear:both;}</style></head><body><div class="icbg"><br><br><div class="iccont"><h1>Inkscape Tutorials</h1><br><br><div class="beg"><p>paragraph and some extra text to fill out the entire width of the div element some extra text to fill out the</p><p>paragraph</p><p>paragraph</p></div><div class="int"><p>paragraph and some more extra text some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><div class="adv"><p>paragraph and some more extra text because some extra text to fill out the entire width of the div element</p><p>paragraph</p><p>paragraph</p></div><p class="unfl">paragraph</p><h2>head2</h2><h3>head3</h3><ol><li>list item</li><li>list item</li><li>paragraph and some more extra text because some extra text to fill out the entire width of the div some extra element <img class="bot" src="http://inkscapecommunity.com/img/insert.png" />. paragraph and some more extra text because some extra text to fill out the entire width of some extra the div element.</li><li>list item</li><ul><li>nested list item</li><li>nested list item</li></ul><li>list item</li><li>list item</li></ol></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 16, 2013 Share Posted June 16, 2013 Depends on user screen resolution, and width, a 12% margin-left: would be different compared from 1024 to 1920, where you are trying to prevent overlap to relation to fixed border from left edge. Link to comment Share on other sites More sharing options...
brynn Posted June 18, 2013 Author Share Posted June 18, 2013 I thought I replied to this yesterday??? Ok, well this is basically what I thought was posted: Depends on user screen resolution, and width, a 12% margin-left: would be different compared from 1024 to 1920, where you are trying to prevent overlap to relation to fixed border from left edge. Yes, that's exactly why I'm using % for everything. The problem is (I now realize) the image background is a fixed width. Since the problem about page layout is solved, I should probably close this topic, and start a new one on the remaining issue when the page is made smaller and the content overlaps the background graphic. And thanks again to everyone who contributed to the solution Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now