my html for spacer
<main>
<section>...
</section><div class="spacer layer1">
</div><section>...
</section>
</main>
my css for spacer
.spacer {
aspect-ratio: 1080/300;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.layer1 {
background-image: url(waves/col1.svg);
border-top: 2px solid #d96459;
border-bottom: 2px solid #f2ae72;
}
the issue :
the white space as shown seems to appear and disappear based on width on a computer screen while it stays on the mobile screen as shown in the picture.
I can't seem to find a workaround. Any help is appreciated.
Assuming your SVG fills the entire viewbox, my guess is that the scaling sometimes results in the edges landing on fractional screen pixel boundaries.
Assuming you're seeing a transparent gap (as opposed to a white-ish rendering artifact) you might be able to use a negative vertical margins on the spacer to create a pixel or two of overlap.
section {
min-height: 50px;
background: tomato;
}
.spacer {
margin: -5px 0; /* exaggerated for visibility. probably don't need this much. */
background: bisque;
opacity: .5; /* so you can see the overlap */
min-height: 30px;
}
<section></section>
<div class="spacer"></div>
<section></section>
Related
How can you remove the weird white space between two nested divs on Chrome.
<div class="bar">
<div class="progress">
</div>
</div>
.bar {
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
}
.progress {
height: 100%;
width: 50%;
background: black;
}
Here is the link to the fiddle: http://jsfiddle.net/hfob7yz4/1/.
On Chrome it looks like
this for me with the weird margin.
On Firefox it looks pretty normal like expected:
firefox-img
It also depends on the screen width. The problem only shows up on my laptop.
Thanks
The reason is that there is a border around the main div, and gets visible on some screens
to avoid this add
.bar {
box-sizing: border-box;
}
read more here
You are hitting a sort of edge effect when on different zoom levels - there are bits of pixel 'left behind' in the system's calculations as it tries to map part CSS pixels to the several screen pixels that might make up a CSS pixel on modern screens.
Instead of needing a second, inner div, you could paint the progress with a background image using a linear-gradient - this can be altered by JS dynamically as required.
.bar {
--progress: 50%;
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}
}
<div class="bar">
</div>
I'm rendering a large document (500 pgs) as a web page. My users are used to Word. Can I use CSS to mimic the look from the image below, a uniform 'page' with a white background with a fixed width, and the rest of their browser showing a gray background? Like the image below, except without the ribbon and all that:
The only think I can think of is to put the entire document inside a massive div tag, but is there a better way? Thanks.
This can be done fairly easily with 2 divs and a bit of css.
I also gave the white a border as per the image.
.container {
background: #9099ae;
width: 100vw;
height: 100vh;
padding: 40px 200px;
}
.content {
background: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
border: 2px solid #000;
border-right: 4px solid #000;
}
<div class="container">
<div class="content">
</div>
</div>
Actually it has to be a little less that 100% because 100% sets it a little off screen to the right. When I load my page on a tablet or laptop screen it zooms into the top left of the screen, if I zoom out I see that the divs only take up about half the page left to right. I've tried playing around with min-width with no luck.
.first {
height: 75px;
width: 99.55%;
background-color: red;
margin-top: 19px;
border: 3px yellow solid;
min-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
width: 100%;
}
<div class="animated fadeInUpBig first o">
<h2>Need to fix positioning on mobile</h2>
</div>
<div class="animated fadeInUpBig first t">
<h2>More work will be done tomorrow evening</h2>
</div>
<div class="animated fadeInUpBig first tr">
<h2>Make it look half good by weekend</h2>
</div>
If you are wanting each red block with yellow border to span a specific width (to be 90%, 300px, etc.), you can add box-sizing: border-box to the element which allows for the width to include both padding and border. However since both the .first (a div) and the h2 are both block levels elements, by default they will take up 100% width of their parent.
I consolidated the margin-top with the margin: 0 auto; which keeps the margin: from overriding the margin-top.
Also the shorthand for border should be width, style, and color, so I have altered it slightly.
Lastly, the body element has a default margin of 8px in most browsers, so in order to get your boxes to touch the outside of the browser window, you'll want to add that last body property or use a common CSS reset (such as http://meyerweb.com/eric/tools/css/reset/)
.first {
height: 75px;
background-color: red;
border: 3px solid yellow;
min-width: 1000px;
margin: 19px auto 0;
}
h2 {
text-align: center;
}
body {
margin: 0;
}
http://codepen.io/phawley/pen/amLRYK
I have tried everything I know, and I still can't get it to work. I want the four images to be like in the screen shot, but a lot bigger (600px centered). When I do this, however, it causes the entire container to be shifted to the left for some reason unknown to me.
HTML snippet:
<body>
<div class="container">
<div class="header">
..
</div>
<div class="menu">
...
</div>
<div class="content">
<div class="photos">
<h2> Here are some photos.....</h2>
<img src="img1">
<img src="img2">
...
</div>
</div>
</div>
</body>
CSS snippet:
body{
margin: 0;
padding: 0;
}
.container{
background-color: #AAC1CC;
max-width: 1440px;
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 10px;
}
.content{
margin-left: 20px;
margin-bottom: 100px;
}
.photos {
background-color: pink; /* for testing */
width: 500px; /*for testing - normally 100% */
padding: 0;
margin: 0;
}
.photos img{
width: 100px;
display: block;
border: 2px solid black;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
box-shadow: 0 0 30px 3px #333;
}
Screenshot:
When the images are small (like 100px) the style is the same across the other tabs. However, if I increase the size of the images > 150px, the entire container shifts to the left by like ~20 pixels. I have tried using <br> between the images instead of display:block but it doesn't make a difference.
Why does this happen?
The only thing I can think of is that when the images are larger they cause the browser to display a scroll bar. As you have set the container width to 100% and the window width is now slightly smaller this could cause the shift that you mention.
I had a similar problem with a large image causing my main container to shift off center. threeandme's post reminded me to experiment with the overflow-y property in the css. I added overflow-y: scroll; into the css for "body" and it stopped it from shifting for me.
How would I get the image that I'm using to wrap around the entire border? It only shows up on the top and bottom. I used border-image.com to scale it down, but I can only get the desired result on either top or bottom, or left and right borders. I basically want the image to wrap around repeatedly in a consistent manner as is (company's logo repeated throughout all the borders) without having to stretch, manipulate, or scale it in any way. I would really appreciate any help ? Here's what I have so far
HTML:
<div id="outer_container">
...
</div>
CSS:
#outer_container {
height: 1495px;
width: 925px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #E7EAF5;
border-radius: 15px;
border-style: solid;
border-width: 38px 38px 38px 38px;
border-image: url(http://lorempixel.com/81/81/) 81 0 fill repeat stretch;
}
The problem is the 0 that you are adding after the 81. If you remove the number the border will apply to all the borders
border-image: url(http://lorempixel.com/81/81/) 40 fill repeat stretch;
http://jsfiddle.net/4rjw6/
You can use divs to accomplish this:
HTML:
<div id="div-top"></div>
<div id="div-left"></div>
<div id="container">
</div>
<div id="div-right"></div>
<div id="div-bottom"></div>
CSS:
#div-top,
#div-bottom {
width: 925px;
height: 81px;
background: url('http://lorempixel.com/81/81/') repeat-x;
clear: both;
}
#div-left,
#div-right {
width: 81px;
height: 1495px;
background: url('http://lorempixel.com/81/81/') repeat-y;
}
#div-left,
#div-right,
#container {
float: left;
}
#container {
height: 1495px;
width: 763px;
background-attachment: fixed;
background-color: #E7EAF5;
}
Fiddle: http://jsfiddle.net/6MghG/1/
(Note that you'd need to enlarge the fiddle preview box for it to show up correctly; it should work fine in a browser window.)
Another advantage of this is wider browser compatibility - for example, IE10 does not support border-image.
You might find it easier to specify the properties of your border one by one. I tried this in Chrome with your fiddle: http://jsfiddle.net/6MghG/2/
border-image-source:url(http://lorempixel.com/81/81/); /* where the image comes from */
border-image-slice: 33.3%; /* chop that image into 9 pieces each one-ninth the total area */
border-image-width: 50px; /* just how wide to draw the border. Overrides border-width. */
border-image-repeat: round; /* change the image size along the edges to make it fit neatly */
And that looked OK to me. You have to take the logo you want to use and put nine copies of it in a single image to use this technique.