I have a menu div inside another div, and I want to move it slightly up so it's level with the rest of its section, but it will not move. I've tried padding-bottom and margin-bottom. I'm not sure what is wrong.
I am very new to HTML and CSS so please bare with me if its something very obvious I'm not seeing...
Here is the code. If you preview it, you'll notice that the menu is slightly lower than it should be.
Hope someone can help.
Thanks a lot.
html,
body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title {
font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu {
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
a {
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
}
<body>
<header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt
ut
</p>
</div>
<div id="menu">
About<br>
Contact<br>
Donate<br>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt
ut
</p>
</div>
</div>
</body>
Make .content use the flexbox layout mode, then remove the width from your p element
.content {
display: flex;
}
.section p {
font-size: 2em;
/*width: 1500px;*/
}
It's always better to put the menu div in another div that controls its position
Like this:
<div id = "menu-area">
<div id="menu">
About<br>
Contact<br>
Donate<br>
</div>
</div>
And then you can control the div's position easier:
#menu-area{
float:right;
margin-right:20px;
border:1px solid black;
}
#menu
{
text-align: right;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
I'm not sure what you are trying to do here.
The problem is that you are not using display
There are already a few answers here about how you can use the display property
flex is probably the best value for your case
You want your menu to be aligned with your first section? I would just add a flexbox. See below:
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
display:flex;
}
Or if you just want to move your menu up. You can use negative margin for your menu. See below:
html, body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title
{ font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu
{
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
margin-top:-40px
}
a{
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shunryu Suzuki Roshi</title>
</head><link rel="stylesheet" type="text/css" href="index.css">
<body>
<header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
<div id="menu">
About<br>
Contact<br>
Donate<br>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
</body>
</html>
Html blocks are automatically aligned vertically so you need to style the html blocks to make them align horizontally , i used a css attribute called flex , you can learn about it through this website : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ check it out it's very helpful , compare my code to yours to understand more
html, body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title
{ font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section-content {
display: flex;
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu
{
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
a{
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
}
<header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
<div id="menu">
About<br>
Contact<br>
Donate<br>
</div>
</div>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
Related
I have a graphic element which is 4 stacked lines. This is created using box-shadow and multiple 1px shadows stacked. As there is no 'blur' on the shadow, I would expect this to form solid 1px lines, like a border.
It's sharp/crisp on my non-retina screen and also on my iPhone XS. However on my Macbook the lines appear blurry.
I've stacked multiple versions in the included example. It seems to differ which lines are blurry depending on position so I guess it must be some pixel-rounding issue.
Blurring also occurs on the scrollbar background (which is a CSS gradient).
Why is this and can it be resolved? I find it strange that a retina screen is one that isn't sharp/crisp.
Update
I swapped these CSS-based graphics out for SVG's of the same effect. 1px solid pixels, repeated. And I got the exact same blurred result. So it's nothing to do with the box-shadows/gradients.
I also removed the transform and positioning styles just incase it was that but still the lines are blurred.
:root {
--color-retro: rgb(243, 238, 225);
}
.finder {
background: var(--color-retro);
border: 1px solid black;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .12), inset -1px -1px rgba(0, 0, 0, .12), inset 1px 1px white;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-family: Arial;
margin: 0 0 12px;
padding: 4px;
transition: none;
z-index: 10;
}
.finder .hgroup {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
order: -1;
height: 24px;
margin: -4px -4px 0;
padding: 0 4px;
position: relative;
}
.finder h1 {
background: var(--color-retro);
font-size: 12px;
margin: 0;
padding-right: 4px;
z-index: 10;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.finder p {
font-size: 12px;
margin: 0;
padding: 0;
}
.finder .hgroup:before {
box-shadow: inset 0 1px black,
inset 0 2px white,
inset 0 3px var(--color-retro),
inset 0 4px black,
inset 0 5px white,
inset 0 6px var(--color-retro),
inset 0 7px black,
inset 0 8px white,
inset 0 9px var(--color-retro),
inset 0 10px black,
0 1px white;
content: "";
display: flex;
position: absolute;
height: 10px;
inset: 50% 20px 50% 4px;
transform: translateY(-50%);
}
.inner {
background: white;
border: 1px solid black;
padding: 8px;
overflow: hidden;
overflow-y: scroll;
max-height: 30px;
}
::-webkit-scrollbar {
background: linear-gradient(90deg, var(--color-retro) 2px, transparent 1%) 2px 2px, linear-gradient(var(--color-retro) 2px, transparent 1%) 2px 2px, black;
background-size: 3px 3px;
display: block;
height: 16px;
box-sizing: border-box;
border-left: 1px solid black;
width: 16px;
}
.inner::-webkit-scrollbar-thumb {
background: var(--color-retro);
border-left: 1px solid black;
height: 16px;
outline: 1px solid black;
width: 16px;
}
<div class="retro">
<div class="finder">
<div class="hgroup">
<h1 class="page-title">Title Here</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="retro">
<div class="finder">
<div class="hgroup">
<h1 class="page-title">Title Here</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="retro">
<div class="finder">
<div class="hgroup">
<h1 class="page-title">Title Here</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
I have the following link with a padding. On mobile screen, it has a line break. Would it be possible to add a padding on the end of the first and the start of the second line as well?
div {
max-width: 30rem;
margin: 5rem auto;
}
a {
padding: 10px 20px;
background: red;
line-height: 200%;
}
<div>
Read More: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
Use box-decoration-break:
div {
max-width: 30rem;
margin: 5rem auto;
}
a {
padding: 10px 20px;
background: red;
line-height: 200%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div>
Read More: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
I've got a header inside a div (.header) and underneath that I've got another div (.block) element for the main text and menu.
When I try to make more space between the .header div and the .block div by either adding a bottom margin to the header or top margin to the block, it results in the header getting pushed off screen.
Another problem that I have is that the div block is sort of a "horizontal column" that goes through the page with text on it, and I'd like to add another div element assigned to the same class underneath it with some padding between them, but when I do so, it just turns into one large block.
It might sound confusing, but here is the code. If you add another div underneath the .block div, you'll see what I mean. Likewise if you try to create space between the header and block divs, you'll see that the header is getting pushed off screen.
Also, how can I make the block divs stretch all the way across the page. I read that I could use position: absolute; - it certainly works, but then when I create another div (the one that's supposed to go underneath), it just lays on top of the first one.
Would love to hear what you guys think is wrong.
body {
background: url(img/shunryu.png);
background-color: black;
background-size: cover;
font-family: Georgia, sans-serif;
font-weight: 200;
/* overflow: hidden; */
}
h1 {
font-size: 30px;
}
#header {
font-size: 400%;
color: white;
padding: 10px;
padding-left: 60px;
}
.block {
font-size: 125%;
line-height: 170%;
width: 100%;
height: 500px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 70%, #e5ede8 70%, #e5ede8 100%);
}
.block h1 {
color: #e5ede8;
padding: 30px 0px 15px 70px;
border-bottom: dashed 1px gray;
}
.block p {
padding: 10px 30px 30px 70px;
width: 60%;
}
.menu {
float: right;
padding-right: 250px;
padding-top: 100px;
color: white;
text-align: center;
line-height: 300%;
font-size: 125%;
color: black;
}
a:link {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div id="header">
<p>Header title</p>
</div>
<div class="block">
<div class="menu">
<a id="one" href="about.html">About</a><br>
<a id="two" href="contact.html">Contact</a><br>
<a id="three" href="donate.html">Donate</a><br>
</div>
<h1>Header 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut</p>
</div>
I think they way you started was wrong. To many mistakes in your ordering and espacially CSS. You used overflow:hidden; which will remove the scroll ability. If you just want to hide the scrollbar, give it a width of 0. Because of that, you items where correctly aligned, but you couldnt see it as it was outside of the window.
Next, if you want to have a large fontsize use em. For 4 times as large 4em.
Having a white font-color on a white background is also not a good idea. Style the abckground of the body in the color you want, not the conent box. Instead give the header a black background.
I posted you a beginner friendly "frame" which saved as much from your code which was salvagable to work effienctly with.
body {
background: url(img/shunryu.png);
background: linear-gradient(to right, #ffffff 0%,#ffffff 70%,#e5ede8 70%,#e5ede8 100%);
background-size: cover;
font-family: Georgia, sans-serif;
font-weight: 200;
margin: 0;
padding: 0;
}
h1 {
font-size: 30px;
}
#title {
font-size: 4em;
background-color: black;
color: white;
padding: 10px 10px 10px 60px;
height: auto;
width: auto;
}
#menu {
text-align: center;
font-size: 1.25em;
color: black;
}
.menuLink {
text-align: center;
padding: 5px;
margin: 0 10px 0 10px;
text-decoration: none;
color: black;
}
.menuLink:hover {
text-align: center;
padding: 5px;
margin: 0 10px 0 10px;
text-decoration: none;
color: grey;
}
#content {
margin: 0;
padding: 10px 20px 0 20px;
}
.section {
border: 1px solid black;
padding: 5px;
margin: 0 0 10px 0;
}
<body>
<header>
<div id="title">Header title</div>
<div id="menu">
<a class="menuLink" href="about.html">About</a>
<a class="menuLink" href="contact.html">Contact</a>
<a class="menuLink" href="donate.html">Donate</a>
</div>
</header>
<div id="content">
<div class="section">
<h1>Titel 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div class="section">
<h1>Titel 2</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>
</div>
</body>
I have been trying to make an image map with HTML and CSS where the user rolls over a certain part of an image and a text caption pops up. I think i am nearly there but i would like the text caption to fade in and fade out instead of just appearing and disappearing. Could any one point me in the right direction please? Here is the code i have so far:
#map {
margin: 0;
padding: 0;
width: 400px;
height: 250px;
background: #000;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 10pt;
font-weight: 700;
line-height: 18px;
}
#map h1 {
margin: 0px;
padding-bottom: 5px;
color: #fff;
font-size: 12pt;
font-weight: 700;
}
#map li {
margin: 0;
padding: 0;
list-style: none;
}
#map li a {
position: absolute;
display: block;
background: url(images/blank.gif);
text-decoration: none;
color: #ed4e6e;
}
#map li a span {
display: none;
}
#map li a:hover span {
position: relative;
display: block;
width: 200px;
left: 20px;
top: 20px;
border: 0px solid #000;
border-radius: 5px;
background: #2c3f52;
padding: 20px;
}
#map a.caption1 {
top: 80px; left: 60px;
width: 10px;
height: 10px;
background: #ff0035;
}
#map a.caption2 {
top: 80px;
left: 190px;
width: 10px;
height: 10px;
background: #ff0035;
}
#map a.caption3 {
top: 180px;
left: 60px;
width: 10px;
height: 10px;
background: #ff0035;
}
#map a.caption4 {
top: 170px;
left: 250px;
width: 10px;
height: 10px;
background: #ff0035;
}
#map a.caption5 {
top: 90px;
left: 365px;
width: 10px;
height: 10px;
background: #ff0035;
}
<ul id="map">
<li><a class="caption1" href="#" title=""><span>
<h1>Caption 1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span></a></li>
<li><a class="caption2" href="#" title=""><span>
<h1>Caption 2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
<li><a class="caption3" href="#" title=""><span>
<h1>Caption 3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
<li><a class="caption4" href="#" title=""><span>
<h1>Caption 4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
<li><a class="caption5" href="#" title=""><span>
<h1>Caption 5</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
</ul>
You can change your current css into this
#map li a span {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#map li a:hover span {
position: relative;
width: 200px;
display: block;
z-index: 10;
visibility: visible;
opacity: 1;
left: 20px;
top: 20px;
border: 0px solid #000;
border-radius: 5px;
background: #2c3f52;
padding: 20px;
}
Fiddle: http://codepen.io/hunzaboy/pen/mOWOqa
Here's the challenge. I have a left-aligned text container (width: 40%;) that changes height with the window. I need my right half of the screen set as an image container (width: 60%) to which the image centers horizontally in the container, and vertically with the center of the text container.
Here is what my current code is doing:
Here is what I would like it to do:
I'm barely savvy in JS, so I'm trying to avoid it pending the need for tweaks. Here is my current code for the section:
.design-portfolio {
position: relative;
.web-img-container {
position: relative;
width: 60%;
margin-left: auto;
.web-img-lg {
img {
max-height: 40em;
}
}
}
.web-img-sm {
#media (min-width:75.063em) {
position: absolute;
visibility: hidden;
}
}
.web-design-box {
#media (min-width:75.063em) {
$font-title: 25px NexaBook;
$font-sub-title: 25px NexaHeavy;
$font-copy-title: 20px NexaHeavy;
$font-copy: 20px NexaBook;
position: relative;
width: 40%;
padding-right: 2em;
.size-fix {
position: relative;
}
.bg-box {
position: absolute;
background-color: $pink;
top: 2em;
bottom: 2em;
left: 0;
right: -2em;
}
.border-box {
position: relative;
border: .3em solid $black;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-top: 3em;
width: 60%;
margin-left: auto;
.h1 {
font: $font-title;
color: $white;
text-align: right;
}
.h2 {
font: $font-sub-title;
text-align: right;
}
.copy {
font: $font-copy;
color: $white;
text-align: left;
width: 100%;
height: 100%;
.h3 {
font: $font-copy-title;
color: $white;
text-align: left;
}
}
.copy p {
line-height: 1.2;
}
}
}
}
}
<section>
<div class="web-img-container">
<div class="web-img-lg">
<img src="assets/img/website-design.png" alt="web-design">
</div>
</div>
<div class="web-design-box">
<div class="size-fix">
<div class="bg-box"></div>
<div class="border-box">
<div class="h1">
my approach on
</div>
<div class="h2">
website design
</div>
<br>
<div class="copy">
<div class="h3">purpose</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="h3">simplicity</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="h3">mobile first</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</section>
I don't know how to set it up to run, as it's in SASS rather than regular CSS. :/