28172 sujets

CSS et mise en forme, CSS3

Template 4 col, 2 header, 2 footer, et blocs fixes dans header ?

Bonjour,

çà fait plusieurs soirs que j'essaye de faire un template un peu compliqué, ce en surfant sur le net pour trouver une solution dont Alsacréations qui donnent beaucoup de conseils. Mais après avoir lu énormément de tuto et avoir fait de multitudes tests, je désespère. C'est pourquoi je viens vers vous pour savoir si quelqu'un peut me donner un coup de main.

Voici ce que je souhaite faire :

upload/32717-souhait.jpg

- Cette image contient le nom des "div".
- "contenu" a un fonds de couleur qui imite une feuille qui entre dans deux fentes, une en haut et une en bas. Les deux fentes sont en background de "centrehaut" et "centrebas".
- "zip" contient en background une image d'un embout de fermeture éclair.
- "zip-repeat" contient en background une image d'un bout de fermeture éclair qui doit se répéter selon la hauteur de "contenu".
- "colonnegauche" et "colonnedroite" contiendront les menus écrit directement sur le fonds du site.
- le background de body est une image fixe.
- "entete" a un backgroung d'une image.
- à un endroit précis de l'en-tête, je souhaite faire défiler des photos. En fait, l'en-tête contient l'image d'une photo dans laquelle des photos défileraient.
- à un endroit précis de l'en-tête, je souhaite écrire du texte html dans un block de hauteur et largeur bien défini.

En fait, j'ai essayé plein de trucs proposés ici et un coup c'est le footer qui ne se positionne pas bien, un coup c'est la colonne de droite, la hauteur du site ne veut pas se mettre à 100%, je ne sais comment mettre "zip" et "zip-repeat" (ce dernier devant se répéter selon la hauteur de "contenu", et je ne sais pas comment créer mon bloc photo et texte à des positions précises dans entete.

Peut-être que je m'y prends mal dans le découpage de mon template et que la colonne "zip"+"zip-repeat" pourrait être éviter (j'ai testé aussi cela). Je ne sais plus quoi faire pour y arriver.

Si quelqu'un a un petit moment pour m'aider..... SVP.

Bien à vous.
Jérôme
Mon HTML est comme ceci : 


<body>

<!-- SITE INTERNET : DEBUT -->
<div id="global">

	<!-- EN TETE : DEBUT -->
	<div id="entete">
    
            <!-- EN TETE PHOTO : DEBUT -->
            <div id="entetephoto">
            <img src="images/bloc-header.jpg" alt="" width="230" height="170" /></div>
            <!-- EN TETE PHOTO : FIN -->
            
            <!-- EN TETE TEXTE : DEBUT -->
            <div id="entetetexte">
            <p>Exposition</p>
            <p>Mâles en jupe,</p>
            <p>Bien en Limousin</p>
      </div>
            <!-- EN TETE TEXTE : FIN -->    
    
    
</div>
    <!-- EN TETE : FIN -->
    

    
<!-- HAUT DU CONTENEUR : DEBUT -->
    <div id="centrehaut">
    </div>
    <!-- HAUT DU CONTENEUR : FIN -->
    
    <!-- CENTRE DU CONTENEUR : DEBUT -->
<div id="centrecontenu">
        
            <!-- COLONNE GAUCHE : DEBUT -->
      		<div id="colonnegauche">
            <p>COLONNE GAUCHE : Dans la zone .header, un espace réservé pour image a été utilisé à 		l'endroit où vous souhaiterez probablement placer un logo. Il est conseillé de supprimer l'espace réservé et de le remplacer par votre logo lié. </p>
			</div>
            <!-- COLONNE GAUCHE : FIN -->
            
        	<!-- COLONNE DROITE : DEBUT -->
        	<div id="colonnedroite">
            <p>COLONNE DROITE : Dans la zone .header, un espace réservé pour image a été utilisé à 		l'endroit où vous souhaiterez probablement placer un logo. Il est conseillé de supprimer l'espace réservé et de le remplacer par votre logo lié. </p>
        	</div>
            <!-- COLONNE DROITE : FIN -->            
            
        	<!-- COLONNE CENTRE : DEBUT -->
    		<div id="colonnecentre">
<h3>Remplacement du logo</h3>
<p>Dans la zone .header, un espace réservé pour image a été utilisé à 		l'endroit où vous souhaiterez probablement placer un logo. Il est conseillé de supprimer l'espace réservé et de le remplacer par votre logo lié. </p>
<p> Notez que si vous utilisez l'inspecteur Propriétés pour accéder à l'image de votre logo à l'aide de la zone SRC (au lieu de supprimer l'espace réservé puis de le remplacer), vous devez veiller à supprimer les propriétés intégrées d'arrière-plan et d'affichage. Ces styles intégrés servent uniquement à permettre l'affichage de l'espace réservé du logo dans des navigateurs à des fins de démonstration. </p>
<p>Pour supprimer les styles intégrés, assurez-vous que le panneau Styles CSS est bien en mode Actuel. Sélectionnez l'image puis, dans le volet Propriétés du panneau Styles CSS, cliquez à l'aide du bouton droit puis supprimez les propriétés d'affichage et d'arrière-plan. Bien entendu, vous pouvez toujours accéder directement au code et y supprimer les styles intégrés depuis l'image ou l'espace réservé.</p>
        	</div>
            <!-- COLONNE CENTRE : FIN -->
                       
    </div>
    <!-- CENTRE DU CONTENEUR : FIN -->
    
    <!-- BAS DU CONTENEUR : DEBUT -->
    <div id="centrebas">
    </div>
  <!-- BAS DU CONTENEUR : FIN -->
    
    <!-- PIED DE PAGE : DEBUT --> 
	<div id="piedpage">
    <p>PIED DE PAGE : Dans la zone .header, un espace réservé pour image a été utilisé à 		l'endroit où vous souhaiterez probablement placer un logo. Il est conseillé de supprimer l'espace réservé et de le remplacer par votre logo lié. </p>
    </div>
    <!-- PIED DE PAGE : FIN -->
    
</div>
<!-- SITE INTERNET : FIN -->

</body>
J'ai trouvé pour l'en-tête, j'ai mis en absolute :


html {
	height: 100%;
}

body{
	background:url(images/fonds.jpg) no-repeat top center #592416;
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px;
	background-attachment: fixed;
	height: 100%;

}

/*///////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
                   SITE INTERNET : DEBUT 
/////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////// */

#global{
	margin:0px auto;
	padding:0px;
	width:800px;
	min-height: 100%;
	position:relative;
}


/****************** EN TETE : DEBUT ****************************/
#entete{
	margin:0px;
	padding:0px;
	height:243px;
	width:800px;
	background:url(images/entete.png) no-repeat top center;	
	position:relative;
}

#entetephoto{
	margin:0px;
	padding:0px;
	position:absolute;
	height:170px;
	width:146px;
	top:40px;
	left:405px;
}

#entetetexte{
	margin:0px;
	padding:0px;
	position:absolute;
	height:145px;
	width:147px;
	top:96px;
	left:646px;
}

/****************** EN TETE : FIN ******************************/
Sujet clos
Aller à