xhtml code

Selector :target in CSS 3

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>CSS3 *:target</title>
	
	<style type="text/css" media="screen">
	
	h1:hover { text-decoration: underline; } /* CSS 1 et 2 */
	h1:target { background-color: #ff6600; } /* CSS 3 */
	
	</style>
</head>

<body>
	
	<h1 id="title-1">Title n°1</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<h1 id="title-2">Title n°2</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<p><a href="#title-1">Title n°1</a> | <a href="#title-2">Title n°2</a></p>
	
</body>
</html>

Source: AB-D.fr

to css xhtml css3 by ki4ngel on Feb 19, 2008

Position : fixed in MSIE6

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>"position: fixed" compatible Microsoft Internet Explorer 6</title>
	
	
	<!-- Code CSS for Firefox, Safari, Opera, Internet Explorer 7... -->
	
	<style type="text/css" media="screen">
		
	#fixed {
		position: fixed;
		left: 0; top: 0; right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
	
	</style>
	
	
	<!-- Code CSS for Internet Explorer 6 -->
	
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	
	#fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
	
	</style>
	<![endif]-->
	
	
</head>

<body>
	
	<div id="fixed">DIV in position: fixed;</div>
	
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	
</body>

</html>

Source: Asselin Benoit Developpement, conception de sites internet

to html css xhtml by ki4ngel on Feb 11, 2008

Make a variable CSS

Page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<title>Variable CSS</title>
	<link rel="stylesheet" type="text/css" href="style.php" />
</head>

<body>


<h1>Title</h1>

<p class="color-1"> Text  Text  Text  </p>

<p class="color-2"> Text  Text  Text  </p>

<p class="color-3"> Text  Text  Text  </p>


</body>

</html>

Style.php

<?php
header('Content-Type: text/css');

$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';

?>

* { font-family: sans-serif; }

h1 {
	padding: 5px;
	color: <?= $color_0 ?>;
	border: 5px solid <?= $color_2 ?>;
	background-color: <?= $color_3 ?>;
}

p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }

Source: Asselin Benoit Développement, création de site internet amiens

to html css php xhtml by ki4ngel on Feb 06, 2008

How to detect a browser iPhone ?

The browser is :


Mozilla/5.0 (iPhone; U; CPU like Mac OS X; fr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3B48b Safari/419.3

Source: ab-d.fr
Internet with iPhone

to html web xhtml browser safari iphone by ki4ngel on Nov 29, 2007

Safari 3 - Resizable Text Fields

With Safari 3, you can resize the TEXTAREA, but you can control this properties with CSS3.


<textarea cols="30" rows="10" style="resize: both;">www.AB-D.fr presents the new TEXTAREA</textarea>

<textarea cols="30" rows="10" style="resize: horizontal;">www.AB-D.fr presents the new TEXTAREA</textarea>

<textarea cols="30" rows="10" style="resize: vertical;">www.AB-D.fr presents the new TEXTAREA</textarea>

<textarea cols="30" rows="10" style="resize: none;">www.AB-D.fr presents the new TEXTAREA</textarea>

Links:
http://www.apple.com/safari/
http://www.w3.org/TR/css3-ui/#resize

to css xhtml safari by ki4ngel on Aug 12, 2007

IE doesn't support element.setAttritube('style')

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="fr">
<head>

<title>.setAttribute('style','');</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
<!--

window.onload = function() {
	if (navigator.appName == 'Microsoft Internet Explorer') {
		document.getElementById('test').style.cssText = 'background:gray; color:white;';
	} else {
		/* document.getElementById('test').style.cssText = 'background:gray; color:white;'; */
		document.getElementById('test').setAttribute('style', 'background:gray; color:white;');
	}
}

-->
</script>

</head>

<body>

<div id="test">document.getElementById('test').setAttribute('style', 'background:gray; color:white;')</div>

</body>

</html>

to javascript css xhtml by ki4ngel on Aug 02, 2007

Another way of written "target"

Another way of written "target" and valid in XHTML


<a href="http://www.google.com/" onclick="window.open(this.href); return false;">Link</a>

to javascript xhtml by ki4ngel on Jul 26, 2007

Popular @ dzone.com

Related Tags

ki4ngel's Tags

Never been to DZone Snippets before?

About this user