I put this in the following file: index.html
<ul class="youtube">
<li class="gamerscafe"></li>
<li class="destiny"></li>
<li class="halo"></li>
<li class="assassins"></li>
<li class="gearsofwar"></li>
<li class="armyoftwo"></li>
</ul>
And i put this in the style.css sheet...
ul.youtube
{
width: 650px;
margin: 0px auto 0;
height: 10px;
}
ul.youtube li{
float: left;
background: url(../images/youtube.png) left top no-repeat;
position: relative;
height: 20px;
margin-right: 70px;
}
ul.youtube li a{
display: block;
width: 18px;
height: 20px;
}
However when i hover over the images the link doesn't work is there something i am missing ?
Your a anchors do not include any text/elements to be clicked on.
You need to insert something inside your a tags, for example images:
<a href="http://URL/TO/DESTINATION">
<img src="http://URL/TO/IMAGE.png" />
</a>
Or, if you just want so span a clickable area, define some element with dimensions inside
<a href="http://URL/TO/DESTINATION">
<div style="height: 100px; width: 300px;"></div>
</a>
But the main problem is, that your anchors have no content you could click on.
EDIT: I suppose you could edit the dimensions of the a directly as well instead of the div. The a would need a display: block; or display:inline-block for that though
Like Felk said.
You have your <a> tag but it doesn't have anything inside.
In order to make the images links you would have to put them inside the <a> tag; like so.
<li class="gamerscafe"><img src=""></img></li>
//^ image code here
If you move your background image styling into the a tag it should work, like this:
ul.youtube li a{
display: block;
background: url(http://gamerscafe.net/images/youtube.png) left top no-repeat;
width: 140px;
height: 200px;
}
Then you can apply the positioning this way:
ul.youtube li.destiny a {
background-position: -310px 0px;
}
And if you need hover effect:
ul.youtube li.destiny a:hover {
/*style for hover*/
}
I have put your site into jsfiddle. Please take a look here for a working version:
https://jsfiddle.net/4vdr8dLf/
Related
So I have an iframe which covers the page, I want to basically make a div cover the whole page by transitioning in on the whole page from left to right when you hover over an <a> element. My code so far is this, which doesn't really seem to be doing what I want it to do fully on <a> elements which are not even inside the iframe
this is the code I've got so far, I tried doing it through css which sort of works when I try it online but the example on jsfiddle doesn't work that well if at all really.
<a id="example">a link</a>
<iframe src="https://www.w3schools.com/cssref/sel_hover.asp" style="border: 0; width: 100%; height: 100%" id="iframe">Your browser doesn't support iFrames.</iframe>
<div class="post-s">
wolooooloooo>
</div>
.post-s {
width: 0;
height: 100%;
background-color: rgba(253,0,0,0.7);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.7s ease;
}
a:hover ~ .post-s{
width: 100%;
}
An example:
https://jsfiddle.net/ejoaxmsw/7/
Your link is located under div.post-s, so it is gets lost a:hover when div expanding. You can set link above div
#example {
position: relative;
z-index: 1;
}
or disable pointer events for div
.post-s {
pointer-events: none;
}
I am trying to get a square to have a limited size and stay within the bounds of the parent div and scale cleanly. I can get one or two of these, but not all.
Setup is I have a main div, two column divs on the left, and a div that takes up the remaining space on the right. I would like the div on the right to contain the square and the bounds of the square stay within the parent div. I can get it to stay put if I don't use the padding-bottom to keep it square, but then the pic of the item looks horrible.
Take a look at my js bin. The pathway to hit the square is:
Weapons -> item b1 -> click on it to make it stay
The padding-bottom pushes it way down and outside of the parent div and blows the bottom out of the whole thing.
css
.itempanel{
display: block;
align-items: center;
position: relative;
}
.itemcontainer{
position: relative;
top: 30%;
height: 60%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.itemdisplay{
display:none;
flex-direction: column;
width: 60%;
padding-bottom: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
overflow: hidden;
}
/* .itemdisplay::after{
content: " ";
display: block;
padding-bottom: 100%;
} */
html
<div class="itempanel">
<div class = "itemcontainer">
<div id="itemdisplay" class="itemdisplay">
<img id="itemimg" class="itemimg" src=""></img>
<div id="itemdesc" class="itemdesc">
<div id="itemtitle" class="itemtitle"></div>
<div id="itembody" class="itembody"></div>
<a id="itemclick" class="itemclick" href="">Click To Place Order</a>
</div>
</div>
</div>
</div>
Thanks for any help!
*little bit of background - girlfriend wants a skyrim wedding so building out a website for rsvp and stuff. Belethor's shop is going to be setup to help those not so nerdy shop for cheap cosplay outfits. Everything else works just like I want it, but the itempanel/itemcontainer/itemdisplay is not in the display area how I want it.
figured it out. The psuedo element has to be opposite what padding you are using. For instance, using this worked like I expected it to. it's always the simple things...
.itemdisplay::after{
content: " ";
display: block;
padding-top: 100%;
I see that you have created a class .bottommenu but I don't see it being applied anywhere on your HTML or JavaScript. If you want to display two rows using Flex-box and you are not quite sure of the height of your images or content, you could set that parent container to have a height: auto and on your child container you could use the align-self: flex-end to handle the positioning of items, and on your parent use the justify-content or align-content to your liking. Something like this:
div .parent {
display:flex;
height: auto;
min-width: 300px;
}
div .child {
align-self: center;
width: 100%;
min-height: 50%;
height: auto;
margin: 0 auto;
}
Hope that helps.
I'm new to HTML and CSS and I just can't figure this out. I've managed to align three images horizontally so they sit comfortably next to each other on the webpage. They are all sized accordingly to my needs too. However, I'm trying to use the Lightbox script with them (allows you to view the images in a pop out window) and to do that the image tag needs to be wrapped within an <a> tag to link to the Lightbox script. However, when I add the <a> tags the images become completely misaligned and disproportionate. Any suggestions?
<div class="imagecont">
<a href="images/gallery/tube1.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube1.jpg" alt="Tube 1" style="width: 50%; height: 50%;"/>
</a>
<a href="images/gallery/tube2.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube2.jpg" alt="Tube 2" style="width: 100%; height: 100%;"/>
</a>
<a href="images/gallery/tube3.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube3.jpg" alt="Tube 3" style="width: 50%; height: 50%;"/>
</a>
</div>
.imagecenter {
justify-content: center;
margin-right: 10px;
margin-left: 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: middle;
display: inline;
}
.imagecont {
width: 50%;
height: auto;
display: flex;
justify-content: center;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
margin-bottom: 40px;
}
You can also simply use CSS on the anchor tag.
img a { adjust spacing as needed }
or make it a special class for those elements.
img a.anchorimage { adjust spacing as needed }
or better yet, use a reset stylesheet to start with before doing any of your own styling.
http://cssreset.com/what-is-a-css-reset/
When you wrap the images in a tags, the a tags now become the flex-items which the images were before (i.e. the children of the .imagecont div which is the flex container), and the images become children of the a tags. So you have to apply the desired sizes, alignment etc. to the a tags and make the images relative to the a tags, for example heigth: 100%.
I'm trying to create a link that changes into two links when you hover over the text. You can see something like what I want to do here: https://www.kenzo.com/en/ You can see that the collections link changes into two separate links for men and women when you hover over the link. At the moment I have managed to create a link that separates into two words when hovered over but not into two links.
Here is my HTML code:
<li><span>Collection</span></li>
And here is my CSS code:
#nav-item1:hover span {
display:none;
}
#nav-item1:hover:before {
content: "Men Women";
}
So the text changes which is great, but I haven't quite figured out how to turn the text into two separate links. I'm not sure if I have to use JS for this or not, as my JS knowledge terrible.
Any ideas?
If I understand you right you can try something like this:
li {
list-style: none;
}
li a {
display: none;
margin-left: .3em;
}
li:hover span {
display: none;
}
li:hover a {
display: inline-block;
}
<li>
<span>Collection</span>
Man
Women
</li>
Okay so here is a small breakdown of how you can achieve this.
There is a block element on the top of things.
Then there are two hidden elements that are children of the block element.
And when you hover over the block element the other ones are shown.
You can also hide the child element that contains the text on hover.
.block:hover .hide {
display: inline;
}
.block {
color: black;
font-size: 20px;
}
.hide {
display: none;
}
<div class="block">
<span class="default text">Hover</span>
<a class="hide" href="#">Snowball</a>
<a class="hide" href="#">Kitten</a>
<div>
.splitted {
display: none;
}
.links:hover .one-link {
display: none;
}
.links:hover .splitted {
display: inline;
}
<span class="links">
Collection
Men
Women
</span>
Please try this
#nav-item1{
position: relative;
}
#nav-item1:before,
#nav-item1:after{
display: none;
position: absolute;
top: 100%;
color: #000;
}
#nav-item1:hover:before,
#nav-item1:hover:after{
display: block;
}
#nav-item1:before{
content: 'Men';
right: 50%;
}
#nav-item1:after{
content: 'Women';
left: 50%;
color: green;
}
<ul>
<li><span>Collection</span>
</li>
</ul>
I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.
For that reason, the solutions described here don't seem to be working.
The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.
<div class="container">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: yellow;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.logo {
width: 100px;
}
I have modified the code so that the logo image can be center aligned horizontally as well as vertically.
JSFiddle
HTML code:
<div class="container">
<div class="image-div">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
</div>
Css code:
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: #FFFF00;
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
}
.image-div {
float: left;
}
.logo {
width: 100px;
}
If you have further issue, please comment on the code, and modify the jsfiddle.
Regards D.
There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.
<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>
Another is using center tag
(As 'margin:auto' may not work for images for some browsers however it works for div tag.)
<center>
<img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>
If you need just horizontal center, try:
.logo-div {text-align: center;}
img {margin: 0 auto;}
http://jsfiddle.net/yXNnd/18/
JS version
Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/
Add this js
$(document).ready(function(){
var img = $('.logo-div img');
var top = ($('.container').height() / 2) - (img.height() / 2);
img.css('margin-top', top + 'px');
});