Is there a way to make a div appear half off-screen using just CSS without knowing the width of the div?
Unless I've misunderstood the question, I think it is possible with CSS, as I hope should be clear from this jsfiddle.
Example HTML
<div class="container one">
<div class="half">Hello there.</div>
</div>
<div class="container two">
<div class="half">Hello there, you old dog.</div>
</div>
<div class="container three">
<div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>
The CSS
.container {
position: absolute;
}
.half {
position: relative;
right: 50%;
}
.two {
top: 30px;
}
.three {
top: 60px;
}
Actually, no.
The div will have it's top positioned at 50% the screen... you could assume values that would "sort of" make it look like it would be in the middle if you knew more or less the height of the div before-hand. But in short, no.
Only with tables or Javascript.
i made something from jQuery. Hope its what you are after - http://jsfiddle.net/6Guc8/1/. it gets half the width of the element and then chucks half of it out the screen.
here is the jquery
$(document).ready(function(){
var half_width = $("div").width() / 2;
$("div").css("left", -half_width);
});
here is the css
div{
background: #555;
height: 100px;
width: 100px;
position: absolute;
}
here is the html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> </script>
</head>
<body>
<div>
</div>
</body>
</html>
It is absolutely possible in CSS only. You need 1 wrapper div, however:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#wrapper {
position: absolute;
left: 0;
}
div#wrapper div {
position: relative;
padding: 30px;
background: yellow;
left: -50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div>this div is halfway hidden, no matter what size it is.</div>
</div>
</body>
</html>
Related
I'm using Ant Design for my website frontend, a similar framework like Bootstrap for React JS, but not really relevant here, since this is a pure CSS question.
The framework uses rows and columns that are relative. Now I want to overlay the parent element with an absolute element that is nested deep inside in it. I don't want to change the CSS of the rows or columns and I don't want to move the absolute container outside of my nested elements.
Is this possible, if so, how?
.row { /* copied from Antd */
position: relative;
height: auto;
margin-right: 0;
margin-left: 0;
zoom: 1;
display: block;
}
.col { /* copied from Antd */
flex: 0 0 auto;
float: left;
position: relative;
min-height: 1px;
padding-right: 0;
padding-left: 0;
}
.test {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>This line should stay visible.</div>
<div class="row">
<div class="col">
<div>Right below this line it should be darken:
<div class="row">
<div class="col">
<div class="test"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The desired effect looks like this, but I'm unsure if this is really possible:
The test container should start where its parent column starts, but be greedy. Is this even possible? I have no problems to add more divs around the test container, though.
Make the absolute element big enough and hide the overflow where you want:
.row {
/* copied from Antd */
position: relative;
}
.col {
/* copied from Antd */
position: relative;
}
.test {
position: absolute;
top: -100vh;
right: -100vw;
bottom: -100vh;
left: -100vw;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
<div>This line should stay visible.</div>
<div class="row">
<div class="col">
<div>Right below this line it should be darken:
<div class="row" style="overflow:hidden"> <!-- hide here -->
dark content here
<div class="col">
dark content here
<div class="test"></div>
</div>
</div>
</div>
</div>
I'm using wordpress with a custom template and I want to display a div the width of the window. This is my html code:
<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
<div class="blacklayer"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Title Text</h2>
<p>Test Text</p>
</div>
<div class="col-md-12 text-center">
Download
</div>
</div>
</div>
</section>
This is my css code:
.calltoaction {
background-position: unset !important;
position: absolute;
left: 0;
right: 0;
background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
background-size: cover;
padding: 80px 0 90px 0;
}
The problem is, everything I create gets placed within this div class:
.row {
margin-right: -15px;
margin-left: -15px;
}
So i'm trying to write custom css to create a div that displays over the top of this class as I don't have access to the template's code directly.
At the moment the result is this. I want that image to fit the width of the page.
Any help would be greatly appreciated.
See attached code-snippet for how to stack divs ontop of each other, assuming one div has setting: position: absolute; . I moved the lowest div slightly so it is visible.
.div-1 {
position: absolute;
z-index: 1;
background-color: red;
height: 100px;
width: 100px;
margin: 10px 0px 0px 10px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: green;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
Here's teh codez:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
}
#pageContainer {
min-width: 100%;
float: left;
background-color: red;
}
#leftColumn {
float: left;
background-color: lime;
}
#rightColumn {
position: relative;
}
</style>
</head>
<body>
<div id="pageContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
</body>
</html>
On IE8/Opera/FF everything looks fine. If I take IE8 and turn on IE7 mode (standards compliant), suddenly a horizontal scrollbar appears. Suspiciously it is just as big as the left column. Any ideas?!
Two solutions. On the right column, either:
Remove position: relative if you don't need it.
Or, keep that and add zoom: 1.
This is all about hasLayout.
I have a very simple HTML. Due to some limitations, I cannot modify the HTML content. I want to center the text vertically only using CSS.
<html>
<head>...</head>
<body>
<div>Oops, the webpage is currently not available.</div>
</body>
</html>
Note that the size of the HTML can be variable.
In addition, if the text cannot be displayed in one line, it should be broken into multiple lines.
Is it possible?
I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.
There are some workarounds, see http://phrogz.net/css/vertical-align/index.html
Another possible solution:
<html>
<head>
<title>Title</title>
<style>
body {height:100%}
</style>
</head>
<body>
<div style="height:100%;">
<div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
</div>
</body>
</html>
<html>
<head>...
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.vertical {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="vertical">
Centered
</div>
</body>
</html>
Try this:
.text-tag{
text-align: center;
margin-top: 25%;
}
And apply "text-tag" to the text you want to center.