18067 sujets

Questions générales et questions de débutants

[Résolu]Problème de positionnement, comment couper un DIV en 4 !

Pages :
(reprise du message précédent)

Bon ...
Voilà le résultat de mes recherches : 
#news { 
width: 352px;
height:141px;
background:url(news.gif) top left no-repeat;
margin-bottom:10px;
padding: 13px 0 0 13px;
}

#news img {
border:none;
}

#news_image {
margin: 0 10px 8px 0;
border: 1px solid #66ccc; 
float: left;
}

#news p { 
margin: 0 30px 0 0;
color:#999999;
font:0.8em "Arial", Helvetica, sans-serif;
text-align:justify;
}

#news_bottom{
clear:left
}

#news_bottom a {
border:none;
text-decoration:none;
color:#999999;
font: 0.75em "Arial", Helvetica, sans-serif;
}

#news_bottom a.texte {
display:block;
padding-top:5px;
}

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 1em "Arial", Helvetica, sans-serif;
}

a.droite {
float:right;
margin-right: 20px;
}


Et : 
<div id="news">
  <img id="news_image" width="120" height="96" src="Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#" class="texte"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>


Concernant le format de ton image, en voulant l'enregistrer pour faire les essais, je me suis rendue compte que le format pris en compte était un bitmap.
Je te conseille de le ré-enreigstrez avec ton logiciel d'image ...
Et de lui donner un nom plus court ! Smiley langue
Alors Voila c'est Quasiment PARFAIT

1. le problème de l'image, incomprehensible, encoder en JPEG Photoshop n'arrive pas à l'ouvrir (erreur dans le jpg), du coup apparement IE non plus.
Merci

2. Ton code est parfait, il me plait car il est "trés simple" c'est exactement ce que je cherche à faire (mon idole !! lol)

il me reste encore 2 petits problèmes
1. pas de cadre autour de l'image pourtant
border: 1px solid #66ccc;

toujours FF Vs IE
Nikel sous ie (sauf cadre) par contre décalage sous FF, pourquoi ?
http://gkooo.free.fr/Forum/alsacreation/news/news_cygnus_IE3.jpg
http://gkooo.free.fr/Forum/alsacreation/news/news_cygnus_FF3.jpg
Modifié par gcooo (15 Dec 2006 - 11:32)
Eh ben .... Smiley lol

Alors, concernant ton problème d'image, j'ai oublié de le corriger, mais il provient simplement de l'instruction que tu places précédemment :
#news img {
border:none;
}


Soit tu spécifies cette instruction pour l'image concernée :
#news a.droite img {
border:none;
}


Soit tu augmentes l'importance du sélecteur portant l'instruction border : 
#news #news_image {
margin: 0 10px 8px 0;
border: 1px solid #666CC; 
float: left;
}

Au passage, il manque un chiffre dans ton code héxadécimal... Smiley cligne

Sinon, pour le décalage, je suppose qu'il s'agit d'un problème de padding. Je te propose de l'augmenter légèrement et de le passer en margin comme ceci :
#news_bottom a.texte {
display:block;
margin-top:8px;
}

Modifié par Cygnus (15 Dec 2006 - 14:03)
Cygnus a écrit :


Soit tu spécifies cette instruction pour l'image concernée :
#news a.droite img {
border:none;
}


Ca j'ai compris, j'empêche le border uniquement autour de mon image en bas a droite

Cygnus a écrit :

Soit tu augmentes l'importance du sélecteur portant l'instruction border : 
#news #news_image {
margin: 0 10px 8px 0;
border: 1px solid #666CC; 
float: left;
}


Ca par contre j'ai pas compris le fonctionnement, j'attribue à la balise #news et à la balise #news_image un border, du coup mon bloc div va avoir un border apparent ? non ?

Cygnus a écrit :

Sinon, pour le décalage, je suppose qu'il s'agit d'un problème de padding. Je te propose de l'augmenter légèrement et de le passer en margin comme ceci :
#news_bottom a.texte {
display:block;
margin-top:8px;
}


j'ai trouvé en fait la class a.texte n'étais pas utilisé dans l'html Smiley biggol
j'ai modifié :
<a href="#"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>

par :
<a href="#" [b]class="texte"[/b]> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>

Modifié par gcooo (16 Dec 2006 - 00:29)
gcooo a écrit :
Ca j'ai compris, j'empêche le border uniquement autour de mon image en bas a droite

C'est tout à fait ça.
C'est d'ailleurs le plus simple à mon avis : ne spécifier l'instruction que là où tu en as besoin...


gcooo a écrit :
Ca par contre j'ai pas compris le fonctionnement, j'attribue à la balise #news et à la balise #news_image un border, du coup mon bloc div va avoir un border apparent ? non ?

Là, on donne plus de poids à l'instruction en spécifiant l'arborescence suivie pour arriver à l'élément :
on pointe #news_image qui lui même se trouve dans #news.
Un petit peu de lecture ?
- Comprendre l'héritage et la parenté des styles CSS
- Cascade CSS et priorité des sélecteurs

gcooo a écrit :

j'ai trouvé en fait la class a.texte n'étais pas utilisé dans l'html Smiley biggol

Il me semblait pourtant l'y avoir mis dans mon exemple...
Enfin, c'est pas grave, ton interprétation est bonne
Smiley cligne
Modifié par Cygnus (16 Dec 2006 - 00:40)
Cygnus a écrit :

Là, on donne plus de poids à l'instruction en spécifiant l'arborescence suivie pour arriver à l'élément :
on pointe #news_image qui lui même se trouve dans #news.


Ok, j'ai compris le principe, j'ai lu les docs.

Donc si j'ai bien compris, les paramètres :
margin: 0 10px 8px 0;
border: 1px solid #666CC;
float: left;
ne sont appliqués qu'aux balises #news_image qui se trouvent imbriqués dans une balise #news.

on défini #news img {sans border}
et on défini
#news #news_image {avec border bleu}

<div news>
  <div news_image>
    <img>[image avec cadre 1px solid #666CC]</img>
  </div>
  <img>[image sans cadre]</img>
</div>


EDIT : j'ai réussit avec les 2 méthodes !!!
Je post le code final avec les 2 methodes, ca pourrat peut etre aider quelques uns !! et je TAG [RESOLU]
Modifié par gcooo (16 Dec 2006 - 01:21)
VERSION 1, le cadre autour de l'image est defini par imbrication des balises #news #news_image.

<!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>Document sans nom</title>

<style>
#news img {
border:none;
}

#news { 
width: 352px;
height:141px;
background:url(images/news.gif) top left no-repeat;
margin-bottom:10px;
padding: 13px 0 0 13px;
}

#news #news_image {
margin: 0 10px 8px 0;
border: 1px solid #66cccc; 
float: left;
}


#news p { 
margin: 0 30px 0 0;
color:#999999;
font:0.8em "Arial", Helvetica, sans-serif;
text-align:justify;
}


#news_bottom{
clear:left
}

#news_bottom a {
border:none;
text-decoration:none;
color:#999999;
font: 0.75em "Arial", Helvetica, sans-serif;
}


#news_bottom a.texte {
display:block;
padding-top:5px;
}

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 1em "Arial", Helvetica, sans-serif;
}

a.droite {
float:right;
margin-right: 20px;
}


</style>

</head>

<body>
<div id="news">
  <img id="news_image" width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#" class="texte"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>

</body>
</html>


VERSION 2, Toutes les images de la news auront un cadre bleu, sauf l'image en bas a droite
<!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>Document sans nom</title>

<style>
#news { 
width: 352px;
height:141px;
background:url(images/news.gif) top left no-repeat;
margin-bottom:10px;
padding: 13px 0 0 13px;
}

#news_image {
margin: 0 10px 8px 0;
border: 1px solid #66cccc; 
float: left;
}


#news p { 
margin: 0 30px 0 0;
color:#999999;
font:0.8em "Arial", Helvetica, sans-serif;
text-align:justify;
}


#news_bottom{
clear:left
}

#news_bottom a {
border:none;
text-decoration:none;
color:#999999;
font: 0.75em "Arial", Helvetica, sans-serif;
}


#news_bottom a.texte {
display:block;
padding-top:5px;
}

#news a:hover {
text-decoration:underline;
color:#006699;
} 

.titre_news {
color: #ff9900;
font:bold 1em "Arial", Helvetica, sans-serif;
}

a.droite {
float:right;
margin-right: 20px;
}

a.droite img {
border:none;
}
</style>

</head>

<body>
<div id="news">
  <img id="news_image" width="120" height="96" src="images/Inaugurationsmt06_large.jpg" alt="inauguration_smt_2006" />
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dignissim tempor elit. Donec non lectus nec purus metus.</p>
    <div id="news_bottom">
      <a href="#" class="droite"><img src="images/btn_suite_bleu_clair.gif" alt="btn_suite" /></a>
      <a href="#" class="texte"> 10/12/2006 : <span class="titre_news">ceci est le titre de ma video</span></a>
    </div>
</div>

</body>
</html>
Pages :
Sujet clos
Aller à