• Slider Background
ALLT BÖRJAR HÄR

Välkommen


BOKA BORD HÄR!

background

ÖPPETTIDER

  • MÅN - ONS 11:00-22:00
  • TORS - FRE 11:00-23:00
  • LÖR 14:00-23:00
  • SÖN - STÄNGT

MENY

La cucina è il cuore della casa

Antipasti | Pasta e risotto | Secondi | Dolci | Formaggi

Se vår meny

Dryckeslista

Buon cibo, buon vino, buoni amici

Aperitivi | Digestivi | Grappa | Vino | Spumanti | Birra

Se våra drycker
Footer background
Vanadisplan
Boka bord
© 2016 SWEDISH WEB DESIGN. Anderson

Item 5b (1):- Div with position: fixed
Item 5b (2):- Div with position: fixed

Div boxes - position absolute, relative and fixed

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
 problems    warning: works in some situations or some browsers or needs care to display as you wish    OK in Firefox, Safari, Opera, Google Chrome and IE

The five properties for position

Within the three main positioning schemes described later there are five position properties: static, relative, absolute, fixed and inherit. For simplicity these three are used in the following examples: absolute, relative and fixed. Positioning can apply to any block element; the examples that follow concentrate on use with div boxes (div tags) which are block elements and they make probably the commonest use of positions.
Position: static; is the default where, if it doesn't have any top, right, bottom or left positions, a block element just follows in the order of the code and starts a new line. It isn't usually necessary to state position: static unless you want to cancel one of the other properties. [Inline elements will be on the same line if there is room and position doesn't apply].
Use View, Source or right-click & Page Source in most browsers to see the coding for the following examples.

Divs with position: absolute;

1  The silver parent div box is position: relative; so that it flows in the required position in the page text. The parent when position: relative forms the container from which the position: absolute divs take their positions. If the parent containing div did not exist or didn't have position: relative; the position: absolute divs would appear at the top of the screen, taking their positions from the main page container or body of the whole page.
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
The CSS code in the main stylesheet is:-
  • div { padding: 3px; border: 1px solid black; }
  • .background { background-color: #c0c0c0; padding: 0; color: #335500; }
The HTML markup code is:-
<div class="background" style="position: relative; width: 728px; height: 200px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page-->
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">

position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
<div style="position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink;">

position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
</div>
<div style="position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow;">

position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
</div>
</div> <!--end of containing div class="background"-->

A beginner may find it easier to construct the whole page with position: absolute divs because they will all stay where they are put and each one can be repositioned without affecting the others. If the screen resolution is changed, all divs maintain their positions and scrolling may be required. However, learn to use position: relative for more fluid designs as you gain experience.
The order in which the codes appear in the html file is not significant as all divs take their positions from the body or a main container enclosing the whole content and do not follow the preceding code. In the example above the divs have been put in a parent container and must be within the container code, but in any order. The parent container is needed here because the text above may change position on the page if a viewer changes the text size, so the parent div is given position: relative to flow with the text.
The azure div is coded first but it makes no difference provided all three are coded within the parent container.
Position: absolute divs are usually positioned by coding top, left or right and width. Height is not essential if a div is to allow expansion down if larger text is chosen but other divs must be positioned to allow for this. You can also code bottom instead of top, but this may affect the position on the screen as browsers have different viewport heights.
Be careful if you use position: absolute divs in conjunction with divs which are not position: absolute (or position: fixed) because position: absolute (or position: fixed) divs are outside the normal flow and take no notice of any code outside them which means the text or image in divs which are not position: absolute (or position: fixed) would have no knowledge of them and flow over or behind them.
These divs, if not in a position: relative element, are often used for logos at the side of a page where they will not conflict with anything else or they are used to contain everything on a page so that all divs have a permanent position and none can move according to the way the code reacts to the window resolution like moving to a row below at lower screen resolutions.
One option for a beginner would be to apply the principle used for my example to the whole page. Use a div with position: relative as a containing div for the whole page with margin: auto so that it centers at high screen resolutions. Inside the containing div make all divs position: absolute so that positioning is easier for a beginner. The containing div will move sideways as it centers at different resolutions but the position: absolute divs inside will stay in their allocated positions. However, learn to use position: relative for more fluid designs as you gain experience.
Typical HTML markup (excluding doctype, html tags and head section items):-
<body>
<div style="position: relative; width: 728px; margin: auto;"> <!--This is the containing div position: relative; margin: auto; to center-->
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">

put all div content here
</div>
<div style="position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink;">

put all div content here
</div>
<div style="position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow;">

put all div content here
</div>
</div> <!--end of containing div-->
</body>

It helps to use background-colors for divs temporarily to see the size and position of each div and remove the colors later.

Divs with position: relative;

2  A div is a block element (see a list of others in the link). If you code several block elements like divs with position: relative or without stating a position, they will display one below the other. Elements with position: relative or no position must be coded in the HTML markup in the order that you want them processed (which is usually the order that you want them displayed on the screen).
[Here is a list of inline elements. Inline elements normally follow each other on the same line but that doesn't apply to divs unless you code as display: inline-block; which makes a block element behave like an inline element or apply a float which still leaves the element as a block element but allows it to float, either inside other content or on the same line as another floated div. See item 3.]
It isn't usual to state top or bottom and left or right positions with position: relative; however, these positions can be used to move a div relative to where it would normally be in the normal flow of the page content but the movement will leave a space where the div would have been positioned, so use these positions with care.
Text in block elements like <p>...</p> tags can also be moved relative to other text, eg slightly up or down, left or right. The positions are also used to create layers, for instance to move text relative to its normal position over a preceding image.
The fun starts when you use floats and mix floats with unfloated block elements. Top and left positions have been omitted below and float: left has been introduced. There is no need to use a parent container if the divs use position: static or position: relative because they will flow in the surrounding content.
position: relative; float: left; width: 140px; height: 70px; margin-right: 3px;
If floated divs are used with relative positioning without stating top and left positions, each div is positioned relative to adjacent divs or other block elements in the html file. An instruction to float will tell it to move relative to the normal relative position.
Without the instruction to float: left the div on the left would not have text flowing around it; all this text in <p>...</p> tags would start below the div because it's coded after the div.
The above example would float on the right within text if float: right was specified and if the div was placed before the text in the html file.
If divs have no stated width or height or are given percentages, with different screen resolutions or text size some divs will change in size creating a fluid layout and move the following divs so care has to be taken that page layout is not disrupted.

3
position: relative; float: left; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
position: relative; float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
position: relative; float: left; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
IMPORTANT: This paragraph starts with <p style="clear: both"> to clear the float (left or right or both) so that it does not start in the available space next to the pink div above. Floated elements don't give their height to the parent container so the floats must be cleared or the following element will appear too high up.
All divs with a float must be coded in the html file in the order in which they are to appear. The float: left tells the first div that it is ready to be part of a float sequence. Divs without a float will normally start on a new line and the first div with a float in a float sequence will normally start on a new line. All divs need float: left to be on the same line beside each other. Similar rules apply to float: right. Float: left and float: right can be used together and it's usual to code the float: right divs last.
It seems that whether a div floats next to a previous one is controlled by the previous div's float or lack of it and if a div without a float follows a div with a float, IE6 and IE7 behave differently from IE8 and above and Firefox, See the next example.
Divs can be made flexible by using percentage sizes so that they always suit the screen resolution and scrolling is not required.
For more examples of floated divs see Two and Three column layouts

4  The azure div has no float: left but there is space next to the pink div and the pink div has a float: left so the azure div occupies the space next to the pink div in IE6 and IE7 but in Firefox and IE8 and above the azure div completely covers the pink div although the text is below the pink div.
Note: if position: relative was omitted from the azure div it would still be below the pink div in IE8 and above and Firefox but the pink div would show; see example 4a on Two and three column layouts.
However, the yellow div has a float: left but the azure div does not, so the yellow div flips down as normal and goes as far left as it can, which is against the bottom of the pink div in IE6 and IE7 but to the far left in IE8 and above and Firefox.
position: relative; float: left; width: 240px; height: 150px; background-color: pink;
position: relative; width: 240px; background-color: azure; (no height and no float)
position: relative; float: left; width: 210px; height: 75px; background-color: yellow;

Divs with position: fixed;

5a  Position:fixed is not supported by IE6 but is by IE7 and above, Firefox, Opera and Safari.
In the above browsers this pink div displays at the top left of the screen where it has been positioned and stays in the same place while scrolling. The style is shown inside the div. However, IE6 does not support position: fixed and shows it in the position following this text where it has been coded and it will scroll.
Item 5a:- position: fixed; top: 70px; left: 30px; width: 220px; height: 40px;
A position: fixed div needs to be positioned with regard to the intended viewport size. A div with position: fixed; top: 700px will never show on a screen resolution of 800 x 600 and scrolling will not make it appear.
View this page in IE7 and above, Firefox, Opera or Safari at different screen resolutions and see that the position: fixed pink div will appear in the same position on the screen but the main content will shift as it is centered with margin:auto.
<div id="fixed1">Item 5a:- position: fixed; top: 70px; left: 30px; width: 220px; height: 40px;</div>
The styles are:-
#fixed1 { position: fixed; top: 70px; left: 30px; width: 220px; height: 40px; background-color: pink; }

5b  It is possible to fix the position of a div from the top of the window but allow it to center horizontally. This is useful if you want a menu bar at the top of the window but want it to center in different window resolutions. Two divs are required and two methods of coding are shown below. The html markup is similar for both but I have given each a different id to show both methods. Place the div at the very top of the page (not in a space like I have done) and give the divs a background-color so that the lower content doesn't show through when scrolling.
As in the previous item, the azure examples display at the top of the screen in modern browsers where they have been positioned and stay in the same place while scrolling vertically. IE6 does not support position: fixed in the same way and shows them in the position where they have been coded on the page and they will scroll.
Method 1 has a containing div position: fixed which is fixed vertically but also fixed to the left and right of the window. The inner div has a width and margin: auto to center within the window width of the position: fixed div:-
<div id="fixedtop1">
<div id="center250a">
Item 5b (1):- Div with position: fixed
</div>
</div>

The styles are:-
#fixedtop1 { position: fixed; top: 5px; left: 0; right: 0; border: none; z-index: 50; }
#center250a { width: 250px; margin: auto; background-color: #f0ffff; }

Method 2 has a containing div with a width and margin: auto to center. The inner div has position: fixed with the same width and fills the space of the containing div's width but will stay fixed vertically:-
<div id="center250b">
<div id="fixedtop2">
Item 5b (2):- Div with position: fixed
</div>
</div>

The styles are:-
#center250b { width: 250px; margin: auto; border: none; }
#fixedtop2 { position: fixed; width: 250px; top: 85px; background-color: #f0ffff; z-index: 50; }

I've put the actual markup code after the body tag because the div without position: fixed has a height which leaves a space in the page content if I place it anywhere else, but if you use this code for a menu at the top you can adjust the top margin of the following div to suit. The centering of the two methods is slightly different because one is taking account of the page body margin while the other isn't.

Generally

See w3.org para 9.8 for detailed comparisons of normal flow (obtained with position: relative or no stated position) and position: absolute. You will get confused reading this so experiment with a simple example.
w3.org para 9.3 says:-
In CSS2, a box may be laid out according to three positioning schemes:
1. Normal flow. In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
Care needs to be taken with text in div boxes. Some of the divs above are not large enough for largest size text and the display is different in IE6 and Firefox but usually means that either the div expands down over lower text (IE6) or the text expands out of the div (Firefox and IE7 and above).
Divs designed with percentage sizes can be given tenths of a percent but will result in 1px above or below the precise calculation. For instance, for a screen resolution of 800px wide giving about 780px net width, 25.1% is 195.78px which will result in either 195 or 196px depending on other content calculations.
Ideally divs would be designed with no height so that they are flexible in height if the viewer has set the browser to larger text. However, Firefox gives a div without a defined height a height of zero and this means that background colors or images are affected (see Firefox/IE background differences). It is best to give a div a fixed height in those circumstances.
See w3.org's Box Model here.
Remember that when a Doctype is included in the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths. Some older tutorials, including "CSS from the Ground Up" (see my Links page), state that Internet Explorer puts padding and borders inside the div box. This was the case with very early versions of IE and is still the case with IE6 to IE9 if no Doctype is used (but you should use one).
6  This shows how IE is the same as Firefox when a Doctype is used. The padding and borders are calculated outside the box. The image is 200px wide and the divs are width: 200px but the overall width is greater.
This div has the same size as the image below: 200 x 50 px with padding: 20px;
This div has the same size as the image above: 200 x 50 px with borders: 20px;
See Padding and borders without a Doctype to see the difference between IE6 to IE9 and Firefox when a Doctype is not used. IE10 displays the same as Firefox and most other browsers.
If you want a div to form part of text, you cannot put a div in a p tag, the p tag must be replaced by a div.
First part of text in a div 

text or contents of middle div

 remainder of text in another div.
The code for the above is:-
<div style="display: inline; border: none; height: 20px; padding: 0;">
First part of text in a div&nbsp;
</div>
<div style="display: inline; height: 20px; background-color: azure; padding: 0;">
text or contents of middle div
</div>
<div style="display inline; border: none; height: 20px; padding: 0;">
&nbsp;remainder of text in another div.
</div>

&nbsp; just creates a "hard" space, in other words makes sure a space is created in places where code sometimes does not provide a spacebar space.
If you want to obtain the appearance of a div by creating what looks like a colored box with text in it, an alternative to using three divs would be this:-
First part of text text or contents of middle part remainder of text.
The code for the above is:-
<p>First part of text <span style="background-color: azure; border: 1px solid black; height: 20px; padding: 0;">text or contents of middle part</span> remainder of text.</p>
It has the advantage that the text before and after the "box" is not contained in divs which could cause problems with the display at lower screen resolutions as they might flip down leaving space where text would normally continue on the same line.

Golden rules

Here are some golden rules, but with the complexity of positioning there are lots of exceptions:-
Position: absolute; if you put everything on a page in a block element (such as a div) with position: absolute each one will have its place without ever disturbing any other.
Position: relative; it is often not necessary to state this but it must be stated if position: absolute divs are inside it and are required to take their position from it. A certain amount of trial and error is often needed to find the correct combination of position: relative stated or not stated and floats stated or not stated. Floats are essential to display block elements side by side.
Don't use bottom: 0; or any other number to fix divs to the screen bottom or related to it. If you do and then use a smaller screen resolution you will find that other content also wants to reach the bottom and will be obscured by the div fixed to the bottom. Scrolling will not make it appear.
It is unreliable in IE6 but position: fixed divs for a footer do work in IE7 and above and Firefox as shown in Footer tied to bottom of screen. Be careful if you do it.

Notes
View/Source or View/Page Source in browser menu to see all html code.
The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheettutorial.css.
The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.
A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.
« Senaste inlägg Äldre inlägg » Startsida

Sidor

Använder Blogger.

Etiketter