I'm trying to get a border like the picture below:
But instead of dots, I want to use a picture of a car with the background cut out.
A little line of cars all the way around the box.
How can I do that?
Here's my attempt:
.box-head {
padding: 10px;
margin: 0px auto;
width: 50%;
border: 5px;
border-radius: 10px;
text-align: center;
background: linear-gradient(to right, #00e6ff, #6418ff);
font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
<title>Skyline's Pointless Website</title>
<link rel="border" href"border.png">
</head>
<body>
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
</body>
</html>
Here's the car image:
Here's an example using border-image:
The border-image CSS property lets you draw an image in place of an element's border-style.
.box-head {
padding: 42px;
width: 60%;
text-align: center;
font-family: cursive;
border-image-source: url("//mdn.mozillademos.org/files/6017/border-image-6.svg");
border-image-slice: 42 fill;
border-image-width: 42px;
border-image-repeat: round;
}
h1 {
font-size: 16px;
}
p {
font-size: 12px;
}
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
Using an online generator might help demonstrate how it works:
MDN
border-image.com
Also see:
css-tricks.com
bitsofco.de
thenewcode.com
Edit
You explained that you want a line of cars around the box.
To do this with border-image, make an image with the car tiled in a 3x3 grid. The different "zones" are described in documentation for border-image-slice:
Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set.
Here's my example image:
Here's a working example of the border:
.box-head {
padding: 30px 100px;
width: 60%;
text-align: center;
font-family: cursive;
border-style: solid;
border-image-source: url("//i.stack.imgur.com/ODGdz.png");
border-image-slice: 30 100;
border-image-width: 30px 100px;
border-image-outset: 0;
border-image-repeat: round;
}
h1 {
font-size: 16px;
}
p {
font-size: 12px;
}
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
For more reference on this method, see:
Making a Border of a Single Repeating Image
Border Imaging
EDIT
Here's an example with the cars rotated:
.box-head {
padding: 30px 50px;
width: 60%;
text-align: center;
font-family: cursive;
border-style: solid;
border-image-source: url("//i.stack.imgur.com/YQ4EO.png");
border-image-slice: 30 100;
border-image-width: 30px 100px;
border-image-outset: 0;
border-image-repeat: round;
}
h1 {
font-size: 20px;
}
p {
font-size: 16px;
}
<div class="box-head">
<h1>Welcome, humans, to this amazing website.</h1>
<p> You may notice this website tickles your brain. I just started learning HTML and CSS, so the universe is wide open!</p>
</div>
Related
I'm trying to make a simple method for adding screenshots into the middle of written content, and I'm having trouble getting the effect that I want. I have a background of some wooden planks I want to apply to all the screenshots (which will be all the same size), then scale the screenshot down so the background looks like a frame of sorts, and add a small white border so that it looks like a photo attached to the planks. So I could do something like below
ite;}
I feel like I'm on the right track, but I know I'm losing something in the understanding.
.43screen {
background-image: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
background-size: 100;
padding: 10px 0px 10px 0px;
border: 10px;
border-color: white;
}
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="43screen" />
You cannot start a class with a number
Also use a div instead
.screen {
background-image: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
background-size: 100;
padding: 10px 0px 10px 0px;
border: 10px;
border-color: white;
height:300px;
}
img { background-color:black; height: 80px; margin-left:200px; margin-top:50px; border: 2px solid white;}
<div class="screen">
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" />
</div>
that might work if you change class to start with word like it sais on top answer
but correct way is make a div within it set a img like this
<style>
div{
background-image:url('./img.png');
position:relative
}
img{
position:absolute;
width:90%;
height;90%;
top:5%;
left:5%;
}
</style>
<div>
<img src="./img.png"/>
</div>
you must use position relative in parent or else will set to window not div
so what happens is you create background then a img 90% of div then you set to center of div
you are missing border-style and probably background-position. As mplungjan told you already, class and id names should cannot have a number as a first letter (nor special characters) best is to name them in a way that it tells something (when you go through your code 6 month later, you will understand the purpose).
update from your comment
possible fix via background-clip or border-image, from your image which has a big area around the wooden structure , a waste of space.
over the image to draw shadows arund edges to see where it stands
.img43screen {
padding: 0 10px;
vertical-align: middle;
}
.img43screen.a {
background-image: linear-gradient(white, white), url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
background-repeat: no-repeat;
background-clip: padding-box, border-box;
background-position: center;
background-size: 110;
border-style: solid;
border-width: 50px 10px;
border-color: transparent;
}
.img43screen.b {
padding: 30px 40px;
border-image-slice: 100 281 100 263;
border-image-slice: 80 280 80 280;
border-image-width: 30px 30px 30px 30px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://www.hekwerkonline.nl/media/catalog/product/cache/83a5c387159ad68aba5e33ce14d10ed9/t/u/tuinscherm_douglas_19_planks_2.jpg");
}
img:hover {
filter: drop-shadow(0 0 3px);
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="img43screen a" />
<img src="https://static.ah.nl/static/gall/img_26531_Gall_500.png" class="img43screen b" />
When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500% to 250%, a piece of background appears (green color). Watch the video on which I show it. Below is the source code from the video. Is this a browser rendering bug or my code is bugged?
Windows 10, 10.0.18362, 64-bits
Google Chrome, 75.0.3770.100, 64-bits
video: https://youtu.be/uwAEixLBUeU
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
html { background: #bbb; }
body { width: 1000px; margin: 0 auto; background: #fff; }
a { text-decoration: none; }
.modelerInputReport {
overflow: hidden;
padding: 5px;
}
.modelerInputReportDiv {
float: right;
}
.modelerInputReportDiv span {
display: inline-block;
}
.modelerInputReportDiv button {
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
.modelerInputReportDiv button:hover {
border: 1px solid #1B273F;
}
.modelerInputReportDiv button:active {
background: #cc7600;
border: 1px solid #402400;
box-shadow: inset 0 0 10px 2px #402400;
}
</style>
</head>
<body>
<div class="modelerInputReport">
<div class="modelerInputReportDiv">
<span id="modelerInputReportMsg">(generate to unlock) -</span>
<span>Report:</span>
<button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
<button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
</div>
</div>
</body>
</html>
In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.
If it is a problem in your case, you can try doing things to minimise the effect, for example:
Use non-pixel measurements border: 0.1rem solid #CCC
Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.
These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.
TL:DR - It's the browser, and don't worry about it unless you really need to!
this is display:inline-block; issue because of inline-block use some spacing
Use float: left instead of display: inline-block,
Use this css
.modelerInputReportDiv span {
float:left;
}
.modelerInputReportDiv button {
float:left;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
I'm trying to create a page where there is a linear-gradient background underneath an inset section of the page, which should not show the gradient colors. In the example below, the top section of the inset is behaving as desired, with the color staying in the background. But for some reason the section underneath it is being infiltrated with the background:linear-gradient.
I can't figure out why:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
font-family: sans-serif;
line-height: 1.5;
}
.inset-container {
background: linear-gradient(orange, black);
}
.inset {
max-width: 80%;
margin: auto;
}
.column-top {
/* eliminates the margin at the top of the first column, so all columns have even height */
margin-top: 0;
}
.columns {
column-count: 2;
column-gap: 40px;
padding-bottom: 20px;
padding-right: 80px;
}
.contents {
font-size: 18px;
padding-bottom: 40px;
padding-top: 20px;
padding-right: 30px;
padding-left: 50px;
}
.articleBasic {
padding-bottom: 40px;
padding-top: 20px;
padding-right: 30px;
padding-left: 50px;
}
/* ID formatting */
#contents {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
}
#Safety {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-top: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gradient test</title>
</head>
<body>
<div class="inset-container">
<div class="inset">
<nav id="contents" class="contents">
<h3>Included in this month’s newsletter:</h3>
<p>Safety First: Prescription Safety Glasses - Find out who pays that bill in this months Safety First.</p>
<p>Flux - Which way to the problem? Splitters messing with your head? Read this Flux tip for clarification.</p>
<p>Tool Tip: MDU Maps - Hey, My maps are blank in Divisional Viewer! Well, you’re doing it wrong!</p>
<p>Tool Tip: XM1 Plant Design Maps - Why does all the cool stuff go to the service department?</p>
<p>The Battery Balancer - How much more can we fit in that cabinet?!</p>
<p>DM Ticketing - SASQ Watch because Big Bird was taken.</p>
<p>Viavi’s ONX-630 - Initializing…… That’s an inside joke! You’ll get it later or will you? Just read this for a quick overview of the new meter.</p>
<p>Tales From The Field - Hello, Hello, HELLO! It’s ok to share with the group! Send us your pics!</p>
</nav>
<article id="Safety" class="articleBasic">
<h3>Safety First: Prescription Safety Glasses</h3>
<div class="columns">
<img class="safetyimg" src="https://i.imgur.com/qJWZi01.jpg" alt="funny animated dude with big glasses" title="Click me to go to the benefits page!">
<p class="column-top">Some of my fellow eyeglass wearers may not be aware that Comcast will pay for you to have your prescription safety glasses fully covered! I recently became aware of this information and wanted to share it with all of you. Per our ComcastNow
website, in the Vision Benefits SPD: Davis Vision will cover 100% of the cost, VSP- Safety Vision Glasses (Employee only) Coverage 100% after $20 copay; $75 Frame allowance. This helps us all, with the struggle of trying to wear two sets of
glasses in order to see and be OSHA compliant while working in the field. More information can be found at https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx regarding this great benefit. </p>
</div>
Back to Table of Contents
</article>
</div>
</div>
</body>
</html>
You're missing the background color property for the #Safety id.
#Safety{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-top: 2px;
background-color: white;
}
Just to clarify, are you saying the area with Safety first should have a white background as well? Because you didn't set the white in the CSS.
https://codepen.io/anon/pen/BwVowZ?editors=1100
I am designing a website using HTML and CSS and there appears to be an invisible margin somewhere.
Currently, my website looks like this:
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
display: inline-block;
vertical-align: top;
}
article {
width: 60%;
}
aside {
width: 30%;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>
If you look closely at the article and aside in the middle of the screenshot, you can see that I have made their display: inline-block; and removed the border from the left of the aside (smaller one).
The Problem
The problem is that I want to actually "pin" the aside to the right of the body, not the article. I know that to make this work I would have to remove the border from the right and add it to the left.
What I Have Tried
Playing around with various values for align, text-align and all the other aligns you can think of.
Making the aside and article have no tags in between them.
Please note, I have seen other solutions for this, but I want a clean solution that makes sense.
This is what you were trying to achieve I guess.
article and aside are now floated left and right.
This is actually the solution from kukkuz in the comments. I don't know why it shouldn't work for you.
A clearfix is used instead of an additional element with clear: both
Without the surrounding element, body in this case, doesn't get the height from its content and the border around everything wouldn't display correctly.
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
body:after {
content: '';
clear: both;
display: table;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
}
article {
width: 60%;
float: left;
}
aside {
width: 30%;
border-left: 5px solid #375E97;
border-right: 0;
float: right;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>
I hope I understood your issue. There's many ways you could achieve this, the most obvious one would be to remove your inline rule and make both aside and article float: right; and float: left; respectively, but float was intended to make text float around images and not exactly to position divs (eventhough it works). As so, what I would try is to position: absolute; both the aside and article; and use left, right, top, bottom to position elements.
article {
position: absolute;
top: 69px;
width: 60%;
}
aside {
background-image: url("money-stack.png");
background-position: 200px 200px;
background-size: cover;
position: absolute;
right: 8px;
top: 69px;
width: 30%;
}
body {
border: 5px solid #375e97;
color: black;
font-family: "Roboto",sans-serif;
min-height: 318px;
}
After, you can either set a minimum size for the container, or add a clear:both; styled element to the bottom in order to make the container stretch to the correct size.
One other thing I think you should change is the fact that you're using body as your container and applying styles to it. I think it's good practice to create an actual container div, and apply styles to that instead.
I can't figure out how to write HTML code for the picture below:
The CSS looks like this:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 90%;
width: 90%;
top: 0;
left: 0;
margin: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: HelveticaNeueBold;
}
The text is <p> visa fler bästsäljare </p> <h3>+<h3>.
The code I have gotten help with so far is:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
The only issue is that this code does not create the image as I posted. URL to the website URL. Scroll down a bit. The browser I am testing this on is Google Chrome.
remove the
.borderbox {
height: 90%;
}
then the dashed border should work as you expected.
I think this might be a solution: http://jsfiddle.net/e7Levykn/
I don't think you can style border with one argument. You would have to use
border-style , border-color, border-width.
EDIT: Nvm about the border thing. Your css-code should work, it works in the jsfiddle. Maybe your elements in html don't have the right classes
Use css border-style property.
.selector{
border-style: dashed;
}
or like this
.selector{
border:2px dashed #F1F1F1;
}