vignette avec un texte à droite?

J'ai une liste comme ceci:vignette avec un texte à droite?

<html> 

    <head> 
     <link type="text/css" rel="stylesheet" href="testli.css"> 
    </head> 

    <body> 
     <ul id='grok'> 
      <li> 
       <img src='na' class='cimg' /> 
       <div class='cinner'> 
        <p>Title, max two lines.</p> 
        <p>Some longish text, max two lines, causes problems when too long.</p> 
       </div> 
       <div style='clear:both'></div> 
      </li> 

      <li> 
       <img src='na' class='cimg' /> 
       <div class='cinner'> 
        <p>Title</p> 
        <p>Some longish text here which may wrap some and cause problems..</p> 
       </div> 
       <div style='clear:both'></div> 
      </li> 

     </ul> 

    </body> 
</html> 


// testli.css 
* { 
    margin:0; 
    padding:0; 
} 

#grok { 
    list-style-type: none; 
    width: 200px; 
} 

#grok li { 
    background-color: lightgreen; 
    margin: 5px; 
    padding: 5px; 
    text-align: left; 
} 

.cimg { 
    width:70px; 
    height:44px; 
    float:left; 
} 

.cinner { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    margin-left: 10px; 
    font:14px; 
}

lorsque le texte dans les éléments de p est courte, la mise en page se comporte comme je veux - la vignette et le texte doit apparaître comme si elles sont dans deux colonnes distinctes. Je cherche essentiellement à recréer les vignettes que YouTube a pour les éléments recommandés - une vignette sur la gauche, du texte dans une autre colonne à droite de celui-ci. Le titre et le texte permettaient chacun deux lignes de texte.

Si le texte est trop long, le div cinner est placé sous la miniature. Quelle est la bonne façon de forcer à être toujours à droite?

Merci

Source

2010-07-29 user246114

ce serait bien d'inclure un lien vers votre page , ou une page html complète de test pour se connecter à un navigateur. – vol7ron

ok ajouté full html/css pour un test – user246114

Vous pouvez le faire en définissant une min-height sur la <li> puis absolument positionner l'image à gauche du titre et la description:

#grok { 
    list-style-type: none; 
    width: 200px; 
} 

#grok li { 
    position: relative; 
    margin: 5px; 
    padding: 5px; 
    min-height: 44px; 

    /* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */ 
    height: auto !important; 
    height: 44px; 

    background-color: lightgreen; 
} 

.cimg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 70px; 
    height: 44px;   
} 

.cinner {  
    padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */ 
    font: 14px; 
}

Source

2010-07-29 02:55:56 Pat

Ajouter max-width-.cinner (si je ne me trompe pas - max-width: 110px).

Source

2010-07-29 02:53:02 kpower

ou juste 'width' ... –

Répondre

Questions connexes