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>
Related
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.
I'm trying to build a website with Bootstrap and i'm finding problems with the navbar. Even though i use the class 'fixed-top', it just won't stay on top as soon as i scroll down.
I think this is a problem with the relative positions of the slides that are creating the page, but i don't know how to fix it and i'm not finding anything online.
#import url(https://fonts.googleapis.com/css?family=Bree+Serif);
.nav-titolo {
float: left;
text-align: center;
}
.navbar-brand {float:none;}
#titolo {
height: 200px;
font-size: 400%;
font-family: Bree Serif;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Bree Serif;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.back {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
/*
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("https://lorempixel.com/640/480/abstract/6/");
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide1:before {
background-image: url("https://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
}
#slide2 {
background-image: url("https://lorempixel.com/640/480/abstract/3/");
z-index:2;
}
#slide3:before {
background-image: url("https://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
}
#slide4 {
background: #222;
}
.navbar{
background:#F97300;
}
.nav-link , .navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
.navbar-toggler{
background:#fff !important;
}
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link rel= "stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class = "nav-titolo"><a class="navbar-brand" href="#">Colorizer</a></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#slide1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">Section 4</a>
</li>
</ul>
</nav>
<div id="title" class="slide header">
<h1 id = "titolo"> Colorizer </h1>
</div>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img class="back" src="https://lorempixel.com/640/480/abstract/6/">
<img class="back" src="https://lorempixel.com/640/480/abstract/4/">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
What about :
CSS:
.navbar {
position: fixed;
top: 0;
}
With CSS, you can add the following code:
.navbar {
position: fixed;
}
to your navbar class. That will ensure that the navbar will stay at the top of the screen.
Near line 4202 of bootstrap.css it the class should be called .navbar-fixed-top.
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
Code and Codepen:
.wrapper1 {
overflow: hidden;
width: 700px;
border: 1px solid #000000;
padding: 20px;
}
.wrapper2 {
float: left;
width: 150px;
}
.content1 {
width: 100px;
border: 1px solid #000000;
margin-bottom: 20px;
padding: 10px;
background-color:#ffffff;
}
.content2 {
float: right;
width: 500px;
border: 1px solid #000000;
margin-bottom: 20px;
padding: 10px;
background-color:#ffffff;
}
.content2, .wrapper2 {
margin-bottom: -500em;
padding-bottom: 500em;
}
.wrapper3 {
clear: both;
}
<div class="wrapper1">
<div class="wrapper2">
<div class="content1">
text
</div>
<div class="content1">
text
</div>
</div>
<div class="content2">
text
</div>
</div>
<div class="wrapper3"></div>
I want to make it so content2 is at minimum the same height as wrapper2, whose height changes with content. Tried adding and subtracting padding and margin but it ended up with content2 stretching to the bottom of wrapper1. I want content2 to end at the bottom of the second content1 box.
You can use flex to do this. By default, children of the flex parent will display in a row and stretch to fill the height of the parent.
.wrapper1 {
width: 700px;
border: 1px solid #000000;
padding: 20px;
display: flex;
}
.wrapper2 {
width: 150px;
}
.content1 {
width: 100px;
border: 1px solid #000000;
margin-bottom: 20px;
padding: 10px;
background-color:#ffffff;
}
.content2 {
width: 500px;
border: 1px solid #000000;
margin-bottom: 20px;
padding: 10px;
background-color:#ffffff;
}
<div class="wrapper1">
<div class="wrapper2">
<div class="content1">
Lorem ipsum dolor sit amet, duo magna persius an.
</div>
<div class="content1">
Lorem ipsum dolor sit amet, duo magna persius an.
</div>
</div>
<div class="content2">
Lorem ipsum dolor sit amet, duo magna persius an. Cu adhuc iusto vel, sed ei vidit inciderint. Mel at duis quidam incorrupte, autem omnium ne mei. Ferri iudicabit et eos. Mei ex detraxit atomorum evertitur.
</div>
</div>
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 am currently trying to achieve this effect:
and I have gotten very close, Here's what I have so far:
JSFIDDLE DEMO
CSS:
.block {
margin-top: 1em;
position: relative;
overflow: auto;
height: 100%;
width: 100%;
float: left;
}
.icon {
background: #000000;
display: inline-block;
height: 50px;
width: 112px;
}
.line {
position: absolute;
background: #000099;
width: 100%;
height: 1px;
z-index: -1;
top: 50%;
left: 0;
margin-left: -416px;
}
.text {
/*background: #004746;*/
display: inline-block;
position: relative;
vertical-align: middle;
max-width: 400px;
float: right;
border-left: 1px solid #000099;
padding-left: 1em;
}
.text:after {
content:"";
background: #000099;
position: absolute;
bottom: 0;
left: 0;
width: 1em;
height: 1px;
}
.text:before {
content:"";
background: #000099;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1px;
}
.text p {
padding: 0 0 1em 0;
}
.text p:last-child {
margin: 0;
}
HTML:
<div class="block">
<div class="icon"></div>
<div class="line"></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, pri eu liber utroque quaestio, ei dicta quaeque sed. Civibus omnesque concludaturque vim eu, ex his nostro quodsi, graecis commune posidonium mei ad. Nam facilis alienum fastidii te, te quando euripidis usu. Torquatos consetetur suscipiantur mel eu, duo cu impedit feugait.</p>
<p>Vocibus urbanitas suscipiantur pro ut, cu nisl nobis nonumy mel. Posse omnes urbanitas usu in, nusquam invidunt ad sed, mucius recusabo has ea. Aliquip voluptua ius eu, ex vix justo mundi, indoctum scripserit mei cu. Te sit tantas albucius probatus.</p>
</div>
</div>
My only problem is the box on the left ("icon"), needs to vertically align with the line that runs through. But the box can not be position absolute.
RULES:
Has to be responsive.
Needs to work from IE8 up.
Needs to account for the fact that the text on the right is dynamic and could grow or shrink.
add this code to your .icon class:
.icon {
position: absolute;
top: 50%;
margin-top: -25px;
}