CSS3 images in a row: Correct syntax?

Hello.

I am trying to get my images to line up in a row with correct syntax. Is this correct?

HTML
< img src=“images/ux.gif” class=“align-center small” alt=“user experience”/>
< img src=“images/wd.gif” class=“align-center small” alt=“web design and development”/>
< img src=“images/rd.gif” class=“align-center small” alt=“responsive design”/>
< img src=“images/mk.gif” class=“align-center small” alt=“marketing”/>

CSS

img.small
{ display: inline-block;
height: 15%;
width: 15%;
padding: 20px;
margin: 20px;
}

Can’t tell. We need to see some HTML and probably a bit more CSS. CSS alone doesn’t render anything without HTML.

You might consider creating a CodePen or a working page that demonstrates the issue so we can see what you have done.

Thank you.

For some reason, it deleted my HTML. Here it is again…

Experience

< img src="images/ux.gif" class="align-center small" alt="user experience"/> < img src="images/wd.gif" class="align-center small" alt="web design and development"/> < img src="images/rd.gif" class="align-center small" alt="responsive design"/> < img src="images/mk.gif" class="align-center small" alt="marketing"/>

Put them in three backticks

<img />

which was produced using

```

```

This is a “working page”. Copy this code to a file. Give it an .html suffix then open the file in your browser.

Simple images in a row:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>align images in a row</title>
<!--
https://www.sitepoint.com/community/t/css3-images-in-a-row-correct-syntax/221834
mondo
Apr 21,2016 5:31 PM
-->
    <style type="text/css">
body {
    background-color:darkgray;
}
.image-container {
    text-align:center;
}
.align-center {
    vertical-align:middle;
}

    </style>
</head>
<body>

<div class="image-container">
    <img src="http://lorempixel.com/300/200/" class="align-center small" alt="user experience" width="300" height="200">
    <img src="http://lorempixel.com/300/400/" class="align-center small" alt="web design and development" width="300" height="400">
    <img src="http://lorempixel.com/400/300/" class="align-center small" alt="responsive design" width="400" height="300">
    <img src="http://lorempixel.com/250/350/" class="align-center small" alt="marketing" width="250" height="350">
</div>

</body>
</html>
2 Likes

How would you write it in CSS? Is my code correct?

What are you asking? What “it” are you asking about?

The code that I posted is correctly written HTML with a small amount of CSS to style it.
YOUR code in post #1 contains HTML and CSS.
What are you asking?

HTML creates the content on a web page.
CSS styles the HTML to change its appearance in dozens to thousands of different ways. How CSS is coded depends on the HTML and the design intent (purpose) of the web page. CSS does not act alone. CSS does not render anything in a browser without HTML to affect. CSS styles the HTML.

 

What are you asking? Are you asking if your code is syntactically correct, valid? Then the answer is a qualified “almost”.

In the HTML:
(1) The space inside the beginning of the img tag, < img, is invalid, it will break the code. The images will not render. Delete that space and the code becomes valid.
(2) The quote marks around the images, and classes and in the alt=“” attribute are correct. That’s very good!
(3) Adding the trailing space and slash " />" to the images (“empty tags”) is an X-HTML convention. Although browsers have been coded to ignore it, it is not appropriate in HTML.
(4) It is recommended that you add the width and height attributes to each of the foreground images in the HTML.

Overall, except for the space at the beginning of the image tags, the HTML is acceptable but can be improved.

In the CSS:
(1) The CSS that you posted is valid.
(2) However, img.small {height:15%} does nothing. It is useless code and should be deleted.
(3) Using percents for height is not straight forward and simple. Avoid percents for heights until you learn specifically how they behave.
(4) Avoid routinely assigning heights to most containers. Allow the contents to dictate the height of most containers. It’s fundamental to fluid design.

Your CSS and HTML are valid when included in a proper “working page”. However, without images or the image dimension attributes, there is no way for me to know if the CSS is performing as your expect it to perform. In other words, you can write syntactically valid code that doesn’t work together.

Is your code correct? I don’t know. Technically, it is valid but whether it renders what you expect it to or not, I don’t know.

I added an outline and background color to highlight the area of the images. Using outlines and background colors is very useful when developing a page. The can be removed without adversely affecting your code. The don’t cause trouble.

 

This is a repeat of @cpradio’s instructions for posting code.

Begin by putting three backticks on a line by themselves before your code.
Add your formatted code below those backticks.
End by putting three backticks on a line by themselves after your code.

Like this:

```
your code here
```

Starts with three backticks on a line by themselves and Ends with three backticks on lines by themselves.

A “working page” might look something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Name here</title>
    <style>
on-page CSS here
    </style>
</head>
<body>
<div class="outer">
    <header>
        your HTML code here
    </header>
    <main>
        your HTML code here
    </main>
    <footer>
        your HTML code here
    </footer>
</div>
</body>
</html>

Starts with three backticks, Ends with three backticks on lines by themselves.

As you discover more about the forum, you will learn that you can highlight your code in the editor, then click the </> symbol in the edit menu to keep the code properly formatted and visible.

1 Like

It may be worth mentioning that images display inline by default. So the html alone (without css) will place the 4 images in a row, provided they fit on the screen, otherwise they will wrap to a new line.
Assuming you want to alter the default behaviour, to perhaps stop the images wrapping on smaller screens and keep them in one line, CSS can be used in a few ways to make this happen. Display table, flex box, or just using % widths to name a few.

3 Likes

Thanks! I am learning HTML/CSS from John Duckett’s book, but I am getting different ways to code things online. I have heard that using correct syntax is important, so I want to make sure I’m doing things the right way.

2 Likes

mondo,

Your last post would have been a good addition to the introductory post in this topic and helped clarify your intent.

Just sayin…

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.