It seems I have a problem with my footer. My Content div won't push the footer down. It just go through it. I have been searching the net for days now (even stackoverflow), but I can't seem to find a solution. If anyone can help me, I would really appreciate it. I have tryed to clean up the html, so it would be easier to help me, however, If you like the original code, go to http://djstarkick.com/where-we-belong. (You will also see the problem with the footer.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StarKick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="Container">
<div class="Header">
<div class="Slideshow">
<div class="TopLine"></div><!--TopLine-->
<div class="NewMusic">
<div class="NewMusicText"></div><!--NewMusicText-->
</div><!--NewMusic-->
<div class="WhereWeBelongPodcast">
<div class="WhereWeBelongPodcastText"></div><!--WhereWeBelongPodcastText-->
</div><!--WhereWeBelongPodcast-->
<div class="Meny">
</div>
</div><!-- Meny-->
</div><!--Slideshow-->
<div class="HeaderLine"></div><!--HeaderLine-->
<div class="Logo"></div><!--Logo-->
</div><!--Header-->
<div class="MainContent">
<div class="TwitterPost">
<div class="TwitterFeed">
</div><!--TwitterFeed-->
</div><!--TwitterPost-->
<div class="Content">
<div class="contentbackground">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<hi><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?> <!--Wordpress-->
</div><!--Contentbackground-->
</div><!--Contentline-->
</div><!--Content-->
</div><!--MainContent-->
<div class="Footer"></div><!--Footer-->
</div><!--Container-->
</div><!--Background-->
</body>
</html><!-- -->
CSS code:
/*
Theme Name: StarKick - Where We Belong
Theme URI: djstarkick.com
Author: Dani Møllerplass
Author URI: djstarkick.com
Description: My first theme on wordpress for my own use.
Version: 1.0
*/
#charset "utf-8";
body {
margin: 0;
padding: 0;
background-color:#000
}
.background {
height: 1080px;
width: 1920px;
background-image: url(Pictures/Background/background.png);
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.Container {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
.Header {
height: 560px;
width: 980px;
position: relative;
}
.HeaderLine {
height: 45px;
width: 980px;
}
.Share {
height: 55px;
width: 265px;
position: absolute;
top: 5px;
left: 345.5px;
}
.Logo {
height: 182px;
width: 408px;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 25px;
left: 291px;
}
.Meny {
height: 50px;
width: 545px;
position: absolute;
top: 150px;
left: 217.5px;
}
.MenyText {
height: 50px;
width: 545px;
position: absolute;
top: 7.5px;
}
.MainContent {
width: 980px;
position: relative;
height: auto;
}
.Content {
width: 625px;
height: auto;
left: 0px;
top: 0px;
float: left;
}
.Contentline {
height: 45px;
width: 625px;
top: 0px;
}
.contentbackground {
width: 625px;
background-repeat: repeat-y;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
left: 0px;
background-color: #000;
position: relative;
}
.Footer {
height: 150px;
width: 980px;
font-family: "high Tower Text";
color: #FFF;
text-align: center;
position: relative;
clear: both;
}
.TwitterPost {
height: 650px;
width: 325px;
right: 0px;
float: right;
}
.TwitterFeed {
height: 600px;
width: 323px;
position: absolute;
top: 29px;
right: 1px;
}
.Slideshow {
height: 450px;
width: 980px;
position: relative;
}
.NewMusic {
height: 53px;
width: 332px;
position: absolute;
left: 0px;
bottom: 0px;
}
.NewMusicText {
height: 53px;
width: 300px;
position: absolute;
left: -5px;
bottom: 3px;
}
.TopLine {
height: 397px;
width: 980px;
position: absolute;
top: 0px;
}
.WhereWeBelongPodcast {
height: 53px;
width: 332px;
position: absolute;
right: 0px;
bottom: 0px;
}
.WhereWeBelongPodcastText {
height: 53px;
width: 300px;
position: absolute;
right: -15px;
bottom: 0px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #FFF;
text-decoration: none;
}
a:hover {
color: #CCC;
text-decoration: none;
}
a:active {
color: #FFF;
text-decoration: none;
font-family: "high Tower Text";
text-align: center;
}
.background .Container .Header .Slideshow .Meny .MenyText table tr td {
color: #FFF;
font-family: "high Tower Text";
text-align: center;
}
.year {
font-size: 22px;
}
Thanks in advance! :)
Add a div right before your footer class that is inside of your MainContent div like so
EDIT: Also, remove the height from your ContentLine div
HTML
<div class="clearFloat"></div>
CSS
.clearFloat { clear: both;}
add float:left to every containter and add clear:left for the footer
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
I'm making a webpage as a product for my presentation in school. Now, this isn't the first time I've experienced this problem, but my scrollbars seems to cut a little off the top and on the side. On top of that the scrollbar is only HALF visible.
(Note that the black task bar in the top should fill out all the way from left to right and should be right up against the top.)
<head>
<style type="text/css">
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
left: -0.5%;
top: -8px;
width: 100.9%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #111;
}
textarea {
resize: none;
position: fixed;
left: 35%;
top: 1%;
width: 30%;
font-size: 160%;
height: 35px;
padding: 3px;
}
p {
font-size:20px;
font-family: arial;
position: absolute;
}
.underline {
border-bottom: 0.5px solid black;
display: inline-block;
line-height: 0.85;
}
</style>
<script type="text/javascript">
function clearContents(element) {
element.value = '';
}
</script>
</head>
<body>
<ul>
<li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
</ul>
<img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->
<textarea placeholder="Search for jobs"></textarea>
<img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">
<p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>
<img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">
<p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p>
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">
</body>
You probably just need to reset the margin on in you body tag.
So try changing:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
To:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
margin: 0px;
}
From the CSS, remove
html, body {
**overflow-x: hidden;**
}
The overflow-x part. This fixes the problems you mentioned. Let me know if this helped.
I'm trying to make a website, with my basic knowledge, for my mother. But I've tried many things, but I can't get it to work the way I want it to
This is how it now looks:
And this is how I want it to be:
But somehow I can't get it to work. The div isn't positioning where I want it to position.
This is my source code:
JsFiddle
It's about this part that doesn't position properly:
<div class="wrapper_3">
<div class="main_3">
3
</div>
</div>
Thanks in advance for the help! I really can't get it to work.
Add float:left; to wrapper_1 and wrapper_2
after that, use position:relative; to position wrapper_2.
visit this link if you need more information about syntax.
CSS Position Property
Here is your new CSS.
.wrapper_1 { width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
float:left;}
.wrapper_2 {
width: 25%;
display: inline-block;
position: absolute;
margin-left: 16px;
margin-top: 5%;
float:left;
position: relative;
top: 50%;
}
it will be easier if you use bootstrap for your website.
html:
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="logo text-center">logo</div>
</div>
<div class="col-xs-offset-4 col-xs-3 box">2</div>
<div class="col-xs-offset-4 col-xs-3 box">1</div>
</div>
</div>
css:
.logo {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 15px;
}
.box {
padding: 60px;
background-color: red;
margin-top: 30px;
}
http://jsfiddle.net/souraj/sxuqqqgd/
here you can see the code.
you have to link the bootstrap.css file to work. just visit to getbootstrap.com and see how to link bootstrap.css in your code.add this code to your head section of the code.
enter link description here
Here you go :) I edited your fiddle, Why are you using position:absolute; everywhere? There is no need of absolute positioning in your design.
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.wrapper_logo {
margin-top: 10px;
margin-left: 10px;
width:20%;
display: inline-block;
position: absolute;
}
.wrapper_logo:after {
padding-top: 45%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_logo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
padding-left: 20px;
font-size: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
vertical-align: middle;
}
.wrapper_1 {
width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
}
.wrapper_1:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
clear: both;
}
.main_1 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_2 {
width: 25%;
margin-left:200px;
}
.wrapper_2:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_2 {
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_3 {
width: 15%;
float: left;
display: inline-block;
position: absolute;
}
.wrapper_3:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_3 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.three {
position: absolute;
background: green;
width: 400px;
top: 10px;
left: 50px;
}
<!DOCTYPE html>
<div class="main">
<div class="wrapper_logo">
<div class="main_logo">
LOGO
</div>
</div>
<div class="wrapper_1">
<div class="main_1">
1
</div>
</div>
<div class="wrapper_2">
<div class="main_2">
2
</div>
</div>
<!-- <div class="wrapper_3">
<div class="main_3">
3
</div>
</div> -->
</div>
So I have the following code for a personal website:
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="jumbotron">
<div id="title-container">
<h1>Name</h1>
<h3>Interactive Resume</h3>
</div>
<div id="jumbotron-overlay"></div>
</div>
<div id="profile"></div>
</body>
</html>
And CSS:
body {
background: url(../img.jpg) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
I'm trying to get my "Name" and "interactive resume" inside the h tags to be on the top layer on top of the overlay, but no matter what I try it seems to be stuck behind the green overlay. I've tried using z-index but to no avail. I'm pretty new to front-end so any help would appreciated.
You need to set your #title-container to be positioned relative and adjust the z-index
#title-container {
width: 100%;
height: 200px;
position:relative; /*Updated here*/
z-index:1; /*Updated here*/
}
Here is a JSFiddle http://jsfiddle.net/2cpnb9ja/1/
z-index only works when position is set.
http://jsfiddle.net/wilchow/z4c7r70t/3/
body {
background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
position:relative;
z-index:1000;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
z-index:500;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
I am trying to make the white background poking out around the title, also poke out to the rest of the content.
I have tried overflow, clear, min-height max-height, *, everything I can think of.
<html>
<head>
<title>Ventura County CEC</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="global.css">
<style type="text/css">
html
{
height: 100%;
}
body
{
min-height: 100%;
}
#courseContainer
{
width: 960px;
background-color: #ffffff;
position: relative;
margin: 0 auto;
height: *;
/*min-height: 1610px;*/
padding-left: 15px;
padding-right: 15px;
}
#courses
{
position: absolute;
top: 221px;
height: *;
width: 960px;
border: 1px #cccccc dotted;
border-radius: 4px;
/*height: -moz-calc(* + 3px);
height: -webkit-calc(* + 3px);
height: -o-calc(* + 3px);
height: calc(* + 3px);*/
padding-bottom: 3px;
background: #ffffff;
}
/*#superCourses
{
background: #ffffff;
width: 960px;
height: *;
}*/
.course
{
position: relative;
height: 120px;
width: 952px;
margin-top: 3px;
margin-left: 3px;
border: 1px #cccccc dotted;
border-radius: 4px;
}
.course_title
{
position: absolute;
left: 5px;
width: 150px;
height: 120px;
line-height: 100px;
text-align: center;
}
.titleAlign
{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.course_description
{
position: absolute;
left: 150px;
top: 10px;
bottom: 10px;
width: 340px;
height: 100px;
overflow: auto;
z-index: 5;
}
.course_pics
{
position: absolute;
left: 450px;
height: 110px;
width: 100px;
margin-top: 5px;
}
.picture
{
position: absolute;
height: 110px;
width: 250px;
}
.course_ment_loc
{
position: absolute;
right: 5px;
top: 10px;
width: 200px;
text-align: center;
vertical-align: middle;
height: 110px;
}
.teacher
{
top: 0px;
}
.school
{
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="courseContainer">
<?php include 'title.php';?>
<div id="superCourses">
<div id="courses">
<div id="list">
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
<?php include 'CECCourses/courseTemplate.php';?>
</div>
</div>
</div>
</div>
</body>
Your #courses div is absolutely positioned, which is why your background does not envelop the element.
If you remove the position: absolute; from this element it will resolve your issue and the background will extend the full height. Note that position style for #courses is attributed twice: once in your global.css and once on courses.php.
Edit:
If the positioning on #courses is used on other pages and global.css needs to remain as-is, just change the courses.php styles to change #courses to be relatively positioned:
#courses
{
position: relative;
top: 221px;
height: *;
width: 960px;
border: 1px #cccccc dotted;
border-radius: 4px;
/*height: -moz-calc(* + 3px);
height: -webkit-calc(* + 3px);
height: -o-calc(* + 3px);
height: calc(* + 3px);*/
padding-bottom: 3px;
background: #ffffff;
}