Skip to main content
nigelh70638339
nigelh70638339
Inspiring
November 22, 2017
Answered

Positioning of List Items

  • November 22, 2017
  • 3 replies
  • 1628 views

I want to create a page that looks list a table, for example

Title          Title          Title               Title               Title

image     Image          Image         Image           Image

Text            Text          Text               Text               Text

Obviously neater than above.

What would be the correct way to do this, please?

Each Title would be an H3. Each image would be clickable and linked to another page.

Any help would be greatly appreciated, thank you!

    This topic has been closed for replies.
    Correct answer osgood_

    nigelh70638339  wrote

    The Title part of the page is now spread over 2 lines, they do not fit above the image as they would in a table.

    I have tweaked a few of your pieces of code and I think that this is the only piece left to sort.

    Again, thank you!

    Flexbox responsive solution:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Flexbox Grid</title>

    <style>

    .image_gallery_wrapper {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    width: 95%;

    max-width: 1200px;

    margin: 0 auto;

    }

    @media screen and (max-width: 768px) {

    .image_gallery_wrapper  {

    justify-content: space-between;;

    }

    }

    .gallery_thumbnail  {

    width: 19%;

    margin: 0 0.5% 15px 0.5%;

    padding: 20px 0;

    text-align: center;

    background-color: #f2f2f2;

    }

    @media screen and (max-width: 1000px) {

    .gallery_thumbnail  {

    width: 31%;

    margin: 0 1% 15px 1%;

    }

    }

    @media screen and (max-width: 768px) {

    .gallery_thumbnail  {

    width: 48%;

    }

    }

    @media screen and (max-width: 480px) {

    .gallery_thumbnail  {

    width: 100%;

    margin: 0 0 15px 0;

    }

    }

    .gallery_thumbnail figure  {

    margin: 0;

    padding: 0;

    }

    .gallery_thumbnail figcaption  {

    margin: 0;

    padding: 0;

    }

    .gallery_thumbnail h4 {

    font-size: 24px;

    line-height: 34px;

    margin: 0;

    padding: 0;

    }

    </style>

    </head>

    <body>

    <div class="image_gallery_wrapper">

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    </div>

    <!-- end image_gallery_wrapper -->

    </body>

    </html>

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 22, 2017

    Another option with Bootstrap 4 and Cards which also uses Flexbox.

    https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4.0, Equal Height Cards Demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Latest Bootstrap 4 CSS-->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <style>

    html, body { height: 100% }

    </style>

    </head>

    <body class="container">

    <div class="row">

    <h1>Bootstrap 4 with Equal Height Cards</h1>

    <!--BEGIN 4 COLUMNS & CARDS-->

    <div class="col-sm-6 col-lg-3 py-2">

    <div class="card h-100">

    <img class="card-img-top" src="https://dummyimage.com/150x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a href="#" class="btn btn-primary">Go somewhere</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 py-2">

    <div class="card h-100">

    <img class="card-img-top" src="https://dummyimage.com/150x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a href="#" class="btn btn-primary">Go somewhere</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 py-2">

    <div class="card h-100">

    <img class="card-img-top" src="https://dummyimage.com/150x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a href="#" class="btn btn-primary">Go somewhere</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <div class="col-sm-6 col-lg-3 py-2">

    <div class="card h-100">

    <img class="card-img-top" src="https://dummyimage.com/150x200" alt="Card image">

    <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a href="#" class="btn btn-primary">Go somewhere</a>

    <!--/card-body--></div>

    <!--/card--></div>

    <!--/col--></div>

    <!--/row--></div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--Latest Bootstap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    B i r n o u
    B i r n o u
    Legend
    November 22, 2017

    different approach, one of them could be

    open a new HTML document and paste in BODY the following line

    ul>(li>h1>lorem4^img[src="https://placeimg.com/400/200/gray"]+p>lorem)*5

    then hit TAB

    then use a float approach paste this STYLE in the HEAD document

    <style>

            *{

                margin:0;

                padding:0;

            }

            h1 {

                font-size: 12px;

            }

            p {

               font-size: 10px;

            }

            li {

                list-style: none;

                width:20%;

                float:left;

            }

            img {

                display: block;

                width:100%;

                max-width: :400px;

                margin:0 auto;

            }

        </style>

    if you need each cols the same height, you could approach the TABLE approach

    so replace the STYLE by this one

    <style>

            *{

                margin:0;

                padding:0;

            }

            h1 {

                font-size: 12px;

            }

            p {

               font-size: 10px;

            }

            li {

                list-style: none;

                width:20%;

                display: table-cell;

                background-color: aquamarine

            }

            img {

                display: block;

                width:100%;

                max-width: :400px;

                margin:0 auto;

            }

        </style>

    nigelh70638339
    nigelh70638339Author
    Inspiring
    November 22, 2017

    The Title part of the page is now spread over 2 lines, they do not fit above the image as they would in a table.

    I have tweaked a few of your pieces of code and I think that this is the only piece left to sort.

    Again, thank you!

    O
    osgood_Correct answer
    Legend
    November 22, 2017

    nigelh70638339  wrote

    The Title part of the page is now spread over 2 lines, they do not fit above the image as they would in a table.

    I have tweaked a few of your pieces of code and I think that this is the only piece left to sort.

    Again, thank you!

    Flexbox responsive solution:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Flexbox Grid</title>

    <style>

    .image_gallery_wrapper {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    width: 95%;

    max-width: 1200px;

    margin: 0 auto;

    }

    @media screen and (max-width: 768px) {

    .image_gallery_wrapper  {

    justify-content: space-between;;

    }

    }

    .gallery_thumbnail  {

    width: 19%;

    margin: 0 0.5% 15px 0.5%;

    padding: 20px 0;

    text-align: center;

    background-color: #f2f2f2;

    }

    @media screen and (max-width: 1000px) {

    .gallery_thumbnail  {

    width: 31%;

    margin: 0 1% 15px 1%;

    }

    }

    @media screen and (max-width: 768px) {

    .gallery_thumbnail  {

    width: 48%;

    }

    }

    @media screen and (max-width: 480px) {

    .gallery_thumbnail  {

    width: 100%;

    margin: 0 0 15px 0;

    }

    }

    .gallery_thumbnail figure  {

    margin: 0;

    padding: 0;

    }

    .gallery_thumbnail figcaption  {

    margin: 0;

    padding: 0;

    }

    .gallery_thumbnail h4 {

    font-size: 24px;

    line-height: 34px;

    margin: 0;

    padding: 0;

    }

    </style>

    </head>

    <body>

    <div class="image_gallery_wrapper">

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    <section class="gallery_thumbnail">

    <h4>Title</h4>

    <figure>

    Image

    </figure>

    <figcaption>Text for image</figcaption>

    </section>

    <!-- end gallery_thumbnail -->

    </div>

    <!-- end image_gallery_wrapper -->

    </body>

    </html>

    K
    Community Manager
    Kratika AgarwalCommunity Manager
    Community Manager
    November 22, 2017

    Hi,

    Below link might be helpful to you:

    Dreamweaver - Linking Images, Table settings & Colors (Part 3) - YouTube

    https://www.thesitewizard.com/webdesign/tables-dreamweaver.shtml

    http://csus.edu/atc/tools/dreamweaver/dw-cs5-links-tables.pdf

    Thanks

    B i r n o u
    B i r n o u
    Legend
    November 22, 2017

    in a general way one should avoid to advise the use of TABLE as DOM structural ... all links point at a TABLE approach... don't you think ?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices