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 :

Problème de DIV dans un DIV IE7 [CSS 2]


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Août 2009
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Août 2009
    Messages : 45
    Par défaut Problème de DIV dans un DIV IE7
    Bonjour à tous,

    Je suis en plein test d'un élément genre ticket pour une news.

    Tout fonctionne au top mais malheureusement sous IE7 j'ai un petit saut d'environ 2-3 pixels vers le bas au niveau du <h2> et de la dernière ligne du <p>... et mon <div id="news_cel_right"> saute complètement....

    Est-il possible de règler ce problème ? Si oui merci d'avance pour votre aide ;-)

    Le 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
    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
     
    body {
    	background: #0d0e13;
    	color:#FFF;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:12px;
    	line-height:1.1em;
    	font-size-adjust:none;
    	font-stretch:normal;
    	font-style:normal;
    	font-variant:normal;
    	font-weight:normal;
    	line-height:normal;
    	margin:0px;
    }
    a img {
    	border: 0 none;
    }
    a {
    	outline: none;
    }    /* TEST */
    #news_cel {
    	border-top:1px solid #09090a;
    	border-left:1px solid #09090a;
    	border-right:1px solid #09090a;
    	width:450px;
    	height:77px;
    	background:#333;
    	margin:0px;
    }
    #news_cel a {
    	text-decoration:none;
    }
    #news_cel h1 {
    	color:#B10000;
    	text-transform:uppercase;
    	font-size:13px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-weight:bold;
    	margin:1px 0px 0px 10px;
    	display: inline;
    	position: absolute;
    }
    #news_cel .phone {
    	color:#5c5c5d;
    	font-size:13px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-weight:bold;
    	margin-left:5px;
    }
    #news_cel p {
    	color:#FFF;
    	font-size:12px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	display:inline;
    	position:absolute;
    	width:250px;
    	line-height:1.4em;
    	margin-left:10px;
    	margin-top:25px;
    }
    #news_cel .thumb {
    	margin:5px 0px 10px 5px;
    	border:1px solid #FFF;
    	float:left;
    }
    #news_cel .thumb:hover {
    	border:1px solid #B10000;
    	opacity:0.7;
    	filter : alpha(opacity=70);
    }
    #news_cel_right {
    	border-left:1px solid #09090a;
    	float:right;
    	height:77px;
    	text-align:center;
    	margin:0;
    	width:110px;
    }
    #news_cel:hover #news_cel_right {
    	background:url(../img/bck_news.png) repeat-x;
    	cursor:pointer;
    }
    #news_cel_right .date {
    	color:#575758;
    	font-size:10px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	display:block;
    	margin-top:3px;
    }
    #news_cel_right h2 {
    	color:#FFF;
    	text-transform:uppercase;
    	font-size:11px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-weight:bold;
    	margin:10px 0px 0px 0px;
    }
    #news_cel_right img {
    	margin-top:10px;
    	margin-left:auto;
    	margin-right:auto;
    }
    #news_cel_right a:link, a:hover, a:visited {
    	text-decoration:none;
    }
    et le 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
     
    <!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>Test CSS</title>
    <link href="css/teststyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <br />
    <br />
    <div id="news_cel"> <a href="#"><img src="image.jpg" class="thumb"/></a> <a href="#">
      <div id="news_cel_right"> <span class="date">27 Septembre 2009</span> <img src="img/arrow.gif" />
        <h2>VOIR LE PROFIL</h2>
      </div>
      </a>
      <h1>Pseudo & Pseudo 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    </div>
    <div id="news_cel"> <a href="#"><img src="image.jpg" class="thumb"/></a> <a href="#">
      <div id="news_cel_right"> <span class="date">27 Septembre 2009</span> <img src="img/arrow.gif" />
        <h2>VOIR LE PROFIL</h2>
      </div>
      </a>
      <h1>Pseudo & Pseudo 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    </div>
    <div id="news_cel"> <a href="#"><img src="image.jpg" class="thumb"/></a> <a href="#">
      <div id="news_cel_right"> <span class="date">27 Septembre 2009</span> <img src="img/arrow.gif" />
        <h2>VOIR LE PROFIL</h2>
      </div>
      </a>
      <h1>Pseudo & Pseudo 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    </div>
    </body>
    </html>
    Merci

  2. #2
    Membre expérimenté
    Avatar de tzilliox
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 153
    Par défaut
    Bonsoir actarus4444,

    Ton code est illisible en état. Avant de poster, pense à appuyer sur le bouton "Prévisualisation du message" et essaye de le rendre le plus clair possible. Tu auras ainsi plus de chance que quelqu'un te répondes !

    Sinon pour ton code...
    1. C'est assez peu conforme de mettre un élément div dans un élément a. Tu ne peux donc pas prévoir comment chaque navigateur va l'interprêter. Penses à valider ton code à l'aide d'un validateur.

    2. Tu as utilisé des éléments avec des propriétés "float". Notamment pour #news_cel_right. Avec ce type d'élément tu perds le flux de ta page. Pour qu'il revienne, il te faut rajouter un élément utilisant la propriété "clear: both". Un peu comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="news_cel"> 
    	<a href="#"><img class="thumb" src="image.jpg"/></a>
    	<a href="#"><div id="news_cel_right"> <span class="date">27 Septembre 2009</span> <img src="img/arrow.gif"/> <h2>VOIR LE PROFIL</h2> </div></a>
    	<h1>Pseudo & Pseudo 2</h1>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    	<div style="clear: both">&nbsp;</div> 
    </div>
    Ca te permettra d'avoir de nouveau de la couleur de fond derrière "Voir le profil".

    J'espère que ça t'aidera,
    Thomas.

  3. #3
    Membre averti
    Inscrit en
    Août 2009
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Août 2009
    Messages : 45
    Par défaut
    Désolé je viens de corriger l'affichage... de mon code j'espère que c'est plus claire

    Merci pour ton aide ;-) y aurait-il une autre solution pour construire mon exemple plus proprement (par rapport à mon exemple) ? Parce que cela me semble très très compliqué pour tout simplement faire ce petit "rectangle"....

    Merci
    Images attachées Images attachées  

  4. #4
    Membre expérimenté
    Avatar de tzilliox
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 153
    Par défaut
    Salut actarus4444 !

    C'est en effet beaucoup mieux ! Mais il manque encore l'indentation

    Je te propose une interprétation toute personnelle de ta maquette. Peut-être que ça te donnera des idées !

    code 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
     
    <!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>Test CSS</title>
    	<link href="teststyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
     
    	<div class="news_cel">
    		<a href="#"><img src="avatar.png" class="thumb"/></a>
    		<div class="info">
    			<span class="date">27 Septembre 2009</span><br/>
    			<a href="#" class="profil">Voir profil</a>
    		</div>
    		<div class="centre">
    			<a href="#" class="title">Titre d'une news</a>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    		</div>
    		<div class="clearing"> </div>
    	</div>
     
    	<div class="news_cel">
    		<a href="#"><img src="avatar.png" class="thumb"/></a>
    		<div class="info">
    			<span class="date">27 Septembre 2009</span><br/>
    			<a href="#" class="profil">Voir profil</a>
    		</div>
    		<div class="centre">
    			<a href="#" class="title">Titre d'une news plus longue</a>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet risus sem, semper iaculis ligula...</p>
    		</div>
    		<div class="clearing"> </div>
    	</div>
     
    	<div class="news_cel">
    		<a href="#"><img src="avatar.png" class="thumb"/></a>
    		<div class="info">
    			<span class="date">27 Septembre 2009</span><br/>
    			<a href="#" class="profil">Voir profil</a>
    		</div>
    		<div class="centre">
    			<a href="#" class="title">Titre d'une news plus courte</a>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    		</div>
    		<div class="clearing"> </div>
    	</div>
    </body>
    </html>
    Code 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
     
    body {
    	background: #FFF;
    	color: #000;
    	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; 
    	font-size: 12px;
    	line-height: 1.1em;
    	margin: 0;
    	padding: 0;
    }
    a img {
    	border: 0 none;
    }
    a {
    	outline: none;
    }
     
    /* TEST */
    .news_cel {
    	width: 450px;
    	border: 1px black solid;
    	margin: 5px;
    	color: #990000;
    	font-weight: bold;}
    	.news_cel a {
    		color: #990000;
    		text-decoration: none;}
    	.news_cel a:hover {
    		text-decoration: underline;}
     
    	.news_cel img.thumb {
    		float: left;
    		width: 61px;
    		height: 61px;
    		margin: 6px;}
     
    	.news_cel .info {
    		float: right;
    		width: 110px;
    		padding: 6px 0;
    		background-color: #cccccc;
    		border: 1px black solid;
    		margin: -1px;
    		text-align: center;}
    		.news_cel .info .date {
    			font-size: 0.8em;}
    		.news_cel .info .profil {
    			display: inline-block;
    			padding-top: 36px;
    			background: url('fleche.png') center top no-repeat;
    			text-transform: uppercase;}
     
    	.news_cel .centre {
    		margin-left: 75px;
    		margin-right: 110px;
    		padding: 5px 0;
    		text-align: left;
    		line-height: 1.2em;}
    		.news_cel .centre a.title {
    			font-size: 1.2em;
    			text-transform: uppercase;}
    		.news_cel .centre p {
    			margin: 0;
    			padding: 0.5em 0 0;
    			font-weight: normal;}
     
    .clearing {
    	clear: both;}
    Bon courage,
    Thomas.

  5. #5
    Membre averti
    Inscrit en
    Août 2009
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Août 2009
    Messages : 45
    Par défaut
    Un grand merci pour ton aide

    Je vais tester tout ça !!!

  6. #6
    Membre averti
    Inscrit en
    Août 2009
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Août 2009
    Messages : 45
    Par défaut
    Malheureusement ca pète toujours :-( le div news_cel_right est toujours décalé vers le bas dans IE7...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Contenu dans une DIV avec scrollbar sous IE7
    Par miltonis dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/03/2010, 10h59
  2. Div dans une div problème avec firefox
    Par mathias59 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/12/2009, 15h52
  3. problème de placement dans une div
    Par dom_dev dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 04/07/2007, 11h13
  4. [CSS] Grand div dans petit div
    Par quidam66 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 12/05/2006, 19h01
  5. [CSS][debutant] problème de position de 2 div dans un div
    Par nixonne dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 06/12/2005, 14h12

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