Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created Mar 17, 2012
Embed
What would you like to do?
--------------------------------------------------------------
/* --------------------------------------------------------------
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;
}
<!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>
{"view":"split","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.