Working on a forum right now and the dimensions I gave to my a href and his children's are not working. When I debug it in the console in the browser they don't get the dimensions width and height I gave them in the CSS they are 0px 0px so there's probably a problem with my class named "forum-link" because his parent "child-forum" works perfectly. Thank you
HTML CODE
<div id="content">
<div class="forum-group">
<h2 class="header-2">General Discussion</h2>
<ul class="child-forums">
<li class="child-forum">
<a class="forum-link" href="#">
<span class="forum-icon"></span>
<span class="forum-details">
<span class="forum-title"></span>
<span class="forum-desc"></span>
</span>
</a>
CSS CODE
.forum-group{
width:948px;
height:259px;
margin-left:auto;
margin-right:auto;
}
.header-2{
width:948px;
height:35px;
}
.child-forum{
width:310px;
height:106px;
float:left;
background-image: url(images/forum-child-background.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
margin-left:4px;
margin-bottom:4px;
}
.child-forum:hover {
opacity: 1.0;filter: alpha(opacity=100);
}
.child-forums{
width:948px;height:219px;
}
.forum-link{
width:309px;height:106px;
}
.forum-icon{
width:60px;height:60px;
}
.forum-details{
width:220px;height:43px;
}
.forum-title{
width:217px;height:18px;
}
.forum-desc{
width:217px;height:15px;
}
a tags are inline by default, and you cannot set width or height on inline elements.
To force it to be a block element, use one of these styles:
.forum-link {
display: block;
}
… or
.forum-link {
display: inline-block;
}
You need to give a position to your anchor tag in order for it to recognize width and height. You can do so by floating the link, display:block or display:inline-block whichever that fits your need.
a.forum-link {
width:309px;
height:106px;
float:left;
}
Related
I am trying to make different images appear over different link sizes when the mouse is hovering over the links. Just like in this page. Note that the images appear right next to the links without overlapping them. Is there a way to do this automatically or is it necessary to configure link by link?
So far, i was only able to make this:
.popup {
position:relative;
text-decoration:none;
}
.popup span {
position:fixed;
top:170px;
width:350px;
left:-999em;
}
.popup:hover {visibility:visible}
.popup:hover span {left:800px;}
* html .popup span {position:absolute;}
<p><a class="popup" href="#">Ship 1<span><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817"></span></a> </p>
You can make it using display but also position: absolute to be sure to not break the page structure:
DEMO with image out of a link (same effect as your link):
.d-flex{
display:flex;
}
.popup {
display:block;
text-decoration:none;
}
.popup + .popover-img {
position: relative;
}
.popup + .popover-img img {
display:none;
}
.popup:hover + .popover-img img {
display:block;
position:absolute;
}
<p class="d-flex">
<a class="popup" href="#">Ship 1</a>
<a class="popover-img" href="#">
<img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</a>
<span>Lorem Ipsum</span>
</p>
DEMO with image in a link
.d-flex{
display:flex;
}
.popup {
display:block;
text-decoration:none;
}
.popup .popover-img {
position: relative;
}
.popup .popover-img img {
display:none;
}
.popup:hover .popover-img img {
display:block;
position: absolute;
top: 0;
left: 0;
}
<p class="d-flex">
<a class="popup" href="#">Ship 1 <span class="popover-img" href="#">
<img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</span></a>
<span>Lorem Ipsum</span>
</p>
You have the image inside the anchor. Move it outside, right beside the link with no space. I think it should work fine like that. Remove the span if you don't need it.
<p>
<a class="popup" href="#">Ship 1</a><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
</p>
Note: this should solve the positioning problem but not showing (popping up) the image, which should be a different question.
Try this css:
.popup {
position:relative;
text-decoration:none;
}
.popup span {
position: relative;
}
.popup span img {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 250px;
}
.popup:hover {visibility:visible}
.popup:hover span img {display: block}
Just make the image display block on hovering in the popup
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED
Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly
I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}
Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}
Still learning to work with spans did some debug in the console browser and they are currently not getting the dimensions I gave them in my CSS class. I am just wondering what am I missing so they get the width and height I gave them. Thank you
HTML CODE
<div id="content">
<div class="forum-group">
<h2 class="header-2">General Discussion</h2>
<ul class="child-forums">
<li class="child-forum">
<a class="forum-link" href="#">
<span class="forum-icon"></span>
<span class="forum-details">
<span class="forum-title"></span>
<span class="forum-desc"></span>
</span>
</a>
CSS CODE
.forum-group{
width:948px;
height:259px;
margin-left:auto;
margin-right:auto;
}
.header-2{
width:948px;
height:35px;
}
.child-forum{
width:310px;
height:106px;
float:left;
background-image: url(images/forum-child-background.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
margin-left:4px;
margin-bottom:4px;
}
.child-forum:hover {
opacity: 1.0;filter: alpha(opacity=100);
}
.child-forums{
width:948px;height:219px;
}
.forum-link{
width:309px;height:106px;
display: inline-block;
}
.forum-icon{
width:60px;height:60px;
}
.forum-details{
width:220px;height:43px;
}
.forum-title{
width:217px;height:18px;
}
.forum-desc{
width:217px;height:15px;
}
span elements are inline elements are so are not affected by width and height properties.
Try setting them to display:inline-block and the properties will take effect.
You should give your spans: display:inline-block
I have such a div:
<div class="game_img_div">
<a href="./play.php?game=free-kick-fusion">
<img class="gamethumb" src= " ./images/thumbs/free-kick-fusion.jpg">
</img>
</a>
</div><!--game_img_div-->
and the .CSS only contains
img.gamethumb
{
height:6em;
}
So the picture resizes according to its aspect ratio, say it has dimensions (6em,Yem).
I want the ".game_img_div" to also have the dimensions (6em,Yem).
How can I do it? Thanks !
img.gamethumb {
height:6em;
}
div.game_img_div {
float:left;
}
Change the display type of the container div:
.game_img_div {
display: inline-block; /* `display: table` also works */
}
http://jsfiddle.net/S8GK4/
This will do the trick.
.game_img_div { float:left; }
img.gamethumb { float:left; }
http://jsfiddle.net/95ZUw/
try for css:
div.game_img_div {width:auto; display:block; position:relative}
img.gamethumb {height: 6em; max-width:100%;}
and the img tag it's without </ img>