My website showcases our expertise in various topics, each with a header, image, and a brief list. The page displays thumbnail images and headers for all topics, with one topic highlighted in full that users can navigate through by hovering over different headers. Each topic is managed as a separate file using Rails-generated HTML.
While I have a working solution, there are some issues that need addressing. You can view the current state of the project on this JSFiddle link.
Any guidance or input would be greatly appreciated!
- I am facing CSS & HTML issues with styling my 6 topics - should they remain in a list format or as individual divs? When adjusting the width of the top-level div (.showScene), the layout behaves differently between the right and left columns. How should the CSS structure look to address this?
- I currently use CSS to resize large images as thumbnails, but I'm unsure if it's best practice. Is it necessary to create separate thumbnail-sized images or can I continue using the existing large images for efficiency?
- Is utilizing jQuery .clone() for copying content into the highlighted pane the most effective method? I find duplicating content undesirable but without cloning, the header and thumbnail get displaced.
CSS:
.showScene{width: 1000px; border: 2px solid black; height: 400px; position: absolute;}
#exp {
// Additional CSS properties...
}
// More CSS styles...
HTML:
<div class='sliderContent'>
<ul>
<li><div class='showScene'>
<div id='exp'>
// HTML content here...
</div>
</div>
</li>
</ul>
</div>
JS:
// JavaScript code goes here...
var actual = 1;
$(document).ready(function() {
// JS functions called within document ready...
});