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;
}
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>
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to find the best way to center one div over another which is using the 'top' and 'left' CSS components.
When resizing the browser window the circle should always be in the center of the box, however moves slightly off horizontally when scaling
Here is the code I am using;
https://codepen.io/EarlGrey8/pen/LYVOQrY
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 33%;
}
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
To center the circle on any screen. Try the following CSS.
.moduleImage {
left: 50%;
transform: translateX(-50%);
}
Change .moduleImage's position, transform property.
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: absolute; /* change */
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 50%;
transform: translateX(-50%); /* change */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
you can use calc css3 calc
see example:
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: calc(50% - 125px); /* just this line changed */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
everything is same.
just in .moduleImage class i changed left property to left: calc(50% - 125px);
125px is half of element width.
update your code by
.moduleContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 50%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
height: 70%;
}
.moduleImage {
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
}
I hope this work
I am making my first webpage and am having trouble positioning elements. They keep overlapping each other when I resize the browser. The title is positioned absolute, but this means it overlaps the image at the top. I cant get it into position by any other means. Can anyone help?
My question wasn't answered properly the first time.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./new 1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth" />
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Did you try something like this ? please tell me if i wrong.
Here your css code.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: absolute;
z-index:1000;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
And here your html code.
<div class="wrapper">
<div class="header">
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
</div>
</div>
Hope this help you.
Good luck.
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
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