Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

HTML and CSS for beginners – Part six

Author:   Michael Griffiths

Date created:   06 December 2016

[postpic=YellTunnelFin.jpg class=img-responsive center-block title=HTML and CSS for beginners - part 6, by Michael Griffiths of Griffiths Web Design alt=HTML and CSS for Beginners - Part Six, by Michael Griffiths of Griffiths Web Design style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/40][b][l]<< Go back to HTML and CSS for beginners part 5[/l][/b][/url] [l]Last time we talked about the CSS box model, padding, margin and borders. If you haven’t read that one yet then I would advise you to do so before continuing on with this guide. In this instalment of HTML and CSS for beginners we will be discussing the overflow property and positioning elements on the page. These are the last pieces of the puzzle needed to create layouts using CSS, which we will cover next time.[/l] [hdsm]The overflow property[/hdsm] [l]In CSS there is a property called overflow. This property addresses what to do with content that spills out of the confines of the element’s box. There are six values that you could assign to the overflow property.[/l] [unord] [item][l]visible – This is the default value. This will not clip the overflowing content, so the content will render outside the elements box.[/l][/item] [item][l]hidden – This will clip the content overflow of the element, the content that would be outside the elements box will be invisible.[/l][/item] [item][l]scroll – The content overflow is clipped but a scrollbar will be added to the element so the user can view the content in its entirety from within the confines of the elements box.[/l][/item] [item][l]auto – If the content is clipped then a scroll bar would be added to see the whole content of the element.[/l][/item] [item][l]initial – Sets the overflow property to its default value.[/l][/item] [item][l]inherit – The element will inherit the overflow property of its parent element.[/l][/item] [/unord] [l][b]Note –[/b] You can also use overflow-x and overflow-y to set different values for horizontal and vertical clipping of the overflowing content. overflow-x decides what to do with the content on the left and right edges if it overflows the element. Overflow-y decides what to do with overflowing content on the top and bottom edges.[/l] [hdsm]Positioning elements in CSS[/hdsm] [l]To position elements in CSS we use the position property. This property, position, can take one of four values.[/l] [l][b]Static –[/b] This is the default value for all elements. This will not put any special positioning on the element, the element will be positioned according the flow of the page.[/l] [l]So with that in mind the two style rules are the same.[/l] [code]div{ position:static; width:100px; } div{ width:100px; }[/code] [l]The top, bottom, left and right properties will have no effect on an element whose position is set to static.[/l] [l][b]Relative –[/b] This will position the element relative to its normal position.[/l] [l]When using relative positioning the top, bottom, left and right properties will adjust the position of the element relative to its normal position[/l] [code]div{ position:relative; left:20px; width:100px; }[/code] [l]This will position the div 20px away from the left margin of its normal position. A similar effect can sometimes be achieved using the margin property.[/l] [l][b]Fixed –[/b] This will position the element relative to the window. So if you scroll the page the element will still be in the same place on the screen.[/l] [code]div{ width:100%; height: 50px; position:fixed; bottom:0; }[/code] [l]This style rule will make the div be stuck to the bottom of the window, even if the user scrolls the div is still fixed to the bottom of the window.[/l] [l][b]Absolute –[/b] This will enable you to position the element at specific coordinates relative to its parent container. To use position absolute you need to have your element nested in an element that has its position set to relative, absolute or fixed. Elements that are absolutely positioned are taken out of the flow of the page and do not affect the positioning of elements around them.[/l] [code]div{ width:100px; height: 50px; position:absolute; top:0; left:0; }[/code] [l]This will position the div in the top left corner of its parent element (0 pixels from the top and 0 pixels from the left).[/l] [hdsm]CSS Floats[/hdsm] [l]What is float? Well float is a property in CSS that we use to position elements relative to the flow of the page.[/l] [l]Floats can be used to layout entire webpages or they can be utilised to layout smaller instances, for example the float property could be used to layout elements within element.[/l] [l]Float has four possible values[/l] [unord] [item][l]left – Places the element on the left and the elements then wrap around it.[/l][/item] [item][l]right – This will set the element to the right hand side and the other elements will flow around it.[/l][/item] [item][l]none – This will ensure that no floats are applied to the element.[/l][/item] [item][l]inherit – This will make the element inherit the float property from its parent element.[/l][/item] [/unord] [hdsm]Clearing the floats[/hdsm] [l]The float property has a sister, the clear property. The clear property is used to remove floats from an element.[/l] [l]There are several possible values for this property:[/l] [unord] [item][l]none - This is the default value of the clear property. This will allow floating elements on the right and left sides of the element.[/l][/item] [item][l]left - No floating element will be allowed to appear on the left of the element.[/l][/item] [item][l]right - No floating elements will be allowed on the right of the element.[/l][/item] [item][l]both - No floating elements will be allowed on either the left or right side of the element.[/l][/item] [item][l]initial - As with other properties that have this value this will set the value to the default.[/l][/item] [item][l]inherit – The element will inherit the clear property from its parent element.[/l][/item] [/unord] [l]Now we have covered some of the ways to position elements on a page I suggest you go and play around with it. A lot. Positioning elements sounds simple, and it is, but it can sometimes have unexpected results. [b]Practice! Practice! Practice![/b][/l] [l]I hope you found this article to be interesting, if so please share it around. In the next instalment of HTML and CSS for beginners we will be putting what we have learnt to good use by creating a layout.[/l] [url=http://www.griffithswebdesign.com/blog/post/40][b][l]<< Go back to HTML and CSS for beginners part 5[/l][/b][/url]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page