I have a question regarding links and divs. I want the whole div to be clickable and in the same time the text should be copyable, so that the google bots for example can read them as text.
Anybody got any ideas?
my code looks like this :
<div id="menubutton1"><br>
SOTNING</div>
#menubutton1{ width:149px; height:77px; float:left;margin-left:290px; text-align:center;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
#menubutton1:hover{
background-color: #F93;
cursor: pointer;
}
Your best bet is to create an anchor element, set that to display:block and position:absolute. See below:
<div id="menubutton1">
<p>You text which you want read by search engine bots.</p>
</div>
Add the following style
<style>
#menubutton1{
position:relative;
}
.fill{
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
</style>
See fiddle.
The text won't be selectable directly from the DIV as the anchor block is floating over the top, but if selecting the page or from outside the DIV then the text can still be selected.
There's no evidence showing this will affect search bots reading the content as the content is still visible.
Alternatively you will need to use a JavaScript function to run on the click event and go to a specified link. This will however cause a problem for a search bot as they don't knowingly read/follow JavaScript. If you do choose the JS route I'd suggest having the link available on the page elsewhere too to ensure it is followed.
Related
I would like to animate the transition of a div's size (signupForm) whose content changes dynamically.
The size of the container div in each step is unknown.
I would prefer to do this in CSS.
I'm using Vue.js to swap out the forms.
<div class="signupForm">
<component id="currentView">
<FormOne></FormOne>
<FormTwo></FormTwo>
<FormThree></FormThree>
<FormFour></FormFour>
<FormFive></FormFive>
</component>
</div>
#signupForm never leaves, but FormOne gets swapped for FormTwo, etc.
I have added the following:
.signupForm {
max-height:inherit;
display:inline-block;
transition: max-height 0.3s ease-in-out;
}
But the transition property didn't help much. Any ideas?
I am not sure max-height has transform possibility, Maybe this helps:
.signupForm {
max-height:inherit;
display:inline-block;
transition: height 0.3s ease-in-out;
}
I think that the problem is with max-height: inherit;
Try to use some big value in px (5000px for example). The value that you think, you will never reach.
I've been messing around with images sliding with hover on a separate page from my main work and it worked like a charm. However, when I transfer it to my main page, it doesn't work, for some reason. I even copy-and-pasted so there should be absolutely no problem going on.
.pictureContainer2 img:hover {
top: 50px;
}
.pictureContainer2 img {
position: relative;
top: 0px;
transition: top .2s ease-in-out; }
And this is how it is in the body.
<div class="pictureContainer2">
<img src="icontag.png"></div>
I'm sorry if this is obvious or just plain silly. I just got into web development.
Thanks for you time.
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.
I got a small gap between two buttons and I can't deal with it, tried to look in browser terminal, but that didn't helped.
Here are the buttons:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/>
<input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
CSS:
.secondTableVRow{
width:318px;
background-color:green;
display:inline-block;
}
#submit{
cursor:pointer;
display:inline-block;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
width:156px;
height:35px;
outline:none;
border:none;
background-color:#DDDDDD;
-webkit-transition: background-color 0.4s linear 0s;
-moz-transition: background-color 0.4s linear 0s;
-o-transition: background-color 0.4s linear 0s;
transition: background-color 0.4s linear 0s;
}
Both buttons have same CSS, I know I should use class for that and I will, just want to fix this problem first. Live example of buttons: http://www.diligencehelps.com/php_includes/register_form.php
There seems to be a small gap after EVERY element in the form, why is that happening?If any more code needed just ask.
Try this:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/><!--
--><input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
HTML can be very picky about the whitespaces.
For more background information, check this out: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Add this:
.secondTableVRow:last-of-type {
font-size: 0;
}
#submit, #extend {
width: 159px;
}
The space is due to whitespace - HTML interprets linebreaks as whitespace. font-size: 0 takes care of that, but leaves some extra space on the right as #submit and #extend don't quite fill their parent .secondTableVRow container. You could also use width: 50% instead of 159px.
The :last-of-type is to avoid the font-size: 0 from being applied to the .secondTableVRow earlier in the markup, but you could just give that last one an ID (or additional class like .final instead and select it that way, e.g. .secondTableVRow.final { font-size: 0; }.
edit: as Hauke mentioned in the comments, this may be problematic in certain older browers. It also will not work with relative font sizing (e.g. ems or %) because the font size will cascade to descendant elements. You could instead just add float: left to both buttons and overflow: hidden to their container, or another clearfix method.
You could specify them as 50% width, as block elements (instead of inline-block, as this is more supported on older browsers anyway), and float them both left. Just be sure to place a after, so your formatting isn't botched.
I am using php, html, and css to create a caption that displays the title first then sliding even more to reveal excerpt on hover.
Sample structure of basic post setup (simplified for clarity):
<div class="post-container">
<img src="postThumbnail.jpg" />
<span class="post-caption-container">
title
this is the excerpt
</span>
</div>
CSS file
.post-container{
position: absolute;
height: 200px;
width: 300px;
overflow: hidden;
}
.post-caption-container{
width: 300px;
height: 80px;
top: -45px;
}
.post-container:hover .post-caption-container{
top: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
Inline HTML to override styling
<div id="post-container" style="height: 140px;">
<img src="postThumbnail.jpg" />
<span class="post-caption-container" style="height: 50px; top: -25px; ">
title
this is the excerpt
</span>
</div>
The portion where "style = top: -25px;" is causing problems.
My best guess is that the inline html styling "style= top: -25px;" is overriding values in both ".post-caption-container" and ".post-container:hover .post-caption-container", which is not what I want.
I need ".post-container:hover .post-caption-container" value to remain "top: 0px;".
I've spent about a week trying to resolve this issue, but I'm stuck! I don't know if this is impossible to achieve?
Any help would be appreciated. If this problem is impossible, perhaps an alternative method to achieve the same result, would love some different ideas as well! oi vey, thanks so much!
Positioning values like top: XXpx etc. don't work unless the element they are applied to also has a position set, such as position: relative, so perhaps try adding that in. I don't quite understand the example you are working with, but that might be all you need to get it working.
PS: Welcome to Stack Overflow. :-)
EDIT: In response to comments below, I now understand that the problem relates to an inline style overriding stylesheet declarations, and yes, inline styles carry more weight that stylesheet rules in the laws of the cascade.
However, there is one way to override the inline style, using !important:
.post-container:hover .post-caption-container{
top: 0px !important;
}
So, you place !important after the rule but before the semicolon. (Note also the period . before .post-caption-container above. You left it out, but without it the declaration won't work anyway.