--------------------------------------------------------------

dabblet.css

/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html {
	margin:0;
	padding:0;
	border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

*{
    margin: 0;
    padding: 0;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
     display:block;
}

/* Line-height should always be unitless! */
body {
     line-height: 1.5;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
    border-collapse: separate;
    border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
    text-align: left;
    font-weight: normal;
    float:none !important;
}
table, th, td {
    vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}
blockquote, q {
    quotes: "" "";
}

/* Remove annoying border on linked images. */
a img {
    border: none;
}

/* Remember to define your own focus styles! */
:focus {
    outline: 0;
}

/*---------------------------------- Fin Framework CSS ----------------------------------*/

body{
    font-family: Pompiere;
	font-size: 16px;
}

#body{
    width: 950px;
    margin: 0 auto;
}
#header{
    position: relative;
	padding-top: 60px;
}
#navMembre{
	height: 32px;
	padding: 4px 10px;
	line-height: 32px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 0px 0px 8px 8px;
}

#navMembre .nav a{
	color: #333;
	text-decoration: none;
	font-weight: bold;
	line-height: 32px;
}
#navMembre .nav a:hover{
	color: #0183bf;
}
#navMembre .nav{
	margin-right: 4px;
}
#navMembre .sociaux{
	margin-left: 4px;
}

#mainMenu .menu1{
	width: 702px;
	height: 35px;
	background-image: url('../images/menu1.png');
	float: right;
}
#mainMenu .menu1 li:hover{
	background-color: rgba(1,131,191,0.2);
}
#mainMenu .menu1 li{
		float: left;
		height: 35px;
		line-height: 35px;
		list-style: none;
		background-image: url('../images/sepMenu1.png');
		background-position: left 1px;
		background-repeat: no-repeat;
}
#mainMenu .menu1 li:first-child{
	background-image: none;
}
#mainMenu .menu1 li a img{
	margin-top: 6px;
}
#mainMenu .menu1 li a{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 0px 5px #000000;
	line-height: 35px;
	padding: 0px 24px;
}
#mainMenu .menu2{
	width: 950px;
	height: 35px;
	background-image: url('../images/menu2.png');
	box-shadow: 0px 0px 5px #000000;
}
#mainMenu .menu2 li:hover{
	background-color: rgba(1,131,191,0.3);
}
#mainMenu .menu2 li{
		float: left;
		height: 35px;
		line-height: 35px;
		list-style: none;
		background-image: url('../images/sepMenu2.png');
		background-position: left 2px;
		background-repeat: no-repeat;
}
#mainMenu .menu2 li:first-child{
	background-image: none;
}
#mainMenu .menu2 li a img{
	margin-top: 6px;
}
#mainMenu .menu2 li a{
	color: #333;
	font-weight: bold;
	text-decoration: none;
	text-shadow:0px 0px 5px #fff;
	line-height: 35px;
	padding: 0px 20px;
}
#actuHeader{
	margin-top: 10px;
	padding: 8px;
	background-color: #bababa;
	border-radius: 4px;
}
#actuHeader .content{
	background-color: #565656;
	box-shadow: 0px 0px 2px #000000;
}
#actuHeader .content li.ligne1{
	background-image: url('../images/actuLigne1.png');
	background-repeat: repeat-x;
}
#actuHeader .content li.ligne2{
	background-image: url('../images/actuLigne2.png');
	background-repeat: repeat-x;
}
#actuHeader .content li{
	list-style: none;
	height: 33px;
	line-height: 33px;
	margin-bottom: 2px;
}
#actuHeader .content li a{
	text-decoration: none;
	margin: 0px 8px;
}
#actuHeader .content li .desc{
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	color: #444;
}
#actuHeader .content li .date{ color: #000;}
#actuHeader .content li .titre{ color: #960000; font-weight: bold;}
#actuHeader .content li .lireSuite{  }
#actuHeader .content .hot{ color: #fff; padding: 0px 8px; }
.clear{
    clear: both;
    float: none;
}
.left{
    float: left;
}
.right{
    float: right;
}
.center{
    text-align: center;
}

dabblet.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Bonjour minecraft</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="Serurier Florent" />
		<link href='http://fonts.googleapis.com/css?family=Pompiere|Dorsa|Actor' rel='stylesheet' type='text/css'>
        <!--      --CSS--     -->
        <link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
        <!--      --JS--      -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="script/jquery.ez-bg-resize.js"></script>
        <script type="text/javascript" src="script/script.js"></script>
	</head>
    <body>
        <div id="body">
			<div id="header">
				<div id="navMembre">
					<div class="nav left">
						<a href="">Se connecter</a> | 
						<a href="">S'inscrir</a>
					</div>
					<div class="sociaux right">
						<a href=""><img src="images/facebook.png" alt="" title=""></a>
						<a href=""><img src="images/twitter.png" alt="" title=""></a>
						<a href=""><img src="images/googleplus.png" alt="" title=""></a>
					</div>
				</div>
				<div id="mainMenu">
					<div class="menu1">
						<ul>
								<li><a href=""><img src="images/home.png" alt="home" /></a></li>
								<li><a href="">Nos Galeries</a></li>
								<li><a href="">La Communauté</a></li>
								<li><a href="">Les Outils</a></li>
								<li><a href="">Les Serveurs</a></li>
								<li><a href="">Nous contacter</a></li>
						</ul>
					</div>
					<div class="clear"></div>
					<div class="menu2">
					<ul>
							<li><a href="">A la une</a></li>
								<li><a href="">Actus</a></li>
								<li><a href="">Forum</a></li>
								<li><a href="">Minecraft PC</a></li>
								<li><a href="">Minecraft XBOX</a></li>
								<li><a href="">Minecraft IOS/Android</a></li>
						</ul>	
					</div>
				</div>
				<div id="actuHeader">
					<div class="content">
						<ul>
							<li class="ligne1"><a href=""><span class="date">15/03/2012 16h00 - </span><span class="titre">Titre de ma news : </span><span class="desc">Ici le contenu de ma description textuel de ma news, enfin une partie si le texte deviens trop loing pour tenir dans se cadre </span><span class="lireSuite">Lire la suite</span></a></li>
							<li class="ligne2"><a href=""><span class="date">15/03/2012 16h00 - </span><span class="titre">Titre de ma news : </span><span class="desc">Ici le contenu de ma description textuel de ma news, enfin une partie si le texte deviens trop loing pour tenir dans se cadre </span><span class="lireSuite">Lire la suite</span></a></li>
							<li class="ligne1"><a href=""><span class="date">15/03/2012 16h00 - </span><span class="titre">Titre de ma news : </span><span class="desc">Ici le contenu de ma description textuel de ma news, enfin une partie si le texte deviens trop loing pour tenir dans se cadre </span><span class="lireSuite">Lire la suite</span></a></li>
						</ul>
						<div class="hot">Actu HOOOOOOT</div>
					</div>
				</div>
			</div>
            <div id="content"></div>           
		</div>
	</body>
</html>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"result"}