I have 4 images within elements with captions within elements.
Each image is displayed under each other like:
IMAGE
caption
IMAGE
caption
IMAGE
caption
IMAGE
caption
I would like the images to appear like:
IMAGE IMAGE IMAGE IMAGE
caption caption caption caption
My HTML:
<div id="earlylife_images">
<figure>
<img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150">
<figcaption>A young Roger Moore</figcaption>
</figure>
<figure>
<img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150">
<figcaption>Roger Moore in his 30's</figcaption>
</figure>
<figure>
<img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150">
<figcaption>Roger Moore as James Bond</figcaption>
</figure>
<figure>
<img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150">
<figcaption>Roger Moore in more recent years</figcaption>
</figure>
</div>
Make figure inline-block.
figure {
display: inline-block;
}
I was thinking about:
figure {
width: 25%;
float: left;
margin: 0;
text-align: center;
padding: 0;
}
You can check it here: http://jsfiddle.net/cBkTc/3/
Make a div and add figure inside it (make figure inline-block)
HTML
<div>
<figure>
<img src="">
<figcaption>1</figcaption>
</figure>
<figure>
<img src="">
<figcaption>2</figcaption>
</figure>
</div>
CSS
div {
text-align: center;
}
figure {
display: inline-block;
text-align: center;
}
Related
It works fine with other buttons and elements I use on the page, but with the aside section that is on a fixed position. The tooltip shows up on the bottom. The next tooltip, for eksample for GitHub, shows up even further down.
I think it has something to do with the position in the CSS code, but I cannot figure it out. Is there anyone that has had the same issue and can help?
CSS:
aside {
background-color: #16123f;
position: fixed;
top: 40%;
padding: 10px 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
filter: drop-shadow(0px 3px 6px #00000045);
}
Code from the React component:
<aside>
<ul className="social">
<li>
<a data-tip data-for="ePost" href="mailto:stig.ark#gmail.com">
<FontAwesomeIcon icon={faAt} className="fa-solid fa-at fa-lg" />
</a>
<ReactTooltip
backgroundColor="#ed0b70"
textColor="black"
id="ePost"
place="top"
effect="solid"
>
Send meg en epost!
</ReactTooltip>
</li>
// ...
</ul>
</aside>
Here is how it looks, I want it right beside the aside.
I have managed to make it look like what you want with the following workaround (note overridePosition):
<aside>
<ul className="social">
<li>
<a data-tip data-for="ePost" href="mailto:stig.ark#gmail.com">
<FontAwesomeIcon icon={faAt} className="fa-solid fa-at fa-lg" />
</a>
<ReactTooltip
backgroundColor="#ed0b70"
textColor="black"
id="ePost"
place="top"
effect="solid"
overridePosition = {() => {return { left: 30, top: -40 };}}
>
Send meg en epost!
</ReactTooltip>
</li>
// ...
</ul>
</aside>
This is what it looks like now:
As for a proper fix, I do think this is a bug in the library. It may be a good idea to open an issue in its GitHub reposotory but unfortunately it's not reasonable to expect a fix anytime soon, considering that the library has more than 250 open issues already and the last commit was more than 3 months ago.
I am having a layout which has text and a button on the left side and the image on the right side. The layout is working fine on the desktop but when i switch to the mobile view the ui breaks. On the mobile only the image is showing up. The text and the button is not there.I am using flex for the UI.
<div className='container-1'>
<div className='container-2'>
<div>
<h1>heading</h1>
<p>
Loren Ipsum
</p>
<Button>button</Button>
<p>
lorem ipsum
</p>
</div>
<div>
<img
src={homepage}
width="300"
height="300"
alt='home'
/>
</div>
</div>
</div>
My Css File
.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}
.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}
The Problem was it was using display flew as row for mobile as well. I used a media query to display flex as column for mobile and it worked. Thanks
I'm simply trying to make an image clickable and execute function.
Here is my code:
<button class="button button-stable button-clear" on-click="myFunction()">
<img src="image.png" >
</button>
But the function is not executing on the click event.
With angular you should use ng-click.
try ng-click="myFunction()"
you can do
<img src="image.png" ng-click="myFunction()" />
try put ng-click in <img>
For example
<img class="button " ng-src="{{i.imagem}}" ng-click="myFunction($index)"></img>
What you are looking for is event binding in Angular. Read more about this from Angular documentation.
<img [src]="yourVariable" (click)="yourFunction()">
You don't have to. With a little extra markup you can do this.
Wrap image in label
set for to a hidden button id
run js on button click
Doing this will be a more accessible solution for people with disabilities.
Use this html.
<!--html-->
<label for="image-click">
<img src="http://lorempixel.com/100/100" alt="" />
</label>
<button id="image-click"
onclick="myFunction()"
class="visuallyhidden">
Click to run image
</button>
And add some css.
//css
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
label {
cursor: pointer;
}
Here is a codepen that shows how - http://codepen.io/bitlinguist/pen/bEJvoz
You can just as easily adopt this approach with angular directives.
How can i make this onsenUi dialog open as fullscreen? I have a image inside this dialog.
<ons-dialog style="width:305px;height:400px;" var="naviDialog" cancelable>
<ons-navigator var="myNav">
<ons-toolbar inline>
<div class="center">
text sample
</div>
</ons-toolbar>
<div class="dialog">
<p>
<img src="images/picone.png"/>
</p>
</div>
</ons-navigator>
</ons-dialog>
I've found a way
<ons-dialog style="width:100%; height:100vh;" var="naviDialog" cancelable>
In order to make it vary according to the image size I've done the following:
/* under CC0 waiver */
.dialog{
width: auto;
max-width: 90%;
}
.dialog img{
width: auto;
}
Hope it helps others
Here's our test.
http://www.photoeye.com/test1/test4.cfm
How can I create a caption just below the responsive image? Thanks.
How about not using <figcaption>, but instead two vertical divisions? The first inner <div> contains the image, the second inner <div> contains the caption. Something like this:
<div>
<div>
<img src="my_image.jpg">
</div>
<div>My caption</div>
</div>
May be a HTML5 structure would help you in doing this, do not forget to add html5shiv in your head tag above...
CSS:-
.resp-adapt { position:relative; }
.resp-adapt img { width:100%; margin-bottom:-2px; }
.resp-adapt figcaption { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0,0,0,0.5); }
.resp-adapt a { color:#fff; display:block; padding:10px; }
HTML:-
<figure class="resp-adapt">
<img src="xyz.jpg" alt="Image">
<figcaption> Caption Link 1</figcaption>
</figure>
Fiddle Demo