all i want to do is to be able to create this main page button.
i want to put an image and text next to each other in a button and when click on the button it'll link me to the main page. (i'll give it a <a href... later) i couldn't resize or stretch the image in button.
in order to observe what does my code, i expanded dimensions of the div and button. normally, my button is w:100px, h:30px and the div is w:1000px, h:30px. and it looks like this
i'm new to css & html and as well as asp.net. please help, thanks.
my codes:
<div style="width:800px; height:1000px; margin-left:auto; margin-right: auto; background-color:#D9FFFF">
<button style="width:725px; height:427px; background-size: 5%; background:url('pics/home.png') no-repeat 1px 1px; padding:0; margin:0;">Home Page</button>
</div>
Like I said in the comment, it is not a button it is an anchor. Shouldn't be too hard with basic HTML and CSS knowledge. The thing you probably struggling with is the home icon. Easiest way to get this is by using the font-awesome library by adding it to the head element: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
and add it as innerHTML to the anchor: <i class="fas iconname"></i> TEXT
a {
text-decoration: none;
color: black;
background-color: lightgrey;
display: inline-flex;
padding: 5px;
width: 100px;
height: 30px;
font-size: 14.5px;
justify-content: space-between;
align-items: center;
}
a > i {
color: grey;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<i class="fas fa-home"></i> MAIN PAGE
Related
I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />
I am displaying a list of files on a page, at the end of the each file nameI have used one background image(cross mark). But I need that image should be clickable element. When I click on the image it should delete from the given path.For more details, see the below image
How can I achieve that, give some suggestion.
Below html and css code I am using to display that image
$data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br></div>';
div.public-file-names {
background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;
font-size: 14px;
margin: 10px 0;
}
You need to add another anchor tag for the delete button, then move the background image to the tag.
$data .= '<div class = "public-file-names" ></div>';
.public-file-names {
font-size: 14px;
margin: 10px 0;
}
.delete-button {
float: right;
display: inline-block;
width: 16px;
height: 16px;
background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;
}
you can use jQuery but it can be achieved by html
you could just wrap each of your .public-file-names divs in an a tag
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
if that doesnt work for you let me know if you want me to help you using jQuery
I am styling a landing page for a facebook campaign on a wordpress website. It is not my own website and I do not want to change in the general css for the whole website when I style the landing page. Therefore I'm styling all the elements of my entry right in the text editor for that entry, if that makes sense.
When people click the link on facebook they get to the page I'm making. Basically the page should consist of two buttons that redirects people further on the page. I styled two anchor tags like squared buttons and so far so good, but to really get the "clickable" feel I want the background to change when the a tag is hovered.
Here is how I created the buttons:
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
If I had a stylesheet I could just style the a:hover with another background color and I would be done, but since I'm styling the individual elements on the page I dont know how to style the :hover property of the element within style="".
How do I style the :hoverproperty of an html element right in html? Or is there a way to create a stylesheet inside of the entry in wordpress?
I've tried to add this in to the entry, but it did not work:
<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>
Could someone point me in the right direction? Thanx!
You need to add !important to your CSS rules to override backgroound-color directly in HTML.
a:hover.green {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}
If OP wants to do it in HTML, not in CSS, there is some examples I found: exaple one and related post
I think you should put these code in any other block/ div which will identify this page from the rest of the page. i create a snippet of your code this will clear everything to you.
#land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}
<div id="land-pg">
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
I've got to design a menu bar which has two actions for it's links
1) Before action where the icon is green
2) On hover the icon should change to it's active version
On changing to active version, I need the text to display too. Like this:
My current HTML for this is:
<div class="span1 but">
<a href="#">
<div class="image-holder" id="about">
</div>
<div class="text-menu" id="about-text">
About
</div>
</a>
</div>
Where span1 is from Bootstrap while but is the css class as follows:
.but{
height:70px;
}
the ID #about is defined as:
#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px;
}
My current problem is such that on hover, I want the text to appear too. The text-box for this is defined as:
.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}
And the ID #about-text is:
#about-text:hover{
color: rgba(0,0,0,1);
}
What should I do to make the text appear along with the image on hover?
Try the following.
#about-text{
display: none;
}
#about:hover #about-text{
display: block;
}
This uses display:none; to hide the text but it shows the text if you hover on #about.
You can also try this.
.text-menu{
display: none;
}
.image-holder:hover .text-menu{
display: block;
You can use visibilityproperty
.text-menu{
visibility:hidden
}
.text-menu:hover{
visibility:visible
}
You have to change your HTML first in order to solve your problem.
<div class="image-holder" id="about">
<div class="text-menu" id="about-text">
About
</div>
</div>
Now add css as below instead of "#about-text:hover"
#about:hover #about-text{
color: rgba(0,0,0,1);
}
This will solve your problem.
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}