Webpage with visual representation

Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption itself, which has proven challenging. After trying various methods like divs and tables, I'm seeking advice on accomplishing this task. You can view the current site here: drama site. Any help would be greatly appreciated!

Edit: Here is the part of the code I'm struggling with:

function windowSize() {
  var w = var w = document.getElementById('body').clientWidth;
  document.getElementById('newsTable').style.width = w + 'px';
  document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px';
}
<body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()">
  <table id="newsTable" cellpadding="0" border="0">
    <tr>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">1</td>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">2</td>
      <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">3</td>
    </tr>
    <tr>
      <td id="newsItems" align="center">4</td>
      <td id="newsItems" align="center">5</td>
      <td id="newsItems" align="center">6</td>
    </tr>
  </table>
</body>

I aim to adjust the size of the pictures to be smaller than in the provided link while maintaining some spacing between them. Currently facing an issue with image repetition as the page expands. Removing the repeat leads to blank spaces, so any solution is welcomed.

htmlcss

Answer №1

If you prefer a more user-friendly option, consider utilizing bootstrap for your layout needs. Bootstrap can handle much of the column work on your behalf. However, if that seems daunting, here is a straightforward solution with three images displayed side by side. Click here to view the example

In this approach, each image and its respective caption are enclosed in div containers with fixed widths.

.oneThird{
    width:30%;
    float:left;
    margin:.5%;
}
.oneThird img{
    width:100%;
}
<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>
<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>
<div class="oneThird">
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
    <p>Caption</p>
</div>

* Update * For those interested, here is a simple bootstrap demonstration. Check out the bootstrap example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for maintaining an organized layout of buttons on a compact screen

When the following HTML code is executed on a small screen, one or more buttons will naturally shift to the "lower line" in order to adjust to the screen size. While this may seem like a good thing initially, unfortunately, any button that moves down a row ...

html

Is it possible to utilize retina images with CSS3's :before selector?

Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...

css

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

How can I effectively store an HTML page with CSS in a MYSQL database? Is this even feasible? What type of column should be used for storage? And how can I retrieve the stored formatted HTML and display it correctly using PHP? If the page contains imag ...

phpmysqlhtml

Visual Studio Code version 1.42 is now automatically converting <br> tags to <br /> when formatting code

This issue just started occurring. I'm not exactly sure what triggered it, but it could be related to my attempt to activate the Preitter extension. As a newcomer to Visual Studio Code, I am currently working on HTML5 documents. Strangely, whenever I ...

htmlvisual-studio-codexhtml

Strip inline styles from HTML content in django-tinymce

I am experiencing an issue with django-tinymce where it automatically adds inline styles when I save content. I would prefer to remove this behavior and only save the content in plain HTML. Can someone assist me with resolving this problem? ...

htmldjangotinymcedjango-tinymce

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

htmlcssangulartypescript

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Exploring elements in Javascript

I am attempting to retrieve values from various elements when a 'a' element is clicked. Consider the following code: <tr data-id="20"> <div class="row"> <td> <div class="btn-group"> <a data-checked= ...

javascriptjqueryhtml

Utilizing Bootstrap to arrange table cells in a shifted manner

I'm new to utilizing bootstrap in web development. I've been exploring various examples of bootstrap templates that include tables, and I noticed that when I resize my browser window, the table adjusts accordingly. Now, I'm curious to know ...

javascriptjquerycsstwitter-bootstrap

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

Create a border surrounding the matColumn within a sticky matTable

I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on t ...

csshtml-tablecss-selectorsstickysiblings

Set the webpage to a fixed width

Is there a way to make my webpage fixed-width instead of liquid? I've tried changing the container size to pixels but the text still collapses when I resize the browser. Any suggestions on how to keep it at a fixed width? <!DOCTYPE html PUBLIC "-/ ...

html

Guide to building a personalized autocomplete feature in vue js

Presently, I am using the buefy autocomplete feature, but it is causing a few problems. In the DepartmentDetail.vue file <template slot-scope="props"> <div class="container is-fluid"> <b-loading :is-full-page=" ...

htmlvue.js

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

htmlcssjsfiddle

The Angular bootstrap datetimepicker doesn't support disabling past dates

Has anyone successfully disabled past dates on an angular bootstrap datetimepicker before? I've tried using the date-disabled attribute, but I can't seem to get it to work. <datetimepicker class="calendar-format" data-ng-model ...

javascriptangularjshtmlangular-ui-bootstrap

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

javascripthtmlnode.jsangulardom

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

csswebcolorsaccessibility

Ensuring various conditions with ngIf

I've created a toggle function that updates the text of a link, but I'm struggling to handle multiple conditions. For example, *ngIf="condition1 or condition2". Below is an excerpt from my code: <a routerLink="/ads" class="tip" (click)="togg ...

htmlangular

Align Bootstrap list items vertically

I'm facing a challenge with aligning the yellow list item blocks vertically in my design. The issue arises because the black dog item is not aligning properly due to its image being shorter than the other two blocks. I've been struggling to find ...

htmlcss