Wiki » User talk:Diogenese

Styling DIV tags

MediaWiki handle most page formatting with it's own markup and filters out unwanted markup entered by users, but some HTML markup is allowed.

The DIV tag is a generic HTML container that can be styled and placed anywhere you would like. In the image below, they're used to provide more information about the image without taking up much more space. That's one of many uses and an example modern CSS3 standards.

Contribute to a volunteer world-wide community

A wealth of information

Quick access to first time needs

Placing floating DIV tags

In order to place a DIV tag where you want, it has to be inside another DIV that has been positioned. A positioned container is one whos position style attribute has been set to one of: absolute, fixed or relative. The outside DIV container also need it's float style attribute set to either left or right and a minimum height so it doesn't float over the upcoming text.

<div style="
position:      relative;
float:         left;
min-height:    510px;">
...

HTML considers all contiguous whitespace to be a single space, so this has been spaced out so it's easier to see.

The image is place inside this DIV, along with the 3 dialog DIV containers. Being inside the first DIV, the image is also floating and the other DIVs can be placed over it. They need to have the position style attribute set to absolute and the top, left attributes set to the desired offset from the outside DIV's top, left corner. If the width style attribute is unset, it will expand to whatever space is available.

[[File:Mageiawelcome1.png|520px|Welcome to Mageia]]
<div style="
width:         120px;
position:      absolute;
float:         left;
top:           16px;
left:          396px;
...

Round Corners & Shadows

Most modern broswers support rouned corners (there is one problem child, whos name I will not mention here) and CSS3 shadows. In the past, there were a number of 3rd party (and still are) that handled the problem, but this all becoming part of the standard.

...
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px; 
...