Highlighted

Positioning of List Items

Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

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!

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>

Views

402

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Positioning of List Items

Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

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!

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>

Views

403

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 22, 2017 0
Adobe Employee ,
Nov 22, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

Yes, I do believe that will work!

Have tried it out and everything looks and works just as I want it!

I knew I could rely on the honest bunch here to help and once more you have not disappointed!

Thank you!!

Can I add the section that goes in the Header in my CSS file?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

nigelh70638339  wrote

Can I add the section that goes in the Header in my CSS file?

Sure, add it to your externally linked css file.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 1
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

Thank you!!

I have created a simple test page

Booster

and it seems to be working . However, when I try and add a link that takes the viewer back to the top of the page it treats it as the same way as the images and text, creating a new line.

How can I add a top link like you see at the bottom of the page?

Finally, How can I put a thin white border to distinguish between the 'cells'?

Thanks in advance

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

Before adding the back to top link lets get the grid set up properly - after seeing your page there is some lining up issues which would need some extra coding to resolve, the new grid/css code is below:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Flexbox Grid</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 20px;

font-weight: 400;

}

* {

box-sizing: border-box;

}

.image_gallery_wrapper {

display: flex;

flex-wrap: wrap;

justify-content: center;

width: 95%;

max-width: 1000px;

margin: 0 auto;

padding: 25px;

background-color: #ccc;

}

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

.image_gallery_wrapper  {

justify-content: space-between;

}

}

.gallery_thumbnail  {

display: flex;

flex-direction: column;

width: 18.5%;

margin: 0 0.5% 15px 0.5%;

padding: 0;

text-align: center;

border: 1px solid #fff;

}

@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  {

display: flex;

flex-direction: column;

flex: 2;

margin: 0;

padding: 0 15px 15px 15px;

margin-top: auto;

}

.gallery_thumbnail figcaption span  {

font-size: 12px;

}

.gallery_thumbnail figcaption p  {

font-size: 15px;

line-height: 20px;

margin: 0;

padding: 5px 10px 0 10px;

}

.gallery_thumbnail h4 {

flex: 1;

font-size: 15px;

line-height: 20px;

margin: 0;

padding: 15px 15px 5px 15px;

}

</style>

</head>

<body>

<div class="image_gallery_wrapper">

<!-- START ROW 1 -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bedrohte Tierarten/ Gefährdete Meeresiere (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Ben 10 (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Ben 10 (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>Arthur Weasley (2007)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bugs (2008) (USA)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>Asterix (2009)<br>(German)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bugs (2008) (USA)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<!-- START ROW 2 -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bedrohte Tierarten/ Gefährdete Meeresiere (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Ben 10 (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>All Zombies Must Die! (2011)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Ben 10 (2009) (German)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>Arthur Weasley (2007)<br>(England)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bugs (2008) (USA)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

<section class="gallery_thumbnail">

<h4>Asterix (2009)<br>(German)</h4>

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/images/mad.gif" alt="">

</figure>

<figcaption>

<span>Click the image</span>

<p>Bugs (2008) (USA)</p>

</figcaption>

</section>

<!-- end gallery_thumbnail -->

</div>

<!-- end image_gallery_wrapper -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

nigelh70638339  wrote

How can I add a top link like you see at the bottom of the page?

That should be easy enough.

Add an anchor tag link to the page like below:

<a href="#pageTop">[TOP]</a>

Then add an id="pageTop" to the 'image_gallery_wrapper <div> as shown below:

<div  class="image_gallery_wrapper" id="pageTop">

It's a basic quick jump to the top of the page - there are other nicer ways to do this using a smooth-scroll to the top.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

The images are now all scrunched up. I have tried to tweak the code as best as I could but could not get the images to open up more. The link below also shows what happens when I try to add the TOP link.

Booster

The white border, I was hoping would look more like the original pages.

Booster

Really appreciate your help here.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

nigelh70638339  wrote

The images are now all scrunched up. I have tried to tweak the code as best as I could but could not get the images to open up more. The link below also shows what happens when I try to add the TOP link.

Booster

That's because you need to set the images width to a max-width (see css below) You also need to set that grey outer box 'wrapper' to something like 80% to allow the grid to have more space (see css below)

#wrapper {

width: 80%;

margin: 0 auto;

}

.gallery_thumbnail figure img {

max-width: 100%;

}

Move the top anchor next to your 'next' link (see below)

<h6><a href="winning_moves_booster_page2.html">NEXT</a> | <a href="#pageTop">[TOP]</a></h6>

Then add the id="pageTop" to the image_gallery_wrapper <div>:

<div class="image_gallery_wrapper" id="pageTop">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

Thanks! That is better.

I have done away with the white border as I was hoping to have something similar to the original.

I have the Header image but it does not shrink down when the page is scaled down. I have set it to max-width: 100% and height to auto. The image is a png.

Nancy thank you for that! I have tried Bootstrap before and ran into more issues than I started with. Dreamweaver on its own is enough for me.

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

I have just uploaded a finished page but it is all wrong. In Preview mode it looks perfect but live it is all wrong.

Does anyone know what has happened?

Booster

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Adobe Community Professional ,
Nov 23, 2017

Copy link to clipboard

Copied

well I've tested from FF and it seams to work... what's wrong on your side ? which browser ? did you empty your cache, just in case ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 23, 2017

Copy link to clipboard

Copied

Ah, spot the bloody idiot!

Just emptied the cache and it works fine!

Thanks again everyone who has helped, especially osgood for helping out with that code!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 0
Explorer ,
Nov 24, 2017

Copy link to clipboard

Copied

Last query, I promise!

If I want and empty space for example instead of 5 items across I want just 4. So the last slot on the line is blank. This is to leave the  the first 4 columns alone.

Does that make any sense?

I ran Validator and it came up with

  1. Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.From line 495, column 1; to line 495, column 35   <section class="gallery_thumbnail"><fig

What I did was to leave the areas in the code clear -

<section class="gallery_thumbnail">

<figure>

</figure>

</section

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 0
LEGEND ,
Nov 24, 2017

Copy link to clipboard

Copied

nigelh70638339  wrote

Last query, I promise!

If I want and empty space for example instead of 5 items across I want just 4. So the last slot on the line is blank. This is to leave the  the first 4 columns alone.

Does that make any sense?

I ran Validator and it came up with

  1. Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.From line 495, column 1; to line 495, column 35   <section class="gallery_thumbnail"><fig

What I did was to leave the areas in the code clear -

<section class="gallery_thumbnail">

<figure>

</figure>

</section

It's only a warning, ignore it. Infact I'm a litle puzzled by the recommendation that a heading should be considered because the section tag is very useful for clearly identifying specfic areas, which don't necessarily always require a heading.

If you aren't one of these persons that care much about your page validating 100% (I'm not, never have been), then move on, nothing to see here. If you are one of these persons that like you page to validate 100% then change the <section></section> tag to a <div></div> tag.

<div class="gallery_thumbnail"></div> then the 'wonky' validator wont moan about nothing...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 1
Explorer ,
Nov 24, 2017

Copy link to clipboard

Copied

Thank you so very much for all you help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0