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 */
}
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?
the styles
h1 {
font-weight: bold;
font-size: 40px;
background-color: #4aaaa5;
padding: 15px;
color: #ffffff !important;
}
h2 {
font-size: 25px;
Color: #4aaaa5;
padding: 20px 20px 5px 20px;
}
#foot {
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4aaaa5;
padding-top: 20px;
color: #cccccc;
background-color: #666666;
text-align: center;
margin-top: auto;
}
.left {
display: inline-block;
position: relative;
padding: 0px;
margin: 20px;
}
h3{
position: absolute;
bottom: 5px;
font-size: 25px;
background-color: #4aaaa5;
padding: 15px 0px;
width: 100%;
color: #ffffff;
text-align: center;
}
body {
background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
display: flex;
height: 100vh;
flex-direction: column;
}
.main{
display: block;
margin-top: 50px;
margin-bottom: 150px;
padding: 20px 20px 40px 20px;
background-color: #ffffff;
}
.borderr {
border-right: 2px solid #cccccc;
}
hr {
margin: 20px 0px 20px 0;
height: 1px;
border: 0px;
border-top: 3px solid #cccccc;
}
p {
margin-top: 20px;
line-height: 30px;
}
the html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./assets/reset.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">
<link rel="stylesheet" href="./assets/Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h1 class="navbar-brand"> My Name </h1>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item borderr">
<a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active borderr">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-nav-link">
<a class="nav-link" href="./contact.html">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h2> Portfolio </h2>
<hr>
<div class="row">
<div class="left">
<img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
style="max-width: 300px; max-height: 200px;">
<h3> liger </h3>
</div>
<div class="left">
<img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Savannah</h3>
</div>
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Beefalo </h3>
</div>
<div class="left">
<div class="pic">
<img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Lama camel</h3>
</div>
</div>
<div class="left">
<img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Zonkey</h3>
</div>
</div>
</div>
</main>
<footer id="foot">
Copyright ©
</footer>
</body>
</html>
Thanks -
use Col-md-(media-dependent-length) for setting up row div length with image width full to 100%
Check Bootstrap Docs
Add class="img-fluid" to the image tag as :
<img class="img-fluid">
This will make images responsive which therefore shrink and expand based on the window size. Also, setting max-height and max-width as per your code will fix the max size.
But while shrinking the window size, it will reduce the size.
Regarding the images, refer this link from the official documentation of bootstrap.
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%;}
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.
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>