28172 sujets

CSS et mise en forme, CSS3

Problème décalage

Bonjour !

Je me suis lancé dans la création d'un site et j'ai un problème de décalage que j'essaie de régler depuis un bon bout de temps mais rien n'y fait Smiley smile

Voici un screen de mon soucis :

upload/32238-Untitled-2.jpg

Le "Sport" et son fond bleu transparent font décaler le titre "Kilian martin skate" alors que j'aimerais que celui ci se place bien comme dans le cadre de droite.

Voici le code html du cadre de gauche:

		<div id="bloc_video" onmouseout="this.style.background='#c0cfd6'" onmouseover="this.style.background='#ec8f28'" style="margin-right: 10px;">
        <a href="#">
        <img src="thumbs/thumb_video1.jpg" />
        <span class="fond_categorie"></span> 
        <span class="details">Sport</span></a>
        <h1><a href="#">Kilian Martin Skate</a></h1>
        <p>Ce skateur a son style bien à lui et est vraiment impressionnant a voir [smile] Parce que malgré que ses figures ne soient parfois "normales", il s'avère qu'il</p>
        <div id="bloc_video_bas">10/06/10 | 2394 hits | 18/20 | <a href="#">3 Commentaires</a></div>
</div>


et le code css (j'ai juste mis le code css de ce qui me semblait pouvoir causer le problème, s'il en manque, faites moi signe Smiley smile ):


#bloc_video img {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 90x;
	height: 90px;
	border: none;
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
	-khtml-border-radius: 2px;
	border-radius: 2px;
}

#bloc_video h1 {
	font-size: 8pt;
	font-weight: bold;
	margin: 0 0 0 0;
	text-indent: 5px;
}

#bloc_video a span.fond_categorie {
	position: relative;
	float:left;
	top: 75px;
	right: 95px;
	width:90px;
	height:15px;
	background:#41abde;
	filter:alpha(opacity=40);
	-moz-opacity:0.40;
	opacity:0.40;
}

#bloc_video a span.details {
	position: relative;
	top: 75px;
	right: 180px;
	font-size:11px;
	color:#ccc;
	padding:0px 3px;
}


Voila, merci d'avance si l'un d'entre vous arrive a m'aider car j'y ai passer un bon nombre d'heures ! Smiley smile

Ciao !
salut...euh là je vois pas...

c'est quoi le code du deuxième à droite ?

Sinon...

déjà pour le fond du div principal tu pourrais le faire en css

#bloc_video:hover{background-color:#ec8f28;}
#bloc_video{background-color:#c0cfd6;}


et pour ce qui est de la validation il manque le alt="quelquechose" dans ta balise img

pour l'instant c'est tout ce que je vois comme erreur entre guillemet
C'est noté pour le alt et pour les backgrounds color Smiley smile

Sinon celui de droite est exactement le même code sans le
<span class="fond_categorie"></span>
<span class="details">Sport</span>
(qui représente le fond bleu transparent et le nom de la catégorie)

--> voila le code exact: 
		<div id="bloc_video">
        <a href="#">
        <img src="thumbs/thumb_video2.jpg" /></a>
        <h1><a href="#">Parking Portable</a></h1>
        <p>Dans les grandes villes, c'est toujours la misère de trouver une place de parking libre, à Beijing en Chine, cette femme a trouvé une parade...</p>
        <div id="bloc_video_bas">10/06/10 | 2394 hits | 18/20 | 3 Commentaires</div>
	  </div>


any idea ?

Merci d'avance Smiley smile
Modifié par gaet666 (02 Sep 2010 - 14:00)
Ok !
Voici le code html du cadre dans lequel se trouvent les petits cadres des vidéos:

<div id="gauche">
	<div id="map">Map : Index</div><br /><br />
		<div id="bloc_video" style="margin-right: 10px;">
        <a href="#">
        <img src="thumbs/thumb_video1.jpg" alt="titre_video"/>
        <span class="fond_categorie"></span> 
        <span class="details">Sport</span></a>
        <h1><a href="#">Kilian Martin Skate</a></h1>
        <p>Ce skateur a son style bien à lui et est vraiment impressionnant a voir [smile] Parce que malgré que ses figures ne soient parfois "normales", il s'avère qu'il</p>
        <div id="bloc_video_bas">10/06/10 | 2394 hits | 18/20 | <a href="#">3 Commentaires</a></div>
</div>
		<div id="bloc_video">
        <a href="#">
        <img src="thumbs/thumb_video2.jpg" /></a>
        <h1><a href="#">Parking Portable</a></h1>
        <p>Dans les grandes villes, c'est toujours la misère de trouver une place de parking libre, à Beijing en Chine, cette femme a trouvé une parade...</p>
        <div id="bloc_video_bas">10/06/10 | 2394 hits | 18/20 | 3 Commentaires</div>
	  </div>
  </div>


et le code css de tout ce que ca concerne:

#gauche {
	float: left;
	width: 499px;
	height: auto;
	background-image: url(images/fond_cadre_video.jpg);
	background-position: top right;
	background-repeat: repeat-y;
	background-color: #c0cfd6;
	-moz-border-radius: 7px 0px 7px 7px; 
	-webkit-border-radius: 7px 0px 7px 7px; 
	-khtml-border-radius: 7px 0px 7px 7px;
	border-radius: 7px 0px 7px 7px;
	padding: 10px;
	margin-bottom: 15px;
}

#gauche h2 {
	font-size: 10pt;
	text-align: center;
	color:#de300c;
}

#map {
	float: left;
	height: 12px;
}

#bloc_video {
	float: left;
	width: 232px;
	height: 104px;
	margin-bottom: 10px;
	background-color: #c0cfd6;
	border: 1px solid #373737;
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	-khtml-border-radius: 4px;
	border-radius: 4px;
	padding: 5px;
}

#bloc_video:hover {
	background-color: #ec8f28;
}

#bloc_video img {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 90x;
	height: 90px;
	border: none;
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
	-khtml-border-radius: 2px;
	border-radius: 2px;
}

#bloc_video h1 {
	font-size: 8pt;
	font-weight: bold;
	margin: 0 0 0 0;
	text-indent: 5px;
}

#bloc_video p {
	text-align: justify;
	type: block;
	margin-top: 0px;
	margin-bottom: 0px;
}

#bloc_video a {
	text-decoration: none;
	font-weight: bold;
	color: #3F3E3E;
}

#bloc_video a:hover {
	text-decoration: none;
	font-weight: bold;
	color: #8f1f08;
}

#bloc_video a span.fond_categorie {
	position: relative;
	float:left;
	top: 75px;
	right: 95px;
	width:90px;
	height:15px;
	background:#41abde;
	filter:alpha(opacity=40);
	-moz-opacity:0.40;
	opacity:0.40;
}

#bloc_video a span.details {
	position: relative;
	top: 75px;
	right: 180px;
	font-size:11px;
	color:#ccc;
	padding:0px 3px;
}

#bloc_video_bas {
	float: left;
	font-size: 7pt;
	color: #5e5d5d;
}

#bloc_video_bas a {
	text-decoration: none;
	font-size: 7pt;
	color: #5e5d5d;
}

#bloc_video_bas a:hover {
	text-decoration: none;
	font-size: 7pt;
	color: #8f1f08;
}


J'espere que vous arrivez a vous y retrouver Smiley biggrin

Un tout grand merci !
Je te conseille d'encapsuler ta miniature avec le detail dans une div en relatif et de positionner le détail en absolu et de toujours utiliser cette structure.


        <div id="bloc_video" style="margin-right: 10px;"> 
             <div class="thumb_video">
                <a href="#"> 
                    <img src="thumbs/thumb_video1.jpg" alt="titre_video"/> 
                    <span class="fond_categorie">Sport</span>
                </a> 
            </div>
            <h1><a href="#">Kilian Martin Skate</a></h1> 
            <p>Ce skateur a son style bien à lui et est vraiment impressionnant a voir    Parce que malgré que ses figures ne soient parfois "normales", il s'avère qu'il</p> 
            <div id="bloc_video_bas">10/06/10 | 2394 hits | 18/20 | <a href="#">3 Commentaires</a></div> 
        </div> 




.thumb_video{
	position:relative;
}

#bloc_video a span.fond_categorie { 
    position: absolute; 
    top: 75px; 
    left:0; 
    width:90px; 
    height:15px; 
    background:#41abde; 
    filter:alpha(opacity=40); 
    -moz-opacity:0.40; 
    opacity:0.40; 
    font-size:11px; 
    color:#ccc; 
    padding:0px 3px; 
}


Au passage je te rappelle qu'un id a vocation à n'être utilisé qu'une seule fois dans ta page. Si ce n'est pas le cas utilise une classe plutôt.
Sujet clos
Aller à