body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Major</h1>
</body>
</html>
--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="gallery">
<h1>Gallery</h1>
</body>
</html>
-------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="contact">
<h1>contact</h1>
</body>
</html>
I am creating a website for school... but I haven't been able to link the different HTML pages to the css (for changing the background color etc...)I have 4 HTML pages, I don't know if I have to add divs or something like that, could you please help me to link those html with the main css ? .. I'm going to post the css page, and the three html pages. thank you so much, I would be so glad if you can help me with that.
You need to link your CSS style sheets to each page, in your case you will need to upload your CSS files to your server and reference them.
Convention dictates that they are added in the <head>, i.e:
<head>
<link href="PATH_TO_CSS_FILE.css" rel="stylesheet">
</head>
<body>
... page HTML ...
</body>
The snippet you have provided works as it should, the only CSS style that you have in your demonstration HTML (which I imagine is a condensed example) is the body tag.
If the CSS styles are not being applied to your working HTML pages then it is likely that you have not correctly linked the CSS stylesheet. You can check the console within your browser to see if there are any errors (i.e. if the stylesheet is not being loaded).
If you wanted your headings (h1) to use the effects you've dictated in .text, then you need to add the class to the element, i.e.:
<h1 class="text">About Me</h1>
I have shown a working snippet below.
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="text">About me</h1>
</body>
</html>
Classes must be applied to each element in order for the styles to take effect. If you want all headings to have the glow effect, etc that you have coded then you may want to think about changing .text to h1 in your stylesheet, so that you do not need to apply the class each time you create a header. For example:
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
h1 {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
your css is working but you have set the body background color to black and your text is also black
try replacing your first css rule with
body{
background-color: white;
margin-top: 45px;
}
Related
I want to change the colour of my toggle background as soon as checked. Unfortunately the attempt I tried does not work. I do not want to change the indicator colour! I am aware of the fact, that as soon as I exclude <input.. from the div, it works. But if I do so the animation doesn´t work any longer. Which would require a huge amount of work in my actually project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
Not the best answer tho, but this is best I can do without JS, just play round and improve CSS here and there, it will be fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-background {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
background-color: red;
transition: 0.4s;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #95f700,
8px 4px 12px 0px darkred;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
.toggle-state:checked ~ .toggle-background {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="toggle-background">
</div>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
You can use some JS code for listening the checked event of the checkbox,
create two different style class if checked or unchecked
like bellow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script
src="https://kit.fontawesome.com/39094309d6.js"
crossorigin="anonymous"
></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}
.green {
background-color: greenyellow;
}
.black {
background-color: black;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked > .indicator {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input id="mycheckbox" class="toggle-state" type="checkbox" />
<div id="indicateit" class="indicator"></div>
</div>
</label>
<script type="text/javascript">
var cb = document.getElementById("mycheckbox");
cb.addEventListener("change", function (e) {
console.log("Changed ");
if (this.checked) {
document.getElementById("indicateit").classList.remove("black");
document.getElementById("indicateit").classList.add("green");
} else {
document.getElementById("indicateit").classList.remove("green");
document.getElementById("indicateit").classList.add("black");
}
});
</script>
</body>
</html>
Could this work for you? I haven't tried it on multiple buttons...
Basically, just added an onchange event to your input. It calls a function that gets the input's parent, gets --onColor and --offColor variables from the CSS (.toggle class) and sets the background.
Note: If you decide to use this, you'll probably want to modify the CSS a bit to make the shadows look better and maybe add a transition to the color change.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
--onColor:green;
--offColor:red;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<script>
function changeToggleBg(el) {
const toggle = el.parentElement;
let onColor = getComputedStyle(toggle).getPropertyValue('--onColor');
let offColor = getComputedStyle(toggle).getPropertyValue('--offColor');
toggle.style.backgroundColor = (toggle.style.backgroundColor == offColor.replace(' ','')) ? onColor : offColor;
}
</script>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" onchange="changeToggleBg(this)" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
I have been trying to make a game where the user has to press a button that redirects to the game page.
I am new to HTML/CSS and I want the button to go underneath a header, but the button goes to the side of the header instead.
I've tried using the <br> tag after the header, tried using position:fixed and specifying top and bottom heights (this worked, but for different screen sizes, the button shifted out of place), and I have tried changing display:block but nothing worked.
Here is my code:
h {
color: rgb(0, 0, 0);
text-shadow: 1px 2px 5px black;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 30pt;
}
div {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.button {
float: left;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
background-color: #97d9f3;
border-color: rgb(0, 131, 192);
border-style: solid;
color: black;
padding: 15px 32px;
display: block;
font-size: 16px;
}
.button:hover {
background-color: rgb(90, 190, 236);
}
body {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
background-color: #84ceeb;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</div2>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h>
Un Jeu de Veux Tu Danser
</h>
<button class="button" onclick="window.location.href='game.html'">Commencer</button>
<script src="script.js"></script>
</body>
</html>
Have a great day,
thanks for all your help!
When you use flex-direction: column; on a flex-based parent element, the children each become rendered along the y-axis.
h {
color: rgb(0, 0, 0);
text-shadow: 1px 2px 5px black;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 30pt;
}
div {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.button {
float: left;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
background-color: #97d9f3;
border-color: rgb(0, 131, 192);
border-style: solid;
color: black;
padding: 15px 32px;
display: block;
font-size: 16px;
}
.button:hover {
background-color: rgb(90, 190, 236);
}
body {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
background-color: #84ceeb;
margin: 0;
padding: 0;
flex-direction: column; /* added */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</div2>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h>
Un Jeu de Veux Tu Danser
</h>
<button class="button" onclick="window.location.href='game.html'">Commencer</button>
<script src="script.js"></script>
</body>
</html>
I am trying to get the social media icons to display in a line rather than stacked on top of one another. I have tried changing the display to inline rather than block but all that happens is that the icons get smaller in size but remain stacked on top of one another.
Here's the code:
html {
font-size: 100%;
/*font-size : 16px;*/
}
/*Top Header*/
.header {
background: #e7e5e4;
}
.header_left {
width: 65%;
float: left;
}
.header_right {
width: 35%;
float: right;
background: #e7e5e4;
}
.header_right li {
margin-left: 45%;
padding-top: 15px;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 4.500em;
padding: 50px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
.header h2 {
font-size: 24px;
font-family: 'Niconne', cursive;
color: #131313;
text-align: center;
}
#font-face {
font-family: 'si';
src: url("../socicon/socicon.eot");
src: url("../socicon/socicon.eot?#iefix") format('embedded-opentype'), url("../socicon/socicon.woff") format('woff'), url("../socicon/socicon.ttf") format('truetype'), url("../socicon/socicon.svg#icomoonregular") format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: si;
src: url(../socicon/socicon.svg) format(svg);
}
}
.header .soc {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.header .soc li {}
.header .soc li a {
font-family: si!important;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-o-transition: .1s;
-ms-transition: .1s;
-moz-transition: .1s;
-webkit-transition: .1s;
transition: .1s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
text-decoration: none;
text-align: center;
display: block;
position: relative;
z-index: 1;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
margin-right: 8%;
color: #ffffff;
background-color: #e7e5e4;
}
.header .soc-icon-last {
margin: 0 !important;
}
.header .soc-twitter:before {
content: 'a';
}
.header .soc-facebook:before {
content: 'b';
}
.header .soc-linkedin:before {
content: 'j';
}
.soc-email1:before {
content: '<';
}
.header .soc a:hover {
z-index: 2;
-webkit-transform: scale(1.1);
transform: scale(1.1);
background-color: #3371b7;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Skramshots Photography</title>
<meta name="author" content="Mark Stewart" />
<meta name="description" content="This site is about photography by
Mark Stewart a.k.a. Skramshots" />
<meta name="keywords" content="HTML, CSS, Javascript, jQuery,
skramshots, photography">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" href="css/master2.css">
<link rel="stylesheet" type="text/css" href="css/imageeffects.css">
<link rel="stylesheet" type="text/css" href="css/blogsports.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link href="https://fonts.googleapis.com/css?
family=Niconne" rel="stylesheet">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
</head>
<body>
<div class="header">
<ul class="soc">
<div class="header_left">
<h1 class="elegantshadow">SkramShots Photography
</h1>
<br>
<h2>Move your mouse pointer over the images</h2>
<br>
</div>
<div class="header_right">
<li>
<a class="soc-twitter" href="https://twitter.com/skramshots"></a>
</li>
<li>
<a class="soc-facebook" href="https://www.facebook.com/webpage.skramshots"></a>
</li>
<li>
<a class="soc-linkedin " href="https://www.linkedin.com/in/mark-stewart-8315443?trk=hp-identity-
name"></a>
</li>
<li>
<a class="soc-email1 soc-
icon-last btn lightbox-61896367686376 email" href="https://form.jotformeu.com/61896367686376"></a>
</li>
</div>
</ul>
<br>
</div>
</body>
</html>
I don't know how to attach the socicon.eot, svg, ttf or woff which I am using so I hope the code makes sense without them.
What I am actually doing is trying to implement a media query for mobile to have the icons display in a line but I am just trying to get it working as normal first `
First off remove margin-left: 45%; from .header_right li. That style is pushing those lis to the right, which is forcing them to stack.
You will then just need to add display:inline-block; or float:left; to .header_right li selector to make them display in a line.
I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I am having a very strange problem, and I'm not sure of the cause. Elements on my page are not sticking to their defined places, rather, they are 'jumping' upwards.
My current layout looks thus, with the HTML and CSS below:
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share.</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="stylesheet" href="fonts.css" type="text/css" />
</head>
<body>
<header>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<section id="header_search">
<form id="search" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</section>
</header>
<div id="content">
<div id="home_banner">
<h1>Discover. Watch. Share.</h1>
<h2>Screening. Your movie database.</h2>
</div>
<form id="homesearch" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</div>
<footer>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home | </li>
<li>About | </li>
<li>Privacy Policy</li>
</ul>
</nav>
<p id="copyright">©Screening 2012</p>
</footer>
</body>
</html>
CSS
/* HTML reset */
html, * {
margin: 0px;
padding: 0px;
}
/* General styling */
body {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 1em;
color: white;
background-color: black;
line-height: 20px;
letter-spacing: 1.5px;
}
/*Custom link styles*/
a:link {
color: white;
background-color: transparent;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #b70000;
background-color: transparent;
text-decoration: underline;
}
.logo a:link {
text-decoration: none;
}
.logo a:hover {
color: #b70000;
background-color: transparent;
}
/* Header styling */
header {
margin-bottom: 20px;
}
header, footer {
height: 50px;
padding-left: 50px;
padding-right: 50px;
font-size: .75em;
clear: both;
}
header nav, .logo, footer nav {
float: left;
}
header nav, footer nav, #header_search, #copyright {
margin-top: 20px;
}
header li, footer li {
display: inline;
}
#header_search {
width: 200px;
float: right;
clear: right;
}
#search input, #homesearch input {
padding: 0px 20px 0px 20px;
color: #d7d7d7;
background-color: #2d3035;
border: solid 4px #2a2e31;
}
#search input:focus, #homesearch input:focus {
outline: none;
background-color: white;
color: #6a6f75;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#search input {
width: 80%;
height: 25px;
font-size: 1.5em;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
/* Logo styling */
.logo {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-size: 3em;
width: 200px;
margin-right: 10px;
clear: left;
border: solid 1px red;
}
/* Content wrapper */
#content {
width: 90%;
max-width: 1500px;
margin: auto;
padding: 30px 15px 30px 15px;
clear: both;
overflow: auto;
background-color: rgba(203,203,203,0.2);
background-image: url(assets/images/bkg.png);
background-repeat: repeat;
}
/* Homepage */
#home_banner {
padding-top: 50px;
font-weight: normal;
text-align: center;
border: solid 1px red;
}
#home_banner h1 {
font-size: 5em;
clear: both;
border: solid 1px blue;
}
#home_banner h2, #search input, #homesearch input, #searchresults, #details .title {
font-family: 'RobotoThRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
}
#home_banner h2 {
font-size: 1.8em;
clear: both;
border: solid 1px yellow;
}
#homesearch {
width: 480px;
margin: 80px auto 70px auto;
clear: both;
}
#homesearch input {
width: 90%;
font-size: 2em;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
I have added borders to each element I am having trouble with for clarity purposes. I had originally laid out everything correctly, however something has cocked up somewhere and I can't for the life of me figure it out; I've been struggling with this for weeks! I'm pretty sure it's something small and simple, but the solution is completely avoiding me.
Obviously, the intended result should be something like below (ignore the presentation of the search bar, this is an early mockup before the search bar was amended):
Just kill the fixed line height for the body: line-height: 20px; <-- get rid of that.
You’ve set the line-height on <body> to 20px. Any elements without a line-height (e.g. your <h1> and <h2>) will inherit this line height size, even if their font size is much bigger.
It’s usually better to set line heights relative to the font size, i.e. don’t specify a pixel unit on them.
body {
...
font-size: 1em;
line-height: 1.25;/* This makes 20px the base line height, but it’ll get bigger for lines with a bigger font size */
http://jsfiddle.net/8ZBzt/