I've got 2 buttons that I am trying to position next to each other, centered on the page. The easiest way to do this is put them in a div, but when I do this the buttons become unresponsive. They loose their hover and clicking functionality. I have tried changing the z-index of my background div, wrapper div and buttons but that didn't do anything. Here is my code:
<!DOCTYPE html>
<html>
{% load staticfiles %}
{% load rest_framework %}
<head>
<link type="text/css" rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{% static 'app/index.css' %}">
<title>Home</title>
</head>
<body>
{% if messages %}
{% for message in messages %}
{{ message }}
{%endfor%}
{%endif%}
{% verbatim %}
<div id="background"></div>
<div id="wrapper">
Sign Up Now!
Learn More
</div>
<div id="topwrapper">
<a href="/login">
<div id="login">Log in</div>
</a>
<a href="/signup">
<div id="signup">Sign Up</div>
</a>
</div>
<h1>Catchy Interesting Hook.</h1>
<p>Lorem ipsum stuff blah blah blah</p>
<h2>What is this website?</h2>
{% endverbatim %}
</body>
</html>
The links inside the topwrapper div work, but they are not bootstrap buttons. NOTE: The funny code inside the {% %} is Django stuff, I have installed various django-bootstrap plugins so maybe that is what is messing with my buttons? But I am new to django so I don't really know how to go about investigating that. And then my CSS is:
#background {
background-color: #5f6273;
height: 500px;
position: absolute;
padding: 0px 0px 0px 0px;
border-width: 0px;
margin: 0px 0px 0px 0px;
top: 0px;
left: 0px;
right: 0px;
z-index: -30;
}
#wrapper {
text-align: center;
margin: 0 auto;
margin-top: 300px;
background: none;
width: 320px;
display: inline;
z-index: -1;
}
#topwrapper {
width: 300px;
display: inline;
background-color: none;
margin: auto;
height: 100px;
margin-right: 0;
z-index: 0;
padding: 20px;
}
#login {
border-radius: 2px;
border-color: #ffffff;
height: 30px;
width: 140px;
left: 30%;
margin: auto;
padding-top: 10px;
text-align: center;
font-family: sans-serif;
color: #ffffff;
z-index: 30;
}
#signup {
left: -50%;
font-family: sans-serif;
color: #ffffff;
height: 30px;
width: 70px;
z-index: 30;
margin: auto;
}
.btn-primary {
float: left;
margin-left: auto;
z-index: 31;
}
.btn-info {
float: right;
margin-right: auto;
z-index: 31;
}
h1 {
font-family: sans-serif;
text-align: center;
color: #ffffff;
padding-top: 160px;
}
h2 {
font-family: sans-serif;
text-align: center;
color: #000000;
padding-top: 275px;
z-index: 30;
}
p {
font-family: serif;
text-align: center;
color: #ffffff;
padding-top: 0px;
}
I kept all of your css the same, but changed just a little in the html while removing the django stuff...and the links are working. Try adding your django code to this:
<body>
<div id="background"></div>
<div id="wrapper">
<button class="btn btn-primary">Sign Up Now!</button>
<button class="btn btn-primary">Learn More</button>
</div>
<div id="topwrapper">
<a href="/login">
<div id="login">Log in</div>
</a>
<a href="/signup">
<div id="signup">Sign Up</div>
</a>
</div>
<h1>Catchy Interesting Hook.</h1>
<p>Lorem ipsum stuff blah blah blah</p>
<h2>What is this website?</h2>
</body>
Related
this is my first time posting I'm fairly new in front-end web development. I'm having a hard time positioning some of my elements, especially this one every time I change something it doesn't meet my desired position for my button I just need to center it.
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1B244A;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: 'cursed timer', sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9AABD8;
border-radius: 5px;
color: white;
}
.newGame {}
.newGame button {}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I'm trying to figure out how to center the new game button that I put in a div class called newGame it always stays in the right corner.
Try this and see if it works for you, and you can always change the values to match the position of button according to your need.
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
I guess this is what you are expecting
Use flex property align-items: center; to center any div element vertically when flex-direction in horizontal
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1b244a;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: "cursed timer", sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
}
.newGame {
display: flex;
align-items: center;
}
.newGame button {
}
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
(apologies for my English in advance)
Hello, I want to put the display of a jinja for loop side by side, but I can't seem to know how to do it (new to flask)
Here's how it is being displayed on my website
And here is a basic idea of how I want it to be displayed
Here is the HTML code
{% for item in user.people %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="card" style="margin-top: 100px;" >
<div class="image">
<img src="{{ url_for('static', filename='profile_pics/'+item.image) }}" alt="zul" style="background-color: #eee; margin-left: 240px; height: 130px; border-radius: 80px;">
</div>
<div style="margin-top: -120px;" class="data">
<div class="title">
<h1 class="auth">{{item.first_name}} {{ item.last_name }}</h1>
<h2> {{item.email}} </h2>
</div>
<div class="content">
<div class="social">
<strong>Company: </strong>{{item.company}}
</div>
<div class="social">
<strong>Address: </strong>{{ item.address }}
</div>
<div class="social">
<button type="button" id="delete" class="btn btn-outline-danger" onClick="deletePerson( {{ item.id }} )">Remove</button>
</div>
</div>
Here is the CSS
#dropdownMenuLink {
position:absolute;
top:-80px;
right:-190px;
background-color: #0275d8
;
}
#delete {
width: auto;
height: auto;
margin-left: -5px;
border-radius: 12px;
}
.card {
position: relative;
margin: 150px auto;
width: 400px;
flex: 1 1 0px;
padding: 10px;
box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);
border-radius: 12px;}
.content {
margin-top: 25px;
display: flex;
flex-direction: column;
}
.auth {
font-size: 34px;
font-weight: bold;
margin-bottom: 0;
}
h2 {
font-size: 18px;
letter-spacing: 0.5px;
font-weight: 300;
}
.company {
margin-bottom: 5px;
}
.address {
margin-bottom: 5px;
}
.remove {
margin-bottom: 5px;
}
a {
text-decoration: none !important;
color: black;
margin-left: 8px;
font-weight: 300;}
i {
font-weight: 400;
color: red;
}
.location {
display: flex;
flex-direction: column; }
p {
font-weight: 300;
}
Anyone can help me please
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
the css code ::
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code::
<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
So I took use of the 'Sticky Footer' code which automatically places the footer below all of the content, my problem is that my content height is set to 1300 pixels, meaning if you have a screen with a height more than 1300 pixels the footer will not appear at the bottom of the screen but rather below the content.
Here's my code:
#import 'https://fonts.googleapis.com/css?family=PT+Mono';
body {
font-family: 'PT Mono', monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
#content {
height: 1300px;
width: 100%;
}
html, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
width: 100%;
}
#wrapper {
position: relative;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
text-align: right;
margin-right: 10px;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
</div>
<div id="footer">
© Hecc
</div>
</body>
</html>
I apologize if my wording makes this problem difficult to visualize.
Any help is greatly appreciated!
Your question is a little ambiguous - I think you are asking "how do I fix my footer to the bottom of the screen (window), not below the content?".
You can use position fixed for that.
article {
height: 1300px;
}
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background: lightpink;
padding: 0 1rem;
}
<body>
<article>
<p>This is the page content</p>
</article>
<footer>
<p>I am a fixed footer</p>
</footer>
</body>