Bonjour,
J'ai un petit souci avec une image de titre h1, en effet celle ci est coupée et n'apparaît pas totalement.
Voici le code en question :
En gras la partie concernée.
Et voici le CSS :
En essayant d'etre plus clair, je met un fond image sur le titre H1, mais celui ci est décalé légèrement vers la droite ( le A de actualité n'a pas ce fond image). De plus je désire décaler mon titre Actualité et le faire sortir de la
J'espère avoir été plus clair
Modifié par cheg (01 Jun 2012 - 17:57)
J'ai un petit souci avec une image de titre h1, en effet celle ci est coupée et n'apparaît pas totalement.
Voici le code en question :
<body>
<header id="banniere">
<h1>GAETAN </h1>
<nav id="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">Dates</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="page">
<section id="actu">
<h1>Actualité</h1>
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Titre des actualités">Lorem epsilum</a></h2>
</header>
<div class="entreeactu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum</p>
</div><!-- /.entreactu -->
</article></li>
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Titre des actualités2">Lorem epsilum</a></h2>
</header>
<div class="entreeactu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum</p>
</div><!-- /.entreactu -->
</article></li>
</ol><!-- /#posts-list -->
</section>
<section id="calendrier" class="colcal">
<h1>Show a venir</h1>
<ol id="post-date" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-date"><a href="#" rel="bookmark" title="18/09/2012">18/05/2012</a></h2>
</header>
<div class="entreedate">
<p>Lieu:</p>
<p>Prix:</p>
</div><!-- /.entredate -->
</article></li><li><article class="hentry">
<header>
<h2 class="entry-date"><a href="#" rel="bookmark" title="20/09/2012">18/05/2012</a></h2>
</header>
<div class="entreedate">
<p>Lieu:</p>
<p>Prix:</p>
</div><!-- /.entredate -->
</article></li>
</section>
<aside id="facebook">
<figure>
<img src="images/" />
</figure>
<h2>Suivez nous</h2>
</aside>
</div>
</body>
</html>En gras la partie concernée.
Et voici le CSS :
/*
Name: Gaetan
Date: Mai 2012
Description: PAge d'accueil
Version: 1.0
Auteur : Vince&Cheg
URl des auteurs :
*/
/* Body */
body {
background: url('../img/FondAccueil.jpg');
overflow:hidden;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Titre*/
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* liens */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: black;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
color: black;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Listes */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Bannière */
#banniere h1 {font-size: 3.571em; line-height: .6;margin-left:50px;}
#banniere h1 strong {font-size: 0.36em; font-weight: normal;}
/* Navigation */
#banniere nav {
background: white;
font-size: 2.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 100%;
}
#banniere nav ul {list-style: none; margin: 100 auto; width: 100%;}
#banniere nav li { float:left; display: inline; margin: 0;}
#banniere nav a:link, #banniere nav a:visited {
color: black;
display: inline-block;
height: 10px;
padding: 5px 1.6em;
text-decoration: none;
}
#banniere nav a:hover, #banniere nav a:active,
#banniere nav .active a:link, #banniere nav .active a:visited {
background: white;
color: #C74350;
text-shadow: none !important;
}
/***** Page *****/
#page {clear: both; margin-right:auto; margin-left:auto; width: 1230px;background-color: rgba(0,0,0,0.5);position:relative;padding-left:15px;}
/***** Actualités *****/
#actu h1 {color:white; width:560px;background-image:url("../img/Titregauche.png");background-repeat:no-repeat;height:70px;background-position:-1% 0;}
#actu a {color:#e35667;}
.entreeactu p {color:white;}
En essayant d'etre plus clair, je met un fond image sur le titre H1, mais celui ci est décalé légèrement vers la droite ( le A de actualité n'a pas ce fond image). De plus je désire décaler mon titre Actualité et le faire sortir de la
<div>page</>J'espère avoir été plus clair
Modifié par cheg (01 Jun 2012 - 17:57)
