i am not able to fix my footer at the bottom of the page.when the data is large in,the footer is showing on the data which i need to put on bottom of the page.below is my code please tell me what i am doing wrong.
<!doctype html>
<html class = "no-js" ng-app = "PreSales-Huddle" lang = "en">
<head>
<meta charset = "utf-8">
<title ng-bind = "title"> </title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel = "stylesheet" href = "styles/main.css">
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head profile = "http://www.w3.org/2005/10/profile">
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class = "container" >
<header class = "header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class = "main" id = "main">
<div ng-view = ""></div>
</main>
<footer class = "footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
Write position: fixed, bottom: 0 for class footer inside css.
.footer {
position: fixed;
bottom: 0;
}
<!doctype html>
<html class="no-js" ng-app="PreSales-Huddle" lang="en">
<head>
<meta charset="utf-8">
<title ng-bind="title"> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class="main" id ="main">
<div ng-view=""></div>
</main>
<footer class="footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
I cleaned up your HTML and added this to your CSS:
position: fixed;
bottom: 0;
width: 100%;
footer {
position: absolute;
bottom: 0;
}
Related
I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.
Navigation Picture
body{
margin:0;
padding:0;
}
.header{
background-color: salmon;
height: 100px;
}
.header img {
float: left;
width: auto;
height: 100%;
}
.header h1 {
margin-top: 0px;
padding-top:10px;
left: 10px;
}
ul li{
display: inline;
font-weight: bold;
align-items: center;
}
li a{
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.
A generally easier way to design this layout would be using flexbox , then you can use things such as align-items.
If you're interested in more about that, then here is a good place to start.
Please see below an example using flexbox.
body {
margin: 0;
padding: 0;
}
.header {
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
}
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>
Here is solution for your query.
You will have to add CSS in header class instead of ul li & li a.
.header{
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
</body>
</html>
this is the style sheet
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
}
hr{
border-color: #F05F44;
border-width: 3px;
max-width: 65px;
You need to override the bootstrap style. That can be done by using !important on the style.
body,
html {
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
height: 100vh;
width: 100vw;
}
hr {
border-color: #F05F44 !important;
height: 3px !important;
max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
do hr.<className> for edit any hr tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
</style>
<body>
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</body>
</html>
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.
I am new to the world of XHTML and CSS. I put together a page that requires 3 column layout. The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code.
I have posted the code for it before it worked and after applying the necessary changes to make it work.
Questions
Is this the correct way to code it?
Is it the best way to code?
What issues can I run into with the code?
Before it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: auto;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
After it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: hidden;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
width: 100px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
The code is pretty much ok - few things you may do:
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look.
2.) margin: 0px; does not need the px with it - do margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. #subnav might be a better choice.
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example):
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job.
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it.
I won't comment on meta tags since I don't have enough knowledge about it.
A few comments with regards to meta tags...
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless.
<meta name="keywords" content="" />
The meta keywords used to matter. No search engines bother with it anymore as it's always abused.
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. The content within the page should all the describing for you.