Murdernickel's Safehouse

EU countries – including Ireland and Poland – sign ACTA treaty

2012-01-28T14:08:00.000+00:00

The Anti-Counterfeiting Trade Agreement (ACTA) – which is seen by critics to be an international version of the controversial SOPA bill – was been signed by the EU and member countries, including Ireland and Poland, at a ceremony in Tokyo today.

Despite protests in Warsaw that saw 20,000 people take to the streets, Poland signed the controversial ACTA deal in Tokyo, Poland's ambassador to Japan, Jadwiga Rodowicz-Czechowska, told Polish media.

ACTA is a treaty whereby countries agree to deal with intellectual property infringement in a similar fashion, particularly in areas like music, movies, drugs and fashion, where intellectual property theft is common.

The clandestine nature of negotiations between the signing nations and the fact that in relation to internet piracy it initially recommended 'three strikes' remedies have only served to stoke up opposition from the public.

According to the Electronic Frontier Foundation, it contains several features that raise concerns for consumers' privacy and civil liberties, as well as legitimate commerce, innovation and the free flow of information.

ACTA, EFF argues, also limits developing countries' ability to choose policy options that best suit their domestic priorities and levels of economic development.

Either way, the treaty was signed today by European nations, including Belgium, the UK, Austria, the Czech Republic, Denmark, Finland, France, Bulgaria, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Poland, Portugal, Romania, Slovenia, Spain and Sweden.

The signing took place at a ceremony at Japan's Ministry of Foreign Affairs.

The treaty has already been signed by Australia, Canada, Japan, South Korea, Morocco, New Zealand, Singapore and the US.

CREDIT: Silicon Republic

Razer Project Fiona

2012-01-14T16:22:00.000+00:00

Razer’s prototype tablet, Project Fiona, packs some serious power. Watch it run Skyrim on ultra high quality settings, 1280×800, resolution, with what appears to be a pretty solid frame rate.

While the video is impressive, it does raise questions about battery life and ergonomics. High-end video cards chew up a ton of power; will you be able to play Skyrim for more than a few minutes before needing to jack in to an outlet? Will holding that tablet by the handles be comfortable for a full gaming session?

Fiona will release in Q4 of this year at an estimated price of “below $1,000.”

Happy New Years!

2012-01-01T16:05:00.002+00:00

I wish you all a Happy New Year!
-M

Happy Holidays

2011-12-20T18:24:00.000+00:00

I hope everyone has an excellent holiday season and a Happy New Year!
-M

Xperia Play Price Drop

2011-12-08T15:21:00.000+00:00

The Sony Xperia Play has received a very surprising price drop, Down to 170 Euros on pay as you go. The question is, is it worth the money now? I want to hear from you guys, would you buy this device at it's new price point?

Update 15 Cyanogen mod Vodafone 845 Gingerbread

2011-11-19T19:34:00.000+00:00

Update 15 for CyanogenMod for the Vodafone 845 is now out! This adds updated CyanogenMod Sources.

Get CM7.1.0 with Kernel 2.6.32-9-perf here:
http://www.mediafire.com/?5jcm843ew6v5smc

Check out the official project page here:
http://forum.xda-developers.com/showthread.php?t=1096075

Happy Halloween!

2011-10-31T14:10:00.000+00:00

Happy Halloween everyone! I hope you all have a good night!

iPhone 4S

2011-10-26T19:53:00.000+01:00

Source: BBC

Apple has unveiled the latest iteration in its iPhone range, but there was no sign of the widely rumoured iPhone 5.

The iPhone 4S, as the model will be known, boasts an improved camera and significantly extended battery life.

It will run the latest iOS5 operating system, which is set for release on 12 October.

The event was the first major announcement for new boss Tim Cook who took over from Steve Jobs in August.

The iPhone 4S, which will go on sale on 14 October, will be available in 16GB, 32GB and 64GB models - in both black and white.

It has the same look and feel as the existing iPhone 4 which was launched 15 months ago.

However, Apple said that updates to iOS meant the phone would boast some "200 new features".

Shares in Apple fell by almost 5% within minutes of the eagerly anticipated launch, with analysts saying that investors and Apple fans had expected the latest version to be a more radical improvement over its predecessor.

However, the company's shares later regained most of their losses to close down just 0.6%, albeit underperforming the NASDAQ index as a whole.

Voice control

Among the additions is an "intelligent assistant" that allows users to ask questions aloud and receive detailed answers back.

Siri, which began life as a third-party app, was purchased by Apple in 2010 but has yet to appear within its software.

Luke Peters, editor of gadget magazine T3, said that the software announcements would do just enough to keep Apple fans interested in the face of strong challenges from rival smartphone manufacturers.

"Some people were looking for a brand new phone and they haven't got that today, so some will be disappointed," he told BBC News.

"But with the update to iOS5 and Siri that could be enough to sway people to make the investment."

Disappointment

Other industry watchers were less charitable about the iPhone refresh, and the non-appearance of the iPhone 5.

Gareth Beavis, phones editor at TechRadar said that the new hardware would leave many people underwhelmed.

"It was quite disappointing. I think there is going to be a lot of anger from users expecting something big bold and quite exciting after a long time of waiting from the iPhone 4.

"People will buy this in their droves, but Apple has missed a trick by just releasing the exact same phone again with marginally upgraded specs."

Details of the new phone were unveiled by Apple's Philip Schiller

For Apple's new chief executive, the event was as much about making a statement about his leadership as it was new products.

Tim Cook had previously acted as interim boss, looking after the company while Steve Jobs was on sick leave.

Unlike his charismatic predecessor, Mr Cook left the biggest announcement of Tuesday's event to a colleague - marketing boss Phil Schiller.

"Maybe he wants to bring other people to the forefront by letting others speak on his behalf," said Gregory Roekens, chief technology officer at marketing firm Wunderman.

"But in terms of style, it was underwhelming. People were expecting iPhone 5, but instead it's almost fixing the weaknesses the previous phones had.

"It will be interesting to see how people react to that."

Installing CyanogenMod 7.1 Android 2.3.5 Gingerbread on a Vodafone 845 (Huawei U8120)

2011-10-18T20:05:00.000+01:00

The Vodafone 845 is one of the best budget Android phones on the market that is below 100 Euros.
The only downside to the phone is it comes with Android 2.1 Eclair; today I will be showing you how to install a fully working version of Android 2.3.5 Gingerbread onto your phone. This ROM comes with ADWLauncher, Overclocking built in up to 748MHz, and more.

I am not responsible for any damage to your phone

We begin by making a NAND backup of your phone in recovery mode, to do this power on your phone while holding Accept call and Volume Up. Once you have completed this restart your phone. Open up the app market and install "ROM Manager". Flash the phone with ClockworkMod Recovery 3.0.05 for Huawei Ascend in ROM Manager. Download CM7.1.0 with Kernel 2.6.32-9-perf here, Copy it to your microSD. Restart your phone into Recovery mode again by powering it on while holding Accept Call and Volume Up. Wipe your phone with Recovery mode and install the .zip file from SDCard.

To get SD Mount to work format your SDCard in Recovery for Ascend.

To get Google Apps download the version for CyanogenMod 7 here. Rename the .zip to update.zip and install it as an update from SDCard in Recovery.

Working:

RIL

Audio

Bluetooth

Wi-Fi

Wi-Fi Hotspot

Key lights

Sensors

D-pad

OC Kernel (122-748MHZ)

SDCard mount via notification bar (only read file)

Fixed GPS

Fixed AGPS

Fixed layout in usb mass storage screen & dialer

Fixed Framework

YouTube fixed

Better screen adjustment

Camera Fixed

Video recording Fixed

Calibration support

Bugs/Not working/TODO:

Missing FM

There is some lag after some apps are closed

Fix broken clock layout

Headset mic problems (maybe fixed)

SD card mount not working. use Qtadb

Steve Jobs Dead at 56

2011-10-08T17:43:00.003+01:00

From Reuters, (( Steve Jobs, who transformed the worlds of personal computing, music and mobile phones, died on Wednesday at the age of 56 after a years-long battle with pancreatic cancer. ))

This comes at a total shock to me. While I knew he was sick, before retiring, but I didn’t think it was that bad.

While I am not an Apple guy, I have to give Jobs credit for retaking his company and completely reinventing it. Jobs had the iMac and the Power Mac look completely different from the PC market and design, thus giving the Apple brand a different vibe and customer base. Out of that brand, another group of products were born via the iPod, iPhone, and iPad.

Jobs also bought Pixar from George Lucas. From there, he helped turned the company from a FX branch to a movie studio that still makes millions today and has reshaped Disney. Jobs’ influence has changed the creative way Disney runs its company.

Anyway, Steve Jobs will be missed.

Razer Blade Specs

2011-10-01T12:55:00.001+01:00

Here are the technical specifications for Razer’s new gaming laptop called, Blade. Razer claims it to run next-gen games like a breeze and is the ultimate weapon for gamers who love portability.

Technical Specifications

Processor:

Intel Core i7-2640M processor.
Dual core – 64Bit.
CPU: 2.8Ghz / 3.5 GHz (Base/Turbo).

Chipset

Intel Mobile Express Series 6 PCH “Cougar Point” chipset.

Memory

8GB of 1333 MHz DDR3 memory.

Display

17.3″ (Diagonal).
16:9 ratio.
1920 x 1080 LED back-lit.

Graphics & Video

Integrated graphics for mobile mode.
Next generation Nvidia discrete GPU (GT 555M) with 2GB dedicated GDDR5 and Optimus Technology.
Built-in HD webcam.

Storage

320GB 5200RPM SATA.

Connections & Expansions

HDMI connector.
1x USB 3.0
2x USB 2.0 (always on power).
3.5mm audio microphone/headphone combo jack.
Gigabit Ethernet port.

Battery

Integrated 60Wh battery.

Communications

Wi-Fi wireless networking 802.11 b/g/n compatible.
Bluetooth 3.0

Size & Weight

Width: 16.81 inches (42.7 cm).
Depth: 10.90 inches (27.7 cm).
Height: 0.88 inches (2.24 cm).
Weight: 6.9 pounds (3.16 kg).

Short break

2011-09-11T21:32:00.001+01:00

I'm going to be taking a short break from blogging.

Catch you guys later.

Advanced CSS3 Tutorial 12: User Interface

2011-09-09T12:00:00.000+01:00

In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
The resize property is supported in Firefox 4+, Chrome, and Safari.
The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-.
The outline property is supported in all major browsers, except Internet Explorer.

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

div
{
resize:both;
overflow:auto;
}

Box Sizing
The box-sizing property allows you to define certain elements to fit an area in a certain way:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
Outlines do not take up space
Outlines may be non-rectangular

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Advanced CSS3 Tutorial 11: Transitions

2011-09-08T12:00:00.000+01:00

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
This is also using Pseudo Classes.
Here is an example of what we'll be doing today: http://dark-knight.net/example2.html

This isn't supported by Internet Explorer.

p {
color:#000;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
p:hover{color:#f00;}

"transition:color 1s ease-in" It transitions the color slowly, and takes 1 second.

"p:hover{color:#f00;}" is a Pseudo Class that tells the browser when <p> is hovered over to change the color.

Advanced CSS3 Tutorial 10: 3D Transforms

2011-09-07T12:00:00.000+01:00

CSS3 allows you to format your elements using 3D transforms.
At the time of writing this is only supported by Chrome and Safari which use the prefix '-webkit-'.

The rotateX() Method
With the rotateX() method, the element rotates around its X-axis at a given degree.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

The rotateY() Method
With the rotateY() method, the element rotates around its Y-axis at a given degree.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Advanced CSS3 Tutorial 9: 2D Transforms

2011-09-06T12:00:00.000+01:00

A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

Support

Internet Explorer 9 requires the prefix -ms-.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.

2D Transforms

The translate() Method
With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

The matrix() Method
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Advanced CSS3 Tutorial 8: Text Effects

2011-09-05T12:00:00.000+01:00

Today I'll show you have to add text shadow and word wrap.

text-shadow

In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Note: This is not supported in Internet Explorer yet.

word-wrap

If a word is too long to fit within an area, it expands outside.
n CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

p {word-wrap:break-word;}

Advanced CSS3 Tutorial 7: Image Sprites

2011-09-04T21:34:00.000+01:00

An image sprite is a collection of images put into a single image file.
A web page with loits of images can take very long to load and generates multiple server requests.

Here's an example of a Image Sprite picture:
http://www.w3schools.com/css/img_navsprites.gif

With CSS we specify it to show just the part we need:

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Advanced CSS3 Tutorial 6: Image Opacity/Transparency

2011-09-02T12:00:00.002+01:00

Example 1 - Transparent Image

First we shall create a transparent image with CSS.

You would use the following source code:

<img src="klematis.jpg" width="150" height="113" alt="klematis" style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
Tip: The CSS3 syntax for transparency is opacity:x.
In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Example 2 - Image Transparency - Mouseover Effect

The code looks like this:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.
The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.
When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example 3 - Text in Transparent Box

The source code for this looks like this:

<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.

CSS3 and HTML5 Example 2: Image Gallery

2011-09-02T12:00:00.000+01:00

The following image gallery is created with CSS, Create two documents, a HTML document and a CSS one. You will also need 4 images for the this Gallery.

In the CSS document put the following:

div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

In the HTML document put this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

CSS3 and HTML5 Example 1: Navigation Bar

2011-08-31T12:00:00.001+01:00

Having good and easy to navigation is important for any site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In this example we build the navigation bar from a standard HTML list.
A navigation bar is basicly a list of link, using <ul> and <li> elements makes perfect sense:

<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hreft="about.html">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

The code in the example is the standard code used in both vertical and horizontal navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:

a
{
display:block;
width:60px;
}

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Both methods work fine, but if you want the links to be the same size, use the floating method.

Inline List Items

One way to build a horziontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

li
{
display:inline;
}

Floating List Items

In the example above the links have different widths.

For all the links to have equal width, float the <li> elements and specify a width for the <a> elements:

li
{
float:left;
}

a
{
display:block;
width:60px;
}

Advanced CSS3 Tutorial 5: Pseudo Classes

2011-08-30T12:00:00.001+01:00

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

Links can be displayed in different ways in CSS supporting browsers

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Note: These must be in the above order. Pseudo-class names are not case-sensitive.

Advanced CSS3 Tutorial 4: Align

2011-08-29T18:06:00.000+01:00

In CSS, several porperties are used to align elements horizontally.

Center Aligning Using the margin Property

Block elements can be aligned by setting both the left and right margins to "auto".
(margin:auto does not work in Internet Explorer 8 unless !doctype is declared.)

Setting the left and right margins to auto specifies that they should split the available margin equally, The result is a centered element:

.center
{
margin-left:auto;
margin-right:auto;
width 70%;
background-color:#353535;
}

Note: Aligning has no effect if the width is 100%; In IE5 there's a margin handling bug for block elements.

Left and Right Aligning Using the position Property

One method of Aligning elements is to use absolute positioning:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#353535;
}

Absolute positioned elements are removed from the normal flow, and can overlap elements.

Crossbrowser Compatibility Issues

When aligning elements like this, it's a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.

There is a problem with IE8 and earlier when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Left and Right Aligning Using the float Property

Another method of aligning elements is to use the float property:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Advanced CSS Tutorial 3: Float

2011-08-28T21:21:00.001+01:00

With float an element can be pushed to the left or right allowing other elements to wrap around it.
Float is most commonly used for images but is useful for other things too.

How Elements Float
Elements may only be floated horizontally, not vertically.
A floated element will move as far on its horizontal axis as it can. This means all the way to the left or right of its containing element.
The elements after the floating element will flow around it; elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
img
{
float:right;
}

Floating Images Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Turning off Float - Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
.text_line
{
clear:both;
}

Advanced CSS3 Tutorial 2: Positioning

2011-08-27T12:00:00.000+01:00

The CSS positioning properties allow you to position an element. It also allows you to place an element behind another, and specify what should happen when an element's conetent is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are 4 different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning
And element with a fixed position is positioned relative to the browser window, it will not move even if the window is scrolled.
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
h2.pos_top
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.