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.
Related
I'm building a chatting website and I'm trying to make the "submit message" button to be aligned above the textarea, but I ran into a weird problem. The button is aligned above it, but ( I'm guessing ) because the textarea is resizable, the button is "behind" it in a way.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
}
#submit {
position: fixed;
bottom: 20px;
right: 10px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<button type="submit" id="submit">Click to send!</button>
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</body>
In the snippet, try to minimize the textarea as much as possible; The button is right above it's minimized state. I thought about fixing it by simply adding margin-bottom to the button but I want my page to be completely responsive for all screen sizes. How could I fix this?
Thanks
Simply by reordering your markup the button is laid over the textarea. It's more semantically correct to have the button after the input anyway.
Note that I've adjusted position styles to better fit your layout. Since you're reducing the size of the textarea you need to override the width that Bootstrap provides (assuming you're using proper form element classes).
Protip: Don't ever tell your users to click somewhere. We all know how to use buttons. It's just not necessary.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
width: auto;
}
#submit {
position: fixed;
bottom: 20px;
right: 20px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" class="form-control"></textarea></p>
<button type="submit" id="submit" class="btn btn-default">Send!</button>
</div>
</div>
</div>
</body>
Try it like this, The button and the textarea end up in their own individual columns which are col-10 in width. mx-auto then centers the columns.
<div class="row">
<div class="col-sm-10 mx-auto">
<button type="submit" id="submit">Click to send!</button>
</div>
<div class="col-sm-10 mx-auto">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
</div>
</div>
</div>
Alright, so I have no idea why this isn't working, but take a look. My top right navigation items are terribly screwed up. Everything else works great so far. Any suggestions would be much appreciated. Also, side-note, is there a way for me to have an "a" tag that heads to a directory (Music) and for me to customize the directory page? I'll make a separate question on that in a minute. Also, I would love to have my own player that shows metadata. Anyway, I'll try to stay on topic so you don't have to answer those, just the CSS help. Thanks!
The HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="description" content="AnonSeeker is a collection of HTML, CSS, and JavaScript files designed for privacy. We offer things such as a browser, bookmarks, proxies, music, a text/code editor, and much more, completely password-protected!">
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<title></title>
</head>
<body>
<!-- All Navigation Items -->
<div class="container" id="all-navigation">
<!-- Top Left Navigation Items -->
<div class="container" id="top-left-naviagtion">
<!-- Goto Browser -->
<div class="container goto-browser top-left-navigation-item">
<a href="html/anon-seeker-browser.html" class="goto-browser top-left-navigation-item">
<img src="img/browser.png" alt="browser-img" class="goto-browser top-left-navigation-item">
</a>
</div>
<!-- Goto Bookmarks -->
<div class="container goto-bookmarks top-left-navigation-item">
<a href="html/bookmarks.html" class="goto-bookmarks top-left-navigation-item">
<img src="img/bookmarks.png" alt="bookmarks-img" class="goto-bookmarks top-left-navigation-item">
</a>
</div>
<!-- Goto Music -->
<div class="container goto-music top-left-navigation-item">
<a href="html/music.html" class="goto-music top-left-navigation-item">
<img src="img/music.png" alt="music-img" class="goto-music top-left-navigation-item">
</a>
</div>
</div>
<!-- Top Right Naviagtion Items -->
<div class="conatiner" id="top-right-navigation">
<div class="container goto-ace top-right-navigation-item">
<a href="html/ace-editor.html" class="goto-ace top-right-navigation-item">
<img src="img/ace-editor.png" alt="ace-editor-img" class="goto-ace top-right-navigation-item">
</a>
</div>
</div>
</div>
<!-- Middle Elements -->
<div class="container" id="middle-elements">
<!-- Center AnonSeeker Image -->
<div class="container middle-img">
<img src="img/anonseeker.png" alt="anonseeker.png" class="middle-img">
</div>
<div class="container search-box">
<input type="text" placeholder="Search" class="search-box">
</div>
</div>
</body>
</html>
The CSS
html, body {
margin: 0;
}
#all-navigation {
width: 100%;
height: 100%;
}
#top-right-navigation {
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-navigation {
top: 10px;
left: 10px;
padding: 15px;
}
.top-right-navigation-item {
padding: 5px;
}
.top-left-navigation-item {
padding: 5px;
}
#middle-elements {
text-align: center;
padding: 5px;
}
top-left-navigation spelling wrong in your html so not working your css. Just replace CSS mentioned below code. Hope this will help you
#top-right-navigation {
position:absolute;
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-naviagtion{
position:absolute;
top: 10px;
left: 10px;
padding: 15px;
}
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I'm trying to add text on hover over an image inside a row and col-md-3. I want it to change opacity to set ideal while displaying text in centered inside the image.
I have the opacity hover down but I'm struggling with the data-hover class and I have no clue where to place the text I want inside HTML and CSS
I've included a fiddle here with all the work I have accomplished thus far: https://jsfiddle.net/a8u05mw1/
HTML:
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>
</div>
</div
</div>
CSS:
#wrapper img {
width: 100%;
transition-duration: 0.8s;
}
.col-md-3 {
padding: 0;
}
#wrapper img:hover {
opacity: 0.8;
transition-duration: 0.8s;
}
Answer 1: Without Bootstrap
jsfiddle answer 1
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
</div>
</div>
</div>
Note: I removed the image which is no more available.
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* original example from question */
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
Answer 2: With Bootstrap
jsfiddle answer 2
I made a new example inspired with your code, but using tooltips from Booststrap / Popper.js. I used the bootstrap starter template to quickstart the use of Boostrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;" data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
<div class="img-hover-text centered">Your text here</div>
</div>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
padding: 20px;
}
.img-container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Explaining Answer 1:
You want two things:
First, center some text over an image.
Then, apply a hover effect on the text so that it only appears when the cursor is hovering the image.
You can get a cool tutorial on how to center text over an image here | w3school.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This will give you the following picture:
Warning: Don't be like me. Don't waste your time on a <p>. Use a <div> for the text directly.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<p class="centered">Not Centered</p>
</div>
Otherwise you will see this:
Ok, now we have our centered text. Time to make it disappear. Let's go back to your code and modify it.
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
However, if we stop there, something will be wrong. When we hover the cursor right on top of the text area, the text disappear! To correct that, add a last css rule:
/* needed for the text to stay visible
when the cursor it just over it. */
.img-hover-text:hover {
display: block;
}
Explaining answer 2
The idea is not to do the stuff we made by hand, by using a library: namely Popper.js which fortunately is used by Boostrap. We include the tooltip with data-toggle="tooltip" data-placement="auto" title="This is a Tooltip" inside the element we want to display the tooltip on hover. Here inside <img>.
To make is works, we also need to import the necessary library. Don't forget the <script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> at the end, just before closing </body> flag.
Done!
Long story short for those looking for a Boostrap answer.
Add a tooltip in the flag you want.
<img src=... data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Don't forget to add Popper.js which is needed for the tooltip.
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
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!