Page control with DIVs - Chris Linford Get Going Guides



Home Video Tutorials Setting up your first website How to create a podcast Using Freeway software Wordpress Get Going Software Skills HTML4 Coding Introduction to HTML History of HTML Creating HTML Domains and Hosts HTML management File Names Uploading your site First web pages Basic HTML Advanced web pages HTML validation Meta Data Leaving Notes in your code Colour in HTML Hexadecimal colour Backgrounds Background colour Background images Text in HTML Fonts Font families Font sizes Changing colours Alignment Complex control Text links Text and images Horizontal rules Images Gif and PNG JPEG Images in HTML Text wrap Alt tags Buttons Lists Unordered Lists Ordered Lists using your own icon Nested Lists Tables Basic table Horizontal Merged Cells Vertical Merged Cells Framesets Basic frameset Fixed column Interactive panel Borders 3 page frameset Scrolling frame CSS What is CSS Basic CSS Changinging Links Embedded CSS CSS and Classes text styles DIVs Basic DIV Page control with DIVs Page layout control tables Page layout control DIV DIV and CSS Layout DIV and Classes Page layout No tables Overlaying DIVs Fixed layouts Java Rollover HTML5 Coding HTML5 Doctype Refresh page Adding java files Embedding Java HTML5 pages HTML5 header CSS and HTML5 Header Add image to Header HTML5 Footer HTML5 Footer navigation HTML5 Articles HTML5 Asides Navigation panels HTML5 Fallback Nav bar on the left Geolocation Canvas Canvas background Shapes and fills Draw a square Draw a triangle Draw a circle Add a stoke Stroke and fill Drawing outside the canvas Transparent fill Linear gradient Diagonal gradient Radial gradient Pattern fill Drawing Drawing lines Line ends Joining styles Curves Bezier curves Text Adding text Stroke text Drop shadow Freeway Overview Introduction Support Getting started Set-up First page FTPset-up Previewing your site Tool bar Site management Site panel options Pages New pages Master pages Meta Data Images Placing images Controlling images File Formats Effects Combined images Layers Text HTML text CSS Images and text Flowing text Graphic text Special effects Changing text format Interaction Hyperlinks Buttons Image Maps Actions Overview Page Actions Meta Data Action Insert Actions Item Actions Rollovers Slaves CSS Menus HTML code Add to header Add to page Joomla 1.5 Installing CPanel Installing Making changes Articles Creating Home Page Editing Articles Using Parameters Adding images Contact page Adding a YouTube video Menus Creating Menus Changing names Adding more menus Sub Menus DropDown Menus Multiple menus Templates Modifying templates Editing templates Installing templates Creating template Using Modules Adding search engines Adding logins Managing Users Search Engines Metadata SEO Global Local Site add-ons Custom 404 Flavicon AdSense Mobile Sites Phone redirect Phone browser control Screen rotation 3rd party solutions IE compatibility Social Media Resources Add a Tweet button Add a follow button Add Facebook like button Google Fonts Google Fonts example Get Going Downloads HCI/UCD slides Introduction to coding Typography File Formats Photorealism Colour Games Industry Xbox packaging from Xbox website From this site Contact me


					Code for Centred page which is 750 pixels wide <div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:750px"> <img src="icon.gif" border=0 width=750 height=130 alt="item1" style="float:left"></div> Code for Left aligned page which is 750 pixels wide <div id="PageDiv" style="position:left; min-height:100%; width:750px"> <img src="icon.gif" border=0 width=750 height=130 alt="item1" style="float:left"></div> Code for Right aligned page which is 750 pixels wide <div id="PageDiv" style="position:right; min-height:100%; margin-left:auto; margin-right:0px; width:750px"> <img src="icon.gif" border=0 width=750 height=130 alt="item1" style="float:left"></div>
	Page control with DIVs Divs allow you to have a set page size for your website. This helps you to control the design of your page, rather than the "rubber-banding" effect you may have in simple HTML. This site has a set page size. In the HTML code you can define the layout of the whole page using DIVs in the <body> section of the code. All the design aspects of your page and content should come after the opening <div> command and before the closing </div> command. You can identify this DIV by giving it the ID of "PageDIV" You can also have the page be aligned in the left, right or centred on the browser. Normally centred is all you would use. The only bit of code that changes is the margin. In the code sample I have placed an image to demonstrate where the content should go. You should replace this with your own content. Note: you can use table layouts within a DIV