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.
Related
I put three photos inside a container but since I want there to be space between them, I couldn't leave the original size because they would take up the whole container without leaving the space I want.
To make them smaller I modified the height to 80%.
It worked but since I need to add the shadow to the box, I need it to match the edges of the image.
As you can see from the purple, the box is larger than the actual image. I would like to know how to get a box as big as the actual image, so without the purple section.
I added the background color only to the first pic, but the problem can be extended for all the three pics.
I post the code below.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background * {
width: 100%;
height: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
<div class="background">
<div class="firstphoto"></div>
<div class="secondphoto"></div>
<div class="thirdphoto"></div>
</div>
Thanks all! ;)
You can take a look at object-fit property: https://www.w3schools.com/css/css3_object-fit.asp
Also, you should put:
.background > * {
flex: 1/3;
}
So that the boxes are taking the same space.
you should add this to each div that contains an image (if they have the same class)
The div would then be positoinned relatively to the image and you could then edit the box-shadow with the box-shadow property
.col{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
margin-right:3.33%;
box-shadow: 10px 10px 10px 10px red;
}
Not sure why you're having the images as background images, but I would just use object-fit. Do note, I replaced the divs with image tags.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background img {
width: 100%;
height: 80%;
padding: 1rem;
box-sizing: border-box;
object-fit: contain;
}
<div class="background">
<img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
<img src="https://picsum.photos/50/150" alt="50x150" title="50x150"/>
<img src="https://picsum.photos/30/150" alt="30x150" title="30x150"/>
</div>
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>
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>
Here is my css:
.contain
{
min-width: 300px;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
Clearly the two divs display inline, which is what I want.
However, when the browser is resized smaller the divs are displayed one above the other (desired behaviour), but once I make the browser window smaller than min-width, I need to have horizontal scrollbars displayed. This is not happening.
Any help as to why?
Edited: I tried the suggestions here, but they all seem to break the desired behaviour of the divs stacking on top of each other when the browser is sized smaller.
The effect I am after:
display the divs inline (with no scrollbars) in a browser that is wide enough; but in a "narrow" browser (ie mobile) display the divs one on top of another and THEN add horizontal scrolling ONCE the min-width can no longer be displayed for each div.
I think that's a little clearer...
You just need to have a wrapper for the divs and set it with
.wrapper{
min-width: 100%;
white-space: nowrap;
}
Here is the Fiddle: https://jsfiddle.net/1hshzxah/3/
Your outside boxes have the same minimum width as your inside ones, so both will be at least 300px wide, so no scrollbars appear. Because of the defined pixelwidth of your outer elements, your they will not stack next to each other if you do not have 600 pixels to play with or more. If you give your outer boxes a width that can scale (by using % or vw) with the page width, your result magically appears:
.contain {
width: 45%;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
#media all and (max-width:600px){
.contain {
width: 100%;
}
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
(I use 45% because I did not want to bother with floating these nicely next to each other, but you could with some more CSS). You can still add a max-width of 300 pixels to your containers to make sure they don't grow beyond 300px, but still shrink otherwise.
I'm testing something where I show 4 over-sized images centered in quadrants that fill a screen. So 2 rows and 2 columns.
□□
□□
The images are in the backgrounds of 4 divs which should stack. All divs have small borders.
My issue is that the height works but for the width I need to deduct 9px from the width of each box to make them stack and they no longer fill the screen. Without 9px they look like:
□
□
□
□
What is this 9px gap?
Best to see it in a jsfiddle
#wrapper {
background: pink;
border: 5px red solid;
}
#container {
background: fuchsia;
border: 5px purple solid;
}
#content {
background: aqua;
border: 5px blue solid;
}
#parent {
background: lime;
border: 5px green solid;
}
#image1,
#image2,
#image3,
#image4 {
background: yellow;
border: 5px orange solid;
/* Each div fill 1/4 screen so get 50% user screen viewport height/width and deduct the height/width of everything outside of the image divs content area (box model).
So here we must deduct the 1 x 5px border on one side (image border) and 4 x 5px borders on the other side (image, parent, content & wrapper borders)*/
height: calc(50vh - (5*5px));
/* The line below should be the same as above ie:
width: calc(50vw - (5*5px)) but I need to deduct a further unexplained 9px and now
the 4 image divs wont fill the screen? */
width: calc(50vw - (5*5px + 9px));
float: left;
/* set and center a background image to the div */
background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
background-position: center;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div id="wrapper">
<div id="content">
<div id="parent" class="clearfix">
<div id="image1">
</div>
<div id="image2">
</div>
<div id="image3">
</div>
<div id="image4">
</div>
</div>
</div>
</div>
Floats aren't designed for layouts. Yes, they've been used this way for decades... as a hack (CSS offered no better alternative). Floats were designed to wrap text around images, not build grids.
Viewport percentage lengths are relative to the initial containing block, not the parent element, like percentage lengths.
You combine floats, borders, viewport percentage widths and box-sizing:content-box, and you get your 9px mystery gap. (I didn't delve any further as my focus was a modern solution to your problem.)
Today there is CSS3, which offers two methods for building layouts: Flex Layout and Grid Layout
Browser support for grid layout is still weak.
Browser support for flex layout is almost complete.
Here's your layout using flex, box-sizing:border-box, and percentage heights:
html {
height: 100%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */
}
body {
height: 100%;
margin: 0; /* remove default margin */
}
#wrapper {
background: pink;
border: 5px red solid;
height: 100%;
}
#container {
background: fuchsia;
border: 5px purple solid;
height: 100%;
}
#content {
background: aqua;
border: 5px blue solid;
height: 100%;
}
#parent {
background: lime;
border: 5px green solid;
display: flex; /* establish flex container */
flex-wrap: wrap; /* allow children to wrap */
height: 100%;
}
#image1, #image2, #image3, #image4 {
background: yellow;
border: 5px orange solid;
height: 50%;
flex-basis: 50%; /* each item 50% wide */
background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
background-position: center;
}
<div id="wrapper">
<div id="content">
<div id="parent" class="clearfix">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
</div>
</div>
</div>
jsFiddle
Benefits:
No more mystery gap.
No more floats.
No more clearfix.
No need to add up borders and use calc.
Cleaner, more efficient code
Layout is responsive
Unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Browser support:
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.
The problem is that you are calculating the images sizes (child divs) in base to an absolute width view port (vw), and you are including borders. The sections fit well when the web browser have a size that match exactly with the calculation of the border.
My recomendation is to use to calculate the size using the old % method,
Try to replace:
width: calc(50vw - (5*5px + 9px));
by:
width: calc(50% - 10px);
See the example in jsFiddle
The problem is with the scrollbars (which are included in the vw/vw).
If you make the body hide its overflow it will work with your initial calculations (see https://jsfiddle.net/yLgcLd7j/6/).
But to make life simpler you can avoid these by setting box-sizing:border-box and using the vh/vw units on the containers and the rest make them percentage based.
#wrapper, #wrapper *{box-sizing:border-box;}
#wrapper {
background:pink;
border:5px red solid;
width:100vw;
height:100vh;
}
#container, #content, #parent{width:100%;height:100%;}
#image1, #image2, #image3, #image4 {
border:5px orange solid;
float:left;
width:50%;
height:50%;
/* set and center a background image to the div */
background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
background-position: center;
}
Demo at https://jsfiddle.net/yLgcLd7j/8/