2 colonnes; panneau multi-accordéon

Question

Très bien, j'ai quelques problèmes et je crois que c'est un CSS. Voici ce sur quoi je travaille actuellement: http://www.notedls.com/demo/

En se concentrant sur le menu News accordéon. L'idée ici est d'avoir une petite image (50x50 avec rembourrage) et ensuite un gros titre à côté. Lorsque l'utilisateur clique sur le titre, il se propage à l'article. Si l'utilisateur souhaite lire des commentaires ou faire un commentaire lui-même, il peut alors cliquer sur Afficher les commentaires pour le développer davantage.

Le problème que j'ai (si ce n'est pas clair) est l'espacement avec l'image et le texte. Je pourrais simplement simplement augmenter la hauteur du ui.accordion-acc ou -left pour que tout soit en forme, mais cela ne résout pas le problème. Si vous remarquez que vous cliquez sur la première extension de Headline 1, les commentaires s'affichent sous l'image. C'est quelque chose que je ne veux pas, j'ai essayé de séparer ces éléments en divs supplémentaires et même en flottant, mais ça ne fonctionne tout simplement pas. Essentiellement, je veux un espace vide infiniment sous l'image pour quelque temps que l'article + les commentaires peuvent prendre le champ.

Answer 1

Essayez d'ajouter ce CSS:

ul#acc1 .acc1 { padding-left: 50px; } /* headline */ 
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */ 
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */ 
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */ 

je devais réduire la taille du bloc des commentaires de vue car il poussait vers la droite. Réglez le 50px, 55px, 487px (définir la largeur de 542px moins 55px) et 20px (juste en retrait du commentaire un peu plus) pour correspondre à la taille des vignettes.

---

Eh bien, le problème est il y a un accordéon dans un accordéon, de sorte que lorsque vous ajoutez les classes CSS d'accordéon génériques comme ul.ui-accordion-container li a.ui-accordion-link il affecte les deux niveaux. C'est pourquoi les commentaires ont baissé de 62px.

Vous avez déjà des classes plus spécifiques que vous pourriez utiliser ... essayez ceci ul.ui-accordion-container li a.acc1 mais je ne recommanderais pas d'ajouter une hauteur au lien, mais plutôt l'ajouter au <h1> pour correspondre à la hauteur de la vignette. Donc, essayez ceci:

h1 { 
float: left; 
margin: 0px; 
padding: 1px; 
font-size: 30px; 
color: #9667cc; 
height: 65px; 
} 
ul.ui-accordion-container li a.acc1 { 
display: block; 
padding-left: 5px; 
margin-right: 3px; 
height: 62px; 
color: #000; 
text-decoration: none; 
line-height: 28px; 
} 
ul.ui-accordion-container li a.acc2 { 
line-height: 28px; 
} 

Answer 2

Pourquoi le flottement n'a pas fonctionné? Je pense que vous pourriez faire quelque chose comme:

.img {float: left; width: 50px; padding: 5px;} 
.title {float: left; width: 300px; padding: 5px;} 
.clear {clear: both; height: 1px;} 

<div class="img"><img src="img/news_ffxiv_a.jpg"></div> 
<div class="title">TITLE</div> 
<div class="clear"><!-- --></div> 

Cela devrait créer un espace illimité sous l'image depuis l'autre div est flottais gauche contre. La clé est de faire flotter les deux objets, pas un seul.