28172 sujets

CSS et mise en forme, CSS3

Background Extensible, mais pas de façon classique

Bonjour à tous,
mon titre n'est pas vraiment explicite.

Je sais pas vraiment comment vous expliquer, alors je vous ai fais un schéma :

http://ups.imagup.com/07/1265605957.png



Voici mon code pour le moment :



#contenufix{
      width:904px;
      margin:0 auto 0;
}
#contenu{
      float:left;
      color:white;      
}
#contenu-haut{
  width:904px;
  height:176px;
  background: url(imagesa/hautcontent.png) no-repeat; 
}
#contenu-haut p{
  width:650px;
}
#contenufond{
   width:904px;
   background: url(imagesa/hautcontent.png) repeat-x;
}



<div id="contenufix">
  <div id="contenu">
        <div id="contenu-haut">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar sagittis libero et tincidunt. Etiam eget diam id sapien tempor egestas sit amet pellentesque dui. In nec urna rhoncus eros ornare mattis viverra vitae mauris. Donec sagittis, augue a congue elementum, lorem tellus pulvinar est, ac varius mauris nunc a risus. Praesent iaculis cursus nisl, non laoreet lorem molestie quis. Nam ut libero at justo egestas aliquet. Curabitur tellus purus, fringilla eu tempus nec, euismod in odio. Nunc a arcu ante. Proin ullamcorper, risus quis feugiat hendrerit, nibh massa varius orci, ut ornare mi dolor a urna. Donec commodo justo sed sapien accumsan elementum. In suscipit tincidunt dolor, convallis commodo nibh porttitor sed.

        Donec libero justo, aliquam non molestie in, consectetur ac nulla. Maecenas a sapien lorem, at dictum quam. Donec ac lectus libero. Nullam tempor dui nunc. Integer porttitor luctus urna vel pharetra. Phasellus at justo vel dolor dictum dictum. Curabitur ultrices lectus in ante condimentum vulputate. Nulla quis volutpat lorem. Suspendisse dolor turpis, tempor sed vestibulum ut, tempor vitae libero. Quisque aliquet eros id mi posuere suscipit. Nunc imperdiet ipsum nec sapien hendrerit condimentum. Integer laoreet adipiscing est, eget lobortis risus molestie in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc sit amet quam ornare iaculis vitae non felis.

        Morbi tristique laoreet justo a dapibus. Proin metus ipsum, semper a condimentum nec, sagittis sed justo. Nullam molestie posuere tristique. Aliquam quam leo, consequat id rutrum sit amet, laoreet at metus. Aenean vitae mattis libero. Nam at est urna, in dignissim magna. Vestibulum pellentesque tortor at magna egestas sit amet vestibulum ante aliquam. Maecenas mi risus, convallis non molestie in, consectetur euismod lorem. Pellentesque auctor tincidunt aliquam. Maecenas facilisis est sit amet mauris feugiat non egestas justo sodales. Maecenas tincidunt arcu et augue placerat a mattis nisi facilisis. Proin rutrum dui vitae nisl faucibus non tempus libero dignissim. In ligula ipsum, molestie eu facilisis sed, varius sed tellus. 
        </p>
      	</div>
      	
      	<div id="contenufond">
      	</div>
      	
	</div>



Quelqu'un aurait une solution ?

Merci d'avance,
Elendil
Spontanément je dirais qu'il faudrait imbriquer le DIV 2 dans le DIV 1 en jouant avec les marges internes du DIV 1 (padding-top)
Ton paragraphe <p> de texte dans le DIV 2 sera mis en position relative avec bottom: (la valeur que tu auras mis en padding-top du DIV 1)

Dis-nous si ça te convient...
Modifié par darkstar2023 (08 Feb 2010 - 01:16)
Hello Elendil et bienvenue,

le plus simple serait quand même de ne faire qu'une seule image (très) haute avec la partie bleue en haut et la partie jaune qui se répète. Du coup il te suffirait d'un simple DIV. Smiley cligne

Si vraiment ça n'est pas possible (parce que tu ne connais pas la hauteur maximum que peut avoir ce DIV) tu pourrais faire :
#contenufix {
	width: 904px; 
	margin: 0 auto;
	color: #fff;
	position: relative;
	overflow: hidden;
} 

#fond_jaune {
	position: absolute;
	top: 176px;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(include/images/imagejaune.png) repeat-y;
} 

#contenu {
	float: left;
	background: url(include/images/imagebleue.png) no-repeat;
	position: relative;
	width: 100%;
	z-index: 10;
}
<div id="contenufix">
	<div id="fond_jaune"></div>
	<div id="contenu"> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar sagittis libero et tincidunt. Etiam eget diam id sapien tempor egestas sit amet pellentesque dui. In nec urna rhoncus eros ornare mattis viverra vitae mauris. Donec sagittis, augue a congue elementum, lorem tellus pulvinar est, ac varius mauris nunc a risus. Praesent iaculis cursus nisl, non laoreet lorem molestie quis. Nam ut libero at justo egestas aliquet. Curabitur tellus purus, fringilla eu tempus nec, euismod in odio. Nunc a arcu ante. Proin ullamcorper, risus quis feugiat hendrerit, nibh massa varius orci, ut ornare mi dolor a urna. Donec commodo justo sed sapien accumsan elementum. In suscipit tincidunt dolor, convallis commodo nibh porttitor sed.</p>
		<p>Donec libero justo, aliquam non molestie in, consectetur ac nulla. Maecenas a sapien lorem, at dictum quam. Donec ac lectus libero. Nullam tempor dui nunc. Integer porttitor luctus urna vel pharetra. Phasellus at justo vel dolor dictum dictum. Curabitur ultrices lectus in ante condimentum vulputate. Nulla quis volutpat lorem. Suspendisse dolor turpis, tempor sed vestibulum ut, tempor vitae libero. Quisque aliquet eros id mi posuere suscipit. Nunc imperdiet ipsum nec sapien hendrerit condimentum. Integer laoreet adipiscing est, eget lobortis risus molestie in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc sit amet quam ornare iaculis vitae non felis.</p>
		<p>Morbi tristique laoreet justo a dapibus. Proin metus ipsum, semper a condimentum nec, sagittis sed justo. Nullam molestie posuere tristique. Aliquam quam leo, consequat id rutrum sit amet, laoreet at metus. Aenean vitae mattis libero. Nam at est urna, in dignissim magna. Vestibulum pellentesque tortor at magna egestas sit amet vestibulum ante aliquam. Maecenas mi risus, convallis non molestie in, consectetur euismod lorem. Pellentesque auctor tincidunt aliquam. Maecenas facilisis est sit amet mauris feugiat non egestas justo sodales. Maecenas tincidunt arcu et augue placerat a mattis nisi facilisis. Proin rutrum dui vitae nisl faucibus non tempus libero dignissim. In ligula ipsum, molestie eu facilisis sed, varius sed tellus.</p> 
	</div> 
</div>

Modifié par Heyoan (08 Feb 2010 - 04:08)
Sujet clos
Aller à