I cannot keep the footer at the bottom of the page for both desktop and mobile. can someone please go over my code and tell me how to fix it?
The issue is it keeps going back to the center of the page and i am unable to move it down and have it stay there for most browsers and devices.
I have looked around for fixes and there are a few but the ones iv tried just ruin the entire page and push it all out of alignment. I am looking for the smallest amount of code possible to do this i don't want a giant chunk of code for this. i wanna keep it simple. I am new to web development. This is my first website.
This is the index.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
To simplify a bit the problem, say your HTML code looks like this:
<div id="wrapper">
<div class="header">HEADER</div>
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Now that's how the CSS code could look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
width: 100%;
position: relative;
}
.header {
background: blue;
}
.container {
background: red;
padding-bottom: 100px;
}
.footer {
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: yellow;
}
Note that you need to add a bottom padding of exactly the height of your footer (100px here) to your container to make it work.
The magic here happens because you set the min-height of your wrapper to be always equal to 100%, which forces your div to fit the view port height.
And your footer will be at the bottom of the page no matter what.
Hope this helps !
Try this
.footer {position: absolute; bottom: 0; width: 100%;}
Related
How can I alter my code so that resizing keeps everything within the window intact? As seen by the pictures, the text is outside the section when resized. Also, the image drops down in the navbar
any help is appreciated. Thank you.
<!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="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/homepage.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.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]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<div class="dropdown">
<button onclick="location.href='homenew.html'" class="dropbtn" >WATER</button>
<div class="dropdown-content">
<a class="page-scroll" href="homenew.html#services">OUR MISSION</a>
<a class="page-scroll" href="homenew.html#services">HELP US</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="aboutus.html">About us</a>
</li>
<li>
<a class="page-scroll" href="team.html">Our Team</a>
</li>
<li>
<a class="page-scroll" href="volunteering.html">Volunteer</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact</a>
</li>
<li>
<a class="page-scroll" href="donations.html">Donate</a>
</li>
</ul>
<img class="alignright" src="icons/fundraisingbar.png">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12 ">
</div>s
<div class = "middle">
<h1 class="h1style offwhite">WATER2O</h1>
<h2 class="">mineral water</h2>
</div>
<div class = "middle2 offwhite ">
<h2>H20</h2>
<h3>ALTERING PERCEPTION </h2>
</div>
<div class ="animated bounceIn ">
<img class="arrowsize" src="http://www.under-water.co.uk/imgs/icons/tick-256x256-red.png">
<p class="whitetext">Registered</p>
</div>
</section>
CSS
.icons{
width: 100px;
height: 100px;
}
.iconz{
padding-top: 10px;
}
.icontext{
padding-top: 10px;
font-weight: bold;
}
.fundraise{
padding-top: 40px;
padding-bottom: 40px;
}
.offwhite{
color: #EBE7E0;
}
.donation_amount{
color: red;
}
.icons2{
width: 150px;
height: 150px;
}
.middle2{
padding: 10px;
border: 5px solid gray;
margin: 0;
}
.description_icon{
padding-top: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
padding-bottom: 50px;
}
.intro-section{
background-color: black;
/*background-image: url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}
.main_text{
color: white;
top: 450px;
}
.logofirst{
height: 300px;
width: 450px;
}
.breadtext{
color: white;
padding-top: 120px;
padding-left: 100px;
font-size:75px;
}
.breadtext2{
color: white;
padding-left: 210px;
font-size:30px;
}
.footer1{
padding-bottom: 20px;
padding-top: 10px;
background-color: #f9f9f9;
font-weight: bold;
}
.arrowsize{
height: 100px;
width: 100px;
color: white;
}
.whitetext{
color: white;
font-weight: bold;
}
/* Dropdown Button */
.dropbtn {
background-color: #F8F8F8;
color: 777777;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
Can you post the CSS you currently have that's effecting the area?
Bootstrap has a feature for progress bars so you won't have to use a static image. You'll be then be able to change the width accordingly for the percentage you need the bar at.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
edit:
Alternatively you can just use #media queries in your CSS to reisze the width of the image dependant on the screen size that is being viewed at.
I have simple webpage with header and footer.
This is roughly the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("HtmlHeadTags", false)
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#RenderSection("Analytics", false)
#RenderSection("NortonSafe", false)
</head>
<body>
<div id="page-wrapper">
<header>
<div id="header-navbar">
<div id="header-navbar-active">
<a id="websiteLogo" href="/">
<img src="/Content/ankol-logo.png" alt="logo" />
</a>
<div class="clearfix"></div>
</div>
</div>
</header>
<div id="body-content">
#RenderSection("scripts_body", required: false)
#RenderBody()
</div>
<footer>
<p id="footer-links">
about
terms
contact
</p>
<p id="footer-copyright">2017 ©</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
</body>
</html>
with following (relevant) css parts:
#header-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
color: #FFF;
font-family: Arial;
font-size: large;
position: fixed;
z-index: 1000;
margin-bottom: 20px;
border: 1px solid transparent;
}
#footer-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
color: #FFF;
font-family: Arial;
font-size: large;
margin-top: 70px;
padding-top: 5px;
padding-bottom: 5px;
}
Now, while in pc browser both header and consume 100% of the width of the window, in mobile browser the header and the footer consume only part of the width (I have Android, but checked it on several emulators on Edge and all show the same results)
The red box is the header and the green box is the footer.
What might be the reason for that?? can anyone refer me to a good tutorial about the differences between pc browser and mobile browser? thanks.
Try adding this style:
body {
width: 100%;
height: 100%;
margin: 0;
}
I wanted to make a HTML page with some background color in header with some text. I wanted exactly like this but I am not getting CSS for this particular class w3-container w3-teal.
Can anybody tell how to get the CSS of these class.
Here is a link from where I am taking.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_containers_div_header
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>The w3-container class can be used to display headers.</p>
</div>
</body>
</html>
This is the css:
.w3-teal{ background-color: #009688; color:#fff;}
Here is the working code:
.w3-container, .w3-panel {
padding: 0.01em 16px;
}
.w3-teal, .w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important;
}
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>The w3-container class can be used to display headers.</p>
</div>
Template 2 :
$('.ToggleDiv').click(function() {
$('.menu').slideToggle(500);
});
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.w3-container,
.w3-panel {
padding: 0.01em 16px;
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important;
}
.ToggleDiv {
position: absolute;
top: 33px;
right: 40px;
z-index: 999;
font-size: 28px;
}
.ToggleDiv a {
color: #fff
}
h1 {
margin: 20px 0;
}
.menu {
width: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 83px;
background: #fff;
display: none;
color: #000;
border: 1px solid #000;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="w3-container w3-teal">
<h1>Header</h1>
<div class="ToggleDiv"><i class="fa fa-caret-down"></i>
</div>
<div class="menu">
<p>Helo I am being shown !!!</p>
<p>Helo I am being shown !!!</p>
</div>
</div>
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
WEB URL: http://riiul.xyz/kalista.html
Im trying to make a lil blog page, I have problem with hovers, if you move your mouse over the icon on webpage it pop ups a textbox, but the textbox moves down another div "Soovitatavad ruunid"
Im really beginner at these things but I myself think it might be something with margins. I can make it work with position: absolute, but if there comes more divs and the content gets longer, then the scrolling takes these position: absolute thingies with it.
Here is my code:
.bgimg {
background-image: url("../img/kalista.jpg");
background-repeat: no-repeat;
overflow: scroll;
height: 100vh;
background-size: auto;
z-index: -999;
}
.box {
background-image: url('../img/kalistatop.png');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: auto;
border: solid 3px #CCCCCC;
vertical-align: top;
background-color: rgba(0, 56, 78, 0.7);
padding: 4px;
margin: auto;
margin-top: 200px;
width: 60%;
z-index: -998;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.pealkiri {
margin-top: 100px;
margin-bottom: 100px;
z-index: -997;
text-align: center;
}
.summonerid-pealkiri {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
z-index: -996;
}
.summonerid {
margin-top: 0px;
margin-bottom: 0px;
display: inline-block;
z-index: -995;
}
.summoner-wrap {
width: 64px;
}
.summoner-wrap .summoner-content {
display: none;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #262626;
padding: .5em;
margin-left: 5px;
margin-right: 5px;
border: 3px solid #0d0d0d;
width: 275px;
z-index: -994;
}
.summoner-wrap:hover .summoner-content {
display: block;
}
.runed-pealkiri {
margin-left: 50px;
z-index: -993;
}
.runed {
z-index: -992;
<?php $url='http://vignette1.wikia.nocookie.net/leagueoflegends/images/1/18/Kalista_OriginalSkin.jpg/revision/latest?cb=20141105014341' ; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Myrka</title>
<meta charset="utf-8">
<meta name="author" content="pixelhint.com">
<meta name="description" content="Myrka Weeb" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="icon" href="favicon.png" type="image/x-icon" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Styles -->
</head>
<body>
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png" title="Myrka" alt="Myrka" />
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<li>Kodu
</li>
<li>Minust
</li>
<li>Tiim
</li>
<li>Päevik
</li>
<!--<li>Kontakt</li>-->
</ul>
</nav>
<!-- end navigation menu -->
<div class="footer clearfix">
<ul class="social clearfix">
<li>
</li>
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © 2016 Myrka Weeb.</p>
<p>myrka#riiul.xyz</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</header>
<!-- end header -->
<!-- Õpetus -->
<section class="main clearfix">
<div class="bgimg" style="font-family: raleway-regular, arial">
<div class="box">
<div class="pealkiri">
<h1 style="color:#ffffff;">Kalista - Hüplev kits</h1>
</div>
<div class="summonerid-pealkiri">
<h2 style="color: #ffffff;">Soovitatavad summonerid</h2>
<div class="summonerid">
<div class="summoner-wrap" style="float:left; padding-right:5px;">
<img src="/img/heal.png" alt="Hiil" width="64" height="64" style="border:2px solid black" />
<div class="summoner-content">
<h3 style="color: #fff;">Hiil</p>
<p style="color: #fff; font-size:12px;">Level: <span style="color: #1aff1a">1</span> Raadius: <span style="color: #1aff1a">850</span> Cooldown: <span style="color: #1aff1a">240</span></p>
<p style="color: #fff; font-size:12px;">Heals the caster and the allied champion nearest to the caster's cursor (or the most wounded ally if no target is near the cursor) by 90-345 health, and gives affected champions +30% movement speed for 1 seconds. Heal is 50% less effective on allies previously healed with another Summoner Spell Heal within the past 35 seconds. 240 second cooldown.</p>
</div>
</div>
<div class="summoner-wrap" style="float:right; padding-left:5px;">
<img src="/img/flash.png" alt="Fläsh" width="64" height="64" style="border:2px solid black" />
<div class="summoner-content">
<h3 style="color: #fff;">Fläsh</p>
<p style="color: #fff; font-size:12px;">Level: <span style="color: #1aff1a">8</span> Raadius: <span style="color: #1aff1a">425</span> Cooldown: <span style="color: #1aff1a">300</span></p>
<p style="color: #fff; font-size:12px;">Teleports your champion toward your cursor's location. 300 second cooldown.</p>
</div>
</div>
</div>
</div>
<div class="runed-pealkiri">
<h2 style="color: #ffffff;">Soovitatavad ruunid</h2>
<div class="runed">
</div>
</div>
</div>
</div>
</section>
<!-- end main -->
</body>
</html>
One simple fix would be using:
.summoner-wrap .summoner-content {
visibility: hidden; /* Change here */
bottom: 5%;
left: 5%;
right: 5%;
background-color: #262626;
padding: .5em;
margin-left: 5px;
margin-right: 5px;
border: 3px solid #0d0d0d;
width: 275px;
z-index: -994;
}
.summoner-wrap:hover .summoner-content {
visibility: visible; /* Change here */
}