1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image overlaying text.

Discussion in 'HTML & Website Design' started by Soupi, May 12, 2020.

0
  1. #1
    Hello I am trying to create a 3x3 image box.
    Text above and image underneath.
    I have 3 boxes in each row. 2 rows but the image is overlaying the text and not moving the row down, why is that? 

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
<body>

<h2>Our materials collection is classified into 7 large categories</h2>
<p>Click on the image to view the material in-depth.</p>

<div class="row">
<div class="column" >
    <h2>Composites (CP)</h2>
    <p>Composites are categorized under 06-WOOD, PLASTICS AND COMPOSITES according to the CSI as will be seen in the materials storage room.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure></p>
</div>
  <div class="column">
    <h2>Glass (GL)</h2>
    <p>All Glass materials in this collection can be located with the preceding code GL.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure></p>
  </div>
  <div class="column">
    <h2>Landscape (LD)</h2>
    <p>All landscape materials in this collection can be located with the preceding code LD.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure></p>
  </div>
</div>

<div class="row">
<div class="column" >
    <h2>Metals (ME)</h2>
    <p>All metals in this collection can be located with the preceding code ME.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure><br>
</p>
</div>
  <div class="column">
    <h2>Wood Products (WP)</h2>
    <p>All Wood products are categorized under 06-WOOD, PLASTICS AND COMPOSITES according to the CSI as will be seen in the materials storage room.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure></p>
  </div>
  <div class="column"">
    <h2>Stone</h2>
    <p>This includes Concrete and Masonry products. According to the CSI, concrete is classified under 03-CONCRETE while masonry is classified under 04-MASONRY as will be seen in the storage room (008 Slocum Hall).<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1.jpg" alt="" class="wp-image-5631"/></figure></p>
  </div>
   
</div>
</body>
</html>
    Code (markup):

     
    Soupi, May 12, 2020 IP
  2. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    I got it, i removed float and made display:flex
    
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
* {
  box-sizing: border-box;
}
/* Create three equal columns that floats next to each other  float: left;*/
.column {
  width: 33.33%;
  padding: 10px;
  /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row {
display: flex
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
<body>
<h2>Our materials collection is classified into 7 large categories</h2>
<p>Click on the image to view the material in-depth.</p>
<div class="row">
 <div class="column" >
    <h2>Composites (CP)</h2>
    <p>Categorized under 06-WOOD, PLASTICS AND COMPOSITES.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure></p>
 </div>
  <div class="column">
    <h2>Glass (GL)</h2>
    <p>Can be located with the preceding code GL.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure></p>
  </div>
  <div class="column">
    <h2>Landscape (LD)</h2>
    <p>Can be located with the preceding code LD.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure></p>
  </div>
</div>
<div class="row">
 <div class="column" >
    <h2>Metals (ME)</h2>
    <p>Can be located with the preceding code ME.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure><br>
 </p>
 </div>
  <div class="column">
    <h2>Wood Products (WP)</h2>
    <p>Categorized under 06-WOOD.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure></p>
  </div>
  <div class="column"">
    <h2>Stone</h2>
    <p>This includes Concrete and Masonry products.<br>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" data-id="5631" data-link="https://wp-dev-har.syr.edu/i1/" class="wp-image-5631"/></figure></p>
  </div>
   
</div>
</body>
</html>
    Code (markup):
     
    Soupi, May 12, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Flex is indeed more versatile this way. 3 across can be a PITA with floats due to rounding issues and other... problems. NOT that one should be designing "X across", having separate DIV for a "row" much less naming them "row" and "column", presentational concepts that have ZERO business in your markup.

    It seems unlikely those subsections should be H2 after the H2 as they're part of it, not siblings to it... and are you REALLY sure those are mathematical or scientific figures, and not just plain jane normal images? Much less the alt and pointless empty data-link crap that looks like scripttardery doing anchor's job.

    Basically you over-thought this a LOT; though much of that can be blamed on the monument to the three 'i' if web development -- ignorance, incompetence, and ineptitude -- that is turdpress. It ruins everything it touches.

    You would probably -- this being 2020 and all -- be better off using PICTURE instead of FIGURE so that you can add a secondary .webp source to save bandwidth, depending on what those images are. (given the domain you have in the example doesn't resolve here, no idea what they are)

    Rather than using those pointless row DIV, and trying to play with percentage width, I'd probably give them an elastic width... say 16em? Then turn on flex-wrap and set some max widths. This way they would automatically reduce the number of columns inside a max-width, so that it is responsive without even needing media queries.

    That's a big detail of flex a lot of people miss.

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="flexCategories.screen.css"
	media="screen,projection,tv"
>
<title>Flex Demo</title>
</head><body>
<h1>Flex Demo</h1>

<h2>Our materials collection is classified into 7 large categories</h2>
<p>Click on the image to view the material in-depth.</p>
<div class="categories">
	<a href="#">
		<h3>Composites (CP)</h3>
		<p>Categorized under 06-WOOD, PLASTICS AND COMPOSITES.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
	<a href="#">
		<h3>Glass (GL)</h3>
		<p>Can be located with the preceding code GL.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
	<a href="#">
		<h3>Landscape (LD)</h3>
		<p>Can be located with the preceding code LD.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
	<a href="#">
		<h3>Metals (ME)</h3>
		<p>Can be located with the preceding code ME.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
	<a href="#">
		<h3>Wood Products (WP)</h3>
		<p>Categorized under 06-WOOD.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
	<a href="#">
		<h3>Stone</h3>
		<p>This includes Concrete and Masonry products.</p>
		<picture>
			<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
			<img
				src="https://www.gstatic.com/webp/gallery/4.sm.jpg"
				alt="Composites"
			>
		</picture>
	</a>
<!-- .categories --></div>

</body></html>
    Code (markup):
    You can see the markup got simplified a good deal. You want to link to categories, use anchors not scripttardery.

    .categories {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	max-width:50em;
	padding-left:0.5em;
	margin:0 auto 1em;
}

.categories a {
	display:flex;
	flex-direction:column;
	width:16em;
	max-width:90%;
	padding:1em;
	margin:0 0.5em 0.5em 0;
	text-decoration:none;
	background:#EEE;
	color:#000;
	transition:background 0.5s;
}

.categories a:focus,
.categories a:hover {
	background:#DEF;
}


.categories p {
	flex:1 0 auto;
}

.categories h2,
.categories picture {
	flex:0 0 auto;
}

.categories img {
	display:block;
	width:100%;
	height:auto;
}
    Code (markup):
    Added some colouration so we can see what's going on.

    Live demo here:
    https://cutcodedown.com/for_others/soupi/flexCategories/

    With a .txt for DL in case "view source" is problematic.

    The trick being if you're gonna use flex, use it. Flex-wrap is a VERY powerful method that in a lot of cases removes our need for media queries. It's automatically responsive if you have fixed -- or better elastic -- widths. Max-width could be similarly used if you want them to scale.
     
    deathshadow, May 12, 2020 IP
    malky66 likes this.
  4. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    Thank you for this sir, how do I make these boxes bigger so i can fill up more white space and spread them out a little bit more....
     
    Soupi, May 12, 2020 IP
  5. LewisH95

    LewisH95 Greenhorn

    Messages:
    118
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #5
    Place the image within the container. Place the text immediately below the image within the container and make it's position absolute (to overlay text on the image) and place it as you please.
    ...
    Write the following snippet:
    <figure>
    <img src="your-image. png" alt="Your text" />
    <figcaption>Your text</figcaption>
    </figure>
     
    LewisH95, May 13, 2020 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    add padding or margin to the anchors. You can also play with the elastic width. Just to keep them behaving nice margin only one side, so you can pad the opposite side of the container. This avoids margin-collapse, overflow scrollbars, and a whole host of other ugliness.

    1) Not what he was asking for! I almost made that mistake myself, but he wants the text "over" as in above vertically, not "over" as in on top of it... I think. At least, that's what his existing code did and my rewrite does, and he didn't complain about my rewrite so...

    2) ... and what the blazes makes these mathematical or scientific figures? Gah, these stupud huffing pointless tags that 99.99% of the time people use them is semantic gibberish! Just more HTML 5 asshattery and further monuments to 3i.

    Hell, these images are so presentational in nature given there's perfectly good headings and paragraphs, I'd be half tempted to move them into the stylesheet for not actually being content.
     
    deathshadow, May 13, 2020 IP
  7. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    That strange when I made changes to the anchor it squeezed the boxes together not spread them and make them bigger. Thank you anyways =)
     
    Soupi, May 13, 2020 IP
  8. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    I wanted the size to look like this and more spread out, (in the image below)
    This is my current css.
    
<style>
{
    box-sizing:border-box;
}
hr {
    display:none;
}
html, body {
    height:100%;
}

body {
    padding:1em;
}
p {
    padding-bottom:1em;
}
.categories {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    max-width:50em;
    padding-left:0.5em;
    margin:0 auto 1em;
}
.categories a {
    display:flex;
    flex-direction:column;
    width:16em;
    max-width:90%;
    padding:1em;
    margin:0 0.5em 0.5em 0;
    text-decoration:none;
    background:#EEE;
    color:#000;
    transition:background 0.5s;
}
.categories a:focus,
.categories a:hover {
    background:#DEF;
}
.categories p {
    flex:1 0 auto;
}
.categories h2,
.categories picture {
    flex:0 0 auto;
}
.categories img {
    display:block;
    width:100%;
    height:auto;
}</style>
<title>KING + KING LIBRARY MATERIALS</title>
</head><body>
<h2>Our materials collection is classified into 7 large categories</h2>
<p>This materials page serves to help expand the role of materials education to SUSOA students, faculty, alumni and other practitioners. Our sample collection and this website gives everyone an opportunity to research, explore, and experiment with materials.

We hope our Materials Collection will serve as an inspiration and have an important pedagogical role for our students and faculty, who are interested in learning about aesthetic, physical, and performative properties of new materials in contemporary architectural contexts.
<br>Click on the image to view the material in-depth.</p>
<div class="categories">
    <a href="#">
    <h3>Composites (CP)</h3>
    <p>Categorized under 06-WOOD, PLASTICS AND COMPOSITES.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
    </a>
    <a href="#">
    <h3>Glass (GL)</h3>
    <p>Can be located with the preceding code GL.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
  </a>
  <a href="#">
    <h3>Landscape (LD)</h3>
    <p>Can be located with the preceding code LD.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
  </a>
  <a href="#">
    <h3>Metals (ME)</h3>
    <p>Can be located with the preceding code ME.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
    </a>
    <a href="#">
    <h3>Stone</h3>
    <p>This includes Concrete and Masonry products.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
  </a>
  <a href="#">
    <h3>Textiles (TX)</h3>
    <p>All textile materials are identifiable with preceding code TX.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
  </a>
  <a href="#">
    <h3>Wood</h3>
    <p>All Wood products are categorized under 06-WOOD, PLASTICS AND COMPOSITES.</p>
<figure class="wp-block-image"><img src="https://wp-dev-har.syr.edu/wp-content/uploads/2014/03/I1-e1589313852600.jpg" alt="" class="wp-image-5631"/></figure>
  </a>
<!-- .categories --></div>

</body></html>
    Code (markup):
     

    Attached Files:

    Soupi, May 14, 2020 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    1) loose the bloody figure tags, those are NOT scientific or mathematical figures!!! Invalid semantics is as bad as having none. Much less don't let turdpress take a dump all over your page with the pointless id's and classes.

    2) You want them further apart, adjust the margin on the anchor and padding on the outer div. You want them bigger adjust width on the anchor. You want more space between the edge of the anchor and it's content, adjust the padding on the content keeping in mind the active box-model.

    But most importantly, do the math to figure out how many fit so you can adjust the max-width on .categories (I like to then pad it an extra EM) so that they stay the maximum number of columns you want to allow.

    So if you:
    .categories a
    width:20em;
padding:2em;
margin:0 1em 1em;
    Code (markup):
    They are each 21 em counting their margin. Hence:

    .categories
    
max-width:65em; /* 21 (total width) * 3 (max colums) + 1 (left pad) + 1 (a wee extra wiggle room) */
padding-left:1em;
    Code (markup):
     
    Last edited: May 14, 2020
    deathshadow, May 14, 2020 IP
  10. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #10
    Whats the best way to have all 7 items show up side by side given the code I given the code in post #8, and as the window is getting minimized they start going to 3 per row then 2 per row then 1 per row.
     
    Soupi, May 14, 2020 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    If you want them to go full screen, just yank the max-width on .categories and however many fit will fit. To force it to three per row, use a media query at that EM width (plus some wiggle room) to re-enable the max-width.
     
    deathshadow, May 14, 2020 IP