Forum Home
Press F1

Thread ID: 139175	2015-03-23 02:23:00	HTML question - CONTAINER versus WRAPPER	BBCmicro (15761)	Press F1

Post ID	Timestamp	Content	User
1396996	2015-03-23 02:23:00	I am in the process of consolidating my various vanity sites into one. The sites have been written by various means over the last decade including hand-coding, Word Save-as, and now CoffeeCup. I am doing a lot of pasting and have got myself confused. I seem to have a lot more /div's than div's for example My question is what the basic organisation of the main div's should be. CoffeeCup seems to have it as follows (within the BODY): CONTAINER then a header that's constant across all the pages WRAPPER then a header and main content that varies with each page /WRAPPER /CONTAINER then various div's for navigation, footer, sidebar Is this how it should be (and do those extra /div's matter)?	BBCmicro (15761)
1396997	2015-03-23 03:13:00	Re write your code rather than copy and paste and ALWAYS keep a track of where you are. If you copy and paste you run the danger of things going pear shaped very quickly. If you have extra Divs then it means that you have a bunch of open divs on your page.. so comment everything out and start from the top and work your way down, line by line until you have closed all your divs. I normally put a basic color for each div on my style sheet like red, yellow, green,blue etc so that I can see where each div starts and finishes. As to container vs wrapper.. It either is fine, just make sure you are consistent. Also keep your coding frame works simple. Don't just jump onto a frame work because it sounds new and exciting. Make sure you know how your current set up works before you jump onto the next cool train in the station.	Webdevguy (17166)
1396998	2015-03-23 03:34:00	Well HTML 5 would be the version I would go down but anyways, depending on the layout, container and wrapper are pretty much the same thing. A page wrapper with sections inside it, usually keeping certain parts in their own container, like header, main content, and footer. Then within those containers, just more blocks for other things Cheers, KK	Kame (312)
1396999	2015-03-23 04:03:00	Well I'm sure that's good advice if I had pretensions towards professionalism or wanted a professional product. But I an a 68-yo amateur. I can alter things so that they look alright but ideally it should also look alright from another point of view. Like a different browser What I can't understand is what's the basic reason for having a WRAPPER within a CONTAINER	BBCmicro (15761)
1397000	2015-03-23 04:53:00	Well I'm sure that's good advice if I had pretensions towards professionalism or wanted a professional product. But I an a 68-yo amateur. I can alter things so that they look alright but ideally it should also look alright from another point of view. Like a different browser What I can't understand is what's the basic reason for having a WRAPPER within a CONTAINER Its just semantics as far as naming goes. As far as having a named div or divs within another named div is because you want to arrange the layout of your content aesthetically on the page. So you might have: <body> <div class"main-wrapper clearfix"> <div class"left-menu"> <ul> <li> Menu item one </li> <li> Menu item two </li> </ul> </div><--!end of div left menu--> <div class"right-content"> some content. </div><!--end of div class right-content--> </div><!--end of div main-wrapper--> In this case, the main wrapper contains a menu div and a content div which sit beside each other when floated left and right. Also just because you are only a hobbyist shouldn't stop you from producing a properly designed and coded website. And as mentioned earlier, If you are re doing the websites, code them as HTML5 rather than XHTML4. You can download the HTML5 template here https://html5boilerplate.com/ This article explains how floats work with CSS www.w3schools.com As far as how websites display in different browsers - ideally they should all display the same. That can be achieved by using a browser reset as part of your CSS style sheet, which comes as part of the HTML5 boilerplate.	Webdevguy (17166)
1397001	2015-03-23 10:04:00	Thanks for that. I've watched a few of the videos from the Boilerplate link. Seems like I should start from scratch on HTML5. (I'm also attracted by the audio and video possibilities) I thought that CoffeeCup would save me from having to think about coding but it turned out to be mainly a text editor. (Upper pane is the code, bottom pane is automatically rendered page with about 1 sec delay) It looks like I have to learn something and it might as well be HTML5	BBCmicro (15761)
1397002	2015-03-23 10:29:00	BBCmicro, Having a little know how is better to understand the code, but when redoing a site that has had a lot of work using different methods, I usually suggest starting from scratch. I don't go against WYSIWYG editors at all, but at least use one that does HTML 5, you know then that they have kept it updated. Knowing the code yourself will help you clean up the extras from the editor. Editor should help you get something out quicker though and can also help you learn a lot but never rely on its code to be the cleanest, it could teach you bad habits. Also look at containers like houses, a container inside a house (whole page) would be rooms (sections), a container inside a room is furniture (content). They are building blocks, flexible in a sense that you can actually shift rooms around (not likely in real and similar to sites, once layout is done it remains literally the same) and furniture (content can be moved to whatever room you like and even thrown away). Cheers, KK	Kame (312)
1397003	2015-03-23 17:28:00	Thanks for that. I've watched a few of the videos from the Boilerplate link. Seems like I should start from scratch on HTML5. (I'm also attracted by the audio and video possibilities) I thought that CoffeeCup would save me from having to think about coding but it turned out to be mainly a text editor. (Upper pane is the code, bottom pane is automatically rendered page with about 1 sec delay) It looks like I have to learn something and it might as well be HTML5 When rebuilding a website there are no short cuts, you need to know how the code works in order to fix or re write it. I use Sublime text for editing my code and open the file in a browser. Developers who want to code fast tend to use CoffeeScript. If you are going to learn HTML5 you can do it here developer.mozilla.org or here www.codeschool.com They will teach you CSS3 as well. CSS is an essential part of building a website.	Webdevguy (17166)
1397004	2015-03-26 07:26:00	Thanks for that. I've watched a few of the videos from the Boilerplate link. Seems like I should start from scratch on HTML5. (I'm also attracted by the audio and video possibilities) I thought that CoffeeCup would save me from having to think about coding but it turned out to be mainly a text editor. (Upper pane is the code, bottom pane is automatically rendered page with about 1 sec delay) It looks like I have to learn something and it might as well be HTML5 So how is it going with redoing your websites as HTML5?	Webdevguy (17166)
1397005	2015-04-04 03:08:00	Not so good. (Family pressures on time.) I have decided I can't get the reorganisation done (for a new site) before I renew my old site I think Coffee Cup does HTML5 www.coffeecup.com so I am tempted to not learn HTML5 but copy-and=paste into an HTML5 theme :mad: Must...resist... (thanks for those links)	BBCmicro (15761)
1 2