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.
Related
I have set all elements to be middle of the page fitting at 77%. Using this code here:
body{
margin: auto;
padding: 0;
width: 77%;
font-family: arial;
}
I have added a bottom border with a blue colour and it is also at width of 77%.
How can I extend the blue border to go all the way to fit the page? But keep all other elements at 77%?
I have attached a snippet, I know it doesn't work great, but I am currently practicing on my knowledge of borders, and this is what I have come across to.
I just need the blue line to run across the whole page.
body{
margin: auto;
padding: 0;
width: 77%;
font-family: arial;
}
#head{
border-bottom: 2px solid blue;
overflow: hidden
}
.container{
width: 100%;
}
#head ul{
margin: 0;
padding: 0;
float: right;
padding-bottom: 10px;
}
#head ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding-left: 20px;
}
#head a{
text-decoration: none;
text-transform: uppercase;
}
#head header{
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
}
#head .container header{
color: #0D1D6B;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#head .container span{
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
<!DOCTYPE html>
<html>
<head>
<title>practise</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="head">
<div class="container">
<header>Holiday <span>resort</span></header>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</div>
</section>
</body>
</html>
Typically this would be done with a full-width header that has a 77% width container inside of it. I've added .container elements to the header, main content region, and footer of the page.
I've also updated to use flexbox for the menu items.
body {
margin: 0;
font-family: Arial;
}
nav {
margin: 10px 0;
}
header {
border-bottom: 2px solid blue;
}
footer {
border-top: 2px solid blue;
}
.container {
margin: 0 auto;
width: 77%;
}
.primary-nav {
display: flex;
justify-content: flex-end;
padding: 0;
list-style: none;
}
.primary-nav li {
font-size: 20px;
margin-left: 20px;
}
.primary-nav a {
text-decoration: none;
text-transform: uppercase;
}
.brand,
.brand span {
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
.brand {
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
color: #0D1D6B;
}
.brand span {
color: #fff;
}
<header>
<div class="container">
<nav>
<span class="brand">Holiday <span>resort</span></span>
<ul class="primary-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<h1>Page Title</h1>
<p>
Lorem ipsum dolor.
</p>
</div>
</main>
<footer>
<div class="container">
Footer
</div>
</footer>
Best way to do it is to use parent div, Make the width of the parent 100% and set the border for the parent, then set the width of #head to 100%. you can center the #head by adding margin: auto
Here is the code
body{
margin: auto;
padding: 0;
font-family: arial;
}
.wrapper{
width: 100%;
border-bottom: 2px solid blue;
}
#head{
width: 77%;
overflow: hidden;
margin: auto;
}
.container{
width: 100%;
}
#head ul{
margin: 0;
padding: 0;
float: right;
padding-bottom: 10px;
}
#head ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding-left: 20px;
}
#head a{
text-decoration: none;
text-transform: uppercase;
}
#head header{
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
}
#head .container header{
color: #0D1D6B;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#head .container span{
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
<!DOCTYPE html>
<html>
<head>
<title>practise</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<section id="head">
<div class="container">
<header>Holiday <span>resort</span></header>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</div>
</section>
</div>
</body>
</html>
Try adding the following css to the #head
#head{
width: calc(100% + 23%);
border-bottom: 2px solid blue;
overflow: hidden;
margin-left: -11.5%;
}
You can set the width to 100% and then add padding of 11.5% on each side of the div, resulting in the div being 77% of the page. Since padding is inside the div, the border will extend till the end of the page, unlike if you set margin to 11.5%, since margin is on the outside of the div.
body{
width: 100%;
font-family: arial;
padding-right: 11.5%;
padding-left: 11.5%;
border-bottom: solid blue 2px;
}
Why this navbar background, won't change?
I need to put this navbar in a black background, but even with the !important argument I cannot get it working.
The css class is even at the bottom of my custom.css file.
What could be wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="
Welcome to the Cushion Store
">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="/static/css/custom.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div>
<div class="container">
<div class="container-fluid bg-light nav-bar-fixed-top my_top_navbar_div">
<!--- GALLITO NAVBAR --->
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item active">
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
custom.css:
body {
font-family: 'Roboto', sans-serif;
}
/* === NavBar === */
.nav-item {
letter-spacing: .2em;
font-size: 14px;
text-transform: uppercase;
}
.dropdown-item {
}
/* == Footer ==== */
.my_footer {
background-color: #5a6268;
}
.my_footer p {
padding-top: 20px;
font-size: 14px;
}
/* == Category Page == */
.my_row_class {
padding-top: 15px;
}
.my_row_class .mx-auto p {
color: #000;
font-size: 12px;
}
.my_row_class .mx-auto p a {
color: #000;
font-size: 12px;
text-decoration: none;
}
.my_image {
width: 100%;
height: auto;
}
.my_title {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .2em;
}
.my_image_padding {
padding-top: 16px;
}
.my_bottom_margin {
margin-bottom: 10px;
}
.card-body h4 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: .2em;
}
/*=== Product Page ==*/
.my_prod_row_class {
padding-top: 15px;
padding-bottom: 20px;
}
.my_prod_row_class .mx-auto p {
color: #000;
font-size: 12px;
}
.my_prod_row_class .mx-auto p a {
color: #000;
font-size: 12px;
text-decoration: none;
}
.my_prod_title {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .2em;
padding-top: 15px;
padding-bottom: 10px;
}
.my_prod_text {
padding-right: 20px;
}
/* === Pay With Card === */
.stripe-button-el {
width: 100% !important;
display: block !important;
background-color: #868e96 !important;
border: 0px !important;
background-image: none !important;
}
.stripe-button-el span {
display: block !important;
position: relative !important;
}
.errorlist li {
color: red;
font-weight: bold;
}
.my_custom_div {
margin-bottom: 20px !important;
}
.my_top_navbar_div {
height: 60px;
line-height: 50px;
}
.my_custom_menu {
text-align: right !important;
}
.my_custom_menu ul li {
list-style: none;
color: black;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
padding-right: 20px;
display: inline;
}
.my_custom_menu ul li a {
text-decoration: none;
color: black;
list-style: none;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
}
/* BOTONES JUMBOTRON */
.btn-azul {
text-decoration: none;
background-color: #5ba4e6;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
.btn-azul:focus {
outline:none;
}
.btn-azul:hover {
text-decoration: none;
background-color: #7ab6eb;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
.btn-naranja {
text-decoration: none;
background-color: #ffa31a;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,250,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
button.btn-naranja:focus {
outline:none;
}
button.btn-naranja:hover {
text-decoration: none;
background-color: #ffad33;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
font-weight: 700;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
-o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
font-size: 1.4rem;
padding: 22px 30px;
border-radius: 6px;
border:none;
}
/* ==================== */
.btn-xlarge {
padding: 18px 28px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav.navbar {padding: 0 1rem;}
li.nav-item:hover {
background-color: saddlebrown;
}
/*=== NAVBAR === */
.navbar-bg {
background-color: black !important;
}
UPDATE 1:
I think that it has to do with mi css file that is saved in "cache"?
When I comment all my css clases the page looks the same. But when I remove/add back the classes directly in the HTML, through the console, I see changes in the page.
I've refreshed my page with CTRL + F5 but no effect takes place. I should mention that this is a web page developed with Django in PyCharm 2018.
Try this way:
<nav class="navbar navbar-expand-md bg-dark fixed-top">
and remove .navbar-bg class from your css file.
Just exactly the same problem with me. Here is the answer. Look at your code here:
<link rel="stylesheet" href="/static/css/custom.css">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
The order of your css stylesheet has been ordered that the custom.css is lower level than the bootstrap css style sheet. So that when the code runs, it just simply overrides your stylesheet by bootstrap style if available (in this case, because bootstrap has background Color already so it will automatically replace your background Color)
Solution:
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
<link rel="stylesheet" href="/static/css/custom.css">
Just put the custom css to the bottom of these links of everything will be fixed!
*Note: And don't forget the hard fresh (shift + reload) to make the changes!
Well, your code works (just tested it).
The reason it does not work for you could be that your browser saved a cached version of your webpage.
So in your browser, try a "hard reload" to remove any potential cached version and reload the page.
To do that in Chrome: open developer tools (hit F12) and then right click on the refresh icon of the browser. Select "empty cache and hard reload", and see if it works for you.
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;
}
This is my HTML I have 3 boxes with text in them just read the text within the first div.
html,
body {
background-position: fixed;
background-attachment: fixed;
background-size: auto;
background-color: #e2e1e0;
background-repeat: no-repeat;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
z-index: 1;
}
.header{
font-family: 'Poiret One', Arial;
color: black;
font-size: 2em;
border-radius: 10px;
border-color: black;
border-style:
}
.infodiv {
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
}
.statsdiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.statsdiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.playerdiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.playerdiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.seconddiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.seconddiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<h1 class="header">Heading Placeholder</h1>
<hr>
<!--Statistic's Division-->
<div class="infodiv statsdiv">
<center>
<i class="fa fa-clock-o"></i><br><p>This first box moves the more I type, it allows me to type up to 3 lines of text but after that it becomes higher in position for example here X X X<p>
</center>
</div>
<!--Player Division-->
<div class="infodiv playerdiv">
<center>
<i class="fa fa-line-chart"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>
<!--Informational Division-->
<div class="infodiv seconddiv">
<center>
<i class="fa fa-check-circle-o"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>
</center>
</body>
</html>
I don't think it works well but if you could put it in a notepad real quick it should do the problem that I am having. Currently in the HTML I put 3 letter 'X's remove those 3 X's and the problem should be solved. The issue is that it is only letting me add 3 lines of text.
If you do not understand what I am still trying to say please let me know. I only took 1 class of Computer Science in high school a few years ago so it may be pretty ugly :/
Add this CSS
.infodiv {
float: left;
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
}
add vertical-align:top; to your .infodiv
i.e.:
.infodiv {
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
vertical-align:top;
}
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/