28173 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

La bordure de mon conteneur_news ne veut plus englober mon footer_news et full_news. Comment puis je remédier a ce problème ?


<style type="text/css">
<!--
#conteneur_news {
border: 1px solid #777;
}
#header_news {
float:left;
}
#hits_news {
text-align:right;
float:right;
}
#core_news {
clear:both;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;

}
#footer_news {
float:left;
}
#full_news {
text-align:right;
float:right;
}
-->
</style>
<div id="conteneur_news">
<div id="header_news">test</div>
<div id="hits_news">test</div>
<div id="core_news">test</div>
<div id="footer_news">test</div>
<div id="full_news">test</div>
</div>

Modifié par jaribu (26 May 2006 - 21:01)
oups j'ai parlé trop vite Smiley confus
Voilà sous firefox l'affichage est nikel mais sous IE pas du tout .
Maintenant mon conteneur déborde sur mon footer :

#footer{
border-top:1px solid #111;
border-bottom:1px solid #111;
color: #eee;
background: #555;
clear:both;
padding: 5px;
 text-align:center;
 margin-left: auto;
 display:block;
  margin-right: auto;
  font-size: 0.9em;
  font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  height: 45px;
}
ton "footer", tu le mets où?
à la place de "footer_news", je suppose?

t'as pas un exemple en ligne?, ou le code html en entier???
Modifié par hophop (26 May 2006 - 14:30)
Non mon "footer_news" reste tel quel, mon "footer" doit être détaché de tout mon "conteneur_news".
Modifié par jaribu (26 May 2006 - 14:31)
pardon de te dire ça, mais c'est un peu le bordel dans ton code html Smiley ohwell .
et étant donné que je ne suis pas non plus un pro (loin de là, plutôt novice)
si tu pouvais bien mettre en évidence ton arborescence, ce serait plus facile.

Je dois avouer que ton css est un peu compliqué pour si "peu". je veux dire qu'il pourrait être simplifié.
Modifié par hophop (26 May 2006 - 15:46)
trouvé ! Smiley lol

une fois de plus c'était tout bête...
le souci vient du fait que tu utilises les attributs float: left et right, deux fois chacun dans un même contenu..., forcément ça passe pas.il s'arretera après ta <div> en clear:both.
Réattribuer des floats signifie alors que tu recommences un nouveau contenu

Donc tu peux enlever l'attribut position du conteneur, il ne sert à rien dans ce cas (il est lui même contenu dans une autre <div>).
2 solutions:
soit tu revois ta disposition,
soit tu recrées un nouveau conteneur, ce qui te donnerai en gros :


#conteneur_news {
border-right: 1px solid #777;
border-top: 1px solid #777;
border-left: 1px solid #777;
width: 550px;
}
#conteneur_news2{
border-right: 1px solid #777;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
width: 550px;
}


et le html:

<!-- DEBUT DU 1er CONTENU -->

<div id="conteneur_news">
	<div id="header_news">
	<a class="pn-title" style="text-decoration: none;" href="http://sylvie.jaribu.org/index.php?module=Pagesetter&amp;func=viewpub&amp;tid=2&amp;pid=0">news1</a>	</div>
	<div id="hits_news">16 lectures</div>
	
	<div id="core_news">texte court de presentation	</div>
</div>


<!-- DEBUT DU 2e CONTENU -->

<div id="conteneur_news2">
	<div id="footer_news">Jaribu -  Le lundi 22 mai 2006</div>
	<div id="full_news">Lire la suite... '<a class="pn-title" style="text-decoration: none;" href="http://sylvie.jaribu.org/index.php?module=Pagesetter&amp;func=viewpub&amp;tid=2&amp;pid=0">news1</a>'</div>
	

</div>