Positioning of List Items

Report · Nov 22, 2017

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!

Report · Nov 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

Report · Nov 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 ?

Report · Nov 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>

Report · Nov 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!

Report · Nov 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>

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

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

<h4>Title</h4>

Image

</figure>

<figcaption>Text for image</figcaption>

</section>

</div>

</body>

</html>

Report · Nov 22, 2017

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?

Report · Nov 22, 2017

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.

Report · Nov 22, 2017

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

Report · Nov 22, 2017

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>

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

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

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

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

</figcaption>

</section>

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

</figure>

<span>Click the image</span>

</figcaption>

</section>

</div>

</body>

</html>

Report · Nov 22, 2017

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:

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

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.

Report · Nov 22, 2017

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.

Report · Nov 22, 2017

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)

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

Report · Nov 23, 2017

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!

Report · Nov 23, 2017

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

Report · Nov 23, 2017

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 ?

Report · Nov 23, 2017

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!

Report · Nov 24, 2017

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

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 -

</figure>

</section

Report · Nov 24, 2017

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
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...

Report · Nov 24, 2017

Thank you so very much for all you help!

Report · Nov 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>

<head>

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

<style>

html, body { height: 100% }

</style>

</head>

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

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

</div>

</div>

</div>

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

</div>

</div>

</div>

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

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Positioning of List Items

1 Correct answer