Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal

ramsesoriginal/dabblet.css

Created July 17, 2012 10:09
Show Gist options
  • Save ramsesoriginal/3128561 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/3128561 to your computer and use it in GitHub Desktop.
Download ZIP
Absolute positioned stretching div
Raw
dabblet.css
/**
* Absolute positioned stretching div
*/
.parent{
margin:0;
padding:0;
position: relative;
background-color: red;
min-width: 1px;
min-height:1px;
display: inline-block;
overflow: hidden;
}
.image {
margin:0;
padding:0;
position: relative;
background-color: blue;
}
.textwrapper {
margin:0;
padding:0;
position: relative;
min-height: 500px; /*hoehe vom bild */
margin-top: -500px;
width: 500px;
}
span {
margin: 0;
padding:0;
display: inline-block;
vertical-align: top;
box-shadow: 3px 5px 0.5px 0px rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
.text1 {
margin-top: 50px;
margin-left: 25px;
background-color: yellow;
}
.text2 {
margin-top: 200px;
margin-left: 25px;
width: 100px;
background-color: green;
}
.text3 {
margin-top: 200px;
width: 240px;
background-color: pink;
}
.text4 {
margin-top: 100px;
margin-left: 300px;
background-color: brown;
}
.text5 {
margin-top: 400px;
margin-left: 200px;
width:100px;
background-color: teal;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="parent">
<div class="image" style="width: 500px; height:500px">
&nbsp;
</div>
<div class="textwrapper">
<span class="text1">
Single text, top 50, left 30
</span>
</div>
<div class="textwrapper">
<span class="text4">
single text, top 100, left 300
</span>
</div>
<div class="textwrapper">
<span class="text2">
double text, top 200, left 25, width 100
</span><span class="text3">
double text, top 200, width 240
</span>
</div>
<div class="textwrapper">
<span class="text5">
single text, top 400, left 200, width 100 <br />
viel text<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor condimentum lectus. Nunc rhoncus faucibus nisi eu lacinia. Morbi eget fermentum justo. Sed non varius felis. Ut ultrices massa id lectus rutrum vestibulum. Morbi convallis vulputate enim in malesuada. Nulla enim ipsum, ultricies id tristique sit amet, tempus nec enim. Suspendisse accumsan fermentum risus quis dictum. Etiam convallis cursus porttitor. Praesent diam risus, venenatis id sollicitudin condimentum, imperdiet at magna. Phasellus iaculis eleifend nulla, malesuada aliquet lorem convallis vitae. Nam sed ante nisl, in mattis lectus. Nunc convallis risus eu mauris mattis lobortis. Maecenas dui augue, pretium at congue vitae, dictum sed nulla. Morbi facilisis hendrerit neque eget consequat. Proin vitae turpis et leo placerat blandit mattis nec diam.
</span>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment