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>
Related
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/
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;
}
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;
}
I'm trying to have the links for AgentSheets, Gimp, and InkScape to show when the link for Portfolio is hovered. I've achieved that, but whenever the mouse is moved from portfolio, to click one of the links, they disappear because Portfolio isn't being hovered over anymore. Anyone have any advice? Thanks!
CSS:
#portfolio:hover + #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
width:70px;
display:inline;
}
HTML:
<div id="portfolio">Portfoliodiv>
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
To have this effect work the portfolio2 div should be inside the main div
HTML
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
CSS
Then the CSS becomes
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
display: inline-block;
border:1px solid red;
}
Note: this will cause the parent div to change in size which may not be what you need.
JSfiddle Demo
I see that you used display: inline on the #portifolio div so the links would be sided. But that actually keeps your hovering to work well.
You can use white-space: nowrap instead, so the <a> links would remain inline. Also, remove the css + selector, because it is not for this scenario.
So your css code would be:
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
white-space: nowrap;
}
#portfolio {
width:70px;
}
Also, you have to correct the html:
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
Here's a fiddle: http://jsfiddle.net/G3S82/
A similar solution. Again, you must put the hidden DIV inside the visible one. And use this CSS, which maintains the desired (fixed) width of your elements:
#portfolio {
width:70px;
background: green;
}
#portfolio2 {
display:none;
width: 200px;
background: lightblue;
}
#portfolio:hover > #portfolio2 {
display:block;
}
http://jsfiddle.net/sLLQA/1/
1.Your closing div after Portfolio < /a> is not closing properly.
2.You have to remove the second closing div at the end of the script.
My site: www.pkgeek.com
Just scroll down to the footer and you will see Powered by and on the next line you will see two icons (Blogger icon and namecheap icon). I want these icons to be displayed next to Powered by: (Not on the next line).
My HTML Code for these icons and the footer Powered by links:
Powered By: <div class="div123">
</div></div>
CSS CODE:
.div123 {
}
.blogger {
background:url('http://2.bp.blogspot.com/-EcPHtL7JRak/Uz8VLVBfGCI/AAAAAAAAAoc/WOHpaJy7hxg/s1600/blogger.png');
background-position:0 0;
width:25px;
height:25px;
display:inline-block;
}
.blogger:hover {
background-position:0 25px;
}
.namecheap {
background:url('http://1.bp.blogspot.com/-GOvEY9lWKkU/Uz8VNmQMq5I/AAAAAAAAAok/RRLbRx_EDYc/s1600/Namecheap.png');
background-position:0 0;
width:35px;
height:20px;
display:inline-block;
}
.namecheap:hover {
background-position:0 20px;
}
I think you need to give the following css property float:left to the **two pictures and the text. Edit the html to this and it works:
<div style="float:left;"> Powered By:</div> <div class="div123">
</div></div>
remove the width for the div poweredbylinks and add the properties: .poweredbylinks{ vertical-align:top; line-height:25px; } and for the div .div123 remove the width, float and the height, and set his styles to: .div123{ display:inline-block; }
Replace div by this:
<div class="poweredbylinks">
<div style="float:left">Powered By:</div> <div class="div123">
<i class="blogger"></i>
<i class="namecheap"></i>
</div>
</div>
You can just add style=" display: inline; " to your divs like this: jsfiddle