I have an overlay over a clip thumbnail, and a click event to open the iFrame. The overlay will contain the JSON response data about the clip, however, I'm having trouble styling the overlay to not include the margins in the overlay's total size. This, for obvious reasons, makes aligning text very problematic.
So how would I make it so the overlay takes that same margin, without adding the margin to the overlay effectively doubling the margin entirely?
#clips {
overflow-x: scroll;
overflow-y: hidden;
display: flex;
}
.clipImg {
flex: 1;
margin-bottom: 1em;
padding-right: 1em;
}
.clipImg-overlay {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 496;
height: 272;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, .7);
font-family: sans-serif;
}
.clipImg-container:hover .clipImg-overlay {
opacity: 1;
}
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride"><img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
<div class="clipImg-overlay"><img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
<div id="info-container">
<h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
<p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
<p id="clip-views">4 views</p>
<p id="clip-curation">Clipped by sudocodesh</p>
</div>
</div>
</div>
The .clipImg-overlay is relative to the .clipImg-container, that expands with the .clipImg margin.
To resolve this you could try to use the margin in the .clipImg-container or make a div that surrounds .clipImg-overlay and .clipImg and have the margin that is actually in .clipImg.
<style>
.clipImg {
flex: 1;
}
.clipImg-container {
margin-bottom: 1em;
padding-right: 1em;
}
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
<img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
<div class="clipImg-overlay">
<img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
<div id="info-container">
<h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
<p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
<p id="clip-views">4 views</p>
<p id="clip-curation">Clipped by sudocodesh</p>
</div>
</div>
</div>
or
<style>
.overlay-container {
position: relative;
margin-bottom: 1em;
padding-right: 1em;
}
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
<div class="overlay-container">
<img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
<div class="clipImg-overlay">
<img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
<div id="info-container">
<h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
<p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
<p id="clip-views">4 views</p>
<p id="clip-curation">Clipped by sudocodesh</p>
</div>
</div>
</div>
</div>
Related
I am trying to assign the button : called 'go to form' right at the bottom of the grid i have done in CSS.
I have messed around with the relative position but this seems not to want to work. Any ideas guys ?
.item {
border: 1px rgb(160,160,255) solid;
}
img {
border-radius: 2px;
border: 1px solid #ddd;
height : 100px;
width : 80%;
}
p {
font-size: 18px;
}
h1 {
font-size: 14px;
}
</style>
<div class="grid-container">
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Sheep Dipper </p>
</div>
<div class="item"><img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Laptop Request </p>
<h4> Use this form to request a new laptop</h4>
<button>Go to Form</button> </div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> New User Request </p>
</div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Permissions Management </p>
</div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/> <br/><br/><br/><br/><br/></div>
</div>
try this one :
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
Try this. Position absolute will place the button with respect to its immediate parent, and bottom attribute makes sure it starts at the very bottom of the parent.
You may add top margin in case your button lacks a gap on top of it.
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
margin: 0 auto;
}
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
I have an element with a slanted bottom-right corner, over which I have to lay a box-shadow. Sometimes the slanted corner is covered up by a badge - my problem does not apply, if that is the case:
This is the (s)css part for the infobox and its corners (there are some more styles, but they're just text modifiers... The whole thing is on codepen: https://codepen.io/kerowan/pen/bqMOeB
.product-info-wrapper {
position: absolute;
top: 150px;
max-width: 100%;
padding-bottom: 10px;
width: 100%;
.product-info {
position: relative;
padding: 1rem * .5;
padding-right: 1rem * 2;
overflow: hidden;
box-shadow: 0 0 5px;
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: lighten(#000, 93.5%);
border-color: lighten(#000, 93.5%);
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
}
How can this be done (moving the shadow along the slanted corner)? Can it be done, if the slanted corners are generated the way I do it? I'm kind of dependant on those classes (I think at least) because of all the relative and absolute positioning, which I needed to place the corner badge.
EDIT: some HTML, if you need it:
<div class="swiper-slide">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
This is just part of the whole HTML code which can be found on the codepen thingy. But I guessed, that this would be the only relevant part. If you need more, please tell me!
EDIT2
The contents of this infobox can be expanded. If I click on "Kurzinfo", it expands and shows more info. That's not on the codepen version, as I created it way before I added the expansion functionality.
It is normally impossible, because the slanted corner is a part of border of element that is not visible.
In image if the blue area changes to white you have a slanted corner black area, that is a part of border and in css we can not any think to change this.(change as you want).
You can cover the shadows by adding two little divs to the product div:
<div class="product-info-wrapper">
<div class="coverShadow c1"></div>
<div class="coverShadow c2"></div>
....
And CSS:
.coverShadow {
position: absolute;
z-index: 999;
background-color: white;
box-shadow: 0 0 14px white;
}
.coverShadow.c1 {
width: 10px;
height: 35px;
background-color: white;
bottom: 8px;
right: -10px;
}
.coverShadow.c2 {
width: 35px;
height: 10px;
bottom: 0px;
right: 0;
}
By changing the box shadow and width/height and right/bottom of covering divs it could be more smooth.
And thanks for the good idea for creating slanted corners.
As of 2022 you could get rid of the elements and styles .coverShadow, .coverShadow.c1 and coverShadow.c2 suggested by #Farzin's answer. Instead, for the .product-info element replace
box-shadow: 0 5px 5px
with
filter:drop-shadow(0 0 5px #333)
(blur amount and color might need to be adjusted).
The drop-shadow() will adapt to any shape, not just rectangles. It will also work in most modern browsers.
I have the following code
<body>
<div style="height: 35%; background-color: black;"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
</div>
</div>
</body>
Ideally, I would like the top portion of the page to be a certain color (black in the example), and I want the header area (which contains the <h1> and <h3> elements) to be inside the black box. Then I would like the first paragraph of the content to also be included inside the black box. Very similar to this picture:
What is the best way to go about this?
The simplest way is to use an absolute positioned pseudo element on the header
Stack snippet
body {
background-color: #ddd;
margin: 0;
}
#header {
position: relative;
color: white;
background-color: black;
}
#header::before {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 60px;
width: 100%;
background-color: inherit;
}
#header div {
width: 80%;
margin: 0 auto;
padding: 10px;
}
#content {
position: relative;
width: 80%;
margin: 0 auto;
background-color: white;
}
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
<p>
Thre
</p>
<p>
Fou
</p>
</div>
</div>
Three steps:
Apply a gradient background to the <body>.
Create two sectioning elements: <header> and <section>
Ensure all the relevant elements in <header> and at the top of <section> have an explicitly declared height in pixels which, combined, match the height of the first part of the gradient.
Make sure that the html and body have height: 100% or min-height: 100% otherwise height 35% is not going to be 35% of the viewport height.
You can make the black background with an absolute positioned element. I suggest to look into css position(relative, absolute, fixed, static).
Here's a demo and the code:
https://jsfiddle.net/n617L6rh/
<div id="bg"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>One</p>
<p>Two</p>
</div>
</div>
html,
body {
height: 100%;
}
#bg {
height: 35%;
background: black;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#header {
height: 35%;
color: #fff;
position: relative;
}
What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="default_tiles_view_square" id="tile2">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
And the CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.default_tiles_view_square {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
HTML:
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
#tile1 {
background-color:red;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?
Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them onClick.
CSS:
#default_tiles_view {
overflow: auto;
}
.default_tiles_view_square {
float: left;
margin: 5px 10px 10px 10px;
position: relative;
height: 128px;
width: 128px;
}
.default_tiles_view_square p {
text-align: center;
}
.content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.overlay {
position: absolute;
z-index: 2;
background: red;
opacity: 0.5;
height: 128px;
width: 128px;
top: 0;
left: 0;
}
HTML:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="overlay"></div>
</div>
<div class="default_tiles_view_square" id="tile2">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
<div class="overlay"></div>
</div>
</div>
I have taken what Gaurav said in the comments, changing the opacity:
HTML
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
#tile1:hover{
background:red;
opacity:0.4;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.