I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.
I have the containing div set to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.
It only needs to work in Chrome, if you encounter cross-browser issues.
Thanks in advance!
LIVE DEMO
CSS:
#body_content {
border: solid 1px blue;
display: inline-block;
padding: 5px;
}
#body_header {
border: solid 1px red;
font-size: 25px;
padding: 5px;
}
#body_image {
position: absolute;
}
#body_image_caption {
color: white;
line-height: 30px;
margin-left: 10px;
}
#body_image_container {
background: white;
border: solid 1px black;
margin-top: 3px;
padding: 10px;
}
#body_image_overlay {
background-color: black;
bottom: 5px;
display: block;
height: 30px;
opacity: 0.85;
position: absolute;
width: 100%;
}
HTML:
<div id="body_content">
<div id="body_header">
Heading
</div>
<div id="body_image_container">
<div id="body_image">
<img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
<div id="body_image_overlay">
<div id="body_image_caption">
Some Text
</div>
</div>
</div>
</div>
</div>
The #body_image element is escaping from the #body_image_container because its position is set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:
#body_image{
position: relative;
}
http://jsfiddle.net/AaXTm/2/
Try this css in parent div.
Overflow:auto
Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.
child-element {
position:absolute;
}
parent-element {
position:relative
}
http://jsfiddle.net/AaXTm/4/
Related
I have a cdk-virtual-scroll-viewport element and inside this element I have a relatively positioned div with an absolute positioned element inside it.. basically I want to be able to show the absolutely positioned item outside the cdk-virtual-scroll-viewport but its being cut off...
here is a stackblitz of the issue
https://stackblitz.com/edit/angular-kavjsh
component.html
<div class="container">
<cdk-virtual-scroll-viewport itemSize="70">
<div class="test" *cdkVirtualFor="let name of names">
<p>{{name}}</p>
<div class="test-item"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
component.css
p {
font-family: Lato;
}
cdk-virtual-scroll-viewport {
width: 150px;
border: 1px solid black;
height: 600px;
}
.test {
position: relative;
}
.test-item {
position: absolute;
background: black;
width: 150px;
height: 100px;
left: 50%;
}
whats happening is this
and my desired result is this
I've tried all sorts of positioning configuration and I can not make it work?
Any help would be appreciated!
You can use the below steps
reset contain to 'initial' or 'layout'
change overflow to 'visible'
cdk-virtual-scroll-viewport {
overflow: visible;
contain: initial;
}
:host() ::ng-deep cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
contain: inherit;
}
https://stackblitz.com/edit/angular-miqwyw?file=src/app/app.component.css
Try with overflow visible in the test div or the cdk-virtual-scroll-viewport
cdk-virtual-scroll-viewport {
width: 150px;
border: 1px solid black;
height: 600px;
overflow:visible
}
.test {
position: relative;
overflow:visible
}
i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
I'm working on a chat module for a project, everything is working but the css. I have a global container for the chat elements, this div has fixed position. Inside I have two divs, one for the chat windows and one for the contacts list, both the chat window and the contact list are floating to the right and can be "minimized" by clicking on the title (this hides the body and only leaves the title visible). The problem is if I minimize just one of the divs it remains on the top at the same height as the other div (see the image).
This is what I'm getting:
This is what I want:
Relevant code:
<body>
<!--boring code-->
<div class="chat_container">
<div class="contactos show">
<div class="titulo">contactos</div>
<div class="container">
<div class="contacto online" id="contacto_3">juan an orozco</div>
</div>
</div>
<div class="chat_wdow_container">
<div class="chat_wdow " id="chat_wdow_3">
<div class="title_area">juan an orozco</div>
<div class="container">
<div class="msg_area"></div>
<input type="text" name="msg">
</div>
</div>
</div>
</div>
</body>
and css
div.chat_container
{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed gold;
}
div.chat_container > div
{
float: right;
}
div.chat_container div.contactos div.titulo
{
text-align: center;
}
div.chat_container div.contactos
{
min-width: 150px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
}
div.chat_container div.contactos div.container
{
display: none;
min-height: 145px;
padding: 10px;
}
div.chat_container div.contactos.show div.container
{
display: block;
}
div.chat_container div.chat_wdow
{
margin: 0 5px;
min-width: 190px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
float: left;
}
div.chat_container div.chat_wdow div.title_area
{
text-align: center;
}
div.chat_container div.chat_wdow div.container div.msg_area
{
background-color: white;
height: 120px;
padding: 10px;
}
div.chat_container div.chat_wdow div.container
{
display: none;
}
div.chat_container div.chat_wdow.show div.container
{
display: block;
}
.chat_wdow input[type="text"]
{
width: 186px;
}
To collapse the window I toggle via mootools the class .show. When this class is missing the container area of the windows has display:none and when it gets applied it has display:block.
What I have tried so far:
setting the fixed parent to a height of 0 and overflow visible
seting the inner container to position relative and the child to absolute
using clear and overflow hacks
changing margins to auto values
changing vertical sizes and minimun heights of the inner containers and childs
changing display to inline and inline block
changing chat container to absolute and inner containers to relative
I have been searching for a while on google and SO but I have only found the options that I have already tried, I also looked at facebook's chat css but I can't find anything to help me, so I am looking for new ideas to bring down the collapsed div.
One solution is to use display:inline-block or display:inline instead and then set the vertical-align:bottom.
Ex: http://jsbin.com/uhubeh/1/edit
If you know the widths of both, however, you could also just use absolute positioning.
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle
I am using CSS to skin a scroll bar that is created using JavaScript.
.scrollbar-track{
background: black;
height: 10px;
}
.scrollbar-thumb{
cursor: default;
border: 1px red solid;
width: 50px;
padding: 0;
}
.scrollbar-thumb-first{
display: inline-block;
background: green;
width: 5px;
height: 10px;
}
.scrollbar-thumb-middle{
display: inline-block;
background: red;
height: 10px;
width: 20px;
}
.scrollbar-thumb-last{
display: inline-block;
background: blue;
width: 5px;
height: 10px;
}
<div class="scrollbar">
<div class="scrollbar-track" style="width: 970px;">
<div class="scrollbar-thumb">
<span class="scrollbar-thumb-first"></span>
<span class="scrollbar-thumb-middle"></span>
<span class="scrollbar-thumb-last"></span>
</div>
</div>
</div>
And this is the fiddle: http://jsfiddle.net/w27wM/8/
Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.
Issue resolved by changing all the display: inline-block to float: left.
The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.
Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.
So solution is either specify
line-height: 10px; or float: left;
Eg:
.scrollbar-thumb span{
line-height: 10px;
}
or
.scrollbar-thumb span{
float: left;
}
The .scrollbar div is not given an explicit width so it assumes the default = 100% of the width given by its parent.
The .scrollbar-track is given an explicit width of 970px which is beyond the width of the parent and the parent's parent. Thus, .scrollbar ends up thinner than its wide child .scrollbar-track.
Why are you setting the scrollbar-track explicitly but not doing the same for the .scrollbar (parent)?