Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have used upload file (type=file) to upload a file. I want to change the button to text. Since the user will using either Google chrome or IE. So I have to consider both browsers. I would prefer simple code.
Here is my code (I'm using multiple upload files)
<td><input type="file" name="picture[]" id="picture" ></td>
thanks
If I understand right, you're asking about styling input tags with type="file". This is pretty difficult, but what I usually do is wrap the input, and include another tag that will show the desired style. I then position the input tag on top (so that it can still be clicked), but make it transparent so the underlying style shows through.
Something like:
HTML:
<div class="uploadWrapper">
<p>Click to choose file</p>
<input type="file" name = "filedata" size="100" />
</div>
CSS:
.uploadWrapper {
overflow: hidden;
position: relative;
height: 25px;
width: 250px;
background: rgb(10,100,210);
}
.uploadWrapper input {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.uploadWrapper p {
margin: 0 10px;
position: absolute;
line-height: 25px;
}
http://jsfiddle.net/BYossarian/NVr6t/
"Each browser has it's own rendition of the control and as such you can't change either the test or the orientation of the control."
- Original Source
However, I believe you can be a bit tricky and modify the button with CSS.
#picture {
text-decoration: none;
/* etc... */
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 days ago.
Improve this question
#wb_element_instance32 {
top: 0px;
left: 0px;
min-width: 1200px;
width: 1200px;
min-height: 571px;
height: 571px;
display: block;
z-index: 9;
}
#wb_element_instance32 img {
width: 1200px;
height: 571px;
display: block;
position: static;
left: 0px;
top: 0px;
}
I wrote this code in CSS for this object:
<div class="wb_cont_inner">
<div id="wb_element_instance32" class="wb_element wb_element_picture" data-plugin="Picture" title="">
<img alt="" src="gallery_gen/e9a807c8fc4b718061846b1746d4d62e_1874x891.71166666667.jpg" data-original-width="1874" data-original-height="891">
</div>
<div id="wb_element_instance33" class="wb_element wb_text_element" data-plugin="TextArea" style=" line-height: normal;">
<h2 class="wb-stl-heading2">
<span style="color:rgba(68,69,64,1);">
<strong>Keltaisen talon terapiatila</strong>
</span>
</h2>
</div>
For some reasons, when I browse that page the size of the picture is 1200x800. The files with code are stored on the cloud of a web hosting firm.
Could you please tell me why this could be happening?
If I inspect the page, it turns out that the browser has some CSS file where the size of the picture is set to be 1200x800. Otherwise, the code is identical.
Try making the css style important. Then your style will prioritize.
ex:
#wb_element_instance32 img { width: 1200px; } !important
Although your question is so mis understood, I guess there is a extension override css and effect your style.
Try to use incognito mode ( Windows、Linux \Chromebook :Ctrl+Shift+N. Mac： Command+Shift+N.) to open your file, and see if it goes well.
You can click here to find source of the css, attention the css name .
You can find the http request in Network base on the css name,
find extension name
like chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/normalize.css
open chrome://extensions/ in chrome
find the extension
copy extension name into search input.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Is there a way I can get the NW div to click to google?
html,
body {
height: 100%;
margin: 0;
padding: 0
}
div {
position: fixed;
width: 50%;
height: 50%
}
#NW {
top: 0;
left: 0;
background: orange
}
#NE {
top: 0;
left: 50%;
background: blue
}
#SW {
top: 50%;
left: 0;
background: green
}
#SE {
top: 50%;
left: 50%;
background: red
}
<a href="https://www.google.com">
<div id="NW"></div>
</a>
<a href="https://www.google.com">
<div id="NE"></div>
</a>
<a href="https://www.google.com">
<div id="SE"></div>
</a>
<a href="https://www.google.com">
<div id="SW"></div>
</a>
Thanks
On my systems (Safari on IOS 14; Edge, Chrome, Firefox, IE11 on Windows10) clicking on a rectangle takes me to the google site if I run the code direct.
If I run it through the the Stackoverflow snippet system though it does not, and that is because the snippet system uses an iframe to run the user's code and google doesn't allow itself to be run in an iframe.
It may be useful to have details of the system and browser and any other contextual stuff (like how is the code embedded in other code?) which may cause it not to function in your system.
Meanwhile it could be worth trying to swap the positioning of the anchor element by making that have the fixed position, top, left and dimensions of its child div so that it is forced to take up non-null space itself and see if that removes the problem.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to build my first web page and I am only allowed to use HTML and CSS. I have a text inside a div and I want to make it appear from the bottom when the page opens. Is it possible to recreate this effect only using HTML and CSS?
If you cant use javascript for stuff like this, try take a look at css keyframes.
They are used for looped animations and other stuff.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If the animation must appear after the page fully loaded then, You must integrate JavaScript because you have to call onload event then run the animation. otherwise is not possible that is bcs the page maybe take too long to load on slow internet connect so the animation won't be consistence.
If you choose this approach. here is an example:
document.onreadystatechange = () =>{
if ( document.readyState === 'complete' ) {
// Add class animation to div element.
}
}
Have a look at this one. You'll get an idea from this one I guess
.item {
width: 300px;
height: 300px;
outline: 1px solid skyblue;
margin: 5px;
text-align: center;
}
.item .content {
position: relative;
top: 270px; /* 270px top + 30px line height = 300px outer container height*/
line-height: 30px;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover .content{
top: 135px;
}
<div class="item"><span class="content">dummy text for test</span></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Typical for a search bar, I've added a magnifying glass icon on the left side for UI purposes. On desktop it looks fine and stays at the position nicely. However, when switching to mobile the icon is repositioning itself according to the device width.
I thought by increasing the left parameter for #media (max-width: 768px) it will be fixed but it seems to behave differently.
A gif of the issue with the code on the right side is added. What am I doing wrong?
Try this:
.input_with_icon {
position: relative;
}
.input_with_icon .form-control {
padding-left: 40px;
height: 21px;
}
.input_with_icon img {
position: absolute;
top: 5px;
bottom: 0;
left: 10px;
margin: auto;
}
<div class="input_with_icon">
<input type="text" class="form-control" placeholder="Search here...">
<img src="images/search.png">
</div>
This is happening because you have hard-coded left:4em inside the media query.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.