I'm wanting to have a number of elements stacked, and when an element is clicked, content is revealed - which pushes the element below it down
Codepen for example here -
http://codepen.io/ashconnolly/pen/bEZzmj?editors=1100
is this possible in flexbox? I've seen masonry but not sure if it can do what I need it to as it doesn't seem to have an ordering system, nor do I know if changing heights of elements and rerunning masonry is efficient.
I could manually select every element below it (with nth child) and do a transform:translateY() to move it down, and do this for every responsive layout (and add margin to the bottom of the container). But I suspect there is a better way with less manual tweaking.
Important factors
- in the order seen in the Dom (could have lots of elements 20)
- the columns amount / block width to change responsively
- can change height but keep their respective column like order
html -
<div class="box">1<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">2<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">3<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">4<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">5<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">6<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
css-
body { margin: 0; padding: 0; width: 100%; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.box {width:33%; height:200px; position:relative;
background:salmon; float:left;border:10px solid grey;
&:nth-child(1) {background:red;}
&:nth-child(2) {background:blue;}
&:nth-child(3) {background:green;}
&:nth-child(4) {background:orange;}
&:nth-child(5) {background:brown;}
&:nth-child(6) {background:yellow;}
&:nth-child(2) .text {display:block;color:white;}
.text {display:none; position: absolute; top:100%;z-index:2;width:100%; background:blue; border: 1px solid grey}
}
#media (max-width:600px) {
.box {width:50%;}
}
Related
I'm using CSS and Javascript.
I'm trying to generate a toggle button to switch the brightness.
Why can't the code below switch styles?
◆ Toggle button Javascript ◆
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body")
.insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" />
<label for="L_D_check" onclick="Light_dark_Switch()" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
////////////////////////////////////////////////////////
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch() {
let _css = document.body.appendChild(document.createElement('style'));
let html = document.documentElement;
// if( ( Number % 2 ) !== 0 ) {
if (!(_css.textContent).length) {
// if( _css.textContent !== null ){
// if(_css.style.display=="none"){
// _css.textContent.style.display = "block";
_css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(_css);
// _css.disabled = true;
// _css.disabled = false;
// html.classList.toggle(_css);
// }
} else
// if (Number % 2 === 0) {
if ((_css.textContent).length) {
// if( _css.textContent % 2 === 0){
// if( _css.textContent !== null ){
// _css.textContent = null;
// if(_css.style.display=="block"){
// _css.textContent.style.display = "none";
document.head.removeChild(_css);
_css.textContent = undefined;
// }
}
}
◆Toggle button CSS ◆
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
When switching by key down, you can switch with the above capacity, but you can not switch in the same way.
Why can't I switch? What am I missing?
please tell me.
// Successful switching of key events
window.addEventListener("load", () => {
let css = document.body.appendChild(document.createElement('style'));
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
if (!css.textContent) {
css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(css);
} else {
if (css.textContent) {
document.head.removeChild(css);
css.textContent = undefined;
}
}
}
});
});
I think the simple way you can do this that move onclick="Light_dark_Switch(this)" to check box. Get check box value inside Light_dark_Switch and add CSS per your need to HTML and Body using javascipt getElementsByTagName.
Check the below snippet.
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
and for e.ctrlKey && e.keyCode == 122 you can simply trigger checkbox by using click().
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
<html>
<body>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </body>
</html>
I have my .jsp page set so each textarea element, when clicked, expands in size to show its full contents. The code that enables this is shown below.
But how do I modify this so all the textarea elements are pre-expanded on visit to the page?
My existing requires requires you click the specific textarea itself. I want to modify this so all textarea elements are expanded accordingly on page load, rather than a click event on the textarea itself.
js
<script type="text/javascript">
...
var elements = document.querySelectorAll('textarea');
elements.forEach(function(element) {
element.onclick = function() {
this.style.height = (this.scrollHeight > this.clientHeight) ? (this.scrollHeight) + 'px' : "1.5em";
}
});
...
</script>
css
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
textarea:focus {
height: 8em;
width: 98%;
overflow:hidden
}
I cobbled my existing code together from tips from here and here. Maybe this could be done in css alone, which would be even better.
You just need to use the same code (replacing this with element) without the click handler. Also, the CSS textarea:focus seems redundant, so it can be elimintated.
document.querySelectorAll('textarea').forEach(function(element) {
//element.classList.add("focused");
element.style.height = (element.scrollHeight > element.clientHeight) ? (element.scrollHeight) + 'px' : "1.5em";
});
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
<div>Lorem Ipsum
<textarea>Area 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem Ipsum</textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 2 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 3 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>
Is there any way to set width of a <div> using a conditional operator on the size of text within it?
For example, if there are 60 characters or less, width should be 500px else, 700px.
This works fine upto some extent:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
display:block;
min-width: 600px;
margin: 2px;
text-align: left;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
Output:
But, when I increase the number of characters of the first child <div>, I get this:
I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.
EDIT:
What I wanted is this:
(image)
You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):
grid-template-columns: repeat(2, minmax(min-content, 700px));
Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.
This gives the following output:
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 700px));
grid-template-rows: repeat(2, 1fr);
}
.flex-container>div {
white-space: nowrap;
overflow: hidden;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
References:
minmax().
repeat().
"Basic concepts of grid layout."
You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.
var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
if (elem.eq(i).text().length > 60) {
elem.css('width', '600px');
break;
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>div {
display: block;
min-width: 300px;
margin: 2px;
text-align: left;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ips </div>
</div>
You can resolve this with JavaScript, using the string length property and a condition.
1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;
2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.
3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.
Using a conditional operator, you've set the size of a div depending on the size of text.
I tried to find some solution for the following scenario:
Header height is all different
Mouse scroll down
Fixed headers
Does anyone know how to make multiple sticky headers like this?
(1) init
(2) scroll down (using mouse)
(3) scroll down (using mouse)
hmm...
DEMO
$(window).scroll(function() {
var $headers = $(".header");
var scrollTop = $(this).scrollTop();
if (scrollTop <= 0) {
// reset all
$headers.css({
position: "relative",
top: "0px"
});
} else {
$headers.each(function(index, $el) {
var $curHeader = $($headers).eq(index);
var curTop = $curHeader.offset().top;
var curHeight = $curHeader.height();
// scroll up
var isRelative = ($el.isFixed && scrollTop <= $el.exTop);
// scroll down
var isFixed = (curTop <= scrollTop);
var position = "";
var top = 0;
if (isRelative) {
// reset
positon = "relative";
top = 0;
$el.isFixed = false;
} else if (isFixed) {
position = "fixed";
if (0 < index) {
for (var i = 0; i < index; i++) {
top += $($headers).eq(i).height();
}
}
scrollTop += curHeight;
if (!$el.isFixed) {
$el.isFixed = true;
$el.exTop = curTop;
}
}
$($el).css({
position: position,
top: top + "px"
});
});
}
});
body {
height: 10000px;
}
div {
height: 200px;
background: gray;
width: 100%;
}
.header {
height: 50px;
background: green;
}
div.header:nth-child(7) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>content 0</div>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>
Here is a simple example:
I'm calculating the height of the headers and setting the top property.
DEMO
$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
$headers.each(function (index, el) {
var height = 0;
if (index == 0) {
height = "0px";
} else {
for ( var x = index - 1; x >= 0; x--) {
height += $headers.eq(x).height();
}
}
height = height + "px";
$(el).css({
"position": "fixed",
"top": height
});
});
} else {
$headers.css({
position: "relative",
top: "0"
});
}
});
body {
height: 10000px;
}
div {
height: 100px;
background: green;
width: 100%;
}
.header {
height: 50px;
background: red;
}
.header:first-child {
height: 20px;
}
div.header:nth-child(5) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>
With only css
Codepen-FollowMe Headers
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
height: 10rem;
}
.second {
height:50px;
background:blue;
height: 10rem;
}
.third {
height:50px;
background:green;
height: 10rem;
}
.stickyContainer {
.sticky {
position: sticky;
top: 0;
height: 2rem;
background: white;
}
}
<div class="first stickyContainer">
<div class="sticky"><h1>1</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="second stickyContainer">
<div class="sticky"><h1>2</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="third stickyContainer">
<div class="sticky"><h1>3</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
I have a div with some p's inside and want to put buttons to the side of some p's. Only some of the buttons show up, and I will control which ones through Javascript. Usually, I would put each p in a different wrapper div, which would also contains the corresponding button. BUT I want a background image around all p's, so I need to put all p's inside the same div and can't have separate div's for each p. I also don't want the background to appear around the buttons, which will be round. How do I align the buttons with the p's? Should I use jQuery to get the top properties of each p and pass them on to the buttons?
JS fiddle: http://jsfiddle.net/bw22yht1/
HTML:
<body>
<div class="content">
<div class="p-wrapper">
<!--there is a background image here-->
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
</body>
CSS:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
}
.p-wrapper
{
background-image:url('bg/old-paper-texture.jpg');
background-size:cover;
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
}
actual page: http://cin.ufpe.br/~rvcam/map/
EDIT: An image that shows what I need:
I took a look to your page, and you simply need to change your approach
<div class="content">
<ol class="p-wrapper">
<!--there is a background image here-->
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
</ol>
</div>
You'll have what you need AND no need for that additional span, you'll have automatic numering
EDIT: See code below to fit your needs.
HTML mostly remains the same, just change <ol class="p-wrapper"> to <ol class="bible"> and add buttons
<div class="content">
<ol class="bible">
<!--there is a background image here-->
<li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>
</ol>
</div>
CSS as follows:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
background:url('bg/old-paper-texture.jpg') repeat-y;
background-size:700px; /* your current .bible width */
}
.bible
{
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
color: white;
/*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}
Then you'll need some adjustments to fit your taste, but this will work just as you want
You can absolutely position a <div> with white background containing the <button> aside the <p> in a common <div> as follows:
<div class="demo">
<p>lorem ipsum lorem ipsum</p>
<div class="right">
<button>Button</button>
</div>
</div>
<div>'s are transparent by default so having a common parent <div> won't hide the background of the wrapper.
You can then align the button using following:
CSS:
p {
margin-right:200px;
}
.demo {
position:relative;
}
.right {
position:absolute;
top:0;
bottom:0;
right:0;
width:200px;
background:white;
}
.demo button {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100px;
height:20px;
margin:auto;
}
Demo