This question already has answers here:
How to make a div 100% of page (not screen) height?
(5 answers)
Closed 7 years ago.
I have a div called 'alert' which is used in the same way as as the javascript alert() function. It covers the whole page until you scroll down, then the part of the page which was not previously visible is not covered. Is there a way to cover the whole page and not just the visible viewport? NB. I don't want to use position:fixed. this demo demonstrates what I mean. Thank you.
#alert{
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(187,201,247,0.5);
z-index:3;
text-align:center;
font-size:20px;
}
CSS
html,body{
position:relative;
}
#text{
height:1000px;
}
#alert{
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(187,201,247,0.5);
z-index:3;
text-align:center;
font-size:20px;
}
DEMO
Related
i am wondering if is it possible to disable pointer event for say half of an element not entirely? for example like picture below..
maybe it would be possible to use another element to overlap that part of element that i want to be disabled but as far as i realized it is impossible through any straight way but we can cover that part of image by another div and then it'll do the trick...
for that we should put our image in a container then set its position to fixed now let's check it out
#container{
position:fixed;
width:150px;
height:150px;
left:0;
top:0;
z-index:5;
overflow:hidden;
}
#container img{
width:100%;
height:100%;
cursor:pointer;
}
#imgcover{
position:absolute;
display:inline-block;
height:250px;
width:150px;
left:50px;
top:8px;
transform:rotate(45deg)
}
and html codes
<div id="container">
<div id="imgcover"></div>
<img src="/forum_corner03.png" />
</div>
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
I'm trying to make a kind of menu where consists of many DVD covers. When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.
Note: I would like to place the title a bit above the cover, not completely over it.
Here is the HTML example:
<div id="cover"><span>Here is the title in a single line!</span></div>
Here is the CSS:
#cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#cover span{
position:absolute;
background-color:#0f0;
display:none;
}
#cover:hover span{
display:block;
}
JSFIDDLE: example
When the cursor is positioned over each cover it will show the
complete title name in a single line (not wrapped inside the cover
container). How can I align the title right in the center of each
cover.
I think this will take care of it.
Codepen.io Demo
CSS
.cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span{
position:absolute;
background-color:#0f0;
display:none;
color:white;
}
.cover:hover span{
display:block;
position: absolute;
left:50%;
top:10%; /* adjust to suit */
width:auto;
white-space: nowrap;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
I would like to place the title a bit above the cover, not completely
over it.
I'm not sure what this means but the vertical positon can be adjusted by means of the top value.
"Piggybacking" on #Paulie_D's answer, I would include the element's properties in the 'normal' state rather than on the :hover state. Two benefits of this:
The element's properties don't need to be applied on every :hover action, hence optimizing elements' repaint a bit.
Just in case you want to show that content on the 'normal' state, the element will already have all the styles applied to it.
Here's what I mean:
.cover {
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span {
position:absolute;
background-color:#f00;
white-space: nowrap;
width:auto;
transform:translateX(-50%);
position: absolute;
left:50%;
top:10%; /* adjust to suit */
display: none;
}
.cover:hover span{
display:block;
}
Truth be told though:
Using :hover to display content is a content strategy and user experience bad practice: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Not only that but the content cannot be seen in touch screen devices, which renders this approach completely unusable.
Good luck.
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
Tried everything, with ul's... div's... but it doesn't appear how it should do.
The main div has margin 0 auto. The main div is 1030px width.
I bet it's a stupid thing...
Demo Fiddle
HTML
<div><span>Things to Know</span></div>
CSS:
div{
text-align:center;
}
div:after{
position:relative;
display:block;
border-top:1px solid grey;
top:-10px;
height:1px;
content:'';
}
div span{
background:white;
position:relative;
z-index:1;
}
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
This question already has answers here:
Center div in page
(2 answers)
Closed 9 years ago.
I've googled this many times, and I cant understand why my div wont center.
HTML:
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:auto;
}
It only centers horizontally and wont center vertically, whats the problem because im not seeing it.
Try something like:
#mydiv {
height:50%;
width:50%;
background:grey;
position:absolute;
top:25%;
left:25%;
}
If you need vertical centering too, refer to the Dead Centre approach, you will need a few extra <div>s but it should help!
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Hopely useful for you:
http://jsfiddle.net/Ug3RM/
#mydiv{
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
margin-top:-25%;
margin-left:-25%;
background:grey;
}
To vertical align you can try setting your margin like so:
#myDiv{margin:50% auto;}
Of course this will depend on your containing elements. However if the markup is as you have provided, it should display vertically aligned in the center...
OP,
Check this Fiddle. Centers both vertically and horizontally.
Uses the display:table and display:table-cell approach, which conveniently allows for vertical-align: middle to be paired with margin: auto.
Hope it helps.