How do I not only keep this text centered but have the parallelogram border wrap around h1? I'm still very new to web design....I started with adding the shape I needed, making the color the same as the background, and simply adding the border. But applying it to h1 screws up the entire layout! (not centered) Also I haven't tinkered with it's sizing because it doesn't sit on the page correctly.
:root {
background: #dcd0ff;
}
h1 {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1{
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
}
<h1 id="shape1">
Sarra's Homemade Kombucha!
</h1>
<style>
:root {
background: #dcd0ff;
}
#shape1 {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
text-align: center;
}
h1 {
font-size: 1em;
}
</style>
<div id="shape1">
<h1>Sarra's Homemade Kombucha!</h1>
</div>
Here's how I would do it. I find it easier to use <div>'s when dealing with shapes like this. They're meant to be containers for other elements, which is exactly what you're trying to do here.
You had some css syntax errors. And it's best practice to wrap text with a tag (I used <span>) in the below example.
EDIT: set margin-right/left to auto to center the h1. More info on margin alignment here ------> CSS Margin.
And #dvfleet413 is right as well. You should really use a div for something like this (containers and such) and then put your h1 inside that div.
The JavaScript is not needed. This is just a test template I always use. Will remove
Comments added.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
root {
background: #dcd0ff;
}
/* you were missing a closing bracket here*/
div {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1 {
/*only set width on container*/
width: 40%;
padding: 30px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
/*set margin-left/right to auto to center*/
margin-right: auto;
margin-left: auto;
}
#shape1 span {
/*set height/width of span*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="shape1">
<span>Sarra's Homemade Kombucha!</span>
</div>
</body>
</html>
Related
This is basically what I am trying to do:
Step 1 have a HTML file with elements:
example image of HTML file
Step 2 (add borders to the side of the screen):
Same file with borders on sides.
(code of the HTML file):
<a>hello</a>
I attempted to use divs on the sides of the screen, that didn't work.
I also attempted to put my elements inside of a div and use the aspect-ratio property to try and have the same effect, that didn't work.
Hope this all makes sense.
Here is an example with flex :
<html>
<head>
<style>
.flex {
display: flex;
justify-content: space-between;
}
/* Define the styles for the page borders */
.border-left {
width: 33%;
height: 100vh;
background-color: black;
}
.border-right {
width: 33%;
height: 100vh;
background-color: black;
}
</style>
</head>
<body>
<div class="flex">
<div class="border-left"></div>
<div><h1>content</h1></div>
<div class="border-right"></div>
</div>
</body>
</html>
You could just set the body background and reduce the size of a. Something like this.
body {
background-color: grey;
}
a {
width: 33%;
margin: auto;
}
In the future, you should replace a with a div with a container class or something like that.
.main{
border-right: 25px solid black;
border-left: 25px solid black;
height: 100vh
}
.container{
height: 300px;
text-align: center
}
<div class="main">
<div class="container">
this is container
</div>
</div>
This is my first question on stackoverflow, so please bear with me if I don't do everything correct. If I can format this better, please let me know.
I am working through the TOP 2nd CSS Margin/Padding exercises. I was able to get through the first one no problem, but I have a situation that I don't understand in the second task.
The goal was to manipulate the padding/margins to achieve a certain desired outcome. Below is the original HTML and the CSS original, followed by the solution. I've put a link to the .png of desired outcome at the bottom.
My question is specifically about the .card and .title elements.
Before the 8px padding was added to the .card element, the edge of the blue background inside the .title element when right up to the top edge of the box and were flush with the .card element. When I add 8px padding to the .card element, it seems to add it correctly to the left, right and bottom of everything, however the top of the .title element seems almost double in white space between the top of the blue box in the .title element and the top of the .card element.
This is fixed then by adding the margin-top: 0; in the .title element.
I'm having a very hard time conceptualizing why I need to add the margin-top of 0. I think I understand everything else. But why is everything flush without the padding, but when I add the 8px padding, it looks good on all sides except the top which appears double, necessitating the margin-top: 0; being inserted into the .title element
Does it have anything to do with an h1 margin having some extra margin to begin with? Again, this is my first run at CSS so I'm not sure if that is correct. If it does have something to do with the h1 margin, why am I only seeing it when I add the padding?
Perhaps I'm missing a super easy concept here, but it's doing my head in so any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
CSS Original + Solution
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
The reason for the phenomenon you're observing is a CSS "feature" called collapsing margins, which has been giving developers headaches for literally decades.
Let me show you a very simplified example of how it works.
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
}
<div class="outer">
<div class="inner"></div>
</div>
So this does what we're expecting it to do: It shows the orange div.inner right inside the green div.outer, at the very top of div.outer.
So what if we want to move the div.inner like let's say 20px down inside div.outer?
Let's try what seems intuitive: .inner { margin-top: 20px; }
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Now instead of moving down div.inner inside div.outer, the whole div.outer has moved, with the div.inner still at the very same position relative to div.outer.
Huh???
This is where collapsing margins kick in. In certain conditions, if a parent with a margin-top (0 by default for div) has a child that has a margin-top (like in your code the h1 has), both margins collapse, meaning whichever element has the greater margin is applied to the parent element, not the child.
This only applies as long as the parent element has no padding-top set. Simply setting that to 1px stops margins from collapsing:
.outer {
background-color: green;
height: 250px;
/* stops collapsing margins: */
padding-top: 1px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
What is going on is described at MDN for three different basic cases, this one applying here:
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
You are correct, h1 has an inherent margin associated with it. I believe in chrome it is 0.67em. You can demonstrate this property by simply changing the h1 in <h1 class="title">I'm a card</h1> to a div and you can see how there's no margin anymore when you apply this.
Below in this example all I did was remove the margin-top: 0; from .title and switched h1 to divand you can see there no margin anymore
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<div class="title">I'm a card</div>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
You're absolutely right about the margin on the h1 tag. Browsers add default styling to most HTML elements. It varies slightly between browsers, but in Chrome by default an h1 tag has about 0.67em of margin above and beneath it.
These default stylings are included to aid legibility of HTML documents that don't have any CSS applied – but they can all be overridden.
A really handy feature to take advantage of when you're writing CSS is your browser's 'Inspect element' feature: If you right click on your h1 tag in your browser and click 'Inspect element` in the menu that appears, you can see both the styling you've applied and the browser's default styling, referred to as the 'user agent stylesheet.'
If you hover over an element you can see how its padding and margin are affecting its layout.
You can see Chrome by default adds a margin-block-start and margin-block-end to the h1 tag by default. It's worth asking why it doesn't just use margin-top and margin-bottom, but the margin-block property covers off text that isn't oriented from left to right, or is rotated. Either way, setting your own margin-top and margin-bottom will override it, as you've done.
#connexo has described the collapsing margins phenomenon, which of course adds even more to ponder. This Medium article provides a little more context on why it occurs, using paragraphs as an example.
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
Is possible to create a big circle around a hyperlink using CSS?
I'm trying to achieve it but my circle is very small. I would like that circle size were similar to hyperlink size. If i put the hyperlink inside a div, it's not being centralized inside the circle.
Here is what i'm doing:
<html>
<head>
<style>
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
}
</style>
</head>
<body>
Test test test test
</body>
</html>
The problem with your code is that the a element is an inline element and thus accepts no height. Change it to a block level element to give it a specified height:
.circle {
border-radius: 100%;
background: green;
display:inline-block;
line-height:100px;
}
To have the text appear in the middle, use line-height instead of height.
Working sample:
http://jsfiddle.net/7qfbopqj/
by using padding you can make the circle just bigger than the link
#circle {
border-radius: 1000%;
padding:50px;/* this instead of a set width and height just change this to change how much bigger the circle is than the link*/
background:black;
text-align:center;
vertical-align:center;
}
This is possible but you have to set the box size to match you text length, try this:
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
display:inline-block;
line-height:40px;
vertical-align:center;
text-align:center;
color:#ffffff;
}
<body>
Test
</body>
try on jsfiddle: http://jsfiddle.net/prt4y7b2/
You could put a div around the link and center the link within.
<div class="circle">
<center>[link name]</center>
</div>
.circle {
border: 2px solid red;
border-radius: 25px;
width: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/yg25us3k/
I have looked around for a few different solutions on Google and tried them out, but I still cannot seem to get my page border to work.
I tried creating another div container to contain everything on the page, then I had the div with the four div circles on the inside, but that did not work when I added the border.
So, I took the outer div away and just left the one div with the four div circles inside.
Finally (what is below), I tried adding the border to the body, but it still does not put the border around the entire page.
I have a feeling that the problem might have to do with height and width values, but I have played with those as well and could not get the desires results.
Thanks for any advice
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background: white;
border: 1px solid #ff0000;
width: 100%;
height: 100%;
}
.circle {
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align: center;
display: inline-block;
}
.container {
text-align: center;
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<center>
Welcome to My Website!
<br>
<br>
</center>
<div class = "container">
<div class= "circle" style = "background-color:red">About</div>
<div class= "circle"style = "background-color:orange">Homework</div>
<div class= "circle"style = "background-color:red">Blender</div>
<div class= "circle"style = "background-color:orange">Research</div>
<div class= "circle"style = "background-color:red">English</div>
</div>
</body>
</html>
try this
html,body{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background: white;
border: 1px solid #ff0000;
-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;/* Firefox, other Gecko */
box-sizing: border-box;/* Opera/IE 8+ */
}