CODEWITHSUNDEEP
htmlcss
yndajas
yndajas

Reputation: 69

How can I create this tiled page layout?

I've found HTML/CSS combinations that do one or multiple of these things but none that do all of them together. Basically I want:

Basically I'm looking for something like the collapse by rows option here but with centred text (and WordPress doesn't seem to recognise the @breakpoint rule, so it doesn't work for me). I've tried various methods with display:table/table-cell, display:inline-block, position:absolute/relative and different element types (div, a, p, tables...) but can't get anything to fulfil all the criteria listed above. Anyone got a solution (ideally with just standard HTML and CSS to make it easy to implement in WordPress)?

Below are examples of one of the methods I've tried. Example one shows how I'd like it to look (with a nicer colour scheme and proper link styling), except with smaller tiles and wrapped text. Example two has wrapped text, but because of using line-height the tiles with wrapped text double in height.

.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}

.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
<p><strong>Example one</strong></p>

<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

<p><strong>Example two</strong></p>

<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

Upvotes: 2

Views: 218

Answers (2)

Matt from vision.app
Matt from vision.app

Reputation: 497

  1. a tile-style menu with six tiles

I would suggest a <div> with six display:inline-block <div> children.

  1. each tile to be a fixed height and width (maybe 10em - square)

So of course we give your <div> children width:10em; height:10em;

  1. wrapped text without creating a bigger tile (line-height has this problem)

First we give each <div> child an overflow:hidden; so even if the content is larger than the tile, it will be cut. Then, since we know that the child is 10em high, if you can fix the number of lines of the text, you can define line-height as, say, 2em or even 20% which will be 20% of 10em.

  1. background colour for the tiles

That's easy-peasy: background-color:#00FF00;

  1. but whitespace (margins) to the right and below all text centred

I suggest you use border instead: border-width:0px 0px 0.5em 0.5em;. If you do it well, nobody will be able to tell it's border and not margin.

  1. vertically and horizontally wrapped tiles for smaller displays

Inline block will do this for you. Since each <div> child is 10em wide, you can give the container <div> max-width:30em and it will shrink on small screens making the inline-block children skip to the next line.

Hope this gives you some useful ideas at least.

Upvotes: 0

D.B.
D.B.

Reputation: 1782

How about something like this... using display:flex and align-items: center;

NB: may not be compatible with some older web browsers.

.small{
  display:flex;
  flex-wrap:wrap;
}

.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}
<p><strong>Example two</strong></p>

<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>

Upvotes: 2

Related Questions