I'll try to keep this as succinct as possible...
I have a image that I had setup to fill it's parent div horizontally and scroll vertically.
I've since added a jQuery based scrollbar to replace the native scrollbar for non webkit browsers. Since doing so, my image is overflowing it's parent horizontally in Firefox. Chrome and IE are not having the issue.
It's a little convoluted because I'm using skelJS to set container sizes based on breakpoints, but I don't think that should make a difference. The parent and child containers along with the image have width's set.
I'm going to post the HTML and CSS first and see if there's something obvious I'm overlooking. The jQuery targets the .scroll-pane2 class and is working fine beyond my overflow problem. I'm happy to post that code if there isn't something obvious that I'm missing.
Thanks in advance for the help!
A summary of the code:
HTML:
<div class="8u tasting-menu">
<header>
<div class="scroll-pane2">
<p>Scroll or click for full-size menu</p>
<img src="images/bwh-tasting-list-png.png" class=""/>
</div>
</header>
</div>
CSS:
body {
width:100%;
}
img {
width:100%;
height:auto;
}
.8u {
width:66.6%;
height:auto;}
.scroll-pane2 {
height:27em;
width:100%;
overflow:hidden;
}
.tasting-menu img {
width:98%;
height:auto;
}
The jQuery based skelton I'm using accounts for the .8u. I've used it quite regularly and never had the issue, but I'll definitely take another look at it.
I tried the overflow-x:hidden to no avail. The jQuery scrollbar I'm using overrides the overflow in the scroll-pane2 class.
I need to relook at the scroll bar script I'm using... because before installation, it worked fine, albeit with the Firefox native scrollbars.
I'll try to put a jsfiddle together.
Related
I have a website that works fine normally but when in mobile mode, all the links (with exception of the navigation) are no longer clickable. Does anybody know how to change this? I'm not too familiar with Bootstrap though I've tried to troubleshoot as much as I can.
Here's the website: http://dominiquehall.com/dom/
Thank you in advance if anybody can help.
Remove the following code from your theme css file (agency.min.css) at line 477:
div {
height: 100%;
}
Or you can override that property by adding the following code in your custom css file:
div{
height: auto !important;
}
The problem in your code is with the property of div having height 100%, thus overlaying all the links. The div containing the image of a person playing guitar is covering the links in mobile mode. The images are hidden but the div still exist.
Another hack is hiding that particular div in mobile mode.
#media screen and (max-width:991px)
{
.target_div{
display: none:
}
}
In your case the target div is:
<div class="col-lg-4 col-md-5">
<div class="fixed">
<img src="./img/dom1.jpg" id="photo" class="hidden-sm hidden-xs" alt="">
View Resume
Equipment List
</div>
</div>
Just add a class name to the above div and a display as none for mobile devices and your site is good to go.
I am working on a page and it is a little lengthy, so I chose to link to sections of it using the method below:
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.</div>
Everything works correctly, as I am pretty proficient with basic stuff like this, but I am wondering if there is a way to make it so that the content I am linking to is a little farther from the top of the browser window, rather than immediately at the top. It doesn't have to be perfectly centered, maybe a margin of 100px or so would be fine.
Thanks
<head>
<script>
function change()
{
document.getElementById("myID").style.marginTop="100px";
}
</script>
</head>
<body>
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.sss
<pre>
s
s
s
s
s
s</pre>
</div>
</body>
All you need to do is add a little CSS:
#myID {
margin-top: 100px;
}
Hope that helps!
I have a little dilemma. I could work around this issue, but it would be a pain to do so and still limit things in sense of how a site layout could work. Basically I've been using the following method to give myself a sticky footer that is actually height variable:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Example:
The CSS:
html, body {height:100%; width:100%; margin:0;}
.wrapper {display:table; width:100%;}
html>body .wrapper {height:100%;}
.wrapperRow {display:table-row;}
.wrapperRow.wrapperExpand {height:100%;}
.this-wont-expand-to-100-percent-in-IE {height:100%;}
The HTML:
<body>
<div class="wrapper">
<div class="wrapperRow">This is the header</div>
<div class="wrapperRow wrapperExpand">
<div class="this-wont-expand-to-100-percent-in-IE">
This is the content
</div>
</div>
<div class="wrapperRow">This is the footer</div>
</div>
</body>
CodePen: http://cdpn.io/ILisk
THE PROBLEM:
Well, the problem is this works just fine in Chrome and Firefox... however it does NOT work in IE 9 or lower (not sure if it does in IE 10). The 'wrapperRow wrapperExpand' div does have it's height set to an absolute height of 100%, which is the parent of the 'this-wont-expand-to-100-percent-in-IE' and that is also set to 100%. I don't understand why this doesn't work. Does anyone have a solution or work around to make that inner child div (the 'this-wont-expand-to-100-percent-in-IE' one) match the height of it's parent? (the 'wrapperRow wrapperExpand' one)
I'm starting to think that it's just not possible in IE... at least not without using java-script perhaps... unfortunately I'm really not that familiar with that. Any ideas?
Web browsers often tries to fix your bad-coding, but only smarter ones will succeed!
When you use table display type such as table, table-row for some elements, It's supposed to use table-cell for inner elements too. That's what you've forgot:
.this-will-expand-to-100-percent-in-IE {
display: table-cell;
height:100%;
}
Here is the CodePen Demo.
By the way, in this case, I'd prefer to use Ryan Fait's Sticky footer (instead of using a CSS table layout). You could also find a snippet on CSS-Tricks.
I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.