I need to know how to add an a href link to a div? Do you put the a href tag arounf the entire "buttonOne" div? Or should it be around or inside the "linkedinB" div?
Here's my HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
Can't you surround it with an a tag?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
try to implement with javascript this:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
In this case, it doesn't matter as there is no content between the two divs.
Either one will get the browser to scroll down to it.
The a element will look like:
buttonOne
Or:
linkedinB
Try creating a class named overlay and apply the following css to it:
a.overlay { width: 100%; height:100%; position: absolute; }
Make sure it is placed in a positioned element.
Now simply place an <a> tag with that class inside the div you want to be linkable:
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK's suggestion might work but it won't validate because you can't place a block element (div) inside an inline element (a). And when your website doesn't validate the W3C Ninja's will come for you!
An other advice would be to try avoiding inline styling.
I'd say:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
However, it will still be a link. If you want to change your link into a button, you should rename the #buttonone to #buttonone a { your css here }.
Your solutions don't seem to be working for me, I have the following code. How to put link into the last two divs.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
#import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>
Related
I put the web into the IOS app as a webview.
When I use the <detail> tag of html 5, I want to change it's display to flex not block,in web it can work but it cannot work on the phone
This is my code, is there any mistake?
details summary::-webkit-details-marker {
display: none;
}
details{
width:100%;
}
details summary {
width: 100%;
/* padding: 0.5rem 0; */
border-bottom: 1px solid #dddddd;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
float:left;
}
details summary:after {
content: "click me";
color: black;
right: 0;
transform-origin: center;
transition: 200ms linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<details style="display: flex; ">
<summary class="d-flex">
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">title</p>
</div>
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">date</p>
<span class="t-12">time</span>
</div>
</summary>
<p>
<pre class="d-inline">content</pre>
</p>
</details>
This issue is documented here: https://github.com/philipwalton/flexbugs#flexbug-9
The following workaround was proposed there:
The simple solution to this problem is to use a wrapper element that can be a flex container (like a ) directly inside of the element that can't. Demos 9.1.b and 9.2.b show workaround for the and elements, respectively.
In your case you should wrap your elements that should be displayed as flex in a wrapper element like a div.
I also faced a similar issue: the flex properties were not working with the summary tags in a WebView, otherwise working on a normal browser. The only workaround I found was to recreate the details-summary tag functionality with javascript by changing the display property.
document.querySelector('.summary').addEventListener('click', function() {
let collapsible = this.nextElementSibling
collapsible.classList.toggle('d-block')
})
section {
width: 100%;
}
.collapsible {
display: none;
overflow: hidden;
}
.summary {
width: 100%;
/* padding: 0.5rem 0; */
border-bottom: 1px solid #dddddd;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
}
.summary::after {
content: "click me";
color: black;
right: 0;
transform-origin: center;
transition: 200ms linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="d-flex summary">
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">title</p>
</div>
<div class="mr-3 w-75">
<p class="font-weight-bold mb-0">date</p>
<span class="t-12">time</span>
</div>
</div>
<div class="collapsible">
<pre class="d-inline">content</pre>
</div>
</section>
i have meet same issue.when i use flex in ssummary tag.i think a good way is not to use flex instead of using other css layout ways.
position:absolute;
use trandition css to manage our child
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 6 years ago.
What the hell am I doing wrong haha.
I don't want to set the div's height because it should be set to auto depending on the image next to it. Am I using the tag wrong or something?
See my attached code.
Any help is greatly appreciated.
*{margin:0;padding:0;box-sizing:border-box;}
.hugme{margin:0 auto;max-width:947px;}
[class*=bit-]{float:left;padding:5px;}
#font-face {
font-family: 'Market Deco';
font-style: normal;
font-weight: normal;
src: local('Market Deco'), url('http://www.adambwhitten.com/obsw/Market_Deco.woff') format('woff');
}
/* Grids */
.box{background:#ed1b2e;font-family: 'Open Sans', sans-serif;font-size:14px;font-weight:700;text-align:center;padding:10px 0;}
.box-2{background:#00aabe;}
.bit-1{width:100%;}
.bit-2{width:50%;}
.bit-2-2{width:50%;}
.bit-3{width:33.33333%;}
.bit-4{width:25%;}
.bit-5{width:20%;}
.bit-6{width:16.66667%;}
.bit-7{width:14.28571%;}
.bit-8{width:12.5%;}
.bit-9{width:11.11111%;}
.bit-10{width:10%;}
.bit-11{width:9.09091%;}
.bit-12{width:8.33333%;}
.bit-25{width:25%;}
.bit-40{width:40%;}
.bit-60{width:60%;}
.bit-75{width:75%;}
.bit-35{width:35%;}
.bit-65{width:65%;}
.holdsmaller{max-width: 960px; margin: 0 auto;}
/* Buttons / Video Styles */
.holdbutton1 {
z-index:899;
margin: 10px;
}
.holdbutton2 {
z-index:899;
margin: 10px;
}
.holdbutton3 {
z-index:899;
margin: 10px;
}
.button-wrapper{
position:absolute;
width:100%;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btnFall {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
width:200px;
font-size: 14px;
background: #772539;
padding: 10px 20px 10px 20px;
text-decoration: none;}
.btnFall:hover {
background: #959356;
text-decoration: none;
}
#media only screen and (max-width: 756px){
.button-wrapper{flex-direction: column;}
}
#cf {position:relative; width:100%; margin:0 auto;}
#cf img {position:absolute; left:0; width:100%; height:auto; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
#cf img.top:hover{opacity:0;}
.showmobile{display:none;}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
#media (min-width:50em) and (max-width:68.75em){
.bit-7,.bit-35,.bit-65{width:100%;}
.bit-10,.bit-12,.bit-4,.bit-8{width:50%;}
}
/* Tablet */
#media (min-width:30em) and (max-width:50em){
.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%;}
.bit-1,.bit-11,.bit-3,.bit-5,.bit-7,.bit-9{width:100%;}
img.product {margin-top:43px;}
img.product2 {margin-top:56px;}
}
/* Mobile */
#media (max-width:30em){
.bit-4{width:50%;}
.bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%;}
#cf, img.product, img.product2, img.hidemobile, .button-wrapper {display:none;}
.showmobile {display:block;}
}
<div class="hugme">
<div class="bit-2">
<div class="inner" style="vertical-align:middle;">
<font style="font-family:'Market Deco'; font-size:50px; color:#772539;">BOOT UP</font><br>
<font style="font-size:18px; color:#000;">Short, tall, over the knee, or with plush touches.<br>This fall, take your pick.</font>
<div class="btnFall" style="text-align:center;">SHOP NOW ></div>
</div>
</div>
<div class="bit-2">
<div id="cf">
<a href="http://www.google.com/">
<img class="bottom" src="http://i.imgur.com/J3DOMlR.jpg" width="100%"/> <!-- hover -->
<img class="top" src="http://i.imgur.com/dMmmOz9.jpg" width="100%"/> <!-- static -->
</a>
</div>
</div>
</div>
Thanks guys and gals!
According to MDN, vertical-align is a property used for inline elements. I don't think it would work on a div.
How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP's Aerial theme if that makes any difference.
You should be able to do this with just css:
#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}
#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}
<div id="logo-holder">
<img src="http://spydar007.com/images/logo.png" class="image" />
<div class="text">Show this text on hover</div>
</div>
I've just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.
http://codepen.io/alexmccabe/pen/WvOdRw
Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden. This allows us to do a nice transition to get the text to appear.
Biggest plus point, no JS used at all.
Use the below code it really helpful
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>
<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>
</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style=" height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2>www.sanwebcorner.com</h2>
</body>
</html>
Here is the reference
This is the website I'm working on: http://threesamples.tumblr.com
I'm having the most idiotic problem, but nothing I try seems to work, so I figured I'd come here.
I'm working with a Tumblr theme that doesn't have support for captions (except when clicking through to the image post itself).
What I'm trying to do is place the caption text inside a div on the top center of the photo, so that on rollover:
- photo fades out
- text fades in
Here is the CSS I've got so far:
article.type_photo .photo-stage {
background: {color:Photo Background};
position: absolute;
}
article.type_photo .photo-stage:hover {
background: {color: BackgroundColor};
opacity: 0.5;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
article.type_photo .caption-wrap {
background: transparent;
width:720px;
height:300px;
padding-top:10px;
position: relative;
margin: 0 auto;
float: left;
}
article.type_photo .caption {
visibility: hidden;
position: absolute;
margin: 0 auto;
}
article.type_photo .caption:hover {
visibility: visible;
position: absolute;
color: #ffffff;
opacity: 1;
font-family:"Open Sans";
font-size:14px;
text-align: justify;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
and here is the Tumblr code for dealing with photo posts:
{block:Photo}
<!-- Photo Post -->
<div class="photo-stage {select:Image Height}">
<div class="photo-wrap" style="background-image: url('{PhotoURL-HighRes}');">
{block:IndexPage}
<img src="{PhotoURL-HighRes}" />
</div>
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" />{LinkCloseTag}
{/block:PermalinkPage}
</div>
</div>
<div class="caption">
{block:Caption}
{Caption}
{/block:Caption}
{block:Caption Hover}
{Caption Hover}
{/block:Caption Hover}
</div>
{/block:Photo}
I've managed to get the image to fade out, but cannot for the life of me get the text to fade in. Can someone tell me what I'm doing wrong?
So I'm not an expert but I think your problem is that position is not an animatable property. You need to specify that you only want the transition to apply to the visibility property, like so:
transition:visibility 0.75s;
-moz-transition-property:visibility;
-webkit-transition-property:visibility;
-o-transition-property:visibility;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
(Or you should be able to merge it all into one statement for the browser-specific statements, too, but you specifically used transition-duration for those, so I left them that way.)
Source:Using CSS Transitions, CSS Animated Properties
I want to set a button which allow the user to reset the contact form, is there any method to do it?
here is my coding for text field
<div style="float:left;width:600px;"><!--textfield-->
<div style="float:left;">
<div style="float:left;width:90px;padding-top:5px">
NAME
</div>
<div style="float:left;padding-top:4px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
EMAIL ADDRESS
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
CONTACT NUMBER
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="width:120p;float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
MESSAGE
</div>
<div style="float:left;padding-top:2px">
:
</div>
<div style="float:left;margin-left:3px;padding-top:2px;">
<textarea cols="48" rows="6" class="textfield"></textarea>
</div>
</div>
</div><!--textfield-->
</div><!--end leave your personal details-->
<div style="clear:both"></div>
<div>
<div id="buttonreset"><!--buttonreset-->
<img src="img/buttonreset1.png" width="54" height="24" alt="reset" />
</div><!--end.buttonreset-->
<div id="buttonsend"><!--buttonsend-->
<img src="img/buttonsend1.png" width="54" height="24" alt="send" />
</div><!--end.buttonsend-->
</div>
Css
.textfield {
font-family: CenturyGothic;
font-size: 12px;
color: #231F20;
resize: none;
text-align: left;
}
textarea {
border: thin solid #221F1F;
border-radius: 5px;
width: 430px;
height: 160px;
opacity: 0.8;
}
input {
border: thin solid #221F1F;
border-radius: 4px;
width: 430px;
height: 21px;
opacity: 0.7;
}
#buttonreset {
margin-top: 5px;
background-image: url(../img/buttonreset.png);
background-repeat: no-repeat;
height: 24px;
width: 54px;
margin-top: 10px;
margin-left: 410px;
float:left;
}
#buttonreset img {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity:0;
}
#buttonreset img:hover {
opacity:1;
cursor:pointer;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
Chrome, and Safari */
}
I haven't add any coding to my button, what code suitable for my button?
this is my fiddle:
http://jsfiddle.net/K5CJ4/
<input type='reset'>
is the easiest method.
[Edit]
Since you're trying to reset the form using an image, the easiest way is to use the reset() method in Javascript. (No need for a library like jQuery). To accomplish this, I simply added a bit of javascript to your <a> tag in your form, as well as wrapped the entire example in <form></form> tags, giving it an id of contactForm .
DEMO
use jQuery way to solve it. like this :
$("#buttonreset").click(function() { // div's id
$("#txtField1").val("");
$("#txtField2").val("");
});
Try to use :
<button type="reset" id="btnreset" value="Reset">Reset</button>
The button is a reset button (resets the form-data to its initial values)
#btnreset {
background-image: url("http://www.ricksdailytips.com/wp-content/uploads/2013/11/reset-button.gif");
border: 0 none;
height: 204px;
width: 200px;
}
If you want to automate this, you could set it such that the page refreshes the entire page after a given number of seconds. use the meta tag:
<meta http-equiv="refresh" content="(enter number of seconds before refresh);url=thispage.html" />