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.
Related
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 is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I build websites from scratch using bootstrap and have a question regarding containers/positioning.
I am going to be building a section where a container overlaps the header image (screenshot example attached). I was wondering if anyone has examples of this being used or knows what the technique is called so I can have a look into other examples?
The way to do it will be using absolute positioning but I'd just like to see some other examples of peoples attempts before I do my own!
Thanks for all your help.
I think we need to see the structure of your html to know how it's formed and apply the css rules accordingly.
But in case you don't have it, here is an example using negative margin:
.first {
background-color: lightgreen;
width: 100%;
height: 200px;
z-index: 1;
}
.second {
background-color: blue;
width: 60%;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: -80px;
z-index: 2;
}
<div class="first"></div>
<div class="second"></div>
i have tried doing this before, and i used z-index: -1 for the image.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Can anyone help to check on this site?
http://chanbaneng.com/demo/
When in Firefox, all the content gets pushed to the right. In all the other browsers I tried (Chrome, Safari, and IE), it works just fine.
Is there anything wrong with the code?
Used to this way
ul.bjqs{
overflow: hidden; // remove this line in your css
}
==========================
your second problem solution is this
now define this css in your style sheet
#container{clear:both;}
Just change this class and set it again because its slider
ul.bjqs {
position: absolute;
list-style: none outside none;
margin: 0px;
overflow: hidden;
display: none;
}
I am sure there will be some calculations will be done on bases of resolutions so it will better to put in absolute position and then do other stuffs this will result in to same for all browsers
Please modify this
<ul class="bjqs" style="height: 380px; width: 100%; display: block;">
to
<ul class="bjqs" style="height: 380px; width: 100%; display: block; overflow: -moz-hidden-unscrollable;">
The simplest way I found to solve this without rewriting your code is:
Go to your li a selector (line 73) and remove height: 28px;
You a tags already get their correct height and setting it manually messes up with the flow of the display.
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... */
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Please check this link
The left panel text goes hidden under the center picture if I re-size the browser window.
How do I fix it?
Set .ac-wrapper h2 30% instead of 50%
.ac-wrapper h2 {
width: 30%;
}
EDITED
html
<div class="ac-device">
<h2 style="color:#888888">Logical & analytical. <span>Argues till someone <br>just walks away!</span></h2>
<img src="images/screen1.jpg">
<h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>
CSS
.ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}
I'm looking at Chrome Dev Tools and I don't actually see where at any point styles from within a media query are being loaded. The obvious result you want is that right now that left panel is
position: absolute;
width: 50%;
and of course at this resolution you want that width to be something smaller. You can change the styles as your title suggests with a media query, but none's firing. Do you mind posting your relevant CSS to see why--if it exists--your mq isn't working?
Judging by the quality of your design I'm guessing you definitely know what a media query is, but just in case:
#media screen and (min-width: 1366px) {
id.class {
width: 40%; // or whatever
}
}