I know a lot of people asked that already but nothing seems to work. I want my footer to be on the bottom of the page. So far it is on the bottom of the screen, but if the page is bigger and you need to scroll, it just sticks there and stays in the middle. If I put position: fixed the footer scrolls with you. I want it to be at the VERY BOTTOM of the page, though, so you have to scroll down to see it in the first place, if the page is too big.
I tried several different wrappers and pushers but nothing seems to work.
You should overthink your layout and read about the HTML box model.
I put all your elements in a wrapper which is position: relative, so the footer with position: absolute can align properly. Also I had to remove position: absolute of .pageframe:
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
min-height: 500px;
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
/* position: absolute; */
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
height: 100%;
width: 100%;
margin-bottom: -30px;
/* Footer */
}
#wrapper {
min-width: 100%;
min-height: 100%;
display:inline-block;
position:relative;
}
<head lang="de">
<link rel="stylesheet" href="inc/layout.css">
<script src="inc/javascript.js"></script>
<meta charset="UTF-8" />
<title>komix.lit</title>
</head>
<body>
<div id="wrapper">
<div id="navbar">
<img class="logo" src="inc/logo.png" /> komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div>
<div class="pagelist">
<ul style="list-style-type: none;">
<li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
</ul>
</div>
<div class='pageframe'>
<div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
<div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
</div>
<div class="footer">
<span>text</span>
</div>
</div>
</body>
</html>
You can try this, hope this will help you
Remove min-height for pageimg class and content class then you will get your output.
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
/* min-height: 500px; */
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
position: absolute;
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
width: 100%;
margin-bottom: -30px;
/* Footer */
}
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg'
alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
<span>text</span>
</div>
Related
What I have
A header that is fixed
Inside the header is a piece of text in the top right
When I click on the text an absolute positioned div appears underneath it with some 'options'
In the main content I also have a column on the right that's fixed with a button inside
The Issue
When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.
Question
How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?
Some quick code to demonstrate
If you click on the text in the top right, you'll see the issue.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
<div class="text">
<span> Some text </span>
<div class="dropdown">
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
z-index:1001;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
z-index:1000; /* less then the header*/
}
Hope this helps.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
z-index:100;
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header" style="z-index:199;">
<div class="text">
<span> Some text </span>
<div class="dropdown" >
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
<div class="header" style="z-index:199;">
Currently doing the portfolio challenge at codecamp. I´m trying to align a text above another text, and then a img next to them. But it seems like they don´t recognize the blank space inside my div.
Here is my code
#div1 {
width: 80%;
height: 500px;
background-color: #A09F9C;
text-align: center;
margin-left: 10%;
}
#about {
color: white;
width: 500px;
height: auto;
padding-top: 10%;
padding-left: 5%;
}
#avatar {
width: 300px;
height: 300px;
float: right;
border-radius: 50%;
margin-right: 5%;
margin-top: auto;
}
<div id="div1">
<p id="about">aaaaaaaaaaaaaaaaaaaaaaaaaaa ...</p>
<img id="avatar" src="http://i.imgur.com/scMYPYt.jpg">
<h4> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </h4>
</div>
This is how it's supposed to look like.
If you want to take a look, here it's my codepen.
Check here:
`http://codepen.io/anon/pen/JKaqbE`
Btw I suggest you to learn to use materialize or bootstrap for faster development.
HTML:
<div id="navtab">
<ul>
<li class="button"> ABOUT</li>
<li class="button"> PORTFOLIO</li>
<li class="button"> CONTACT</li>
</div>
<div>
<div id="div1">
<p id="about"> The name is Gaston and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</p>
<img src="http://i.imgur.com/scMYPYt.jpg">
<div id="spdline"></div>
</div>
<div id="div2">
<h4> PORTFOLIO </h4>
</div>
<div id="div3">
</div>
</div>
<div id="div4">
</div>
<div id="div5">
</div>
CSS:
body {
background-color: grey;
}
#navtab {
background-color: purple;
height: 60px;
position: fixed;
width: 100%;
}
ul {
padding-top: 15px;
padding-right: 15px;
float: right;
margin-right: 10%;
}
li {
display: inline-block;
padding: 5px 15px 5px 15px;
}
li:hover {
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
a {
color: grey;
}
a:hover {
color: #2B303A;
text-decoration: none;
}
li:active {
background-color:white;
text-decoration: none;
}
a:active {
color: black;
text-decoration: none;
}
#div1 {
width: 80%;
background-color: #A09F9C;
text-align: center;
margin-left: 10%;
display: inline-flex;
}
#about{
padding: 10% 10%;
color: white;
float: left;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 50%;
float: right;
}
#spdline {
width: 300px;
height: 3px;
background-color: white;
display: block;
}
#div2 {
width: 80%;
background-color: white;
text-align: center;
margin-left: 10% ;
}
#div1, #div2, #div3 {
border-style: solid;
border-width: 1px;
border-color: grey;
}
I'm new at the Bootstrap. Before I was writing a grid by myself, but now, I thougt, that I should learn new thing.
I'm making a basic site with background image in one of the containers. I don't know why, I have an extra padding added. I was trying with background-size: contain and cover, but it is not the effect that I want.
And I need that padding-bottom to stretch the container. The mathematical operation is the height of the image split with with and multiply with percetage. In my own grid it was working like a fairy tale.
Now I'm missing something. Any ideas?
This is jsfiddle: https://jsfiddle.net/LukMona/qwqck9bp/2/
CSS:
.bg-img {
width: 100%;
background-image: url("https://github.com/LukMona/Doctors_Search_Basic/blob/master/images/header_background.jpg?raw=true");
background-repeat: no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
padding-bottom: (1210/2808)*100%;
}
.main-top-header {
position: absolute;
width: 90%;
margin-top: 2%;
margin-left: 5%;
margin-right: 5%;
}
.main-top-header-left {
float: left;
position: relative;
width: 25%;
margin: 0;
}
.logo {
margin: 0;
}
h1 {
font-size: 2.5rem;
margin: 0;
}
.main-top-header-right {
position: relative;
float: right;
width: 75%;
}
ul {
text-align: right;
}
li {
display: inline-block;
margin-left: 5%;
font-size: 2rem;
}
a:link {
color: inherit;
text-decoration: none;
}
a:hover {
color: blue;
}
.main-search {
background-color: grey;
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin: 0 auto;
padding-top: 2%;
padding-bottom: 5%;
border-radius: 3%;
position: relative;
;
top: 10rem;
}
.searching {
width: 50%;
margin: 0 auto;
}
.find {
width: 80%;
background-color: grey;
}
span:first-child {
padding: 2%;
margin-bottom: 2%;
}
.search {
float: left;
}
input {
height: 3rem;
width: 75%;
padding-left: 2%;
}
button {
width: 20%;
height: 3rem;
background-color: blue;
color: white;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
}
nav {
background-color: grey;
height: 200px;
}
HTML:
<header class="container-fluid bg-img">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 main-header">
<!-- TOP HEADER -->
<div class="main-top-header">
<div class="main-top-header-left">
<div class="logo">
<h1>
Logo
</h1>
</div>
</div>
<div class="main-top-header-right">
<div class="menu">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP HEADER -->
<div class="main-search">
<div class="searching">
<span>type something</span>
<br>
<input class="search" type="text" name="search" placeholder="typing">
<button class="search">
<span>find</span>
</button>
</div>
</div>
</div>
</div>
</header>
<nav class="row">
<div>
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
</div>
</div>
</nav>
Remove .main-top-header { position: absolute; } and .main-top-header-left { position: relative; } that will work
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
Can anyone help me figure out what i'm doing wrong?
I want to insert the text inside "servicesTitle"in the middle of the image.
I have tried position, top, vertical align..and can't figure out what i'm doing wrong
<div class="services">
<p id="titleServices">Our Services</p>
<div class="servicesImages">
<div class="servicesImagesLeft">
<div id="cultureNews">
<div class="servicesTitle">Culture News</div>
<img src="/www/assets/newImages/services/190x136/Culture News1.jpg">
</div>
<div id="meetingPoint">
<div class="servicesTitle">Meeting Point</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
<div class="servicesImagesCenter">
<div id="gallery">
<img src="/www/assets/newImages/services/460x330/Gallery.jpg">
<div class="servicesTitleActive">Gallery</div>
</div>
</div>
<div class="servicesImagesRight">
<div id="profile">
<div class="servicesTitle">Profile</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
<div id="invitation">
<div class="servicesTitle">Invitation
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#clear {
clear: both;
}
.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}
.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}
.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}
.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}
.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}
.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}
.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}
.servicesImagesRight #profile {
width: 100%;
height: 100%;
}
.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}
.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}
.servicesTitle {
color: #fff;
}
.services p#titleServices {
Needs to be:
.services .servicesTitle {
.servicesTitle {
color: #fff;
width: 100%;
height:100%;
position: absolute;
top:60%;
left:auto;
z-index:2;
}
http://jsfiddle.net/uHY7C/