The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Help with responsive code for table
PuertoN
post Feb 3 2023, 07:08 AM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
Hello,
i am currently in the process of programming a new website for myself and for this i am using a Wordpress template, filling it with some individual HTML/CSS code. My biggest problem is the site is not responsive / the content is too big :-(
Please have a look at this, while resizing your window:

My Webpage

Here’s the code:

CODE

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html {height: 100%;}
            body {min-height: 100%;}
            table {border: hidden;}
            p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;}
</style>
    </head>
    
    <body>
        <div style="overflow-x:auto;">
        <table>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></td>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></td>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></td>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></td>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></td>    
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></td>    
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></td>            
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></td>
            <td style="min-width:636px;"><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></td>            
        </table>
            </div>
    </body>
</html>


I guess this has to do with the min-width of the pictures in my table…? Ideally the images should always fit the screen in height, while the width of the whole table can vary, making it scrollable sideways. Is there a maybe better way to give the pictures a size-attribute which is fluid on different screen sizes? Or any other way to make this work? I’ve tried so much already.
Some help would be greatly appreciated!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 3 2023, 10:45 AM
Post #2


Advanced Member
****

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

try it like this perhaps...

HTML
CODE

<ul>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></li>            
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></li>            
</ul>

CSS
CODE

* {
    box-sizing: border-box;
}
ul {
    max-width: 60em;
    margin: auto;
    padding: 0;
    list-style: none;
}
ul img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.5em 0;
    border: 1px solid #666;
}




coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 3 2023, 12:09 PM
Post #3


Advanced Member
****

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

I did not notice your example page before making my original reply
so try this code instead...

HTML
CODE

<h1>"tunnel vision"</h1>
<ul>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></li>            
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></li>            
</ul>

CSS
CODE

* {
    box-sizing: border-box;
}
body{
    background-color: #545557;
    font: normal 1em / 1.5  sans-serif;
}
h1 {
    font-size:  1.5em;
    font-weight:  normal;
    color: #fff;
    text-transform:  capitalize;
    text-align: center;
}
ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 450vw;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}
ul li {
    width: 50vw;
}
ul li img {
    display: block;
    width: 96%;
    height: auto;
    margin: auto;
}




coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 3 2023, 02:47 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(PuertoN @ Feb 3 2023, 01:08 PM) *

Ideally the images should always fit the screen in height

Do you mean, fit the entire height of the viewport with no other content visible? (I'm asking, since there's CSS for P elements in your code example.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 4 2023, 05:20 AM
Post #5


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(Christian J @ Feb 3 2023, 02:47 PM) *

QUOTE(PuertoN @ Feb 3 2023, 01:08 PM) *

Ideally the images should always fit the screen in height

Do you mean, fit the entire height of the viewport with no other content visible? (I'm asking, since there's CSS for P elements in your code example.)

Sorry, no of course all the other elements, like p and h1 above my table should also be visible
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 4 2023, 05:32 AM
Post #6


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(coothead @ Feb 3 2023, 12:09 PM) *

Hi there PuertoN,

I did not notice your example page before making my original reply
so try this code instead...

HTML
CODE

<h1>"tunnel vision"</h1>
<ul>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></li>    
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></li>            
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></li>            
</ul>

CSS
CODE

* {
    box-sizing: border-box;
}
body{
    background-color: #545557;
    font: normal 1em / 1.5  sans-serif;
}
h1 {
    font-size:  1.5em;
    font-weight:  normal;
    color: #fff;
    text-transform:  capitalize;
    text-align: center;
}
ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 450vw;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}
ul li {
    width: 50vw;
}
ul li img {
    display: block;
    width: 96%;
    height: auto;
    margin: auto;
}




coothead


thanks a lot for your help! one question remains for me: in this example, how do i set the size of my pictures inside the <li>? because sometimes they vary from portrait to landscape mode
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 4 2023, 06:48 AM
Post #7


Advanced Member
****

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


QUOTE

. how do i set the size of my pictures inside the <li>, because
. sometimes they vary from portrait to landscape mode?


The code does not depend upon the image's aspect ratio.

I have also added the comment to the CSS that I
forgot about in my pevious post.


CSS
CODE

ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 450vw;  /*  this value is the  li value of  50vw x the number of images in the list  */
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}
ul li {
    width: 50vw;
}





coothead

This post has been edited by coothead: Feb 4 2023, 06:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 4 2023, 07:59 AM
Post #8


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(coothead @ Feb 4 2023, 06:48 AM) *

Hi there PuertoN,


QUOTE

. how do i set the size of my pictures inside the <li>, because
. sometimes they vary from portrait to landscape mode?


The code does not depend upon the image's aspect ratio.

I have also added the comment to the CSS that I
forgot about in my pevious post.


CSS
CODE

ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 450vw;  /*  this value is the  li value of  50vw x the number of images in the list  */
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}
ul li {
    width: 50vw;
}





coothead


Thanks a lot! The resizing works like a charm, but the ul with li-entries now makes it a vertical view, instead of my desired horizontal 'grid'. That's actually why i choose to use a table to begin with... smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 4 2023, 11:03 AM
Post #9


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(PuertoN @ Feb 4 2023, 12:59 PM) *

Thanks a lot! The resizing works like a charm, but the ul with li-entries
now makes it a vertical view, instead of my desired horizontal 'grid'.
That's actually why i choose to use a table to begin with... smile.gif


I do not see that...
IPB Image


Is your "Wordpress" CSS having an adverse effect?


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Feb 4 2023, 09:20 PM
Post #10


Advanced Member
****

Group: Members
Posts: 103
Joined: 25-December 22
Member No.: 28,719
I do not see sufficient reason for any of this to have all that excess markup. Table or list it's a waste of code.

Assuming you want them to be columnar but stretch to width:

CODE

<div class="visionImages">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'">    
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'">    
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'">            
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'">            
<!-- .visionImages --></div>


CODE

    html, body {
        height:100%;
    }
    .visionImages {
        display:flex;
        align-items:stretch;
        height:100%;
    }
    .visionImages img {
        width:auto;
        height:100%;
    }

Note you want that 100% on html and body so you can use 100% on the DIV, as 100vh doesn't account for scrollbars in their height, resulting in it being taller than the viewport.

One of the things that actually makes vw and vh kinda useless.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 5 2023, 09:21 AM
Post #11


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(Jason Knight @ Feb 4 2023, 09:20 PM) *

I do not see sufficient reason for any of this to have all that excess markup. Table or list it's a waste of code.

Assuming you want them to be columnar but stretch to width:

CODE

<div class="visionImages">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'">    
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'">    
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'">            
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'">
    <img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'">            
<!-- .visionImages --></div>


CODE

    html, body {
        height:100%;
    }
    .visionImages {
        display:flex;
        align-items:stretch;
        height:100%;
    }
    .visionImages img {
        width:auto;
        height:100%;
    }

Note you want that 100% on html and body so you can use 100% on the DIV, as 100vh doesn't account for scrollbars in their height, resulting in it being taller than the viewport.

One of the things that actually makes vw and vh kinda useless.


Unfortunately this does the same a.k.a. displaying the images among themselves, not in a row... Also it seems like this something doesn't respond: for example if I change the height of .visionImages img, there's no change at all in size sad.gif So frustrating
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 5 2023, 09:24 AM
Post #12


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(coothead @ Feb 4 2023, 11:03 AM) *

QUOTE(PuertoN @ Feb 4 2023, 12:59 PM) *

Thanks a lot! The resizing works like a charm, but the ul with li-entries
now makes it a vertical view, instead of my desired horizontal 'grid'.
That's actually why i choose to use a table to begin with... smile.gif


I do not see that...
IPB Image


Is your "Wordpress" CSS having an adverse effect?


coothead





That's really strange! I actually don't know if there's a css conflict, but my initial hope was for an easy way to add to my current code sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 7 2023, 02:19 PM
Post #13


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(PuertoN @ Feb 5 2023, 09:24 AM) *

QUOTE(coothead @ Feb 4 2023, 11:03 AM) *

QUOTE(PuertoN @ Feb 4 2023, 12:59 PM) *

Thanks a lot! The resizing works like a charm, but the ul with li-entries
now makes it a vertical view, instead of my desired horizontal 'grid'.
That's actually why i choose to use a table to begin with... smile.gif


I do not see that...
IPB Image


Is your "Wordpress" CSS having an adverse effect?


coothead





That's really strange! I actually don't know if there's a css conflict, but my initial hope was for an easy way to add to my current code sad.gif


?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 7 2023, 03:11 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Here's another idea. I'm not familiar with CSS Flex or Grid so I tried using calc() instead. It might work with images that are wider than tall as well (haven't tried), if so perhaps the UL width needs to be extended if there are more or wider images). I also made the images appear close to each other.

CODE
* {box-sizing: border-box;}

html {height: 100%;}

body {
    margin: 0;
    padding: 0;
    height: calc(100% - 22px); /* Subtracts at least the assumed thickness of the horizontal scrollbar. */
    color: #fff;
    background-color: #545557;
    font: normal 1em / 1.5  sans-serif;
}
h1 {
    font-size:  1.5em;
    font-weight:  normal;
    text-transform:  capitalize;
    text-align: center;
}
ul {
    width: 450vw;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    height: calc(100% - 4em); /* Subtracts at least the assumed height of the H1 element and its vertical margin. */
}
ul li {display: inline;}

ul li img {
    height: 98%;
    margin: auto;
}


HTML:
CODE

<body>
<h1>"tunnel vision"</h1>
<ul>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-001.jpg" alt="'Tunnel Vision 1'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-002.jpg" alt="'Tunnel Vision 2'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-003.jpg" alt="'Tunnel Vision 3'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-004.jpg" alt="'Tunnel Vision 4'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-005.jpg" alt="'Tunnel Vision 5'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-006.jpg" alt="'Tunnel Vision 6'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-007.jpg" alt="'Tunnel Vision 7'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-008.jpg" alt="'Tunnel Vision 8'"></li>
  <li><img src="http://www.nico-schlegel.de/wp-content/uploads/2023/01/nico-s-visuals_portfolio_tunnelv-009.jpg" alt="'Tunnel Vision 9'"></li>
</ul>
</body>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 7 2023, 08:05 PM
Post #15


Advanced Member
****

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

as you seem to be having problems with the codes
that have been presented to you I thought that a
working example my be of help to you, so check out
the following links...

The web page
https://www.coothead.co.uk/PuertoN/

Zipped files
https://www.coothead.co.uk/PuertoN.zip

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 8 2023, 08:36 AM
Post #16


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(coothead @ Feb 7 2023, 08:05 PM) *

Hi there PuertoN,

as you seem to be having problems with the codes
that have been presented to you I thought that a
working example my be of help to you, so check out
the following links...

The web page
https://www.coothead.co.uk/PuertoN/

Zipped files
https://www.coothead.co.uk/PuertoN.zip

coothead


Wow, that's a real class act, really kind! smile.gif
Will report back...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 8 2023, 11:52 AM
Post #17


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(PuertoN @ Feb 8 2023, 08:36 AM) *

QUOTE(coothead @ Feb 7 2023, 08:05 PM) *

Hi there PuertoN,

as you seem to be having problems with the codes
that have been presented to you I thought that a
working example my be of help to you, so check out
the following links...

The web page
https://www.coothead.co.uk/PuertoN/

Zipped files
https://www.coothead.co.uk/PuertoN.zip

coothead


Wow, that's a real class act, really kind! smile.gif
Will report back...


Working great so far, thanks!
May I ask one more question: I've also good some pictures in landscape mode, but of course they don't fit in size to the portrait-mode pictures now:

IPB Image

Is there some way to give those pictures an individual size?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 8 2023, 09:05 PM
Post #18


Advanced Member
****

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

. May I ask one more question: I've also good some pictures in landscape mode,
. but of course they don't fit in size to the portrait-mode pictures now:
. Is there some way to give those pictures an individual size?


Like this possibly...

The web page
https://www.coothead.co.uk/PuertoN/

Zipped files
https://www.coothead.co.uk/PuertoN.zip

I have used the same aspect ratio for all the images- portrait 2:3 and landscape 3:2,
and would suggest that you follow suit.

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 9 2023, 12:01 PM
Post #19


Advanced Member
****

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

If you are wondering what the relationship of this value....
CODE

#image-gallery  img {

    width: 24vw;

}

...is to this one...

CODE

#image-gallery img.landscape {

    width: 54vw;

}


...then you need to look at this image...

IPB Image

...which depicts a portrait and landscape image with identical aspect ratios.
The landscape image's width is 2.25 times that of the portrait when their
heights are identical.
Setting the portrait images width to 24vw is arbitrary but does mean that the
landscape image's width must be set to ( 2.25 x 24vw ) or 54vw.

coothead

This post has been edited by coothead: Feb 9 2023, 12:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 10 2023, 01:45 PM
Post #20


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784
QUOTE(coothead @ Feb 9 2023, 12:01 PM) *

Hi there PuertoN,

If you are wondering what the relationship of this value....
CODE

#image-gallery  img {

    width: 24vw;

}

...is to this one...

CODE

#image-gallery img.landscape {

    width: 54vw;

}


...then you need to look at this image...

IPB Image

...which depicts a portrait and landscape image with identical aspect ratios.
The landscape image's width is 2.25 times that of the portrait when their
heights are identical.
Setting the portrait images width to 24vw is arbitrary but does mean that the
landscape image's width must be set to ( 2.25 x 24vw ) or 54vw.

coothead


Thanks you so much for your help, I owe you more than one beer! smile.gif
To be honest, I've also got some images that don't fit these two aspect ratio, think about a panorama picture... Do you maybe see a way to add something to the code to display these individual dimensions correct without 'destroying' the other images?
Also: there've been some captions to the images which I've added via simple <p> inside the <li> before, but since there's no list anymore i'm struggling with adding them simply below each image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 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: 27th April 2024 - 03:29 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC