The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Split - How do I set the widths of two images on the screen?
bhs67
post Aug 15 2024, 01:02 PM
Post #1





Group: Members
Posts: 9
Joined: 17-April 24
Member No.: 29,168
index.html
--------------------------
<main>
<div id="blocksAndButtons" class="split left">
<div id="blocklyDiv"></div>
</div>
<div id="canvasContainer" class="split right">
<canvas id="canvas" width="450" height="260"></canvas>
</div>
<script src="cars/image.js"></script>
</main>
--------------------------

index.css
--------------------------
body{
font-family: 'Courier New', Courier, monospace;
text-align: center;
#canvasContainer {
display: flex;
margin-top: 20px;
margin-right: 20px;
}
#blocksAndButtons {
margin-top: 20px;
margin-left: 20px;
}
}
.split {
height: 100%;
width: 40%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left {
left: 0;
}
.right {
right: 0;
}
--------------------------
Split - How do I set the widths of two images on the screen? I want the left side to be 60% and the right side to be 40%
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 15 2024, 03:44 PM
Post #2


Serious Coder
*****

Group: Members
Posts: 258
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there bhs67,

here is a basic example...

index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Two images side by side</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Two images side by side</h1>

<div id="images-container">
  <img src="https://dummyimage.com/600x400/f00/fff.jpg" alt="image description">
  <img src="https://dummyimage.com/400x400/00f/fff.jpg" alt="image description">
</div>

</body>
</html>


screen.css
CODE

body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5 'Courier New', Courier, monospace;
}
h1 {
   font-size: 1.25em;
   text-align: center;
}
#images-container {
   display: flex;
   gap: 0.2em;
   padding: 0.2em;
   border: 1px solid #000;
}
#images-container img:first-of-type {
   width: 60%;
   height: auto;

}
div img:last-of-type {
   width: 40%;
   height: auto;
}



coothead

This post has been edited by coothead: Aug 15 2024, 03:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 15 2024, 04:21 PM
Post #3


Serious Coder
*****

Group: Members
Posts: 258
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743

...and here is another...

index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Two images left and right</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Two images left and right</h1>

<div class="image-container">
  <img src="https://dummyimage.com/600x400/f00/fff.jpg" alt="image description">
</div>
<div class="image-container">
  <img src="https://dummyimage.com/400x400/00f/fff.jpg" alt="image description">
</div>

</body>
</html>


screen.css
CODE

body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5 'Courier New', Courier, monospace;
}
h1 {
   font-size: 1.25em;
   text-align: center;
}
.image-container {
   display: flex;
}
.image-container:last-of-type  {
   flex-direction: row-reverse;
}
.image-container:first-of-type img {
   width: 60%;
   height: auto;
}
.image-container:last-of-type  img {
   width: 40%;
   height: auto;
}


Just take your pick. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post Aug 18 2024, 07:54 AM
Post #4





Group: Members
Posts: 9
Joined: 17-April 24
Member No.: 29,168
This is what I used to display - https://snipboard.io/UCVY5k.jpg. This code is at Github - https://github.com/bhs67/Split-Forum-Before.

This is after I made after I made the recommended changes - https://snipboard.io/KAiae1.jpg. This code is at https://github.com/bhs67/Split-Forum-After.

I made some errors in the files in my "Split Forum After" folder. I want the two images next to each.

This post has been edited by bhs67: Aug 18 2024, 08:05 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post Aug 21 2024, 06:50 AM
Post #5





Group: Members
Posts: 9
Joined: 17-April 24
Member No.: 29,168
coothead, Your first post works! Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 21 2024, 06:57 AM
Post #6


Serious Coder
*****

Group: Members
Posts: 258
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(bhs67 @ Aug 21 2024, 12:50 PM) *

coothead, Your first post works! Thanks!



...and so does my second. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sue-Ellen
post Dec 25 2024, 09:12 AM
Post #7


Newbie
*

Group: Members
Posts: 14
Joined: 2-September 06
Member No.: 53
That's one sexy banana! wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Dec 25 2024, 09:51 AM
Post #8


Serious Coder
*****

Group: Members
Posts: 258
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(Sue-Ellen @ Dec 25 2024, 03:12 PM) *

That's one sexy banana! wub.gif



¡Ay, caramba! IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th May 2025 - 05:48 AM
Invision Power Board © 2025  IPS, Inc.
Licensed to: HTMLHelp.com, LLC