I have the next CSS for my header:
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.fullwidth {
width: 100%;
}
.fullheight {
height: 100%;
}
.navbar {
width: 100%;
height: 84px;
background: #4F46C8 url("../img/logo.png") no-repeat;
}
.sidebar-container {
float: left;
width: 250px;
}
.sidebar {
color: white;
background-color: #0091a8;
width: 100%;
height: 100%;
position: relative;
overflow-y: scroll;
padding: 20px 16px 16px 16px;
}
.sidebar ul {
list-style: none;
}
.sidebar li::before {
content: "- ";
}
.content {
width: auto;
margin-left: 280px;
}
.content iframe {
width: 100%;
height: 100%;
position: relative;
display: block;
border: none;
}
.page {
padding: 20px 16px 16px 16px;
}
.page h2 {
color: #0091a8;
}
.row {
width: 100%;
height: 100%;
clear: both;
box-sizing: border-box;
}
.sidebar a {
color: white;
}
.text-centered {
text-align: center;
}
The color #2874c2 is a color from that picture that was taken in Gimp 2. And in the image viewer the picture looks lighter than in browser. I checked a color in the browser it's #4F46C8.
My html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="application/javascript" src="js/app.js" async></script>
</head>
<body>
<div class="navbar">
</div>
</body>
</html>
What can be wrong?
P.S. The picture isn't transparent.
Related
The space is not between the inline block elements. it's happening before the first li and after the last li. The padding does not add up to 100% because of this. I have tried removing the white space and it doesnt sem to be helping because its not showing space between the inline elements.
HTML:
header {
width: 100%;
}
body {
margin: 0;
height: 100%;
}
#page {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#backgroundimg {
display: none;
opacity: 0.4;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#navpane {
text-align: center;
height: 60px;
width: 100%;
background: #d7dfed;
position: absolute;
opacity: 0.4;
top: 0;
}
#options {
list-style: none;
max-width: 100%;
margin: 0;
padding: 0 10%;
}
#options li {
display: inline-block;
padding: 0 10%;
margin: 0;
text-align: none;
}
#options a {
float: left;
font-size: 30px;
padding: 15px 0px;
}
#shirtdrop {
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#shoedrop {
max-width: 140px;
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#pantsdrop {
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#photochanger {
position: absolute;
height: 20%;
width: 70%;
border: black;
border-width: 1px;
border-style: solid;
bottom: 45%;
left: 15%;
}
<!DOCTYPE HTML>
<html id="page">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg">
<div id="navpane">
<ul id="options"><li><button id="shirtdrop"><a>Shirts</a></button></li><li><button id="shoedrop"><a>Pants</a></button></li><li><button id="pantsdrop"><a>Shoes</a></button></li></ul>
</div>
<div id="photochanger">
<img>
</div>
</body>
</html>
There's a couple reasons for your mysteriously additional space:
You are using an unordered list item (ul) which gets a small padding by default from most browsers.
You are adding your own padding to your ul and li elements.
Solution
Remove your paddings on your li and ul styles and use flexbox. Simply apply a display: flex; on the parent element, then flex (flex: 1) each child element. Now they should always fit perfectly into the the parent container, no matter how big or small your screen resizes. Using flexbox also means you no longer have to go through the pain of adding up your percentages to ensure that you use 100%.
header {
width: 100%;
}
body {
margin: 0;
height: 100%;
}
#page {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#backgroundimg {
display: none;
opacity: 0.4;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#navpane {
text-align: center;
height: 60px;
width: 100%;
background: #d7dfed;
position: absolute;
opacity: 0.4;
top: 0;
}
#options {
list-style: none;
max-width: 100%;
margin: 0;
display: flex; //add this
//padding: 0 10%; ---> remove this
}
.option {
display: inline-block;
flex: 1; // add this
//padding: 0 10%; ---> remove this
margin: 0;
text-align: none;
}
#options a {
float: left;
font-size: 30px;
padding: 15px 0px;
}
#shirtdrop {
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#shoedrop {
max-width: 140px;
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#pantsdrop {
background-color: inherit;
outline: none;
border: none;
padding: 0;
}
#photochanger {
position: absolute;
height: 20%;
width: 70%;
border: black;
border-width: 1px;
border-style: solid;
bottom: 45%;
left: 15%;
}
<!DOCTYPE HTML>
<html id="page">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg">
<div id="navpane">
<div id="options">
<div class="option"><button id="shirtdrop"><a>Shirts</a></button></div>
<div class="option"><button id="shoedrop"><a>Pants</a></button></div>
<div class="option"><button id="pantsdrop"><a>Shoes</a></button></div>
</div>
</div>
<div id="photochanger">
<img>
</div>
</body>
</html>
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;
}
}
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
I'm currently trying to get a logo to appear side by side with my header, I can target the logo background just fine however when I try to change the header color it doesn't allow me to. I have tried changing the float to left right and center, center is the best to me personally. Any idea as to why I can change the header color? I posted the code below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
U can't use float for center. If u wanna side-by-side sorting, u use float. But u must use align or text-align for placement to center. Add this code:
.header{
text-align: center;
}
If you want add another logo or text and you want they don't see this you can use div and use this code:
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
Here is what I had to do to get the proper results. Both #freginold and #edomingo1 helped resolve the issue. I had to move the div and img to the body from the head, then had to add a id="header" as well to my div which allowed me to make the proper change. Thanks for all the feedback appreciate it :)!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0em;
margin: 0em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: top;
background: #000000;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">
<img src="logo.png" alt="logo"/>
</div>
What are you trying to get the colour on its in its own braces, look at the braces around colour.
You are using a class selector in your HTML markup, but an ID selector in your CSS. Try replacing div class="header" with div id="header" to see the expected results.
You've included your div and img in the head of the document, rather than the body. See the example below. I moved your header into the body, and changed the color to yellow just to show that it can be targeted. (Obviously, the image doesn't load here.)
.header {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
</body>
</html>
I am working on my second project for the web (self taught) and I have a newbie question.
I have a mock up header and footer in my page which have both a height of 100px. I am trying to change this so that the height is in percentages but when I do so they collapse. Why?
Code:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons" onclick="change(-1);">
</div>
<div id="next" class="buttons" onclick="change(1);">
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Poem</p>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
<script type="text/javascript" src="JavaScript2.js"></script>
</html>
CSS
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}
#header {
position: relative;
height: 100px;
width: 100%;
background-color: yellow;
}
#wrap {
position: relative;
clear: both;
padding: 0px;
width: 100%;
}
#footer {
position: relative;
height: 100px;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
position: relative;
margin: 15px auto;
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 10px;
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
}
#next {
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
z-index: 4;
background-position: center center;
}
#container:hover .buttons {
/* display: block;*/
opacity: 1;
}
#tag {
position: relative;
height: 40px;
line-height: 1.7em;
padding-top: 5px;
text-align: center;
font-size: 1.1em;
}
.buttons {
cursor: pointer;
top: 50%;
z-index: 3;
/* display: none;*/
opacity: 0;
transition: opacity .3s ease-in-out;
}
#imagewrap{
position: relative;
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
height: 100vh;
}
#front {
display: block;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
For the container to fill the height of the screen, you could try this:
html, body {
height: 100%;
}
please try to do this:
#footer {
height: 10vh;
}
10vh = 10% of the viewport's height
besides of directly setting the percentage, you can also do calculations, such as making the height of footer equals to the height of the viewport minus 800px by doing this:
#footer {
height: calc(100vh - 800px);
}