I want to achieve this kind of layout with pure CSS:
The gradient in the background is 100% the width of the browser window. The inner text is inside a 1000px div, centered inside the browser window. Now I want the text to define the height of the gradient. And here is the problem: The gradient is positioned absolute (left: 0px; width: 100%), but the text is inside another div.
I've tried some things with display:table; and display:table-cell; but once I put the gradient div to position:absolute it doesn't inherit the height of the text div.
Anyone a solution how to achieve this in pure CSS without javascript?
EDIT:
I'm sorry I forgot to mention that the gradient isn't the problem (I' using css3). And furthermore I also forgot to add the code: http://jsfiddle.net/kxu8N/1/
Absolutely-positioned elements are not part of the layout flow, therefore they cannot inherit dimensional information from parent elements.
You should be using a CSS background image (or a CSS3 gradient) on the element wrapping your text to give you the gradient instead of using a separate element.
You can use the css3 background-size property to scale the height of the gradient. Set the height to auto on a div with the gradient as its background.
Here's an answer without knowing your HTML structure: http://jsfiddle.net/8xagQ/1/
.gradient{
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);
margin:10px 0;
text-align:center;
color:#fff;
padding:10px 0;
}
Note that I only included the gradient instructions for webkit.
<html>
<head>
<style type="text/css">
p,span{
margin-left:20px;
}
#logo{
font-weight: bold;
height:100px;
}
#slogan{
width:100%;
height:150px;
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
<div id="logo">
<p>Logo</p>
</div>
<div id="slogan">
<span>some text that defines hieght of this</span>
</div>
</body>
</html>
In my Case I move your blue into your gradient. that way, once you add more line, line of text it will increate automaticaly
<div id="container">
<div id="outer">
<div id="blue-background">
<div class="span3" id="blue">
Here is my content<br>
and this content should define the height of the underlying #blue-background <br />
and if we are adding more and more and more
</div>
</div>
</div>
</div>
Then to the text into it I change few setting in the CSS
#blue {
z-index: 1;
position:relative;
margin:auto;
text-align:center;
}
Because I didn't find any solution, I hacked it. Cause my content gets added dynamically through javascript, I added the content two times. The first time visible inside the overlaying div (over the blue background), and the second time inside the blue background. With visibility: hidden I hide all the divs inside the blue background.
And because both divs got the same content, they get the same height. Not beautiful, but it works.
Related
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.
Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>
I have three divs that need to be the same height and have a button at the same level, but are containing varying amounts of text above and below the button.
Right now I'm just specifying heights to compensate for how long the text might be, but if it's not that long, there's too much padding, and it still might not be high enough.
This needs to work with IE9+, and the latest chrome and firefox. I'm starting to think the best solution is javascript unless there's a CSS miracle. display: flex looked promising, but don't think it'll work with IE9
See image below. The space between the titles and the buttons should be controlled by the longest title. Right now it's just a hard coded height. Similarly card heights should be controlled by the tallest card, but it's currently hard coded.
Here's a solution using display:table which should get you started:
HTML
<div id="wrapper"> <!-- Sets the size of the entire section -->
<div id="row1"> <!-- Becomes your table row -->
<div id="cell1"> <!-- Becomes the table cell -->
<p>Information</p>
</div>
<div id="cell2">
<p>A section of text</p>
</div>
<div id="cell3">
<p>Some text and other stuff - even divs.</p>
</div>
</div>
</div>
CSS
#wrapper {
height:100%;
width:100%;
}
#wrapper div {
border:1px solid black;
}
#row1 {
display:table; /* Creates the table */
}
#row1 > div {
display:table-cell;
width:30%; /* Sets the width of each table cell */
height:auto; /* Expands the height of the entire row as content is added */
}
Here's a CodePen demo with a mockup. The nice thing about this is that you can still use HTML5 and CSS3 for all of your content and styling.
Here's an example of how to handle it with a <table> instead of divs--that way no js is required:
Table Demo
Please no jQuery - only JavaScript or better yet simply CSS
You can see the problem here: Try to resize div.
I have a series of div tags that have dynamic content and need to be re-sizable by users. When the inner content has a hover event,it grabs the event and the user can't re-size. The dynamic content can be any size -usually bigger than the outer div. I'd love to solve this with css, but adding padding or margins to the outer div does not seem to help. This only has to work on latest Firefox and Chrome. This is not the exact code, but it's show the problem - at least in FireFox:
<head>
<style>
#inner:hover {
display:block;
color:#FF00FF;
background-color:grey;
width:500px;
height:400px;
}
</style>
</head>
<div id="outer" style="resize:both;width:20px;overflow:hidden;">
<div id="inner" style="width:90px;height:90px;">
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar
</div>
</div>
I have a "div" with style: overflow-y: scroll; overflow-x: auto;
I try to dynamicaly add image inside this "div" with absolute or relative position. Everything seems ok until user tries to scroll the "div" content: image stays in fixed position relative to browser window. This problem seems to be only in IE(7), in firefox everything is fine.
Is there any solutions for this?
EDIT (in response to questions raised below): I'm positioning the element because I need it to show in front of another element.
I don't know if it is a bug or a "feature" in IE, but I've run into the same thing before. Luckily there is an easy fix. Just add "position:relative" to the <div> that has scrollable contents.
Wrap everything in a containing div that is positioned relatively on the page:
<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
<br />
<img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
<br />
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
<br />[scrolling content]<br />
</div>
<br />
</div>
Is there a particular reason you need to set a position for the image? It works fine in IE7 without setting a position.
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
Try float:left or float:right with margin
I got the same issue in chrome with position:absolute in a overflow-y: auto;. The divs were getting fixed in there positions- while scrolling.
And a simple solution is using float.
my old code was-
position:absolute; right:10px;
and I replaced with the following and it worked-
float:right; margin-right:10px;
You know what, it might just be easier to wrap the absolute positioned elements in a relatively positioned container element, I think that should be able to scroll...
Things I learned the hard way: For IE6/IE7 it may need to have the image as the last DOM element in the containing DIV to get it to appear on over the scrolling DIV.
You need to use relative positioning if you want it to be able to scroll. The trick is to use negative positioning on the second element.
Let's say you have two elements A and B, and you want to position B in front of A. It would look something like this:
<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>
<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>
Depending on the content, you might have to add additional styles such as "display:block;" etc. A good resource for these is w3schools.com
For a good tutorial on DIV positioning with CSS go to:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Cheers
The declaration position: absolute; means that the element will be displayed relative to the view-port's upper left corner. Using relative instead means that the values you use for left and top will be added to wherever the img would have been normally.