Is there a way get through to add text after img tag and it can be update everytime?
I'm using jsp and not support html5.
I have try through some example from here:
https://www.w3schools.com/howto/howto_css_image_text.asp
<button type="button" class="button" id="updatetext" style="background-color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" height="85" width="85" align="left">
</button>
The Result:
The text inside the image can be update.
img {
margin-bottom: -20px;
}
#some_id{
color: white;
}
<button type="button" class="button" id="updatetext" style="background color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="https://image.shutterstock.com/z/stock-photo-chinese-snack-and-chinese-tea-on-old-brown-wooden-table-in-dim-light-still-life-imge-and-select-1177215178.jpg" height="85" width="85" align="left"><p id = "some_id">text</p>
</button>
then you can use jsp by referencing to id to update text
You can use :after or :before selector to append or prepend text after any element.
img:after{
content: 'text after image'
}
<button type="button" class="button" id="updatetext" style="background-color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="..\icon\press.png" height="85" width="85" align="left">
</button>
You need to link the html message to a variable using jsp annotations, in this case is: <%= Variable %>, which will be updated somehow, also put a little bit of style on the page.
Try this:
<div style="display:inline-block;vertical-align:top;">
<button id="button_test">
<img src="https://cdn2.iconfinder.com/data/icons/facebook-ui-colored/48/JD-22-64.png" alt="img"/>
<div style="display:block;"><%= Variable %></div>
</button>
</div>
</div>
Related
I have html code:
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img src="assets/img/avatars/male.png" />
</a>
</span>
</div>
So what this basically does is show users name and picture next to his name. Currently the picture is too big and when I try to resize it by adding style="height: 33px" in img tag, the users name also resizes but I only want to resize picture.
The css classes are built in from component we use so I can't show them.
This should work fine. put this in your CSS declarations.
a img {
/*
CSS styles here
*/
}
Just add your style="height: 33px;" on the img tag itself. That said, it is often preferable to add the CSS to a class, and add the class to the img tag.
You can add width and height directly in img tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img src="assets/img/avatars/male.png" width="33" height="33" />
</a>
</span>
</div>
You can simply create a new class for img only like this:
<style>
img.Employee{
height:33px;
vertical-align:middle;
}
</style>
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img class="Employee" src="assets/img/avatars/male.png" alt="image" />
</a>
</span>
</div>
I am trying to center the button below - I have tried from other examples altering CSS code or using text-align: center but neither options have worked. I know the code itself can be fixed but I am quite a newbie so any tips would help.
Thanks
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
Try This:
div {
text-align: center;
}
<div>
<button><a class="btn-group" style="color: #000" href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
</div>
Take one outer div and set text-align : center to this div.
use this Code :
<div style = "text-align: center;">
<button>
<a class="btn-group" href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
The simplest solution is:
HTML
<div>
<button>
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
CSS
div {
text-align:center;
}
So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
So I have this code:
<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
<span id="sitetour-pointer"></span>
<div class="content-wrapper">
<span id="sitetour-header" class="sitetour-header">Test Text</span>
<div id="sitetour-content">
Why this is not being read
<div id="demo-bb" class="demo-bg">
<div></div>
</div>
</div>
</div>
<div id="sitetour-footer">
<button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
<button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
<button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
</div>
</div>
And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?
I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.
code below renders search form in below logo:
LOGO IMAGE
Logon or register
Search:
How to chage it so that Login/Search is rendered after logo in same row:
Logon or register
LOGO IMAGE
Search:
site.master contains:
<div id="header" style="margin: 0; background-color: white; width: 100%">
<a href="http://mysite.com">
<img alt='' style='width:30%' src='/Store/Logo' />
</a>
<div >
<p class="accBoxUnloggedOther">
Logon
or <a href="/register">
Register</a></p>
<br />
<form action="/Store/Search" style="margin:0">
<input class="searchfield" id="Search" />
<input class="button blue bigrounded" type="submit" value="Search... " />
</form>
</div>
....
Use style="float:right;" on the inner div. But you should try to avoid using inline CSS. It leads to a maintenance nightmare.
jsFiddle
You could also put the elements you want in the same line in a <div> tag and the image in another <div>