28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Float et Positionnement : "sortir" un bloc de son c

Bonjour à tous,

Jusqu'ici je pensais avoir tout comlpris sur la fonctionnement de Float et du respect du flux... il semblerait que ce n'est pas le cas Smiley ohwell

Je construis un site qui doit avoir un élément qui "dépasse" de son conteneur et qu'en même temps il reste dans le flux car il doit se positionner en dessous d'un autre élément (dans la colonne de gauche)
Pour faire "sortir" le bloc de son cadre, je le positionne en Absolute, mais dans ce cas il ne suit plus le flux de positionnement et ne se place pas en-dessous du menu.
Du coup je ne le positionne pas mais dans ce cas il ne dépasse pas de son conteneur et l'image est "rognée".

Voyez les images ci-dessous. Elles représentent le bord gauche de la page : une c'est ce que j'aimerais, l'autre c'est ce que ça fait dans le cas d'un non-positionnement..
http://miltonis.free.fr/001.gif
http://miltonis.free.fr/002.gif

J'ai joué avec les z-index et les positionnements, ça ne le fait pas. Alors je viens demander un coup de pouce... Smiley smile

voici le code html, le bloc concerné est le blocPromo :
<div id="wrapper">
  <div id="header"></div>
  
  <div id="contenu">
    ...............
    
    <div class="blocContenu">
    
        <div class="gauche">
          <h1>Titre</h1>
          <h2>marque</h2>
          <div class="description">
            <p>....................</p>
          </div>
          
          <!-- Bloc Promo -->
          <div class="promoGauche">
            <img src="iimages/bloc_promos.png" alt="promotions..." />
          </div>                                                     
        </div>  
       
      <div class="catalogue">
        ...............
      </div>

..........
</div>
</div>
</div>


et le CSS :
/****** CONTENEURS *****/
div#wrapper {
	width: 1020px;
	margin: 0 auto;
}
div#contenu {
	position: relative;
	background-color: #FFF;
}
div.blocContenu {
	overflow: hidden;
	width: 1020px;
	margin-top: 18px;
	padding-bottom: 40px;
}

/***** BLOC DE GAUCHE *****/
div.gauche {
	position: relative;
	float: left;
	width: 206px;
	padding: 0 0 0 12px;
}

/* Bloc Promo */
div.promoGauche {
	position: absolute; /**/
	left: -17px;
}


voilà, j'espère que mes explications sont claires, merci !
Modifié par cevichero (09 May 2011 - 16:25)
j'avoue ne pas trop comprendre
exactement le problème...

je n'ai pas un niveau assez bon
pour voir le pb avec le peu d'élément de code ( enfin, je veux
dire le contexte global de la page)

car j'obtiens ceci

mais en changeant ton code car le code css actuel
ton bloc de pub est totalement rogné, en effet,mais pas comme dans ton image
Bonjour,
Peut-être que je me suis mal expliqué...
Pour plus dclarté j'ai mis la page en ligne cliquez ici

Le bloc de promo (rouge) j'aimerais qu'il dépasse du cadre de 17px pour que ça fasse un effet "onglet". ça je peux le faire, ce que je n'arrive pas à faire c'est qu'en plus le bloc se positionne après (en-dessous) le contenu du bloc gauche car la hauteur de ce contenu variera selon les pages.

Là, je l'ai placé dans le <div class="gauche">, mais si j'essaie de le faire sortir de 17px l'image du bloc est rognée...
faites-le test si vous voulez.

Avec le lien j'espère que ce sera plus simple pour comprendre.
Merci d'avance
Modifié par cevichero (09 May 2011 - 16:25)
Pour que la partie qui dépasse ne soit pas rogné, il ne faut pas que l'un des parent qui définissent cette limite soit en overflow:hidden mais en overflow:visible.

Dans ton cas, c'est div.blocContenu qui doit être en overflow:visible.
Sujet clos
Aller à