This question already has answers here:
How to make this Header/Content/Footer layout using CSS?
(7 answers)
Closed 6 years ago.
I want to set header fixed at the top and footer at the botom of the page.
Image:
index page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
css code:
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?
As I can see you are using Bootstrap you could use one of its templates.
Take a look at this one:
http://getbootstrap.com/examples/sticky-footer-navbar/
Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.
Hope this helps,
Regards
.footer .form {
margin-top: 100px;
position:fixed;
bottom:0px;
}
replace this code to fix your footer
I'm not an expert but you could try using:
Position: fixed;
Or
Position: bottom;
Hope this helps!
Related
I've been trying to figure out how to make this filter work in my code, where if the user clicks a category button, only the boxes associated with that word would display.
It would work if there's no tags surrounding the block where the buttons are at in the html file, but once I put div tags around those block of button tags to style it, the filter stops working.
I need to be able to style the buttons and put it those div tags. Is there a way to make this filter work in the non-working html code while keeping the form and filters/product div tags around the block of buttons?
Also, I'm only allowed to use CSS and HTML, (NO JAVASCRIPT)
So here's the block of code in question:
<div class="contains">
<div class="filters">
<div class="product">
<form action="" class="forms">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
</form>
</div>
</div>
<!-- (other div classes representing categories) -->
</div>
How can I make this filter work while still being in the div tags?
Below are two versions of the full running code as reference if needed.
Code of the html file that works, with no div tags around the block of category buttons:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.contains {
display: flex;
flex-wrap: wrap;
align-items: center;
}
button[data-filter="warm"]:focus~div:not([class*="warm"]) {
display: none;
}
button[data-filter="cold"]:focus~div:not([class*="cold"]) {
display: none;
}
button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
display: none;
}
.contains .filters {
flex-basis: 100%;
}
.product {
padding: 15px 35px;
}
.forms {
position: relative;
height: 100%;
width: 100%;
max-width: 300px;
padding: 30px 20px;
background: blue;
color: #fff;
}
.filter-btn {
display: block;
margin-left: auto;
margin-bottom: 1rem;
background: white;
font-size: 1rem;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="helpstyle.css">
<title>Animal types</title>
</head>
<body>
<div class="contains">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
<div class="warm">
<div class="product">
<form action="" class="forms">
warm
</form>
</div>
</div>
<div class="warm cold">
<div class="product">
<form action="" class="forms">
warm cold
</form>
</div>
</div>
<div class="warm toxic">
<div class="product">
<form action="" class="forms">
warm toxic
</form>
</div>
</div>
<div class="toxic">
<div class="product">
<form action="" class="forms">
toxic
</form>
</div>
</div>
<div class="toxic cold">
<div class="product">
<form action="" class="forms">
toxic cold
</form>
</div>
</div>
<div class="cold">
<div class="product">
<form action="" class="forms">
cold
</form>
</div>
</div>
</div>
</body>
</html>
code of the non-working html file with div tags around the block of buttons that I need to have working:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.contains {
display: flex;
flex-wrap: wrap;
align-items: center;
}
button[data-filter="warm"]:focus~div:not([class*="warm"]) {
display: none;
}
button[data-filter="cold"]:focus~div:not([class*="cold"]) {
display: none;
}
button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
display: none;
}
.contains .filters {
flex-basis: 100%;
}
.product {
padding: 15px 35px;
}
.forms {
position: relative;
height: 100%;
width: 100%;
max-width: 300px;
padding: 30px 20px;
background: blue;
color: #fff;
}
.filter-btn {
display: block;
margin-left: auto;
margin-bottom: 1rem;
background: white;
font-size: 1rem;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="helpstyle.css">
<title>Animal types</title>
</head>
<body>
<div class="contains">
<div class="filters">
<div class="product">
<form action="" class="forms">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
</form>
</div>
</div>
<div class="warm">
<div class="product">
<form action="" class="forms">
warm
</form>
</div>
</div>
<div class="warm cold">
<div class="product">
<form action="" class="forms">
warm cold
</form>
</div>
</div>
<div class="warm toxic">
<div class="product">
<form action="" class="forms">
warm toxic
</form>
</div>
</div>
<div class="toxic">
<div class="product">
<form action="" class="forms">
toxic
</form>
</div>
</div>
<div class="toxic cold">
<div class="product">
<form action="" class="forms">
toxic cold
</form>
</div>
</div>
<div class="cold">
<div class="product">
<form action="" class="forms">
cold
</form>
</div>
</div>
</div>
</body>
</html>
Thanks, help is greatly appreciated.
The reason it's not working in your second block is that your CSS is relying on the ~ 'general sibling' selector, which requires the two elements in question to have the same parent. To my knowledge, there is no CSS selector which lets you say "apply a style to this element if this unrelated element has focus".
I would use Javascript to accomplish this kind of dynamic behaviour.
I have a little problem with the css file. I create a hmtl file and css file style and my idea is put in the background of the button form an image. When I use the css file doesn't work but I use the style parameter of the button is working fine, I do not understand.
My html/css code is this:
#charset "UTF-8";
/* CSS Document */
body {
text-align: center;
}
.btn-image {
width: 300px;
background-image: url('/images/ok/login-login-on.png');
background-repeat: no-repeat;
background-position: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test - Log in</title>
<!-- Bootstrap -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<img src="images/ok/Logo.png" width="200" height="200" alt="" />
<br></br>
<div class="box-center">
<form action="connectdb.php" method="post">
<input type="text" class="txtbox-login-image" placeholder="Usuario" name="username" required autofocus>
<input type="password" class="txtbox-password-image" placeholder="Password" name="password" required>
<!-- This option is not works -->
<button class="btn-image" type="submit">Submit</button>
<!-- This option is works -->
<button style="background-image: url('images/ok/login-login-on.png'); width: 100px; border: 1px solid #fff; margin: 0 auto; display: block;">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Help me, please ;)
If the CSS file is in a directory at the same level as the image directory, your filepath has to be
background-image: url('../images/ok/login-login-on.png');
button[type="submit"] {
background: url('path/to/file');
...
}
Here is my simple sign up page I tried to make. I need help figuring out how to put home, about, help on the left side of the navbar and sign in on the far right side of the bar. I want them on the same navbar but I couldn't find anything on how to separating them or put them on separate sides of the page.
I'm pretty new to html and css so any other tips that can help improve the quality of my first web page would help alright peaces SO peeps.
<html>
<head>
<title> Sample Sign up App</title>
<script></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="sign up form css.css">
</head>
<body>
<nav class="nav navbar-left">
<div class="nav">
<ul class="nav nav-pills">
<li role="presentation">Home</li>
<li role="presentation">About</li>
<li role="presentation">Help</li>
<li role ="presentation">Sign in</li>
</ul>
</div>
</nav>
<div class ="container">
<div class = "jumbotron">
<h2 id="jumbo-welcome"> Sign up to Sample App today!</h2>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputFile">Username</label>
<input type="text" class="form-control" id="exampleInputFile" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<br>
<button type="submit" class="btn btn-default" id = "submit-button">Sign up</button>
</form>
</div>
</div>
</body>
</html>
CSS for the page
nav {
margin: auto;
width: 1980px;
height:45px;
.border;
.shadow;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav2 li{
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.jumbotron{
display:block;
position:fixed;
width:40%;
height:66%;
top: 20%;
margin-left:20%;
margin-right:auto;
}
.form-group{
display:block;
margin-left: 15%;
margin-right:15%;
}
.jumbotron #submit-button{
display:block;
margin-left:40%;
margin-right:35%;
}
#jumbo-welcome{
text-align:center;
}
body {
line-height: 1;
background:#F2F2F2;
background-image: url("http://tech-rx.com/wp-content/uploads/2014/05/background.jpg");
}
just add this css to your css code
.nav.nav-pills li:last-child{float:right}
jsfiddle
So I found a cheap way to make the same effect.
<html>
<head>
<title>Sample Home Page</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="home page.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-left">
<ul class="nav navbar-nav" id="navlist">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li id="sign-in-link">Sign in</li>
</ul>
</div>
</nav>
</body>
</html>
assign an id to the sign in link and in css make it go right.
#sign-in-link{
position: absolute;
left: 95%;
margin:auto;
}
I have a problem with login form, when browser window got smaller images that are appearing in the head of the login form stop appear correctly. correct view: http://im87.gulfup.com/bYOI29.png
when I change browser window size: http://im59.gulfup.com/95cyji.jpg
html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
<link rel="stylesheet" type="text/css" href="styles/icon-login.css" />
</head>
<body>
<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<!-- login box start -->
<div class="col-md-4 col-md-offset-4" id="loginbox">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<img src="icons/Instagram.png" id="instagram-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Facebook-icon.png" id="Fb-login">
<h3 class="panel-title" >Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="">
<fieldset>
<div class="form-group">
<span class=usericon>
<i class="fa fa-user"></i>
</span>
<input class="form-control" id="username" placeholder="Username" name="username" type="text" autofocus required>
</div>
<div class="form-group">
<span class="passwordicon">
<i class="fa fa-lock"></i>
</span>
<input class="form-control" id="password" placeholder="Password" name="password" type="password" value="" required>
</div>
<input type="submit" name="Login" value="login" class="btn btn-lg btn-success btn-block" id="login">
</fieldset>
</form>
</div>
</div>
</div><!-- End of login box -->
</div><!-- end of row class -->
</div><!-- end of container -->
</body>
</html>
css code for social icon position: icon-login.css
#instagram-login {
left: 250px;
opacity: 0.95;
position: absolute;
top: -16px;
}
#instagram-login:hover {
opacity: 1;
}
#twitter-login {
left: 195px;
opacity: 0.925;
position: absolute;
top: -12px;
}
#twitter-login:hover {
opacity: 1;
}
#Fb-login {
left: 140px;
opacity: 0.92;
position: absolute;
top: -12px;
}
#Fb-login:hover {
opacity: 1;
}
.panel-heading {
position: relative;
}
I tried relative to panel-heading instead of fixed, but it doesn't work also.
The first thing you should do is to warp the images in a links, then wrap all the links in a div with class social
<div class="social">
<img src="Instagram.png">
<img src="Twitter-icon.png">
<img src="Facebook-icon.png">
</div>
to position the icons absolutely, you should give the parent div (#loginbox) the following:
#loginbox {
position: relative;
}
Then, you can apply these styles to the social div
.social img {
width: 50px;
}
.social a {
display: inline-block;
float: right;
}
.social {
position: absolute;
right: 13px;
top: 0;
}
Put position: relative; on your #loginbox and it will keep the images inside loginbox and not out of it.
Then try to manage smaller left right top bottom parameters, because for #loginbox these you defined will not fit. The ones you defined is for .container since it has position defined..
First, put the title before the images and arrange your images properly.
<div class="panel-heading">
<h3 class="panel-title" >Please Sign In</h3>
<img src="icons/Facebook-icon.png" id="Fb-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Instagram.png" id="instagram-login">
</div>
Next, apply the following styles:
.panel-heading {
width: 400px; // make sure this width is big enough to contain the title and the flags
}
.panel-title {
display: inline-block;
width: 90px; // adjust the width so it's proper, I'm making rough guesses based on what I see
}
#Fb-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
}
#twitter-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}
#instagram-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}
This is a rough guess based on your damn images.
I have the following simple html+css code.
For some reason the second LI item is displayed kind of centered.
I appreciare if you may test and let me know.
(my post is mostly code, because it is a very simple html page which already shows the issue)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>Float</title>
<style>
.el_edit {
background-image: url(http://www.w3schools.com/images/compatible_safari.gif);
background-repeat: no-repeat;
background-color: transparent;
border: none;
height: 50px;
width: 50px;
vertical-align:top;
}
.el_delete {
background-image: url(http://www.w3schools.com/images/compatible_firefox.gif);
background-repeat: no-repeat;
background-color: transparent;
border: none;
height: 50px;
width: 50px;
vertical-align:top;
}
</style></head>
<body>
<ul><li>
<div style="float:left;">
<form>
<button class="el_a">A</button>
</form> </div>
<div style="float:right;">
<div style="float:left;">
<form>
<button class="el_edit">B</button>
</form> </div>
<div style="float:right;">
<form>
<button class="el_delete">C</button>
</form></div>
</div><br>
</li>
<li>
<div style="float:left;">
<form>
<button class="el_a">A1</button>
</form>
</div>
<div style="float:right;">
<div style="float:left;">
<form>
<button class="el_edit">B1</button>
</form> </div>
<div style="float:right;">
<form>
<button class="el_delete">C1</button>
</form></div>
</div>
</li>
</ul>
</body>
</html>
I hope that this CSS may Solve your issue
li{display:block}
just try following fiddle to check what you want ....
<form name="el">
<button class="el_a">A</button>
</form>
http://jsfiddle.net/WdeAF/