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 :

Probleme avec les div (HTML) Mise en page


Sujet :

CSS

  1. #1
    Membre à l'essai
    Inscrit en
    Mai 2007
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 25
    Points : 11
    Points
    11
    Par défaut Probleme avec les div (HTML) Mise en page
    Bonjour,
    mon probleme c'est que j'arrive pas a eliminer un espace sur la droite de ma page web, et je ne sais pas d'ou vient, pourtant j'ai bien defini les marges des div et leur largeur, jl'ai essayé sur mozilla ca a marché tres bien, mais non sur IE. voici le code de la page
    voila un lien vers la page www.webjeune.com/test/test.html
    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
    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
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
     
    <!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>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
    <TITLE>Untitled Document</TITLE>
    <STYLE TYPE="text/css">
    body
    {
    	margin: 0px 0 ;
    	padding: 0 ;
    	text-align: center ;
    	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
    	background: #dea ;
    }
     
    div#conteneur
    {
    	width: 850px ;
    	margin: 0 auto ;
    	border: 2px solid #ab4 ;
    	background: #fff ;
    }
     
    div#minichat
    {
    	width: 850px;
    	height: 34px;
    	margin: 63px 20px -15px;
    	text-align: left ;
    	background: url(images/index_r2_c2.jpg) no-repeat;
    }
    div#div_test
    {
    	margin: -12px 350px 0px;
    	width: 400px;
    	float:left;
    }
    div#bouton1
    {
    	margin-top:-25px;
    	margin-left:400px;
    	height: 33px;
    }
    div#div_test p, div#bouton1 p
    {
    margin:0;
    padding:0;
    }
    div#top_artiste p, div#centre p
    {
    margin:0;
    padding:0;
    }
    h1#header
    {
    	height: 110px;
    	background: url(images/index_r1_c1.jpg) no-repeat left top;
    }
    div#contenu
    {
    	padding: 0 25px 0 100px ;
    	background: url(bg_page.gif) no-repeat 15px 15px ;
    }
    		div#contenu h2
    		{
    		text-decoration:underline;
    			padding-left: 25px ;
    			line-height: 25px ;
    			font-size: 1.4em ;
    			background: url(little_apple.gif) no-repeat left bottom ;
    			color: #9b2 ;
    		}
    		div#contenu p
    		{
    			text-align: center ;
    			text-indent: 2em ;
    			line-height: 1.7em ;
    		}
     
    div#top_artiste
    {
    	width: 216px;
    	height: 341px;
    	float:left;
    	background: url(images/index_r7_c1.jpg) no-repeat;
     
    }
    div#centre
    {
    	margin-left:0px;
    	margin-top: 50px;
    	height: 240px;
    	width: 500px;
    	float:left;
    }
    div#lecteur
    {
    	margin-left:10px;
    	margin-top: 0px;
    	height: 240px;
    	background-color:#0099FF;
    	width: 240px;
    	float:left;
    }
    div#photo
    {
    	margin-left:0px;
    	margin-top: 0px;
    	width: 240px;
    	background-color:#0099FF;
    	height: 240px;
    	float: right;
    }
    ul#menu
    {
    	height: 26px ;
    	width: 600px;
    	margin: -54px 300px ;
    	padding: 0 ;
    	background:url(images/bg_menu.gif) no-repeat -25px; 	
    	list-style-type: none ;
    }
     
    		ul#menu li
    		{
    			float: left ;
    			text-align:center;
    		}
     
    		ul#menu li a
    		{
    			width: 130px ;
    			line-height: 25px ;
    			font-size: 1.2em ;
    			font-weight: bold ;
    			letter-spacing: 2px ;
    			color: #fff ;
    			display: block ;
    			text-decoration: none ;
    			border-right: 2px solid #dea ;
    			font-size: 12px;
    		}	
    		ul#menu li a:hover
    		{
    	background: url(images/bg_menu.gif) no-repeat 0 -25px ;
    }
    a.bouton {
    margin: 200px 410px -10px;
      color: white;
      background-color: #000080;
      text-decoration: none;
      font-weight: bold;
      text-align: center;
      padding: 5px;
    }
    a.bouton:hover {
      background-color: #6495ED;
      background-image: url(aqua.jpg);
    }
     
    .style2 {color: #0099FF; font-weight: bold; font-size: 16px; font-family: Arial; }
    </STYLE>
    <script type="text/javascript">
    <!--
    Normal1 = new Image();
    Normal1.src = "images/index_r6_c25.jpg";     
    Highlight1 = new Image();
    Highlight1.src = "images/index_r6_c30.jpg"; 
     
    function change_image(image_no,objet_image) {
     window.document.images[image_no].src = objet_image.src;
    }
    //-->
    </script>
    </HEAD>
     
    <BODY>
    <div id="conteneur">
    <H1 id="header"></H1>
    		<ul id="menu">
    			<li><a href="etape1.html">Accueil</a></li>
    			<li><a href="etape2.html">Cartes Voeux</a></li>
     
    			<li><a href="etape3.html">Votre playliste</a></li>
    			<li><a href="etape4.html">Nous contacter</a></li>
    		</ul>
    <div id="minichat">
    </div>
    <div id="div_test" align="center" class="arrow">
     <p> <div align="center">mini chat 
      </div></p>
    <p><div id="bouton1"><img src="images/index_r6_c25.jpg" onMouseOver="change_image(0,Highlight1)"
       onMouseOut="change_image(0,Normal1)" onclick="window.open ('mini_chat.php', 'Message', config='height=180, width=330, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')"/></div></p>
    </div>
    <div id="contenu">
    <H2> Connect&eacute;s maintenant :  Aujourd'hui : Visiteurs au t&ocirc;tal </H2>
    <p>Bienvenue sur Webjeune votre Webradio en ligne, Pour pouvoir &eacute;couter le chanteur que vous d&eacute;sirer veuillez le choisir sur la liste ci-dessous</p>
    <h3>
      <form name="Choix" id="Choix">
        La liste des chanteurs :
                <select name="Liste" >
                  <option value="" selected="selected">Choisir un Artiste</option>
                  <option value="index.php?artist=Toutes les Chansons">Toutes les Chansons</option>
                  <option >=====================</option>
                </select>
        </form></h3>
    	<div id="top_artiste"><p></p></div>
    	<div id="centre">
    	<div id="lecteur"><p>dfd</p></div>
    	<div id="photo"><p>gfg</p></div></div>
    </div>
     
    </div>
     
    </BODY>
    </HTML>

  2. #2
    Membre éclairé Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Points : 786
    Points
    786
    Par défaut
    en enlevant le float:left; attribué à l'élément div#div_test, ça a l'air de fonctionner.

    est ce que ce float: left a une utilité ?

  3. #3
    Membre averti Avatar de htr999
    Profil pro
    Étudiant
    Inscrit en
    Février 2008
    Messages
    331
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2008
    Messages : 331
    Points : 394
    Points
    394
    Par défaut
    essaie de réduire la marge droite de ta div#contenu
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    padding:0pt 0px 0pt 100px;
    et d'élargir la largeur de ta div#centre
    a+

Discussions similaires

  1. Probleme avec les div
    Par black-hat dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 05/05/2012, 16h02
  2. mise en page avec les div
    Par wind_vinch dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 26/09/2007, 19h10
  3. mise en page, probleme avec les CSS, dernier petit problème
    Par rdams dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 20/09/2007, 16h10
  4. Probleme avec mes formulaire html dans mes pages web
    Par foungnigue dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/12/2005, 19h07

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