18041 sujets

Questions générales et questions de débutants

Diaporama en arrière plan sur header

Pages :
Merci ! Le voici :


/*
Design by Free CSS Templates
 http://www.freecsstemplates.org
 
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
	margin: 40px;
	padding: 0;
	background-image: linear-gradient(right top, rgb(47,118,173) 0%, rgb(143,188,143) 74%, rgb(110,53,9) 91%);
background-image: -o-linear-gradient(right top, rgb(47,118,173) 0%, rgb(143,188,143) 74%, rgb(110,53,9) 91%);
background-image: -moz-linear-gradient(right top, rgb(47,118,173) 0%, rgb(143,188,143) 74%, rgb(110,53,9) 91%);
background-image: -webkit-linear-gradient(right top, rgb(47,118,173) 0%, rgb(143,188,143) 74%, rgb(110,53,9) 91%);
background-image: -ms-linear-gradient(right top, rgb(47,118,173) 0%, rgb(143,188,143) 74%, rgb(110,53,9) 91%);

background-image: -webkit-gradient(
	linear,
	right top,
	left bottom,
	color-stop(0, rgb(47,118,173)),
	color-stop(0.74, rgb(143,188,143)),
	color-stop(0.91, rgb(110,53,9))
); 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #534616;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #534616;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #534616;
}

a:hover {
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0;

}

/* Header */

#header {
	width: 960px;
	height: 150px;
	margin: 0 auto;
        z-index:1;
        position: absolute; 
} 

/* Logo */

#logo {
	float: left;
	height: 65px;
	margin: 0;
	padding-top: 40px;
	color: #FFFFFF;
        text-shadow:  5px 5px 7px #555;
        z-index: 10;
        position: absolute;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	float: left;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-size: 4.6em;
	color: #FFFFFF;
}

#logo p {
	float: left;
	margin: 0;
	padding: 30px 0 0 10px;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
}

#slideshow {
        position:relative;
        width:980px;
        height:150px;
        overflow:hidden;
        border-radius: 10px 10px 0px 0px;
        -webkit-border-radius: 10px 10px 0px 0px;
        box-shadow:  5px 0px 7px #555;
}

/* Search */

#search {
	float: right;
	width: 300px;
	height: 160px;
	padding: 117px 0 0 0px;
        color : #000000;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 50px 0 0 20px; 
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 195px;
	padding: 5px 5px 4px 5px;
	border: 1px solid #DEDEDE;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

#search-submit {
	width: 50px;
	height: 25px; 
}


/* Menu */

#menu {
	width: 980px;
	height: 50px;
	margin: 0px 0 0 0;
	padding: 0;
	background: #000000;
        box-shadow:  5px 5px 7px #555;
        border-radius: 0px 0px 10px 5px;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 25px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-right: 3px;
	height: 35px;
	padding: 15px 30px 7px 30px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;

}

#menu a:hover, #menu .current_page_item a {
}

#menu .current_page_item a {
	padding-left: 0;
}

#menu a:hover {color:white;
	text-decoration: underline;
}

/* Page */

#page {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
}

#page-bgtop {
}

#page-bgbtm {
}

/* Content */

#content {
	float: right;
	width: 670px;
	padding: 0; 
}

.post {
	margin-bottom: 25px;
	padding: 0px;
	background: #FFFFFF;box-shadow:  5px 5px 7px #555;
        border-radius: 5px 10px 5px 5px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
	height: 38px;
	background: #000000 ;
	padding: 12px 0 0 20px;
	letter-spacing: -.5px;
	color: #FFFFFF;
        border-radius: 5px 10px 0px 0px;
}

.post .title a {
	border: none;
	color: #FFFFFF;
}

.post .meta {
	padding-top: 20px;
	padding-bottom: 5px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	background: url(/cmsms/uploads/zionnarrows/img02.jpg) no-repeat left top;
	padding: 0px 20px 20px 20px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	display: block;
	width: 100px;
	height: 20px;
	margin-top: 20px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	font-weight:  bold;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 260px;
	padding: 0px;
	color: #787878; 
}

#sidebar ul {
	padding: 0;
	list-style: none;
        border-radius: 0px 0px 5px 5px;

}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin-bottom: 30px;
	padding: 0px 20px 20px 20px;
	background: #FFFFFF;
	border-left: 1px none #D6E6CC;
	border-right: 1px none #D6E6CC;
	border-bottom: 1px none #D6E6CC;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px ridge #D1D1D1;
	padding-left: 3px;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic; 
}

#sidebar h2 {
	height: 38px;
	padding: 12px 0 0 20px;
	background: #000000;
	letter-spacing: -.5px;
	color: #FFFFFF;
        box-shadow:  5px 5px 7px #555; border-radius: 5px 10px 0 0;
}

#sidebar p {
	margin: 0px 0px 20px 0px;
	padding: 10px 20px 20px 20px;
	background: #FFFFFF;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 980px;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 26px;
	line-height: normal;
	font-size: 12px;
	text-align: center;
	color: #534616;
}

#footer a {
	font-weight: bold;
	color: #534616;
}
Le voici :


{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
 http://www.freecsstemplates.org
 
Released for free under a Creative Commons Attribution 2.5 License

Name       : Zion Narrows  
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20102110

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
</head>
<body>
<div id="wrapper">
	<div id="header">
                <div id="logo">
                        <p> </p>
			<h1>{sitename}</h1>
		</div>
		<div id="search">
			{search}
		</div>
	</div>
	<!-- end #header -->
<div id="slideshow">
          {Showtime show='1'}
</div>
	<div id="menu">
		{menu template="zionnarrows : minimal_menu" number_of_levels="1"}
	</div>
	<!-- end #menu -->
	<div id="page">
	<div id="page-bgtop">
	<div id="page-bgbtm">
		<div id="content">
			<div class="post">
				<h2 class="title">{title}</h2>
				<div class="entry">
				<p class="meta">{print}</p>


{content}
				</div>
			</div>
		<div style="clear: both;">&nbsp;</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
				<li>
					<h2>Menu</h2>
					{menu template="zionnarrows : minimal_menu" start_level="1" collapse="1"}
				</li>
				
				<li>
					<h2>Dehors...</h2>
					<ul>
						<li><a href="http://">Galerie 1</a> </li>
                                                <li>

</li>
						<li><a href="http://">Galerie 2</a></li>
						<li><a href="http://">Galerie 3</a></li>
						
					</ul>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	</div>
	</div>
	<!-- end #page -->
</div>
	<div id="footer">

<!-- 
This theme is released free for use under creative commons licence. 
All links in the footer should remain intact. 
These links are all family friendly and will not hurt your site in any way. 
-->

		<p>Copyright (c) 2013 {sitename}. Design basé sur un <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
	</div>

	<!-- end #footer -->
</body>
</html>
J'ai fait quelques modifs et dépoussiérages.

Essayez pour voir.

#header {
	margin: 0 auto;
} 

/* Logo */

#logo {
	height: 65px;
	color: #FFFFFF;
    text-shadow:  5px 5px 7px #555;
    position: absolute;
    top:20px;
	left:20px;
}
#slideshow {
        width:980px;
        height:150px;
        border-radius: 10px 10px 0px 0px;
        box-shadow:  5px 0px 7px #555;
        background-color:#06C
}

<div id="header">
    <div id="slideshow"> {Showtime show='1'} </div>
    <div id="logo">
      <h1>{sitename}</h1>
    </div>
    <div id="search"> {search} </div>
  </div>


Note: border n'a plus besoin d'être préfixé.

Bon courage Smiley smile
J'imagine que ce n'est pas facile sans l'accès aux images... J'ai essayé les modifs mais ça ne marche pas, les blocs se décalent vers le haut et vers le bas et les coins ne sont pas plus arrondis.

Merci pour le temps que vous avez passé à m'aider.

Smiley smile
En tout cas le code que je vous ai donné (enlever le left:20px du logo) est valide et corrige des erreurs de celui que vous aviez posté.

Attention j'ai déplacé la div slideshow dans le html.

éventuellement donnez les tailles des images. Smiley cligne
Pages :
Sujet clos
Aller à