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.
Related
Background
I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.
Problem description
I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.
Problem Illustration
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
Questions
Why is it not working as expected?
Am I doing something wrong according to the W3C specs or is it a lack of browser support?
Are there any ways/tools to work this around?
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>
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; ?