I am building a website and have come across an issue. The background color does not reach the position I would like it to be. It is only across half the screen instead of the full page. I need it to be a bit higher. I am not sure how to do this.
It is only across half the screen. How do I fix this? If you need more information, feel free to ask.
#aboit {
width: 100%;
height: 200vh;
background-color: lightgrey;
}
#aboit .block3 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
#aboit .block4 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
.container {
text-align: center;
}
#aboit .toixte {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
}
#aboit .toitle {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
font-weight: 50px;
}
<section id="aboit">
<div class="container">
<div class="block3"></div>
<div class="block3"></div>
</div>
<div class="container">
<div class="block4"></div>
<div class="block4"></div>
</div>
<div class="container">
<div class="toitle">
<p><b>About Us</b>
<p>
</div>
</div>
<div class="container">
<div class="toixte">
<p>We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
</div>
</p>
</p>
</div>
</div>
</section>
remove background-color: lightgrey; from #aboit and style in this way:
#aboit {
position:relative;
}
#aboit::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60% // you can change to fit
background-color: lightgrey;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.about {
background: lightgray;
height: 100vh;
}
.all {
display: flex;
justify-content: space-between;
}
.about-description {
text-align: center;
margin: 150px;
}
.blocks {
display: grid;
grid-template-columns: auto auto;
margin-top: 50px;
}
.block {
background-color: #ffe4f1;
width: 225px;
height: 225px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="about">
<div class="container">
<div class="all">
<div class="about-description">
<h2>About Us</h2>
<p align="center">We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
</section>
</body>
</html>
Related
I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.
.page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400px;
outline: 5px dashed green;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: stretch;
background-color: red;
margin: -5px;
padding: 10px;
}
.column.left {
border-right: 0px;
}
.column.right {
border-left: 0px;
background-color: yellow;
}
<div class='page-wrapper'>
<div class='row'>
<div class='column left'>
Column 1
</div>
<div class='column right'>
Column Two
</div>
</div>
</div>
Try this, is this what you want to achieve?
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 681px;
width: 200px;
float: right;
background-color: #FEDA6A;
top: -3px;
right: -3px;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.
#pad {
float: left;
}
#kaart {
display: block;
transform: translateX(-30px);
text-align: center;
}
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 520px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
margin-right: 1.8rem;
/* Positioning */
position: sticky;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
</div>
In this application, a column covering 33.3% and 66.6% of a container was created using Bootstrap 5. The second column, occupying 66.6% of the space inside the container, was divided into two separate 40% and 60% columns. Application test image and developed solution are available below.
#pad {
float: left;
}
#weertekst {
font-weight: bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest {
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.specialColumn {
float: left;
}
.left {
width: 40%;
}
.right {
width: 60%;
}
.specialRow:after {
content: "";
display: table;
clear: both;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div style="margin: 75px;">
<div class="row">
<div class="col-md-4" style="margin: 0px !important; padding: 0px !important;">
<div id="pad" style="width: 100% !important;">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag">
<h3>Vandaag</h3>
</div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden">
<h3>
<!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
</div>
<div id="directie">
<h3 id="nbold">Windrichting:<br></h3>
<h3><span id="winddir"></span></h3>
</div>
<div id="snelheid">
<h3 id="nbold">Windsnelheid:<br></h3>
<h3><span id="windspeed"></span></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" style="margin: 0px !important; padding: 0px !important;">
<div class="specialRow">
<div class="specialColumn left" style="background-color:#aaa; height: 515px;">
<h1 class="text-center">%40</h1>
</div>
<div class="specialColumn right" style="background-color:#bbb; height: 515px;">
<h1 class="text-center">%60</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm working on webpage and divided it into several divs before adding text in it.
but when i put some text in one of that divs, all divs position just collapses.
I've made simple code to show the problem.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Issue</title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
As you can see, it is divided well without problem(at least in my opinion)
But as soon as you add the text in the div, it just collapse and I can't see why.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
p{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
It collapses whether p tag exists or not.
Divs are positioned with %unit and it is relative.
So it should be relevent only to it's parent and brothers in my thought.
Should I reallocate all of them with absolute position?
If you know why, or have solution, please teach me.
thank you!
Put vertical-align: top; to .box by default it has vertical-align: baseline;
.box {
display: inline-block;
vertical-align: top;
position: relative;
background: black;
}
Alternative beside Ismail Farooq's answer
.box {
display: block;
position: relative;
background: black;
float: left;
}
I am using flexbox link is Flexbox here
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 49%;
}
#box-2{
height: 50%;
width: 49%;
}
#box-3{
height: 50%;
width: 49%;
}
#box-4{
height: 50%;
width: 49%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
</body>
</html>
I want to have the right column of the main body to be split into two. At the moment I only would like a bottom border showing as an outline but can't get it to work. It is the #map section that I would like to change.
I have tried a couple of different things but can't figure it out, I have probably just missed something but I can't figure out what.
HTML Code:
<!DOCTYPE HTML>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.mainSect {
height: 200%;
background-color: #FEDB00;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
opacity: .6;
position: relative;
margin-top: -12px;
border: 2px solid black;
}
#news {
position: absolute;
width: 70%;
height: 100%;
border-right: 2px solid black;
}
#map {
position: absolute;
width: 20px;
height: 20px;
margin-left: 600px;
border-bottom: 2px solid black;
}
</style>
<html>
<head>
<title>Waitemata FC - NEWS </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
NEWS
<a href="index.html">TEAMS
<ul class="subMenu">
<li>Juniors</li>
<li>Youth</li>
<li>Seniors</li>
</ul>
</a>
REGISTRATION
GALLERY
SPONSORS
ABOUT
</div>
<div class="imgSect">
<img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
<p class="name">WAITEMATA AFC </p>
</div>
FaceBook Page
<div class="mainSect">
<div id="news">
</div>
<div class="map">
<p>test </p>
</div>
</div>
<footer>
</footer>
</body>
</html>
First, to divide the main body, you must have a container section and inside it to have the right & left columns,
For Ex:
<body>
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="column-header">
</div>
</div>
</div>
</body>
<style type="text/css">
body {
width: 100%;
height: auto;
}
.container {
width: 1200px;
/*for ex. height:auto;*/
padding-right: 20px;
padding-left: 20px;
}
.left-column {
width: 70%;
/*or in px;*/
height: auto;
float: left;
}
.right-column {
width: 30%;
height: auto;
float: left;
}
.column-header {
width: 100%;
height: 50px;
/*change it as you wish;*/
}
</style>
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...