I'm currently trying to design a web page. I don't have much experience with HTML and are therefore finding it difficult to get my page looking how i'd planned. I would like to have four square images, two top with two directly below but im struggling to align these. I've tried to research this but all i seem to be able to find are examples with text wrap.
any help appreciated, thanks.
Are your images of the same size ?
Without more information on what you want/have on your page, it's kind of hard to know what you need.
But here's an simple example : http://codepen.io/cecileledoux/pen/mWJyGV
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
section{
margin-bottom: 20px;
text-align: center;
}
figure{
display: inline-block;
}
Related
<figure>
<img src="imgsrc1.png" alt="image">
<figcaption>Caption</figcaption>
<img src="imgsrc2.png" alt="image">
<figcaption>Caption</figcaption>
<img src="imgsrc3.png" alt="image">
<figcaption>Caption</figcaption>
</figure>
<!--As you can see it makes the images aligned Vertically--!>
I have been attempting to have a part of my website where I have three images horizontally aligned with captions. I have decided to use the figure tag which has them horizontally aligned, however, when I add a figcaption they become vertically aligned (stacked on top of each other). This is not what I want and I don't understand why the figcaption does this. Can anyone tell me how to keep the images horizontally aligned?
<div class="logos">
<img scr="twitter-logo.png"widht=50 alt="twitter logo"
<img src="facebook-logo.png"width=50 alt="facebok logo"
</div
the twitter logo is not working but the facebook one is. Ive tried everything i could think of. Please help!!!
It's because you misspelt src in your Twitter line
Clean up your code. widht and scr is wrong.
Closing div is missing '>'
Add quotes for the attribute values. add a space between each attributes. space missing after scr="twitter-logo.png"
To prevent further issues like that in the future the W3C validator can be helpfull:
W3C Online Validation Tool
You can try this code hopefully it will be working perfectly
<div class="logos">
<img src="twitter-logo.png"widht=50 alt="twitter logo"
<img src="facebook-logo.png"width=50 alt="facebok logo"
</div>
This should work, fixed your "widht" to "width" too :)
<div class="logos">
<img src="twitter-logo.png" width=50 alt="twitter logo">
<img src="facebook-logo.png" width=50 alt="facebok logo">
</div>
I would like to know if a figure element can contain more than one figcaption child?
I read something somewhere (sorry, now I can't find it) that seemed to suggest it couldn't- yet I am sure that a figure can contain more than one img, so that seems illogical.
What if I have two related images side by side, for which I want separate captions?
You can nest the img plus its figcaption into multiple figure tags. To add more semantics to the code you can add an ARIA role attribute.
<figure role="group">
<figcaption>Caption for the whole group of images</figcaption>
<figure>
<img src="picture1.jpg" alt="Description of picture 1">
<figcaption>Caption for Picture 1</figcaption>
</figure>
<figure>
<img src="picture2.jpg" alt="Description of picture 2">
<figcaption>Caption for Picture 2</figcaption>
</figure>
</figure>
In HTML5 figure is a sectioning root. It may have sectioning root or flow content as content. A figcaption is flow content, and may only have flow content as content. So, a figcaption may not have a figure as content.
A figure may have another figure as content, however. Keep in mind that a figcaption must be the first or last child of a figure.
So code might look like this:
<figure>
<img>
<figure>
<figcaption></figcaption>
</figure>
<figcaption></figcaption>
</figure>
or
<figure>
<figcaption></figcaption>
<img>
<figure>
<figcaption></figcaption>
</figure>
</figure>
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
For what I can see, you can only use it once within figure: http://www.w3schools.com/tags/tag_figcaption.asp
I am probably missing the blindingly obvious but I can't figure out why an image is not displaying on my web site. Here is the HTML:
<p>Above the image</p>
<img src="/Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>
My code is executing in the directory D:\WebApp which contains a folder called Trends that has all of my images. I have even tried the absolute path D:/WebApp/Trends/TDBFGLogo5.gif but all I see is:
Above the image
Below the image
I have no CSS that affects the img tag and this tag is in the body of the HTML.
Any advice is appreciated.
Regards.
<p>Above the image</p>
<img src="Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>
Try it like this
<p>Above the image</p>
<img src="./Trends/TDBFGLogo5.gif" alt="" />
<p>Below the image</p>
I'm trying to create the following design:
This is my code so far.
<section class="frontpagearticle">
<figure class="frontpagearticlefigure">
<img class="frontpagearticleimg" />
</figure>
<header>
<h2 class="frontpagearticleh2">MyHeader</h2><time class="frontpagearticletime">pubtime</time>
</header>
<p class="frontpagearticletext">Lorem....</p>
Read more...
</section>
I'm having problems creating my css, so ex. pubtime would be align to the right, while MyHeader would be left align.
The image is always going to be the same size.
height: 140px;
width: 250px;
Something like this? My attempt at making it, as simple as I could :)