I have the following page: http://jsfiddle.net/ybv4jd9d/
HTML:
<div class="box hidOverflow marginCenter">
<div class="caption setLeft">
<h3>This is Image One</h3>
<p>This is a description or a start to the image one article...</p>
</div>
<img src="http://pagesbyz.com/n4n/theImages/banner.jpg" />
</div>
If the output pane is made smaller in the jsfiddle link, the text shows up and doesn't stay hidden.
How can I use z-index to make it go under the image so it doesn't show up and stays hidden.
JSFiddle: http://jsfiddle.net/0vwm1vq0/
.box { overflow:hidden; } Will make the text invisible if it falls outside your image.
If you want the text to always be readable [within the grey area] you will need to use media queries to decrease the font size dynamically.
When I'm adding an overflow to the box-div, the text hides itself when making the page smaller.
So following is the solution to your problem:
.box {overflow:hidden;}
Related
I know that on bootstrap 4, you could simply write "order-#" in each div, but my project is based on bootstrap 3 so it would create problems if I change the versions now.
Please note that on a mobile screen, it needs to have this order: Image, Text, Image, Text, Image, text (reading from top to bottom)
In Bootstrap 3, you can use push and pull as answered here: How do I change Bootstrap 3 column order on mobile layout?
Edit:
Here is a simple example that will display:
In the 1st row: Image on the left and Text on the right
In the second row: Text on the left and Image on the right
But on mobile, it will display in this order: Image - Text - Image - Text, because on md screen size and up we push the image and we pull the text
<div class="row">
<div class="col-md-6"><img src="my_image.png"></div>
<div class="col-md-6">Text here</div>
</div>
<div class="row">
<div class="col-md-6 col-md-push-6"><img src="my_image.png"></div>
<div class="col-md-6 col-md-pull-6">Text here</div>
</div>
You can refer to this documentation to learn more.
Below is the screenshot of my page where I want to make this scroll functionality, so in this screenshot I want to make this functionality for the given paragraph of a div inside a blue line
Change the line
<div id="xyz">
to
<div id="xyz" style="overflow-y: scroll;">
or you can write in your css or style tag in head as
#xyz
{
overflow-y:scroll;
}
This is working for me.
I have two div with different data. I want to replace div with other on hover.
I can do this in CSS but my data have images and links. so i use image in css i can not put
on for image.
also i have 4 different images in a dive.
so i want that when use hover that area my first div should be replaced with 2nd div.
Thank you
No example given so i'm assuming.
HTML
<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>
Javascript (with jQuery)
$("#div1").on('mouseover', function() {
$("#div2").show();
$(this).hide();
});
This is not tested so try it out an see if it does what you want.
If you don't want to use javacript you can do it like this.
You can change the content of the divs.
.child-one{
display : block;
}
.child-two{
display : none;
}
.parent:hover .child-one{
display : none
}
<div class="parent">
<div class="child-one">
text of child one
</div>
<div class="child-two">
text of child two
</div>
</div>
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.
try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>