There is a wrapper.
then there is header 10%;
then
section:
min-height:80%;
height auto;
screenshot ---> This is overlapping going under header
when i scroll, the content goes under the header.
I want things to stop there...
Screenshot---> This is normal
#wrapper{
position:absolute;
padding-top:50px;
height:100%;
width:100%;
top:150px;
left:0;
margin:0;
border:2px soild green;/**/
}
header {
position:fixed;
top:0;
left:0;
background-color:#2e72ce;
float:top;
color:black;
text-align:center;
margin:0;
opacity:0.4;
padding:0px;
overflow-x:hidden;
width:100%;
height:calc(10% - 9px);
z-index:9999;
clear:both;
}
#main_section {
position:relative;
top:-50px; /*-5px proper location */
float:left;
padding-top:0;
padding-left:60px;
width:95%;
bottom:0;
right:0;
min-height:80%;
height:auto;
border:2px solid red;/**/
}
<html><!----HTML FIle---->
<body >
<div id="wrapper">
<header>
<img src="img/ztlogo.png" height="50px"/>
</header>
<section id="main_section">
This is happening because of your opacity in that header color - hence what's behind it, you can see through.
A simple fix could be to add another white div behind the blue opaque color. But, you want to make it to where you can't see through the header.
Related
new here at every aspect xd Sry for my bad english.
Im trying to make a typical "background" video at my page but i can't to make the video fit the content of the grid cell whatever I do.
The idea is that the video stay at z-index -1 and fit 1920x1080px but for some reason it got resized and stay at the center o do crazy things.
The first I do its a grid template with divs, and I make the first of them 1920x1080px, 2 columns.
Then this happens when I put in the video on that cell (video is 1920x1080px):
enter image description here
I tried putting video with pos: absolute, I tried with the container too, assigning height, widths, justify-content, top:0, display: block ... i have no clues now, ive tried almost everything that I knew and googled but I couldnt do do the shit.
Heres my html:
<?php get_header(); ?>
<div class="main-container">
<div class="item1">1
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
<?php get_footer(); ?>
And my css
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
display:block;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
Can u help me? What I am doing wrong?
enter image description here
Heres the inspector with this css:
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
position:absolute;
align-self:stretch;
justify-self:stretch;
display:block;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
min-height:400px;
min-width:400px;
}
Use object-fit and object-position to scale and position the video.
Even if the element is 1920x1080 the video contents may not depending on the videos aspect ratio and by default get scaled to be contained in the element.
/*GRID index*/
.main-container {
display:grid;
background-color: red;
grid-template-columns: auto auto;
box-sizing:border-box;
}
.main-container div {
color:black;
border: 1px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
<div class="main-container">
<div class="item1">
<video id="vid" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
Hi I need show a Title tag of img inside img.
Like this example http://jsfiddle.net/51csqs0b/
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:4px 10px;
text-align:center;
background:red;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity:1;
}
<div data-content="Here is a caption" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
<hr>
<div data-content="Different caption here..." class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
But i don't want use a div before img.
<img class="" title="TITLE NEED SHOW ON HOVER" src=""/>
It's possible to show up?
Thanks
This is all thing I can do:
add .image class to a
<a class="image" href="#"><img src="http://i.stack.imgur.com/Sjsbh.jpg" class="" title="TITLE NEED SHOW ON HOVER" src=""/></a>
replace data-content with title in css:
.image:before {
content: attr(title);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:4px 10px;
text-align:center;
background:red;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
finally, add this jQuery code:
$("a.image").each(function(){$(this).attr('title',$(this).find("img").attr('title'))});
Run it yourself here:
Here is an easier way. You just use :after pseudoelement on hover.
Pure CSS solution
.img{
display: block;
width:200px;
height:200px;
background: url('http://i.stack.imgur.com/Sjsbh.jpg');
background-size: 200px 200px;
position: relative;
}
.img:hover::after {
content:'This is a description';
position: absolute;
width:100%;
height:20%;
bottom:0; left:0;
background: rgba(255, 255, 255, 0.8);
}
You won't very specific. I hope it will help.
You can also make a tooltip.
I'm having trouble getting the height of my HTML divs to scale with the content of my PHP-generated table.
The table I'm using might change size so I don't want to set the height of the parent divs statically, but I can't seem to get it to work otherwise. I'm not floating anything.
The main script for this page is like this:
<div id="wrapper">
<div id="contentmain">
<div id="contentleft">
<?php
include ('get_table.php');
?>
</div>
<div id="contentright">
</div>
</div>
</div>
I thought that if #wrapper and #contentleft has height:auto or height unset that the table would decide the size of those divisions, but instead the table just sits on its own, extending into white space while the divs sit as thin lines at the top.
CSS:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
Note: contentleft is resizing with the table properly, but contentmain and wrapper are not.
Any help appreciated!
Try this css:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
display:inline;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
display:inline;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
display:inline;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
have you tried using the clearfix method?
http://jsfiddle.net/zqtWL/
. clearfix{display:block;clear:both; float:none; width:100%;}
You can try this:
- set your #contenmain display to block.
- set your #contentleft and #contentright display to inline-block.
#contentmain { display: block; ...}
#contentleft { display: inline-block; ...}
#contentright { display: inline-block; ..}
I have the header structure of my page as
<header>
<div class="clouds"></div>
</header>
The clouds do not change by the change in width of the screen. I want to make them responsive. How can I do with CSS.
I currently use the following CSS Code.
header{
width:100%;
height:100%;
}
.clouds{
z-index: -98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
min-width: 960px;
}
You should not add the height and width, this should do it at a bare minimum
background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Use CSS media queries to do this.
http://css-tricks.com/css-media-queries/
Here is sample code for responsiveness:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100%;
border: 1px solid #555;
font: 14px Arial;
background-color:red;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: left;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ background : #FCC; -webkit-box-flex: 10;
}
.box > div:nth-child(2){ background : #CFC; -webkit-box-flex: 20;
}
.box > div:nth-child(3){ background : #CCF; -webkit-box-flex: 30;
}
.box > div:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>HTML5</div>
<div>CSS3</div>
<div>Javascript API for HTML5</div>
</div>
</body>
</html>
Demo: http://jsfiddle.net/TLnC3/
Your code is working fine for me.
Although you have some bad codes.
You dont have to
header{
width:100%;
height:100%;
}
if your going to make your .cloud 100% width, and the height is not necessary.
Maybe you thought it's not working because of the min-width. Which limits your .clouds minimum width. So if you are re-sizing it below your min-width. Your .clouds width doesn't change to your screen size.
And don't listen to the others who uses media query, for this basic responsiveness you don't have to use media query.
header{
width:100%;
height:100%;
}
.clouds{
z-index: 98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
}
I am creating an e-commerce website. While showing discount box, the image of the item is shifted to the left (image below). I want the discount box (blue color) on top of the item class. Can anyone help me with this?
CSS file
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
float:right;
margin-right:30px;
margin-top:10px;
}
HTML File
<div class="item">
<img src="items/1/s/a.jpg"/>
<div class="discount">
50% discount
</div>
</div>
My example -- the blue box is not overlapping the image. Instead it displaces the image.
I want like this: in which discount box overlaps the image/CSS class
You could use z-index and absolute positioning on the top div. Something like:
div.discount
{
width:30px;
position: absolute;
z-index: 10;
top: 8px;
right: 8px;
height:30px;
border:1px solid blue;
}
You could also use percentages instead of px in the top and right to make it a little more flexible.
Edit: You will also have to add position: relative to div.item (absolute position applies based on the closest containing element with a position applied).
z-index is not strictly necessary as long as the thing you want on top appears before the thing on the bottom in the code. I sometimes like to put it in there just in case things get moved around later.
Try positioning the discount label absolute within the item div
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
border:1px solid red;
position :relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position: absolute;
top: 20px;
left: 20px;
}
div.item { position:relative; }
div.discount { position:absolute; top:-5px; left: -5px; }
You can use absolute positioning to place the blue box on top, just make sure that the parent element is set to position:relative.
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
position:relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position:absolute;
right:30px;
top:10px;
}
This is something quick I made up, should work for you: JsFiddle Demo