This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
why is there space at the top of my header and above my body?
body {
background-color: #efefef;
font-family: "verdana";
max-width: 1000px;
border: solid #ffffff 3px;
margin: auto;
}
#container {
background-color: #8a8a8a;
}
#header {
background-color: #8a8a8a;
}
h1 {
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
font-family: "verdana";
text-transform: uppercase;
padding: 10px 0 10px 0;
}
h2 {
background-color: #F47D31;
color: #ffffff;
font-family: "verdana";
text-transform: uppercase;
text-align: center;
padding: 10px 0 10px 0;
}
h3 {
background-color: #F47D31;
color: #ffffff;
font-family: "verdana";
text-transform: uppercase;
text-align: center;
padding: 10px 0 10px 0;
}
p {
font-family: "verdana";
line-height: 1.5em;
color: #ffffff;
text-align: justify;
}
#nav {
display: block;
width: 25%;
float: left;
}
#nav ul {
list-style-type: none;
}
#nav a:link, #nav a:visited {
display: block;
border-bottom: 2px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
#nav a:hover {
color: white;
background-color: #F47D31;
text-decoration: underline;
}
hr {
border: solid #efefef 1px;
}
table {
padding: 10px;
}
tr:nth-child(even) {
background-color: #E9EAE8;
color: #2a2a2a;
}
tr:nth-child(odd) {
background-color: #ffffff;
color: #2a2a2a;
}
tr:hover {
background-color: #F47D31;
}
#products_list {
list-style: none;
padding: 20px
}
figure {
display: block;
width: 202px;
height: 170px;
float: left;
margin: 10px;
background-color: #e7e3d8;
padding: 9px;
}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;
}
figcaption {
text-align: center;
color: #F47D31;
}
fieldset {
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 0px;
overflow: hidden;
padding: 0 10px;
}
ul {
background-color: #fff;
border: 1px solid #eaeaea;
list-style: none;
margin: 12px;
padding: 12px;
}
li {
margin: 0.5em 0;
}
label {
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
.paragraph {
padding: 0 10px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Innovative Multimedia Seminar 1</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>Hello World</h1>
<h2>Hello World 2</h2>
<h3>Innovative Multimedia Rocks!</h3>
</div>
<div id="container">
<div id="nav">
<!--Add Links Here -->
<ul>
<li> Home Page </li>
<li> Products Page </li>
<li> Register Page </li>
<li> SHU website homepage </li>
</ul>
</div>
<div>
<figure>
<img src="img/image1.jpg" alt="Horses in a field">
<figcaption>
A horse and two foals
</figcaption>
</figure>
<figure>
<img src="img/image2.jpg" alt="Flowers growing">
<figcaption>
Three Flowers Growing
</figcaption>
</figure>
<figure>
<img src="img/image3.jpg" alt="Butterfly on flower">
<figcaption>
Butterfly on flower
</figcaption>
</figure>
<div class="paragraph">
<p>
Lorem ipsum dolor sit amet, oporteat hendrerit id pro. His munere virtute facilis ex. Detracto concludaturque vel ea, quo id iusto deseruisse accommodare. Ea sit habeo audiam concludaturque, an usu vero numquam eruditi. Ex scripta neglegentur pri, timeam
omittam theophrastus ne mel, mea simul perpetua no.
</p>
<hr>
<p>
Vel aliquid fierent te, per quas elaboraret in. Eu mei omittam prodesset, vel liber complectitur concludaturque an. Nihil choro at qui, rebum legendos mei ex, vis ex choro quaeque reprimique. No pri bonorum expetenda liberavisse, sed ut erat senserit.
</p>
<hr>
<p>
No duo habemus vivendum euripidis. Et mutat populo constituto per, veniam populo honestatis sit ex. Propriae lucilius at ius, qui tale invidunt te. In vitae probatus explicari nec, ex prima delenit moderatius sit, putent mentitum gloriatur pro in. Justo
volumus eum an.
</p>
</div>
</div>
</div>
</body>
</html>
Just remove the margin from the h1 by putting margin-top: 0;
h1 {
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
font-family: "verdana";
text-transform: uppercase;
padding: 10px 0 10px 0;
margin-top: 0;
}
Code Pen Example
and I'm not sure what you mean by the body having padding.
As you can see in the h1 breakdown picture, the h1 tag gets its styling from styles.css, and there is padding set to 10 pixels above and under the h1 tag.
So you could try to remove the padding-style from styles.css and see if it removes the space. Or yet easier, just uncheck the checkbox for the padding style in the DevTools shown in the picture.
Related
I have put the image inside of the paragraph tag itself and floated it right, however it moves it to the right but underlaps the container edge.
I have taken it out of the paragraph section as well and it still does the same. I have created containers as well for them. I want the image in the container with the paragraph. I have attached an image of the issue I am having as well as my css.
body {
background-image: url(../images/keyboard.jpeg);
background-repeat: no-repeat;
background-size: cover;
font-family: cursive;
}
/* GOOGLE FONTS*/
#import url('https://fonts.googleapis.com/css2?family=Cookie&family=Fuzzy+Bubbles&family=Jost:wght#700&display=swap');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Cookie';
font-weight: 700;
}
/*ID Classes*/
#mainTitle {
color: #FFF;
font-size: 5em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
#container {
border: 10px solid #FFF;
margin: auto;
margin-top: 10px;
padding: auto;
width: 50%;
}
#footer {
color: #FFF;
text-align: center;
border: 2px;
border-style: solid;
}
/* REUSABLE CLASSES*/
.navbar {
background-color: #0a861d;
border-radius: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
list-style: none;
margin: 13px 20px;
text-align: center;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: white;
}
.search {
float: right;
color: white;
padding: 12px 75px;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
/*SERVICES PAGE LIST*/
.servicelist ul {
line-height: 1.5em;
margin: 5px 0 15px;
padding: 0;
}
.servicelist li {
font-size: 50px;
font-weight: 500;
background-image: linear-gradient(to left, rgba(60, 154, 118, 0.91), #15c723);
color: transparent;
text-align: center;
background-clip: text;
-webkit-background-clip: text;
}
.center {
text-align: center;
}
.margin {
margin-top: 10px;
}
.scontainer {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
color: #ccc;
text-align: center;
height: 50%;
font-size: 50vmin;
font-family: helvetica;
}
/* SINGLE CLASSES*/
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
h2 {
color: #FFF;
font-size: 2em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
p {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.service_styling {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.imgcontainer {
width: auto;
height: auto;
border: 2px solid red;
float: inline-end;
}
.realImgContainer {
width: auto;
height: auto;
border: 2px solid red;
float: right;
}
img {
/* max-width: 50%; */
/* max-height: 50%; */
/* border: 5px solid #FFF; */
/* margin: auto; */
/* margin-top: 10px; */
/* padding: auto; */
/* width: 50%; */
}
/*
.imgHardware{
float: right;
}
.imgSoftware{
float: right;
}
.imgApp{
float: right;
}
.imgCabling{
float: right;
}
*/
<!-- NAV BAR-->
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Locations</li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
<h1 id="mainTitle"> Services</h1>
<!-- MAIN SECTION-->
<section id="container">
<h2> Things We Do </h2>
<div class="servicelist margin">
<h2>Hardware</h2>
<div class="service_styling">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div><img class="realImgContainer" src="images/cpusocket.jpeg" alt="computer socket"></div>
</span>
</div>
<div style="clear:both"></div>
<h2>Software</h2>
<p> We provide the latest software for all kinds of fields. We work directly with vendors to get the best rate - we provide competitive rates and offer affordable and simple subscription solutions - we also carry full version software that is subscription-free.
<img class="imgSoftware" src="images/code.jpeg" alt="computer code"></p>
<h2>Application development</h2>
<p> We can create and deploy custom software for whatever task you need completed. Our seasoned developers specialize in C, C++ and Java. Allowing us to create versailte and flexible software. Our team will with work with you hand in hand to ensure you
get exactly what you need. We will also provide 24/7 maintenance as well as upgrades on all of our in house software.
<img class="imgApp" src="images/codedeveloper.jpeg" alt="someone coding"></p>
<h2>Enterprise cabling</h2>
<p> We have over 30 years of infrastructure cabling experience. We have in house techncians who can terminate and pull ethernet and fiber optic cabling. We use our own equipment and do all of our work in house - without the use of a third party. So we
can give you a fair price as well as a clean and concise debriefing of the exact work we will be doing and its core benefits.
<img class="imgCabling" src="images/switchandcable.jpeg" alt="switch and cable">
</p>
</ul>
</section>
<!-- SUB SECTION-->
<section>
</section>
<!-- FOOTER-->
<div id="footer">© 2050</div>
See the following Codepen sample:
https://codepen.io/anon/pen/yWXRvR
Concerning the tourplaces container at the bottom of the page (see CSS section commented as Article: tour dates: tourplaces at the bottom of the CSS):
Why is it that when I arbitrarily change the left or right padding of a .place (e.g. the first .place : padding-left: 0), the .place images as well as their container suddenly become different sizes?
The .place containers then become inconsistent, having different heights. This is not what I want - I want them to stay horizontally bottom-aligned like they initially were.
Is it because the padding makes the image's width more narrow and then the height automatically adjusts along with it, making the .place content box longer?
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
/* Specific styles */
/* nav */
nav {
position: sticky;
top: 0;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a{
padding: 16px 24px;
color: white;
display: block;
text-transform: uppercase;
}
nav ul li a:hover {
background-color: #ccc;
}
nav ul li:nth-of-type(5) {
/*position: relative;*/
}
nav ul li:nth-of-type(5) div a {
display: block;
color: black;
text-transform: capitalize;
}
nav ul li:nth-of-type(5) div a:hover a {
background-color: #ccc;
}
nav ul li:nth-of-type(5) div {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0 0 5px #aaa;
background: white;
}
nav ul li:nth-of-type(5):hover div {
display: block;
}
#search {
float: right;
}
#search i {
color: white;
padding: 16px 24px;
font-size: 18px;
transition: 0.5s ease;
}
#search i:hover {
color: #aaa;
}
.fa-sort-down {
vertical-align: text-top;
font-size: 18px;
transform: translateY(-25%);
}
/* Animation */
#bandpics {
overflow: hidden;
}
img#chicago,
img#la,
img#ny {
width: 100%;
display: block;
position: absolute;
animation-name: slide;
animation-duration: 18s;
animation-iteration-count: infinite;
}
img#chicago {
animation-delay: 6s;
}
img#la {
animation-delay: 4s;
}
img#ny {
animation-delay: 2s;
}
#keyframes slide {
0% { opacity: 1; }
22% { opacity: 1; }
33% { opacity: 0; }
88% { opacity: 1; }
100% { opacity: 1; }
}
/* Article: the band */
#band {
width: 100%;
position: relative;
margin-top: 50%;
text-align: center;
padding: 10% 30%;
background-color: white;
}
#band h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
}
#band > h4 {
font-style: italic;
font-weight: 500;
color: #888;
}
#band h4::first-letter {
text-transform: capitalize;
}
#band p {
text-align: justify;
margin-bottom: 7%;
line-height: 1.3em;
}
#bandmembers {
overflow: hidden;
}
.bandmember img {
max-width: 50%;
}
.bandmember h4 {
font-weight: 100;
}
/* Article: tour dates */
/* Article: tour dates: sales lines */
#tourdates , #tourplaces {
background-color: black;
padding: 1% 30%;
}
#tourdates h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
color: white;
text-align: center;
}
#tourdates h4 {
text-align: center;
color: #888;
font-style: italic;
}
#tourdates h4:first-letter {
text-transform: uppercase;
}
.month {
color: #888;
background-color: white;
padding: 3%;
border-bottom: 1px solid #ccc;
}
.month span:first-of-type {
text-transform: capitalize;
margin-right: 15px;
}
.month span {
display: inline-block;
}
div.month:nth-of-type(1) span:nth-of-type(2),
div.month:nth-of-type(2) span:nth-of-type(2) {
background-color: #f44336;
color: white;
padding: 5px 10px;
}
div.month:nth-of-type(1) span:nth-of-type(2)::first-letter,
div.month:nth-of-type(2) span:nth-of-type(2)::first-letter {
text-transform: uppercase;
}
div.month:last-of-type {
position: relative;
}
div.month:last-of-type span:nth-of-type(2) {
background-color: black;
color: white;
border-radius: 50%;
padding: 4px 10px;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
}
.place {
float: left;
width: 33.33333%;
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
}
#media only screen and (min-width: 1000px) {
#band {
padding: 5% 30%;
}
.bandmember {
float: left;
width: 33.33333%
}
.bandmember img {
max-width: 60%;
}
}
<!-- from:
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<nav>
<ul>
<li>home</li>
<li>band</li>
<li>tour</li>
<li>contact</li>
<li>more <i class="fas fa-sort-down"></i>
<div>
merchandise
extras
media
</div>
</li>
<li id="search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
<div id="container">
<div id="bandpics">
<img id="chicago" src="https://www.w3schools.com/w3images/chicago.jpg" alt="Chicago">
<img id="la" src="https://www.w3schools.com/w3images/la.jpg" alt="LA">
<img id="ny" src="https://www.w3schools.com/w3images/ny.jpg" alt="NY">
</div>
<article id="band">
<h2>the band</h2>
<h4>we love music</h4>
<p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div id="bandmembers">
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
</div>
</article>
<article id="tourdates">
<h2>tour dates</h2>
<h4>remember to book your tickets!</h4>
<div class="month">
<span>september</span><span>sold out</span>
</div>
<div class="month">
<span>october</span><span>sold out</span>
</div>
<div class="month">
<span>november</span><span>3</span>
</div>
</article>
<article id="tourplaces">
<div class="place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>
</div>
Padding affects container size?
It depends, in this case it does, but only the height, not the width, since the width is defined.
Is it because the padding makes the image's width more narrow and then
the height automatically adjusts along with it, making the .place
content box longer?
That is partially correct, it does affect the size of the image and also affects the text inside, making the height bigger or smaller depending on the value of the padding.
It is difficult to see how the width of the container is not changing because you have background-clip: content-box; this makes the background clipping on the limits of the content, then there is a part of the container that you are not able to see, if you put a border, lets say border: 1px solid red; within your .place class you would be able to see left and right paddings.
For this case I would use flex or grid, a grid example: (notice that I defined the height of the first container to 500px and the others are stretching itself to fill all the remaining space)
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
#tourdates , #tourplaces {
background-color: black;
padding: 1% 10%;
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.place {
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
border: 1px solid red;
}
.place.first-place{
padding-left: 25px;
height: 500px
}
.place.second-place{
padding-left: 0px
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
}
<article id="tourplaces">
<div class="place first-place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place second-place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>
Reference images:
Required
Current
Bottom is my work, top is my goal or as close to as possible.
I have two questions, why won't my div go to the right side of the page?
and
I'm having trouble filling in h1 and div with colour and a boarder any help would
be appreciated
Here is my code that i've been working on, sorry im new to CSS and html still.
body {
background-image: url("bg.jpg");
}
div { background-color; #cccccc;
opacity: 0.8;
padding: 5px;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px
margin: 10px
position:absolute;
right: 0%;
top: 0%;
}
h1
{ background-color; #cccccc;
padding: 5px;
font-weight: bold;
font-size: 40px;
text-align: center
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif
width: 300px;
}
</style>
</head>
<body>
<header id="header">
<div class="h1">
<h1 style="color:DarkSlateBlue" text-align: center;>Rythm and Blues</h1>
</div>
<div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
Wouldn't fit in comments. Below is some fixes to your syntax.
<style>
body {
background-image: url("bg.jpg");
}
.div {
background-color: #cccccc;
opacity: 0.8;
width: 200px;
height: 200px;
border: 3px ridge #cccccc;
padding: 5px;
margin: 10px;
position:absolute;
right: 0%;
top: 0%;
}
.h1
{ background-color: #cccccc;
font-weight: bold;
font-size: 40px;
text-align: center;
opacity: 0.8;
position:absolute;
left: 45%;
top: 60%;
font-family,sans-serif;
width: 300px;
}
</style>
</head>
<body>
<div class="h1">
<h1 style="color:DarkSlateBlue;text-align: center;">Rythm and Blues</h1>
</div>
<div class="div">
<h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
<p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
</div>
</body>
I'm having this problem with a page I'm creating.screenshot
Here is the code for the html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
and css:
#charset "UTF-8";
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
How can I make my content come after my menu, not under it?
Since your navigation is position fixed, you have to push down the content using padding or margin. First set body margin to 0. Then add padding-top: 60px; to div#interface. That should be a good starter. And of course try to learn something about block elements, inline elements, floating elements and check their different behavior regarding layouting.
You need to update your css for div#interface
div#interface{
width: 900px;
background: #fff;
margin: 67px auto 0 auto;
padding-top: 20px;
}
I hope this may help:
Change it according to your requirements. Especially add style in separate file.
You need to shuffle your HTML markup and add position fixed to div#interface I suggest change its width to 100%
here is the working code:
<head>
<meta charset="UTF-8"/>
<title>JJ TECH</title>
<style>
body{
font-family: Arial, sans-serif;
background: #370b44;
}
div#interface{
width: 900px;
background: #fff;
margin: -20px auto 0 auto;
padding: 20px;
position:fixed;
top:71px;
}
p{
text-align: justify;
text-indent: 30px;
}
/*CONFIGURAÇÃO DO MENU*/
nav#menu h1{
display: none;
}
nav#menu ul{
background-color: rgba(0,0,0,.5);
overflow: hidden;
list-style: none;
display: block;
font-size: 13pt;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
nav#menu li{
float: left;
/*border-right: 1px solid #555;*/
}
nav#menu li:hover:not(.active){
background: #000;
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 15px;
}
.ativo{
background: #751891;
}
</style>
</head>
<body>
<header id="cabecalho">
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li>Home</li>
<li>Informações</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div id="interface">
<p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
</div>
</body>
I seem to be constantly running into this problem, and I'm not sure where I'm making the mistake.
I have a main-body div that is holding a background-color that I want as the background of the page. Within the dive I've got a section class with the little sections that are going to be copied over and over again with just the content changed.
If you scroll to the bottom, you'll notice that the background of the main-body div isn't really 100% and leaves this white bar. How might I go about fixing this?
*
{
margin: 0;
padding: 0;
}
#header
{
height: 230px;
width: 100%;
background-color: #0099CC;
display: block;
}
#headerFixedWidth
{
width: 85%;
height: 230px;
//border: 1px solid #ccc;
margin: 0 auto;
}
#nav
{
//border: 1px solid #ccc;
height: 35px;
width: 700px;
margin: 0 auto;
margin-top: 40px;
}
#mainBody
{
background-color: #F1F4F9;
width: 100%;
//height: 100%;
margin-bottom: 30px;
}
.left-content
{
height: 550px;
width: 581px;
background-color: white;
margin-left: 20px;
}
.title
{
font-family: 'Lato', sans-serif;
color: #ccc;
font-size: 37px;
font-weight: bold;
color: #4E5E6A;
margin: 20px 30px;
text-shadow: rgba(78, 94, 106, .2) .1px .1px 2px -1px;
}
.author-subline
{
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: bold;
color: #4E5E6A;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 30px;
}
.article-text
{
font-family: 'Lato', sans-serif;
font-size: 17px;
color: #4E5E6A;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 10px;
line-height: 1.56;
}
.readMore
{
font-family: 'Lato', sans-serif;
font-size: 13px;
color: #4E5E6A;
margin-top: 15px;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 10px;
}
<div id="header">
<div id="headerFixedWidth"></div>
</div>
<div id="mainBody">
<section class="left-content">
<p class="title">Minim perferendis placeat</p>
<p class="author-subline">Minim perferendis placeat modi</p>
<p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p>
<p class="readMore">Read More</p>
</section>
<section class="left-content">
<p class="title">Minim perferendis placeat</p>
<p class="author-subline">Minim perferendis placeat modi</p>
<p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p>
<p class="readMore">Read More</p>
</section>
<section class="left-content">
<p class="title">Minim perferendis placeat</p>
<p class="author-subline">Minim perferendis placeat modi</p>
<p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p>
<p class="readMore">Read More</p>
</section>
<section class="left-content">
<p class="title">Minim perferendis placeat</p>
<p class="author-subline">Minim perferendis placeat modi</p>
<p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p>
<p class="readMore">Read More</p>
</section>
</div>
It is because of the #mainBody having a margin:
Just remove the margin-bottom and it will be alright.
#mainBody {
background-color: #F1F4F9;
width: 100%;
margin-bottom: 0; /* Do this... */
}
Yo do not need a margin at the body (I also don´t know why are you using this...):
#mainBody {
background-color: #F1F4F9;
width: 100%;
}
If you just change the #mainBody CSS property margin-bottom you should be fine!
#mainbody{
background-color: #F1F4F9;
width: 100%;
//height: 100%;
margin-bottom: 30px;
}
To this
#mainbody{
background-color: #F1F4F9;
width: 100%;
//height: 100%;
}