28173 sujets

CSS et mise en forme, CSS3

[Résolu] position de Pied de page

Pages :
(reprise du message précédent)

Bon, j'ai bien fait de demander, on va gagner un temps fou.

Déjà, on peut commencer par ça :
- rien dans cette mise en page n'impose d'utiliser un margin-top négatif ;
- il serait préférable de ne pas positionné les images décoratives de bas de page en fixe : en position:fixed, elles monopolisent systématiquement une partie de l'écran, ce qui est dommage pour des images décoratives.

Si je devais intégrer cette maquette, je serais probablement parti différemment. Mais bon, on ne va pas tout refaire (surtout que je n'ai pas une heure devant moi... Smiley lol ), et on va partir de ce qu'on a déjà.

Il y a plein de petits correctifs à faire. En gros, il ne faut pas utiliser le positionnement fixe (on peut garder le margin-top négatif, par contre), mais le remplacer par le positionnement absolu.

En gros, il s'agit de suivre le tutoriel que tu as dit avoir suivi (ce que tu n'as pas vraiment fait...). Bref, on y replonge.
En suivant le tuto j'ai obtenu ceci

peu de contenu:

http://img504.imageshack.us/img504/561/peucontcb9.png


Beaucoup de contenu :

http://img357.imageshack.us/img357/4642/pluscontov4.png


HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Guizmo Story</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-15" />
	  <link rel="stylesheet" type="text/css" href="styles.css"
	  media="screen" />
</head>
<body>

<div id="global">




    <div id="header">
       
		<div id="menuv">
				 <ul>
				 <li><a href="#">Accueil</a></li>
				 <li><a href="#">Archives</a></li>
				 <li><a href="#">Fichiers</a></li>
				 <li><a href="#">Contact</a></li>
				 </ul>
				 
        </div>	 	
	
	
	</div>
	
	
	
	


	<div id="contenu">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	

	
	</div>	  
		  
		  

 
    <div id="footer">
	<div class="copy">Copyright</div>
	</div>
	<div id="bgbas">

<div id="imgbas">
</div>
</div>
</div>
</body>
</html>



CSS

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
Body {
background-image:url(images/bg.png);
margin : 0 auto 0 auto;
}



#global {
background-image: url(images/corp.png);
background-repeat : repeat-y;
min-height: 100%;
position:relative;
}




#header {
width : 567px;
height : 316px;
background-image:url(images/header.png);
background-repeat : no-repeat;
margin-top: 0;
}

#menuv {
float: left;
width: 125px;
margin-left:53px;
margin-top:85px;
}
#bas-menu {
width:185px;
height: 25px;
background-color:#eeeeee;
background-image:url(images/bas-menu.png);
}

										 #menuv ul {
										 margin-left:0px;
										 padding-left:0px;
										 list-style: none;
									
										 }
										 #menuv a {
										 padding-left: 20px; 
										 line-height:27px;
										 display:block;
										 font-family: Arial, Georgia;
										 font-weight:bold;
										 font-size: 12px;
										 text-decoration: none;
										 color: #fff;
										 background-image:url(images/menu-opacitepng);

										 
										 }
										 #menuv a:hover {
										  font-family: Arial, Georgia;
										 font-size: 12px;
										 text-decoration: none;
										 color: #000000;
										 background-image:url(images/menu-opacite.png);
										 opacity: 0.5;
                                         filter:alpha(opacity=50);
										 }
										 
										 

#contenu {
margin-top:-60px;
margin-bottom: 20px;
width: 460px;
margin-left: 60px;
}


#footer {
clear : both;
background-image:url(images/footer.png);
background-repeat:no-repeat;
width: 567px;
height:125px;
margin-bottom: 0;
padding-bottom: 4em;
}


#imgbas {
bottom:0;
left:0;
background-image:url(images/corner-bas-gauche2.png);
width: 214px;
height:132px;
}
#bgbas {

background-image:url(images/bg-bas2.png);
background-repeat: repeat-x;
height:132px;
position: absolute;
bottom: 0; left: 0;
width: 100%;
}




.copy {
text-align:center;
padding-top:35px;
}



Edit: En modifiant le padding-bottom:xem; du footer je corrige le probleme du footer qui etait incomplet, mais il reste la repetition du background global . Je viens de voir qu'en 1024x768 il y a pas cette répétition, je suis en 1280x1024 chez moi, et dans cette résolution, il y a cette répitition Smiley ohwell
Modifié par Romaric (12 Jun 2007 - 14:58)
Effectivement, j'utilise les class depuis peu et j'avais pas penser a mettre le texte du contenu dans une div class plutot que id.
A priori ca fonctionne Smiley smile

Merci à vous
Pages :
Sujet clos
Aller à