Tweet
Today we are going to create a header and a footer with fixed position. Our page will have a center part which will naturally overflow when needed, while the header and the footer will stay where they are (top and bottom). The content in the central part will eventually go under the header (when scrolled down) and under the footer (if longer than the viewport).
Nothing complicated, but we will need some little CSS tricks.
Let's start.
Web development, web design and programming.
Showing posts with label positioning. Show all posts
Showing posts with label positioning. Show all posts
Wednesday, 25 January 2012
Monday, 7 November 2011
CSS: the use of styles in Apple homepage
Tweet
As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.
The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.
Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.
Please follow me...
As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.
The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.
Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.
Please follow me...
Wednesday, 25 May 2011
ASP: FPDF MultiCell with multiple lines and positioning
Tweet
As described in another post (ASP: Create PDF with FPDF), FPDF allows to create PDF files dynamically. I described how to create text boxes using MultiCell. I assume you already know how to do it, and I believe you might have encountered a little problem with the cells positioning. Let me explain it.
As described in another post (ASP: Create PDF with FPDF), FPDF allows to create PDF files dynamically. I described how to create text boxes using MultiCell. I assume you already know how to do it, and I believe you might have encountered a little problem with the cells positioning. Let me explain it.
The positioning
When we position a multicell, we use a code like:
pdf.SetXY 8,156
pdf.setfillcolor 197,198,200
pdf.MultiCell 40,4,"Hello!",0,0,1
The above snippet is taken from the aforementioned article. Basically we set the X and Y position of the multicell, the background colour and then we place the multicell using different parameters (width, height, text, border etc.)Friday, 18 March 2011
CSS: positioning
Tweet
Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:
Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:
- static: this is the standard way of positioning; the element will be displayed following the normal flow of your page;
- fixed: a fixed positioning will place the element in a fixed position; the element won't move even if you scroll down the page;
- relative: with a relative positioning the element will stay relative to its normal position;
- absolute: the element will be positioned relative to the first parent that has a position other than static; if there's not such element, <html> will be that element.
Subscribe to:
Posts (Atom)