I am trying to add a 10px margin between the boxes and retain their intended media query values. But when it's added, the third box is pushed to the second row, I believe it is adding more pixels to the width of the box but I don't know how to make it scale automatically.
* {
box-sizing: border-box;
}
.titles {
float:right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin:15px;
margin-top:35px;
}
#media (min-width: 992px) {
.p1 {
width:33.33%;
}
.p2 {
width:33.33%;
}
.p3 {
width:33.33%;
}
}
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="module2.css">
<title>Module2-Solution</title>
</head>
<body>
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
</body>
</html>
Assuming that you want some space between the boxes on a wide screen, all you need to do is decrease their widths a bit.
* {
box-sizing: border-box;
}
.titles {
float: right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin: 15px;
margin-top: 35px;
}
#media (min-width: 992px) {
.p1 {
width: calc(33.33% - 7px);
}
.p2 {
width: calc(33.33% - 7px);
margin: 0 10px;
}
.p3 {
width: calc(33.33% - 7px);
}
}
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
But it could be I'm misunderstanding your question; if so, let me know!
Related
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?
I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }
i have a box for a text like this
my css is like this for the box,
.bg-text-kol2 {
background-color: #ffffff;
background-size: 10px 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}
because this slider use swipper slider this is the js,
$(document).ready(function() {
(function ($) {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true,
})(jQuery);
});
the question is how to make the size is same? i want to make the box is 640px x 640px?
I think you can work on from this demo, I tried to replicated your images.
The most important here is you need to set the swiper height, this property helps the plugin to determine the size of the swiper.
Codepen demo: https://codepen.io/DieByMacro/pen/mYxJNo
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 2,
loop: true,
spaceBetween: 20,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
.swiper-container {
width: 100%;
height: 600px;
}
/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
display: flex;
flex-flow: column nowrap;
}
.swiper-item .item-image {
flex: 0 0 auto;
background: blue;
height: 250px;
}
.swiper-item .item-content {
flex: 1 1 0px;
height: auto;
background: white;
padding: 20px;
width: 85%;
margin: -30px auto 0;
}
.wrapper {
background: lightgreen;
padding: 10px;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
I have a content box in which I want a div box that floats to the left and paragraphs that flow around it. So far my HTML looks like this:
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding: 20px;
margin: 0 20px 20px 0;
}
<div class="content">
<div class="fake-image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
What I really don't get is why is the margin-bottom: 20px; of my .fake-image not working? The margin is bigger. Can anyone help?
Here an image of what I mean:
This space is not extra margin. It's the remainder of the height of the wrapping line
In other words, the line that breaks under the image may not break perfectly to match the exact spot where your margin ends unless your lines perfectly divide that space somehow. It would be unreasonable to try to control this for most situations, however, hypothetically you could accomplish a fix if it were completely static content, but I don't recommend trying to do this because you might be fighting an uphill battle.
To test this for yourself: remove all margins except for your bottom margin on your image and manipulate line-height and typography stylings to see how they play together and/or manipulate only the bottom margin on that image and/or the image height.
Whenever I have an issue like this, I add specificity to the related CSS. margin in this case. margin: 0 20px 20px 0; shorthand for margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;
Fix the bottom by knowing also what is around it.
Here I add a div around it and set it's background so you see where the image actually IS. Other space belongs to other elements.
Now, we have the ugly lime and red we can see what is what, adjust that image and paragraphs etc., then we can later remove those ugly CSS things.
.content {
float: left;
padding: 20px;
width: 650px;
height: 500px;
background-color: #F5CF8E;
/* Yellowish */
}
.fake-image {
float: left;
width: 200px;
height: 200px;
border: 0.5px solid gray;
padding:20px;
/* margin-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px; */
margin: 0 20px 20px 0;
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
<div class="outside-image"><div class="fake-image"></div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.
I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.
http://codepen.io/anon/pen/dOMYEj
Is this possible? Thanks!
when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link
Modified markup and css a bit .please check the following snippet
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
height: 5vh;
width: 10vw;
position: fixed;
top: 0;
padding: 3px;
right: 0;
}
.icon {
display: inline;
}
nav > h1 {
font-family: cursive;
font-size: 1.2rem;
padding-left: 10px;
color: blue;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 10px;
cursor: pointer;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav > input {
display: none;
}
nav > label {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
#media (max-width: 5000px) {
/* changed to 5000 so it is always collapsed */
nav {
height: 6vh;
text-align: center;
justify-content: space-between;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
visibility: hidden;
}
section#top {
margin-top: 10vh;
}
input:checked + nav ul#links {
visibility: visible;
position: absolute;
right: 30px;
}
input:not:checked +nav ul#links {
visibility: hidden;
}
nav {
color: blue;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<input type='checkbox' id='one'>
<nav class="toggleable" tabindex="1">
<h1>Test Page</h1>
<div>
<label for="one">☰</label>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
Hope it helps
I was able to finally create it. I really hope this helps someone out.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<nav>
<header><h1>Test Site</h1></header>
<div id="navigation">
<button>☰</button>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
CSS:
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
height: 5vh;
width: 10vw;
position: fixed;
top: 1vh;
padding: 1vw;
right: 25vw;
}
.icon {
display: inline;
}
nav header {
top: 1vw;
left: 1vw;
position: fixed;
}
nav header > h1 {
background-color: rgba(255, 255, 255, .5);
font-family: cursive;
font-size: 2rem;
padding-left: 1vw;
color: blue;
left: 0;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 1vh;
cursor: pointer;
}
nav li:focus {
color: blue;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav #links {
background-color: rgba(255, 255, 255, .9);
}
button {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
section > h1 {
margin-top: 8vh;
color: blue;
}
/* Changed to 9999px so it's always collapsed */
#media (max-width: 9999px) {
button {
font-size: 1.75rem;
border: 0;
background: white;
cursor: pointer;
display:block;
}
button:focus {
outline: 0;
}
nav div#navigation {
right: 0;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
display: none;
background-color: white;
}
button:focus + #links,
#links:hover {
display: block;
position: absolute;
right: 5vw;
}
nav {
color: blue;
}
section > h1 {
margin-top: 6.25vh;
color: blue;
}
nav header > h1 {
margin: 0;
padding: 0;
font-size: 2rem;
}
}
Demo
fiddle
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>
border-image requires me to set huge borders to render my image border correctly, but I don't want my content nudged in that far.
How can I get my content to ignore the borders so that I can use paddings to position it how I want?
Put the border image in the ::before pseudo element and put it behind the text. The text itself can be positioned using padding.
.chrome-frame {
position: relative;
padding: 90px 10px 10px 10px;
}
.chrome-frame::before {
display: block;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
content: "";
border-width: 84px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 84 120 1 324 fill;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>
I went with a bit of a different solution. This is a bit more flexible, and I think has better browser compat.
.chrome-frame {
background: #f7f7f7 url(http://i.stack.imgur.com/jNvtF.png) top left repeat-x;
position: relative;
padding: 85px 6px 6px 6px;
border: 1px solid #c2c2c2;
}
.chrome-tl {
background: url(http://i.stack.imgur.com/TVQ3z.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 326px;
height: 81px;
}
.chrome-tr {
background: url(http://i.stack.imgur.com/wWuRT.png) top right no-repeat;
position: absolute;
top: 0;
right: 0;
width: 123px;
height: 81px;
}
<div class="chrome-frame">
<div class="chrome-tl"></div>
<div class="chrome-tr"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis ducimus excepturi laudantium quam, quod repellat? A aperiam corporis dicta dolore doloremque explicabo inventore laboriosam molestiae pariatur, perferendis, reiciendis sed.
</div>
Resize it on JS Fiddle to see how it behaves.
If you want to do it in a less hacky way, you can just wrap your text in another div, and then apply negative margin to it, like this:
<div class="chrome-frame">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!
</div>
</div>
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
.chrome-frame div {
margin-left: -300px;
}
However, the most elegant way would be to just use the image as a background image instead of a border image.