Background d'un Div en Css
Répondre à la discussion
Affichage des résultats 1 à 5 sur 5

Background d'un Div en Css



  1. #1
    squal31

    Background d'un Div en Css


    ------

    Bonjour a tous,

    Voila j'ai un petit souci avec un le background d'un Div.
    En fait je voudrais, dans le div_rubrique : 2 div, l'un a gauche toute (div_rubrique_g) et un autre a 30px a droite (div_rubrique_d).

    Je voudrais également que c'est 2 div en questions (gauche et droite) est un font transparent. Ce qui permettrait de voir le font du Div_rubrique.

    Voici les 2 fichiers : le css et le html

    le css
    Code:
    /* ----------------------------
    div de la page
    ---------------------------- */
    
    .div_global
    {
    	width:100%;
    	height:100%;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/degrade.jpg);
    	background-repeat: repeat-x;
    	background-position: left top;
    }
    
    
    .div_global_bandeau
    {
    	width:964px;
    	height:168px;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/bandeau-haut.jpg);
    	background-repeat:no-repeat;
    	background-position: center top;
    }
    
    
    .div_titre
    {
    	width:964px;
    	height:64px;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/titre.jpg);
    	background-repeat:no-repeat;
    	background-position: center top;
    }
    
    
    .div_global_rubrique
    {
    	width:964px;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/page-milieu.jpg);
    	background-repeat:repeat-y;
    }
    
    
    .div_global_rubrique_g
    {	
    	width:700px;
    	border:0px;
    	
    	float:left;
    	
    	margin-left:0px;
    	
    	background-image: url(../frame/page-milieu.jpg);
    	background-repeat:repeat-y;
    }
    
    
    .div_global_rubrique_d
    {
    	width:234px;
    	border:0px;
    	
    	float:right;
    	
    	margin-right:30px;
    }
    
    
    .div_global_bas
    {
    	clear:both;
    	
    	width:964px;
    	height:106px;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/page-bas.jpg);
    	background-repeat:no-repeat;
    	background-position: center top;
    }
    et le html :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>Picaxe</title>
    
    <meta name="description" content="Technopujades - Utilisation de modules Picaxe par Pascal Pujades.">
    <meta name="keywords" content="technopujades,technologie,collège,domotique,maquette,4eme,5eme,3eme,découverte professionnelle">
    <meta name="dc.keywords" content="technopujades,technologie,collège,domotique,maquette,4eme,5eme,3eme,découverte professionnelle">
    <meta name="author" content="Pascal Pujades">
    <meta name="googlebot" content="noodp">  
    <meta name="copyright" content="©Technopujades">
    
    <meta name="identifier-url" content="http://technopujades.free.fr">
    <meta name="Robots" content="all">
    <meta name="Rating" content="General">
    <meta name="Category" content="Enseignement">
    <meta name="Page-topic" content="Document">
    <meta http-equiv="Content-Language" content="fr">
    <meta name="location" content="France, FRANCE">
    
    <meta name="expires" content="never">
    <meta name="Distribution" content="Global">
    <meta name="Audience" content="General">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <!-- Chargement des css -->
    <link href="css/texte.css" rel="stylesheet" type="text/css">
    <link href="css/image.css" rel="stylesheet" type="text/css">
    <link href="css/div-global.css" rel="stylesheet" type="text/css">
    <link href="css/div.css" rel="stylesheet" type="text/css">
    
    <!-- Light Box 2 -->
    <link rel="stylesheet" href="lightbox2/lightbox.css" type="text/css" media="screen" />
    <script src="lightbox2/prototype.js" type="text/javascript"></script>
    <script src="lightbox2/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="lightbox2/lightbox.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    <!--
    body {
    	background-image: url(frame/fond.jpg);
    	
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    -->
    </style>
    
    </head>
    
    <body>
    
    <!-- Div principal 
    ----------------------------------------- -->
    <div class="div_global">
    	
    	
    	<!-- Div bandeau -->
    	<div class="div_global_bandeau"></div>
    	
    	<!-- Div titre -->
    	<div class="div_titre"></div>
    	
    	<!-- Div Rubrique -->
    	<div class="div_global_rubrique">
    	
    		
    		
    		
    		<!-- Div Rubrique Droite -->
    		<div class="div_global_rubrique_d">
    			
    			test droite
    			
    		<!-- Fin du Div Rubrique D -->
    		</div>
    		
    
    
    		<!-- Div Rubrique Gauche -->
    		<div class="div_global_rubrique_g">
    		
    			<blockquote>
          			<p class="gtitre">test gauche</p>
    			</blockquote>
    				
    		<!-- Fin du Div Rubrique G -->
    		</div>
    		
    		
    		
    	
    	<!-- Fin du Div Rubrique -->
    	</div>
    	
    	
    	<!-- Div du Bas -->
    	<div class="div_global_bas"></div>
    	
    
    <!-- Fin du Div principal 
    ----------------------------------------- -->
    </div>
    
    
    
    </body>
    </html>
    Merci d'avance de votre aide,
    pascal

    -----
    Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce ...

  2. #2
    invite025015c2

    Re : Background d'un Div en Css

    Dans
    Code:
    .div_global_rubrique_g
    {	
    	width:700px;
    	border:0px;
    	
    	float:left;
    	
    	margin-left:0px;
    	
    	background-image: url(../frame/page-milieu.jpg);
    	background-repeat:repeat-y;
    }
    tu enlèves

    Code:
    	
    background-image: url(../frame/page-milieu.jpg);
    background-repeat:repeat-y;
    Et c'est bon normalement.

  3. #3
    squal31

    Re : Background d'un Div en Css

    Merci pour ta réponse mais ... ça ne fonctionne tjs pas ...
    Voici un morceau du nouveau code :
    Code:
    .div_global_rubrique
    {
    	width:964px;
    	border:0px;
    	
    	margin-left: auto;
    	margin-right: auto;
    	
    	background-image: url(../frame/page-milieu.jpg);
    	background-repeat:repeat-y;
    }
    
    
    .div_global_rubrique_g
    {	
    	width:700px;
    	border:0px;
    	
    	float:left;
    	
    	margin-left:0px;
    }
    
    
    .div_global_rubrique_d
    {
    	width:234px;
    	border:0px;
    	
    	float:right;
    	
    	margin-right:30px;
    }
    Je me retrouve avec le fond du la page et pas avec le fond du div_rubrique comme j'espérai ...
    Si tu as une autre idée ... ?

    Merci d'avance,
    pascal
    Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce ...

  4. #4
    invite025015c2

    Re : Background d'un Div en Css

    Il faut que tu mettes une hauteur fixe a ton rubrique_global.

  5. A voir en vidéo sur Futura
  6. #5
    squal31

    Re : Background d'un Div en Css

    Merci pour ta réponse et effectivement ça fonctionne.

    Encore merci,
    Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce ...

Discussions similaires

  1. CSS + JavaScript ; Changer la couleur des champs d'un formulaire
    Par zoup1 dans le forum Logiciel - Software - Open Source
    Réponses: 14
    Dernier message: 05/07/2011, 15h17
  2. montrer/cacher un DIV en javascript/CSS
    Par invite66fa5dc5 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 1
    Dernier message: 10/06/2008, 09h25
  3. CSS - Appel d'un div codé ailleurs
    Par jecario dans le forum Internet - Réseau - Sécurité générale
    Réponses: 2
    Dernier message: 14/03/2008, 01h37
  4. Image de background non visible dans différents navigateurs
    Par invite0c7307d5 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 11
    Dernier message: 23/01/2008, 19h29
  5. CSS et <div>
    Par invitec12706a7 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 2
    Dernier message: 09/12/2004, 10h25