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

Unable to use the ordered tag correctly in typing

Please review the HTML and CSS Code provided below: HTML : <ol> <li>Test</li> <li> <ol> <li>Sub-Chapter</li> <li>Sub-Chapter</li> </ol> < ...

htmlcss

Ways to display a vertical scrollbar within a select box

I'm currently working with an Angular select box and I'm looking to display a scroll bar if there are more than 5 data entries. <select class="form-control" data-ng-model='projectListData.appVersion' ng-selected ng-options="v.versio ...

jqueryangularjshtmlcss

Tips for making sure custom fonts are loaded before running any JavaScript code

Upon loading my page, I run a JavaScript function to determine if specific text fits within its parent div. If it doesn't fit, then adjustments must be made. The text is styled with a custom font, which can be loaded either through @font-face or Goog ...

javascriptcssfonts

Special Bootstrap's hamburger menu

My website has a vertical navigation bar with a breakpoint set for medium-sized screens to display a hamburger menu. When the hamburger menu appears, I want to hide the text following the icons to save space and only show the icons. Clicking on the hamburg ...

htmlcssdrop-down-menuresponsive-designbootstrap-4

What could be causing my website to lose its responsiveness after linking a domain?

Recently, I created a basic website for an event in my town using AWS Amplify from Amazon. Initially, the website was hosted without a custom domain and had a random URL. It worked well on both web and mobile platforms. However, after connecting a custom d ...

htmlangulardnsaws-amplify

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

javascripthtmlvue.jsvuejs3modal-dialog

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

Enhance Your Layout with Bootstrap 5 Images and Centered Elements

As I delve into learning Bootstrap 5, I am experimenting with creating a more "advanced" layout. The idea is to have two images positioned next to each other with titles below them, and a div centered between both. Ultimately, they will be displayed in a r ...

htmlcsstwitter-bootstraplayoutbootstrap-5

Adjust the size of the child div to fit the remaining space within the parent div

I'm dealing with a situation where there are two child divs inside a parent div. The first child div takes up 32% of the width, while the second child div takes up 68% of the width. If I were to set the display of the first child div to "none", how ca ...

htmlcss

When hovering over the bootstrap dropdown, the main dropdown remains a clickable link

How can I create a bootstrap dropdown menu that activates on hover, while still allowing the main button to link to a different page when clicked? Below is the HTML code: <div class="body-wrap"> <div class="container"> <nav class="navbar n ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Unable to conduct this search with Python using Selenium on a website

I have written a script to search for books on a webpage using Selenium: from selenium import webdriver from selenium.webdriver.common.keys import Keys import time PATH = "C:\Program Files (x86)\chromedriver.exe" driver = webdriver.Chrome(PATH) ...

pythonhtmlseleniumweb-scrapingscrape

Incorporating a download link with the combination of canvg and amcharts

I am attempting to include a download link on a page that utilizes AmCharts and CanVG. The visualization of the graph and image is functioning properly. Now, I am in need of a download link to offer users the ability to download the displayed graph image. ...

phpjqueryhtmlcanvg

Execute AJAX function when loading a form populated from a MySQL/PHP database

I am currently working on a drop-down menu that is being populated from a MySQL table using PHP. The goal is to have a second drop-down menu triggered based on the selection made in the first form. This functionality works perfectly when a selection is mad ...

phphtmlmysqlajax

What is the best way to apply a border to a div with the style 'overflow:auto' specifically when the scrollbar is in use?

I am facing an issue with a dynamically filled div where the content exceeds a specific height, causing overflow:auto to display a scroll bar only after surpassing that threshold. My task now is to apply a 1px border around the entire div only when the co ...

htmlcoding-stylescrollbaroverflow

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

cssreactjsmaterial-uiappbarcenter-align

Is it possible to modify the CSS of a parent element in vue.js only for the current router route?

I am trying to modify the parent component's style without affecting the CSS of other components. Here is an example from my code: App.vue <div class="page-content"> <router-view ref="routeview"></router-view> </div> rou ...

cssvue.js

Alerting JavaScript with element Selector doesn't function at full capacity

I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...

javascriptjqueryhtmlnotifyjs