IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[BootStrap] Insérer un background


Sujet :

Framework CSS Bootstrap

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mai 2016
    Messages : 112
    Par défaut [BootStrap] Insérer un background
    Salut, je veux créer une maquette de page en html/css et bootstrap.
    J'ai déjà insérer le bootstrap et j'ai fais mes divisions de la page. cependant je n'arrive pas à insérer de background ni à mes sections, ni à mes div, ni à mes asides. De plus je n'arrive pas à inclure d'autres pages telles que "<?php include('header.php');?> et <?php include('footer.php');?> sans qu'il n'y ait déformation. Je ne sais pas pourquoi.

    Par exemple si je veux donner un background au premier article qui "art1" dans "index.php"
    Ci-dessous les codes des pages:

    1) La page "index.php"
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
    <!DOCTYPE html>
    <html>
        <head>
    	    <title></title>
    		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    		<link rel="stylesheet" href="bootstrap/css/tuto.css">
    		<style type="text/css">
        .col-md-8, .col-sm-10 { line-height: 200px; }
        .col-md-12 { line-height: 80px; }
      </style>
    	</head>	
     
    	<body>
    	    <div class="container">
    		   <?php include ('header.php');?>
    		    <div class="row">
    			    <section class="col-md-8">
    				    <div class="row">
    						<div class="art1">    
    						    <article class="col-md-12"><p class="art1">Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1
    							Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1</p></article>
    						</div>
    						<article class="col-md-12"><img src="images/G7.jpg"/></article>
    						<article class="col-md-12">Article 3</article>
    						<article class="col-md-12">Article 4</article>
    						<article class="col-md-12">Article 5</article>
    					</div>
    				</section>
     
    				<section class="col-md-4">
    				    <div class="row">
    						<article class="col-md-12">Article 1</article>
    						<article class="col-md-12">Article 2</article>
    						<article class="col-md-12">Article 3</article>
    						<article class="col-md-12">Article 4</article>
    						<article class="col-md-12">Article 5</article>
    					</div>
    				</section>
     
    			</div>
    			<footer id="foot" class="row">
    	                <div class="col-lg-12 col-md-12 col-sm-12">
    		                <?php include ('footer.php');?>
    		            </div>
    	        </footer>	
    		</div>
    	</body>
    </html>

    2) La page "header.php"

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
     
    	<header>
    	        <link rel="stylesheet" href="header.css" type ="text/css" />
    			            <div class="head1"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div>
    						<div class="head2"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div>
                                <div> <img src="images/logoeid1.jpg" class="logo1" alt="Logo de Kalyo" id="logo" /> </div>
    							<div class="logo2"> <img src="images/logoeid2.jpg" class="logokalyo" alt="Logo de Kalyo" id="logo" /> </div>
    							<div class="logo3"> <h1>NOTRE IDENTITE</h1></div>
    			<div>			
                <nav>
    		             <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/0B3E2306-2E38-1E44-9D4A-6C1B9A681804/main.js" charset="UTF-8"></script> 
                    <ul id="menu">
                        <li class="violet"><a href="index.php">ACCUEIL</a>
                            <ul>
                                <li><a href="#">A Propos de KMSERVICES</a>
    	                            <ul>
    	                                <li><a href="#">Vision et Mission</a></li>
    	                                <li><a href="#">La vente directe</a></li>
    	                                <li><a href="#">S'inscrire</a></li>
    									<li><a href="#">Nous contacter</a></li>
    	                            </ul>
                                </li>
                                <li><a href="#">Nos activités</a>
    	                            <ul>
    	                                <li><a href="#">Création de sites web</a></li>
    	                                <li><a href="#">Création d'applications</a></li>
    	                                <li><a href="#">Infographie</a></li>
    									<li><a href="#">Vente de matériels informatiques</a></li>
    	                            </ul>
                                </li>
                                <li><a href="#">Activités commerciales</a>
    	                            <ul>
    	                                <li><a href="#">Rémunération</a></li>
    	                                <li><a href="#">Marketing professionnel</a></li>
    	                                <li><a href="#">La courte histoire</a></li>
    	                            </ul>
                                </li> 
                            </ul>
                        </li><!--
                     --><li class="bleu"><a href="presentation.php">PRESENTATION</a>
    						<!--<ul>
    		                    <li><a href="#">Actualité 1 facultatif</a>
    		                        <ul>
    		                            <li><a href="#">Actualité 2</a></li>
    		                            <li><a href="#">Actualité 3</a></li>
    		                            <li><a href="#">Actualité 4</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                </ul> -->
    	                </li><!--
    	             --><li class="orange"><a href="services.php">SERVICES</a>
    		                <ul>
    		                    <li><a href="#">SITES INTERNET</a>
    		                        <ul>
    		                            <li><a href="#">Sites statiques</a></li>
    		                            <li><a href="#">Sites dynamiques</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">APPLICATIONS</a>
    		                        <ul>
    		                            <li><a href="#">Applications en PHP</a></li>
    		                            <li><a href="#">Applications en JAVA</a></li>
    		                            <li><a href="#">Applications en RUBBY</a></li>
    									<li><a href="#">Applications en PYTHON</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">INFOGRAPHIE</a>
    		                        <ul>
    		                            <li><a href="#">Création de logos</a></li>
    		                            <li><a href="#">Création d'affiches publicitaires</a></li>
    		                            <li><a href="#">Création de dépliants...</a></li>
    		                        </ul>
    		                    </li>
    							<li><a href="#">MONTAGE VIDEO</a>
    		                        <ul>
    		                            <li><a href="#">Montage de clips vidéos</a></li>
    		                            <li><a href="#">Montage de films</a></li>
    		                            <li><a href="#">Montage pour évenements...</a></li>
    		                        </ul>
    		                    </li>
    							<li><a href="#">VENTE DE MATERIELS INFORMATIQUES</a>
    		                        <ul>
    		                            <li><a href="#">Vente d'ordinateurs</a></li>
    		                            <li><a href="#">Vente d'imprimantes</a></li>
    		                            <li><a href="#">Vente de logiciels...</a></li>
    		                        </ul>
    		                    </li>
    		                </ul>
    	                </li><!--
    	             --><li class="vert"><a href="realisations.php">REALISATIONS</a>
    		                <ul>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                </ul>
                        </li><!--
    					--><li class="bleu"><a href="contact.php">CONTACTS</a>
    		                <ul>
    		                    <li><a href="#">Facebook</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                    <li><a href="#">Twitter</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                    <li><a href="#">Gmail</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                </ul>
                        </li>
                    </ul>
    				 <!--   <img src="images/faceb2.jpg" class="logo2" alt="2 eme Logo" id="logo2" />
    					<img src="images/twitter.jpg" class="logo3" alt="3 eme Logo" id="logo3" /> -->
                </nav> 
    			</div>
            <!--    <div id="banniere_description">  -->
                             <!--   <div id="banniere_image">
    								    <h1 class="welcome">BIENVENUE</h1>
    									    <p class="commentaire">
    										    Nous avons créé notre site que voici dans le but de vous faire comprendre l'importance de notre activité!</br>
    											Ce site relatera tous les domaines de service dans lesquels nous exerçons à travers tout le continent!
    										</p>	
    											</br>
    										<p class="coul"> 
    											<marquee class="marq" scrollamount="5" direction="left" onmouseover="this.stop()" onmouseout="this.start()"> 
    											        <em> 
    													    <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --
    													Bienvenue sur votre site de prestation de services! Bienvenue sur votre site de prestation de services!
    													<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --
    													Bienvenue sur votre site de prestation de services!</em>
    											</marquee> 
    										</p>
                                </div>
    						    </div> -->			
        </header>

    3) La page "footer.php"
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
     
    	<header>
    	        <link rel="stylesheet" href="header.css" type ="text/css" />
    			            <div class="head1"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div>
    						<div class="head2"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div>
                                <div> <img src="images/logoeid1.jpg" class="logo1" alt="Logo de Kalyo" id="logo" /> </div>
    							<div class="logo2"> <img src="images/logoeid2.jpg" class="logokalyo" alt="Logo de Kalyo" id="logo" /> </div>
    							<div class="logo3"> <h1>NOTRE IDENTITE</h1></div>
    			<div>			
                <nav>
    		             <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/0B3E2306-2E38-1E44-9D4A-6C1B9A681804/main.js" charset="UTF-8"></script> 
                    <ul id="menu">
                        <li class="violet"><a href="index.php">ACCUEIL</a>
                            <ul>
                                <li><a href="#">A Propos de KMSERVICES</a>
    	                            <ul>
    	                                <li><a href="#">Vision et Mission</a></li>
    	                                <li><a href="#">La vente directe</a></li>
    	                                <li><a href="#">S'inscrire</a></li>
    									<li><a href="#">Nous contacter</a></li>
    	                            </ul>
                                </li>
                                <li><a href="#">Nos activités</a>
    	                            <ul>
    	                                <li><a href="#">Création de sites web</a></li>
    	                                <li><a href="#">Création d'applications</a></li>
    	                                <li><a href="#">Infographie</a></li>
    									<li><a href="#">Vente de matériels informatiques</a></li>
    	                            </ul>
                                </li>
                                <li><a href="#">Activités commerciales</a>
    	                            <ul>
    	                                <li><a href="#">Rémunération</a></li>
    	                                <li><a href="#">Marketing professionnel</a></li>
    	                                <li><a href="#">La courte histoire</a></li>
    	                            </ul>
                                </li> 
                            </ul>
                        </li><!--
                     --><li class="bleu"><a href="presentation.php">PRESENTATION</a>
    						<!--<ul>
    		                    <li><a href="#">Actualité 1 facultatif</a>
    		                        <ul>
    		                            <li><a href="#">Actualité 2</a></li>
    		                            <li><a href="#">Actualité 3</a></li>
    		                            <li><a href="#">Actualité 4</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                </ul> -->
    	                </li><!--
    	             --><li class="orange"><a href="services.php">SERVICES</a>
    		                <ul>
    		                    <li><a href="#">SITES INTERNET</a>
    		                        <ul>
    		                            <li><a href="#">Sites statiques</a></li>
    		                            <li><a href="#">Sites dynamiques</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">APPLICATIONS</a>
    		                        <ul>
    		                            <li><a href="#">Applications en PHP</a></li>
    		                            <li><a href="#">Applications en JAVA</a></li>
    		                            <li><a href="#">Applications en RUBBY</a></li>
    									<li><a href="#">Applications en PYTHON</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">INFOGRAPHIE</a>
    		                        <ul>
    		                            <li><a href="#">Création de logos</a></li>
    		                            <li><a href="#">Création d'affiches publicitaires</a></li>
    		                            <li><a href="#">Création de dépliants...</a></li>
    		                        </ul>
    		                    </li>
    							<li><a href="#">MONTAGE VIDEO</a>
    		                        <ul>
    		                            <li><a href="#">Montage de clips vidéos</a></li>
    		                            <li><a href="#">Montage de films</a></li>
    		                            <li><a href="#">Montage pour évenements...</a></li>
    		                        </ul>
    		                    </li>
    							<li><a href="#">VENTE DE MATERIELS INFORMATIQUES</a>
    		                        <ul>
    		                            <li><a href="#">Vente d'ordinateurs</a></li>
    		                            <li><a href="#">Vente d'imprimantes</a></li>
    		                            <li><a href="#">Vente de logiciels...</a></li>
    		                        </ul>
    		                    </li>
    		                </ul>
    	                </li><!--
    	             --><li class="vert"><a href="realisations.php">REALISATIONS</a>
    		                <ul>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                    <li><a href="#">Lien sous menu</a>
    		                        <ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul>
    		                    </li>
    		                </ul>
                        </li><!--
    					--><li class="bleu"><a href="contact.php">CONTACTS</a>
    		                <ul>
    		                    <li><a href="#">Facebook</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                    <li><a href="#">Twitter</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                    <li><a href="#">Gmail</a>
    		                        <!--<ul>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                            <li><a href="#">Lien sous sous menu</a></li>
    		                        </ul> -->
    		                    </li>
    		                </ul>
                        </li>
                    </ul>
    				 <!--   <img src="images/faceb2.jpg" class="logo2" alt="2 eme Logo" id="logo2" />
    					<img src="images/twitter.jpg" class="logo3" alt="3 eme Logo" id="logo3" /> -->
                </nav> 
    			</div>
            <!--    <div id="banniere_description">  -->
                             <!--   <div id="banniere_image">
    								    <h1 class="welcome">BIENVENUE</h1>
    									    <p class="commentaire">
    										    Nous avons créé notre site que voici dans le but de vous faire comprendre l'importance de notre activité!</br>
    											Ce site relatera tous les domaines de service dans lesquels nous exerçons à travers tout le continent!
    										</p>	
    											</br>
    										<p class="coul"> 
    											<marquee class="marq" scrollamount="5" direction="left" onmouseover="this.stop()" onmouseout="this.start()"> 
    											        <em> 
    													    <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --
    													Bienvenue sur votre site de prestation de services! Bienvenue sur votre site de prestation de services!
    													<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --
    													Bienvenue sur votre site de prestation de services!</em>
    											</marquee> 
    										</p>
                                </div>
    						    </div> -->			
        </header>

    3) Le css de la page footer qui est "footer.css"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
     
    {
    /* background: url('images/ico_top.png') no-repeat top center,
    url('images/separateur.jpg') repeat-x top, url('images/ombre.png')
    repeat-x top; */
        /* width:1200px; */
    	height:auto;
        border-bottom: 3px solid rgb(192,192,192);
    	border-top: 3px solid rgb(192,192,192);
    	background-color:rgb(73,63,64);
        padding-top: 25px;
    	margin-left:-300px;
    	margin-right:-300px;
    	margin-top:-50px;
    	margin-bottom:-50px;
    	padding-bottom:150px;
    }
    footer p, footer ul
    {
    font-size: 1em;
    }
    footer h1
    {
    font-size: 1.1em;
    }
    #tweet, #mes_photos, #mes_amis
    {
    display: inline-block;
    vertical-align: top;
    }
     
    #tweet
    {
    width: 28%;
    margin-left:300px;
    margin-right:-200px;
    }
     
    #mes_photos
    {
    width: 40%;
    margin-right:-80px;
    }
     
    #mes_amis
    {
    width: 31%;
    margin-left:-80px;
    }
     
    #mes_photos img
    {
    border: 1px solid #181818;
    margin-right: -40px;
    margin-left:40px;
    }
     
    #mes_amis ul
    {
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    width: 48%;
    list-style-image: url('images/ico_liensexterne.png');
    padding-left: 2px;
     
    }
     
    #mes_amis a
    {
    text-decoration: none;
    color: #760001;
    }
    5) Le css de la page index est "tuto.css"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
     
    body {
      padding-top: 10px;
    }
    [class*="col-"], footer {
      /*background-color: lightgreen; */
      background: url("images/fnd.jpg") no-repeat center center;
      border: 2px solid blue;
      border-radius: 6px;
      line-height: 40px;
      text-align: center;
    }
     
    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
     
    @media (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    @media (min-width: 992px) {
      .container {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .container {
        width: 1170px;
      }
    }
     
    .art1
    {
     
    	background: url("images/G7.jpg") fixed no-repeat; /*background: url("images/fnd.jpg") no-repeat center center; *background-image:img src="    background: url('../images/fnd.jpg') no-repeat center center; */
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

  2. #2
    Membre expérimenté
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2012
    Messages
    170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2012
    Messages : 170
    Par défaut
    Bonjour,

    Tu dois revoir ta conception de la page car lorsque tu defini la taille en col-md d'une div il faut que tu sache comment se reparti le reste si tu n'affecte pas le max.
    Les div enfant doivent aussi etre structurées de la meme maniere.
    tu dois savoir que les div filles se divisent selon le meme principe.

    Revoir principe de division de la page selon les grid de bootstrap:

    https://www.w3schools.com/bootstrap/...d_examples.asp

    Bon courage

Discussions similaires

  1. Bootstrap Sidebar Changer background color hover
    Par defacta dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 24/08/2016, 14h25
  2. [CSS 3] Bouton background-color avec Bootstrap 2
    Par Leinox dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 17/06/2014, 11h22
  3. [CSS 3] background color bootstrap
    Par gwendoline-bricout dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 03/12/2013, 12h07
  4. Insérer une image en background sur bootstrap
    Par Schim59 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/11/2012, 10h05
  5. Réponses: 19
    Dernier message: 13/07/2008, 21h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo