Here is the url for the home page: http://www.auvsishow.org/auvsi2015/public/mainhall.aspx
Here is the current markup for the "Attendee" Button.
Thanks all.
The easiest way for doing this is putting div tag inside a tag.
<a href="Content.aspx?ID=1526">
<div id="home_travel_btn">
</div>
</a>
#home_travel_btn {
width: 437px;
height: 128px;
float: left;
background-image: url(http://www.auvsishow.org/auvsi2015/custom/images/interface/Travel_btn_sprite.png);
}
Check example:
http://jsfiddle.net/DariuszMusielak/4j4wyukz/
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" />
Am having a hard time trying to figure why I cannot get the images here to change color on hover. The images themselves are svg files and should just adopt the color. The code:
HTML:
<div class="toolTile col-md-3">
<a href="#/cards">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Manage my debit card</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/recurClaim">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>Recurring Claims</p>
</a>
</div>
And associated CSS:
.toolTile {
height: 200px;
float: left;
}
.toolTile img {
color: #ab2328;
height: 100px;
width: 93px;
margin-left: auto;
margin-right: auto;
display: block;
}
.toolTile img:hover {
color: yellow;
}
Color is related to text elements, you want border.
.toolTile img:hover {
border: Yellow 1px solid;
}
Here is a JSfiddle of it: https://jsfiddle.net/td70mqq5/
If thats not what your looking for, do some research on: svg {fill: currentColor;} (https://css-tricks.com/cascading-svg-fill-color/)
CSS does not apply across document boundaries. The CSS in your HTML will not be applied to the contents of your external SVG files.
You have to either inline the SVG in your HTML file, or you can move the styles to the SVG file(s) and change the <img> elements to <object> elements.
i am currently having problem aligning facebook share button and tweet button with each other as i am weak in CSS.
here is my code:
<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div>
Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
But they don't seem to align themselves with each other.
Your problems is linked to the structure.
One is a DIV and the other a A link.
You shall place both of then into a li list
See exemple bellow, just adapt the img uri & destination linked
.social-icon-fb {
background: url('../images/social-icon-fb.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
.social-icon-twitter {
background: url('../images/social-icon-twitter.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
<ul class="list-inline">
<li>
<a href="https://www.facebook.com/">
<span class="social-icon-fb"></span>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<span class="social-icon-twitter"></span>
</a>
</li>
</ul>
Adding the following CSS class to your page should work. If you're placing the two buttons side-by side in a containing div.
.fb_iframe_widget {
vertical-align: top;
}
Have you tried applying the style
display: inline-block;
If you apply the css to both class for the buttons then you should be able to get them to align..
please take a look at my jsfiddle for a css solution
https://jsfiddle.net/digitaliss/koo6o16n/
I have 3 hyper links. I would like one to be aligned left, one aligned in the center, and the last aligned to the right; all on one line, symmetrically. I've centered headings using ALIGN="CENTER" etc. But after some research i found out that element (A) doesn't recognize that as a command necessarily. So, what is the proper method for getting these hyperlinks to align the way i need? This is literally my first day using HTML or any kind of programming language for that matter. Your help and patience is appreciated, Thank you.
There are many approaches to this depending on markup, but the most common approaches involve using floats or absolute positioning. Since you haven't provided any code to start with, I'll just give you a basic example.
HTML:
<div class="wrapper">
<a class="pull-left">Left Link</a>
<a>Center Link</a>
<a class="pull-right">Right Link</a>
</div>
CSS:
.wrapper { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }
JSFiddle: https://jsfiddle.net/x4hrgdaL/
There are a few ways to do that, a table would be one, but this way is quick way. Not responsive however.
JS Fiddle
.hyperlink {
display: inline-block;
}
.one {
text-align: left;
width: 30%;
}
.two {
text-align: center;
width: 30%;
}
.three {
text-align: right;
width: 30%;
}
<div class="hyperlinkContainer">
<a class="hyperlink one" href="#">Hyperlink 1</a>
<a class="hyperlink two" href="#">Hyperlink 2</a>
<a class="hyperlink three" href="#">Hyperlink 3</a>
</div>
According to my understanding:your code looks like the following:
<a align="left">link1</a> <a align ="center">link 2</a> <a align="right">link 3</a>
If u want the alignment of the links to be in a format which you have mentioned,include the content in tag.
Ex:
<div align="left"><a>link1</a></div>
I want to have a button with an image and a link. Here is my style-code:
<style>
twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30%;
height: 30%;
}
</style>
and my body code:
<twitter href="#"> </twitter>
But it doesnt show any image. I tried a lot of different image-paths, but it just will not show...
oh. why not
<img src= "cima/social/twitter.png" />
<style>
a img {width:30%;height:30%;}
</style>
You HTML is invalid as you are using custom (non-valid) elements. Try
HTML
<a class="twitter" href="#"> </a>
CSS
.twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30px; /* or whatever value */
height: 30px;
}