I'm trying to put a scrollbar inside my div tag yet when I do, the arrow on the side of it disappears. Is there are way to fix this?
Live preview here.
The bubble is supposed to look like this, but with a scrollbar in it of course.
.bubble {
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 8px;
width: 240px;
height: 250px;
padding: 10px;
margin: 100px auto 100px auto;
position: relative;
overflow: scroll;
}
.bubble:before {
content: "";
position: absolute;
left: -25px;
top: 24px;
bottom: auto;
border-style: solid;
border-width: 12px 24px 12px 0px;
border-color: transparent #000000;
}
.bubble:after {
content: "";
position: absolute;
left: -23px;
top: 25px;
bottom: auto;
border-style: solid;
border-width: 11px 23px 11px 0px;
border-color: transparent #ffffff;
display: block;
width : 0px;
}
Put the below content div inside bubble div.
Put content of bubble div inside the below div and add the style..
<div class="content"></div>
Inside style :
.content{
height:70px;
overflow-y:scroll;}
HOPE IT HELPS
Try putting the content of the bubble inside a div, and put overflow: scroll on that child div, rather than on the entire bubble.
Related
I'm using Responsive tabs by petelove666 and I have a small detail I'd like to add but it seems I can not get it to work.
I would like a arrow-down formed by triangle at the middle of active tab.
I tried to change CSS to
.responsive-tabs__list__item--active{
background: white;
color: #3E4649;
/*border-bottom: 2px solid #F39114;*/
position: absolute;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 20px #F39114;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
But it doesn't work at all.
Here is my fiddle https://jsfiddle.net/dvx8nw15/. And the goal is to have a down arrow at the middle of active tab as seen from the attached picture with blue color:
All you need to do is to add an absolutely centered triangle to list__item:
.responsive-tabs__list__item { position: relative }
.responsive-tabs__list__item--active:after {
content: '';
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
left: 0;
right: 0;
top: 100%;
margin: auto;
position: absolute;
display: block;
}
And the updated fiddle
Remove the list-style-type from the list items and add a div that will be your arrow. The triangle trick is to set an element with size 0 but to set a border, the top border in that case is actually a triangle, so when you give it a color and set the other side to be transparent you'll get a triangle.
li{
list-style-type:none;
display: flex;
align-items: center;
}
.arrow{
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: #F39114;
margin-top: 0.2em;
margin-right: 0.2em;
}
<ul>
<li><div class="arrow"></div>One</li>
<li><div class="arrow"></div>Two</li>
<li><div class="arrow"></div>Three</li>
</ul>
UPDATE
Adding a fiddle without adding a div and using :before pseudo element instead
Example with your code
You need to add class arrow to each li you want to style or otherwise add it to the container once and then set .arrow li instead of li.arrow
Second example - better since you don't need to style each li
Just add position: relative to your li.responsive-tabs__list__item. And then use a pseudoclass to print the arrow in your active item with this code:
.responsive-tabs__list__item--active:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 20px;
height: 20px;
background: black;
margin-left: -10px;
transform: rotate(45deg);
z-index: -1;
}
You can find an example in this fiddle
I would like to achieve that the boxes inside the container div resize and fit inside it when browser window is resized. At the moment container resizing works fine but I have problems with it's child elements. I've tried different ways but didn't get the desired result.
.container {
position: relative;
width: 21%;
min-width: 262px;
height: 202px;
left: 47px;
top: -164px;
background-color: green;
border-radius: 2px;
box-shadow: 5px 5px 5px #111111;
border-style: solid;
border-color: white;
border-width: 5px;
}
#box_inside_1 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -36px;
left: 29px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_2 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -105px;
left: 260px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_3 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -172px;
left: 515px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
<div class="container">
<div id="box_inside_1"></div>
<div id="box_inside_2"></div>
<div id="box_inside_3"></div>
</div>
The container should probably be the thing that has an id, and the boxes should have a class. For instance, if you want to have 3 inline divs within the container, you could do this:
<style>
#container {
position: relative;
text-align: center;
}
.box-inside {
display: inline-block;
width: 16%;
height: 50px;
}
</style>
<div id='container'>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
</div>
Or, alternatively, you could make the inner divs display block and float: left or float: right and then put
<div style="clear:both;"></div>
after them to clear the floating functionality. Or, if you do not want them inline, then just make them display: block, and they will fall one after the other. What you probably do not want though, is absolute positioning, because you appear to have a list of very similar divs. Absolute positioning is more appropriate for niche cases of weird layouts. Also, the top, left, right, and bottom styles only apply when the position is absolute, fixed, or relative, so you don't need those if you use the default static positioning on the inner boxes.
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height
What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol.
Here is what I am currently getting:
This is what I am trying to get... you can ignore the differences in fonts, borders, etc.. lol
This is my css:
#profile-banner {
background: #000;
height: 267px;
border-bottom: 1px solid #999;
margin: 0px 0px 25px 0px;
text-align: center;
}
#profile-banner h1 {
font-size: 36px;
font-family: Piximisa;
letter-spacing: 5px;
padding: 15px;
margin: 0px;
}
#profile-banner p {
margin: 0px;
padding: 0px;
}
#profile-banner .logo {
top: 125px;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
position: absolute;
margin: 0 auto;
padding: 0px;
}
This is my HTML:
<div id="profile-banner">
<h1>Some Team Name</h1>
<p>
Some catchy slogan.
</p>
<img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>
Thanks for your time!
You can't mix absolute and static positioning. You can use absolute positioning:
position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;
or static positioning:
margin: 125px auto 0;
The main difference is how the element affects other elements. Using absolute positioning takes the element out of the document flow, so it doesn't affect other elements.
Change your CSS this way
#profile-banner .logo {
margin: 125px auto 0;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
padding: 0px;
}
Changes
Remove position and top.
Add the top as margin-top.
Positioned elements do not respect margins.
I am having a simple div with header,content and footer.Now my issue is that there is a gap at the bottom of my div.And if I resize browser window some more extra white-space is adding at the bottom of my div.
The entire leftContainer should be of browser height.
For example I need something like this(actually this is done n flash I want it to be done in HTML)
This is how it looks now:
Here is my CSS:
html, body
{
margin: 0;
border: 0 none;
padding: 0;
overflow: hidden;
}
html, body, #wrapper, #left, #right
{
height: 100%;
min-height: 400;
}
.leftContainer
{
width:308px;
max-height: 100%;
height:100%;
border-style: solid;
border-width: 2px 0px 0px 0px;
background-color: #ffffff;
box-shadow: 0px 0px 7px #292929;
-moz-box-shadow: 0px 0px 7px #292929;
-webkit-box-shadow: 0px 0px 7px #292929;
}
.mainbody
{
padding-left: 5px;
margin-top: 0;
min-height: 150px;
max-height:736px;
height: 100%;
background-color: #F9F9F9;
}
.header
{
height: 40px;
color: #000;
border-bottom: 1px solid #EEE;
}
.footer
{
padding-left:20px;
height: 40px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
HTML:
<div class="leftContainer ">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
I don't want the footer to be seperate it should be within its parent div(leftContainer)
DEMO
Have you tried adding
position: relative;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
Take a look : http://jsfiddle.net/UqJTX/7/embedded/result/
There is some issue with shadows, they are added to length in some browsers, so try to put only side shadows and apply negative margin.
Have you tried adding
position: absolute;
bottom: 0;
left: 0;
right: 0;
top:0;
overflow:auto;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
You have to mention the width of each div in percentages. Total left container height is 100% then decide the height for the three divs (like header 10%, body 85% and footer 5%) with appropriate percentages. Mentioning the heights or widths in pixel is not suggestible.
Use firebug for easy debugging of HTML and CSS.
check out this DEMO it works properly
Use this like min-height:100%
may it will useful to you