Does someone know how to fix
this issue?
There's green around, I'd like to known how to remove/let the other color go over it.
Here is the CSS file, I do have 2 css files, not sure if thats a problem.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
overflow: hidden;
background-color: #c4a1a2;
}
.content-wrapper{
width: 80%;
margin: 4% 10% 5% 10%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper{
width: 100%;
position: relative;
margin-top: -40%;
}
.text-wrapper h1{
text-align: center;
color: #ffffff;
font-size: 10vw;
font-family: 'lobster', cursive;
<!-- New CSS post -->
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Over Image</title>
<link rel="stylesheet" href="text_over_image.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<img src="https://i.stack.imgur.com/YE31e.png">
<div class="text-wrapper">
<h1>Welkom!</h1>
</div>
</div>
</body>
</html>
Sorry if I'm making mistakes, I'm new here and new to programming in general.
Missing Picture: enter image description here
*Second CSS file starts after
Related
i'm making a website and i have encountered several errors in the code. any help would be appreciated, thanks in advance.
the errors are:
i want the body of the website to be in the centre of the screen, not at the top
i want to add two columns in the main box, but the columns aren't showing. i did add code to fix this table problem but i don't think it's working
here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAINWEB</title>
<meta name="keywords" content="Neocities, HTML, aesthetic, web 1.0, old web, 90's, 80's, early 2000's,personal website,">
<style>
#font-face {
font-family: hearts;
src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf') format('truetype');
}
#font-face {
src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
font-family: hantam;
}
html {
font-size: 17px;
line-height: 14px;
font-family: "hearts";
padding: 5px;
cursor: url("/images/cursors/torocursor.png"), auto;
scrollbar-color: #f48ee6 #fad1e8;
}
body {
margin-left: auto;
margin-right: auto;
background-image: url("https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590");
}
a {
text-decoration: none;
color: #ef8a85;
}
a:hover {
cursor: url("/images/cursors/torocursorpoint.png"), auto;
color: #00b2c5;
}
hr {
border-top: solid 1px;
border-color: #b6a898;
}
p {
margin: 10px;
}
h1 {
font-family: hantam;
font-size: 30px;
color: #F9A1CC;
line-height: 18px;
margin: 0px;
font-weight: normal;
text-align: center;
}
.table1 {
margin-left: auto;
margin-right: auto;
display: block;
border-spacing: 0px;
border-collapse: collapse;
width: 812px;
}
.table1 td {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.table1 tr {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.headbox {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-radius: 4px;
height: 80px;
width: 800px;
position: relative;
padding: 10px;
}
.footbox {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 900px;
padding: 0px;
height: 100px;
text-align: center;
}
.titleimg {
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
bottom: -20px;
left: -15px;
z-index: 10;
}
.bar1 {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 5px;
padding-bottom:50px;
width: 170px;
min-height: 100px;
margin-top: 7px;
position: relative;
}
.mainbox {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 20px;
width: 570px;
height: 400px;
margin-left: 4px;
margin-top: 7px;
position: relative;
.column {
float: left;
width: 37%;
padding: 10px;
.row:after {
content: "";
display: table;
clear: both;
}
}
li {
list-style: none;
margin-bottom: 5px;
}
.hder {
margin-left: -5px;
border-top: 1px solid #b6a898;
padding: 2px;
list-style: none;
width: 176px;
font-family: "MS UI Gothic", Tahoma;
font-weight: bold;
margin-bottom: 5px;
color: white;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>
<div class="bar1">
<li>about
</li>
<li>reading diary
</li>
<li>music
</li>
</li>
</ul>
</div>
</td>
<td>
<div class="mainbox">
<div class="row">
<div class="column">
</div>
<img src="https://barbara.crd.co/assets/images/gallery34/c3f48eed_original.gif?v=078d66a6">
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</td>
</tr>
</table>
<div class="footbox">
</div>
</body>
</html>
Try this for 1:
Add this to your body style:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Remove margin (optional)
How can I make this textarea (the one with class="proxi-output" responsive?
When I try to resize the page it overlaps div (class="resi-gen") and it breaks the whole web.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-image: url(../img/agreya-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-color: #0E0E0E;
}
.side-panel{
background-color: #050707;
height: 100vh;
width: 250px;
margin: 0px;
z-index: 10;
position: absolute;
}
.logo{
margin: 0px;
color: #FFFFFF;
padding: 35px 20%;
letter-spacing: 2px;
}
.sub-pages{
text-align: center;
justify-content: center;
margin: 150px auto;
}
.sub-pages a{
display: block;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
margin: 45px 0px;
}
.sub-pages a:hover{
color: #E1E777;
}
#current{
color: #E1E777;
}
.heading{
color: #FFFFFF;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
}
.wrapper{
float: right;
width: 100vw;
height: 100vh;
margin: 0px;
}
.resi-gen{
position: relative;
background-color: #050707;
margin-top: 20%;
width: 70%;
height: 45%;
border: 2px solid transparent;
border-radius: 50px;
/* width: 1100px;
height: 400px; */
margin-left: 290px;
}
.resi-gen h2{
display: inline-block;
color: #FFFFFF;
margin-top: 20px;
margin-left: 30px;
font-weight: 500;
letter-spacing: 1.5px;
}
#proxi-output{
position: absolute;
margin-top: 2%;
margin-left: 5%;
height: 85%;
width: 70%;
resize: none;
background-color: #818181;
cursor: pointer;
outline: none;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/residental.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/29441bec37.js" crossorigin="anonymous"></script>
<title>Agreya - Register</title>
</head>
<body>
<div class="wrapper">
<div class="side-panel">
<h1 class="logo">AGREYA</h1>
<div class="sub-pages">
<a id="current" href="residental.html">Residental</a>
Datacenter
Purchase
Settings
</div>
</div>
<h1 class="heading">Residental proxies</h1>
<div class="resi-gen">
<h2>Generate Proxies</h2>
<textarea id="proxi-output" name="output"></textarea>
</div>
</div>
</body>
</html>
Problem: I have to arrange these LI in a very specific way. Here is the image:
but I can't seem to break the boxes up. I have tried Flexbox, ClearFix, etc... no luck.
Please look at the picture so you can see how I am suppose to make this look.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 80%;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
Welcome to SO, Its simple use column-count: property on ul
Here is updated snippet.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 100vh;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: 100vh;
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
I would suggest you use the id you have given the <ul> tag i.e boxlist and then apply the display as flex this way all your li elements will be in a flex box.Then work with the <li> elements as flex box elements here is a link that could help you out:-
https://www.w3schools.com/css/css3_flexbox.asp
I would highly recommend you to use grid as it can be more usefull and I like it better than flex box,here is the link you can use to refer how a grid box is used:-
https://www.w3schools.com/css/css_grid.asp
Gridview
<ul class="gridview grid-3">
<li><p>Hello<br>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
display: block;
float: left;
padding: 0;
margin: 0;
}
ul.gridview > li p {
background: #ddd;
padding: 5px;
margin: 0;
}
/* Grid-3 */
ul.grid-3 > li {
width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
margin-left: 10px;
}
/* Grid-4 */
ul.grid-4 > li {
width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
margin-left: 10px;
}
Codepen
I have this list:
How can I make the list be in line with the top bar, ie. the total width of the list will be 960px just like the top bar?
I don't understand why it isn't working. The size of each of the squares is 159px + 1px for margin, and yet they make a profit from the right that I didn't define.
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2TheGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo_bg">2Tg</div>
</header>
<article id="games">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</article>
</div>
</body>
</html>
Try this
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>