I am creating a fiction ebook using plain html as the source files for the chapters of the book. I would like to keep the html as vanilla as possible and use CSS for the formatting. Most of the book just needs an indent for any paragraph following a paragraph and every <hr /> tag should display as a scene break, e.g. 3 * center-aligned.
This all works fine in JSFiddle and in chrome.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
visibility: hidden;
text-align: center;
overflow: visible;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
visibility: visible;
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
but when I copy this to the Amazon ebook preview app I need this extra redundant looking CSS for the ***'s to appear ?
p::after {
content: " "
}
Can anyone help identify why this might be needed in the ebook ? I don't want to have to tag a useless space on to the end of every paragraph to make this work. Thanks in advance.
I would avoid the visibility: visible vs. hidden combination in the hr and its pseudo element: You can simply apply border: none; to the hr to avoid the display of the horizontal line itself. This might also help with your other problem.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
text-align: center;
border: none;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
Related
having problem with background image with css on Mac Os.
if we change the resolution of browser it turn to look bad.i need look like same in every resol and also on Mac os.
There is 2 section have bg image
using Mac os
http://i.imgur.com/UmGGBA4.jpg
using window os
https://i.imgur.com/QjXNxag.jpg
I want to look like window os image on MAC.
code
.section-about {
background: url("http://i.imgur.com/NlczAVu.jpg") top right/cover no-repeat;
min-height: 545px;
}
/* line 180, ../sass/screen.scss */
.section-experinece {
background: url("http://i.imgur.com/eAeB5ci.jpg") top right/cover no-repeat;
min-height: 1130px;
}
h1 {
margin: 0;
}
.one {
color: #fff;
margin: 0;
}
p {
margin: 0;
}
<section id="about" class="section-about">
<h1>section1</h1>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
<section id="experinece" class="experinece-sec section-experinece">
<h1>section2</h1>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
thanks.
It looks like your problem is not the OS you are on, but the screen resolution you are viewing on.
Check the page on a windows machine and make the view as wide as you can.
I have created a simple ul using a dash to display the li elements.
Here is the example fiddle:
The li are not aligned properly:
Current li
–Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus
blandit should be alligned to Lorem.
Here is the css code I am using
ul {
list-style-type: none;
padding: 0;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
text-indent: -.5em;
}
li:before {
content: "– ";
color: #333;
}
You can use padding on the li and absolute positioning for the dash (and remove the text indent):
ul {
list-style-type: none;
padding: 0;
margin-bottom: 15px;
}
li {
padding-left: 1.2em; /* amount of space for the dash */
padding-bottom: 0.1em;
position: relative;
}
li:before {
content: "–";
color: #333;
position: absolute;
left: 0;
top: 0;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
You should make li padding-left = text-indent.
For example:
{
padding-left: .5em;
padding-bottom: 0.1em;
text-indent: -.5em;
}
or make them 10px as u want
ul {
list-style-type: none;
padding:0;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
text-indent: -10px;
}
li:before {
content: "– ";
color: #333;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
Apply position: absolute to li::before will do the trick
ul {
list-style-type: none;
padding-left: 10px;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
/*text-indent: -.5em;*/
}
li:before {
content: "– ";
position: absolute;
left: 10px;
color: #333;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
Basically:
I have a wrapper div that is 100% width and height.
Inside it is another div that is absolutely positioned and must follow the window height (with a little bit of margin at the bottom).
Inside this div is a ul list that will be always as high as the parent div. If it gets higher, it will become scrollable.
This is what I'd like to achieve:
.wrapper-location {
position: relative;
height: 100vh;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
http://codepen.io/aguerrero/pen/ygrwPr
I've been pulling my hair and can't seem to make it work.
Is this what you are looking for. It can be done by adding height 100% to .wrapper-loctaion and height 90% to .box locator (add height 100% to html,body too). Now set top and bottom to 5% for .box-locator to center it vertically.
html,
body {
height: 100%;
}
.wrapper-location {
position: relative;
height: 100%;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 5%;
bottom: 5%;
width: 360px;
height: 90%;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
Add margin-bottom:50px i.e, equal to top:50px
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
margin-bottom: 50px; //new property
}
I have code here. In this code, as it can be seen that there is a div tag with class image and text is appeared on the right side. As there is a lot of text and some of the text is visible on the right and some is below the image tag. I want this text to be appeared on the right side no matter how much text is there.
How can I achieve this?
<div class="image"></div>
<p class="text">adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare. adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.</p>
css
.image {
width: 100px;
height: 100px;
float: left;
border: 1px solid #999;
}
I think you just need to give your paragraph a margin-left based on the width of your image:
margin-left: 110px;
Demo: http://jsfiddle.net/Q7JhN/1/
I'm adding a collapse function to my page, and so far it all works as it should.
I use my header text (h2) to toggle the function like this:
<h2>Header 1</h2>
Now, I want to add an image to the start of this. When collapsed, it's a plus-sign image. When opened, it turns into a minus-sign image.
How do I do this?
I think I've got the css part figured out, and the function (code below), but just not sure how to get the images to show.
.toggleButton{
display:inline;
background-image:url(Special_images/pluss3.gif);
background-size:auto;
background-repeat:no-repeat;
}
.toggleButton.open{
display:inline;
background-image:url(Special_images/minus.gif);
background-size:auto;
background-repeat:no-repeat;
}
<!-- SCRIPT FOR TOGGLE BUTTONS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.toggleButton').click(function(){
$(this).toggleClass("open");
});
});
</script>
<!-- END -->
What I'm trying now, that doesnt work:
<div class="toggleButton"><h2>Header 1</h2></div>
Thanks a lot in advance,
Stian Berg Larsen
EDIT:
This is one of the collapsing divs:
<h2>The Operator in Focus</h2>
<div id="collapse_002">
<p>content goes here.. Bla bla bla bla....</p>
</div>
So this works as it should. When you click on the header the div slides out, showing the text within the div "collapse_002".
Now what I want is to display an image in front of the header, showing either a plus-sign or minus-sign if the div is open or closed.
I have made you a very simple image swap, using toggle, adding open class..basically just swopping background images :
http://jsfiddle.net/934bA/
*Please ignore temp background urls and sizes
Let me know if there is something else.
I hope this gives your the base understanding and that it's very simple...it's basically just an add of and class, and remove of a class = toggle.
BREAKDOWN :
Html
<div class="toggleButton"><h2>Header 1</h2></div>
Script
$(function() {
$('.toggleButton').click(function() {
$(this).toggleClass("open");
});
});
CSS
.toggleButton{
display:inline;
background-image:url(http://upload.wikimedia.org/wikipedia/en/3/35/Plus_sign.jpg);
background-size:20%;
background-repeat:no-repeat;
background-position:left;
padding:20px;
}
.open{
background-image:url(http://userserve-ak.last.fm/serve/252/3850515.jpg);
}
h2 {margin:0px; padding:0px;display:inline;}
p {
margin:0;
padding-left:16px;
float:left;
background-image:url(images/add.png);
background-repeat:no-repeat;
}
p.down {
float:left;
padding-left:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
}
.button
{
vertical-align:middle;
}
.question div
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:12px;
padding:5px;
clear:left;
}
.question div a
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
text-decoration:none;
} /
$(document).ready(function() {
$('div.question')
.children('div').hide().end()
.children('p').click(function(){
$(this).toggleClass('down').next().slideToggle("slow");
});
});
<div class="question">
<p class="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
</ul>
</div>
</div>
This is a toggle with plus minus for the front of the paragraph, with a collapse toggle of the paragraph below.
tried background-position: 0 0; ?