The output of this below code DIV #imagemiddle is not stretching till the browser full width, I want the top tool bar has to be fixed and the below div to be position: relative and not absolute or fixed.
HTML
<div id="topbar"></div>
<div id="imagemiddle"></div>
CSS
#topbar {
position: fixed;
display: inline-block;
top: 0px;
left: 0px;
background-color: #2D2D2A;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 42px;
width: 100%;
z-index: 5;
overflow-x: visible;
overflow-y: visible;
}
#imagemiddle {
position: relative;
display: inline-block;
top: 40px;
background-color: #4D4D4D;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 44px;
width: 100%;
z-index: 0;
overflow-x: visible;
overflow-y: visible;
background-color: "red"
}
A simple solution, you need add margin:0; to the body in your css.
body{ margin:0;}
DEMO
Your browser's default body margin is the problem:
body {margin: 0;}
http://jsfiddle.net/E8uNY/
Consider using a reset spreadsheet or creating a custom one to avoid cross-browser CSS inconsistencies.
Also, when using words for CSS colors (red), don't put them inside quotes.
background-color: red;
Related
I have a pseudo element that is refusing to display outside of it's parent div. I've set it half in, half out so you can see the issue on the following fiddle.
Fiddle
Been trying a whole bunch of different solutions that I've found on here for this but I can't get it working.
Any suggestions?
Code :
.box {
display:block;
position: relative;
z-index: 10;
background: #FFF;
width: 350px;
height:140px;
box-shadow: 0 1px 3px #888;
padding:20px;
overflow: auto;
top: 30px;
left:50px;
text-align:center;
border-radius: 5px;
border: 1px solid #FFF;
}
.box::before {
position:absolute;
font-family:FontAwesome;
content:"\f0d8";
color:red;
z-index: 20;
font-size:80px;
left:50px;
top:-45px;
}
Assuming you didn't need that overflow:auto; here is a working solution: https://jsfiddle.net/ug88rptL/1/. I just removed that property.
If you need overflow:auto; and you can use position:fixed; on the ::before pseudo element: https://jsfiddle.net/ug88rptL/2/
Definitive answer after comments:
If you need position:absolute; and imperatively cannot use position:fixed;, just remove position:relative; from the .box div and use different margins to maintain the original positioning. Works as long as you don't set a left or right value for the pseudo-element: https://jsfiddle.net/ug88rptL/10/
the ::before pseudo element is treated as a child element of the element you attach it to, so it will always be inside the box. you're better off wrapping the box in another element and then giving that element the ::before child
Read more here.
.box {
display: block;
background: #FFF;
width: 350px;
height: 140px;
box-shadow: 0 1px 3px #888;
padding: 20px;
overflow: auto;
text-align: center;
border-radius: 5px;
border: 1px solid #FFF;
position: relative;
top: 130px;
left: 30px;
}
.wrapper {
position: relative;
}
.wrapper::before {
position: absolute;
font-family: FontAwesome;
content: "\f0d8";
color: red;
font-size: 80px;
left: 50px;
top: 0;
}
<div class="wrapper">
<div class="box">
BLAH BLAH BLAH BLAH BLAH
</div>
</div>
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
In my web page I have top and bottom sections which are fixed with CSS, position: fixed;
Between the top and the bottom I have an absolutely positioned page element - a div - and this is where most of my content appears. When the content is too big for the page element, I want it to overflow on the y-axis. In this case, I want the scroll bars to appear on the very right of the screen, (not the page element), so I have overflow-y: scroll; on the body element. (See facebook for an example).
Now, this works fine except for the borders and background of the page element. The content which is initially within view has both border and background, but when I scroll down to the overflow area, it has neither.
I have tried setting the height of the page using absolute (bottom: 105px) and relative (height: 100%;) methods, but neither works. I also tried ending the content inside the page element with <p style="clear: both"></p>.
Any ideas? Thanks!
The problem is most likely the height: 100%; actually. When you the background-color is filled in, it fills it 100% of the way (visible area). The problem is that since the overflow goes past the 100%, the background-color doesn't stick.
Instead of using height:100%, put a min-height of whatever you want your absolutely positioned element to be. That way when the background-color fills it in, it fills the whole thing because the overflow is always going to continue to be above that minimum height.
EDIT: I realize a big block of words for an answer is annoying. More concisely:
You had:
.middle {height:100%;}
Get rid of that and change it to:
.middle {min-height:100%;}
I'm not quite sure what you are wanting with your borders. This fiddle has borders at the top and bottom of the content only with this code:
HTML
<div class="top">Top</div>
<div class="middle">
<div class="content"></div>
</div>
<div class="bottom">Bottom</div>
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
}
.middle {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 100px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 100px;
}
This fiddle has borders constantly around it with this code (same html as above):
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
border-bottom: 10px solid black;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
border-top: 10px solid black;
border-bottom: 0;
}
.middle {
position: absolute;
top: 110px;
left: 0;
right: 0;
bottom: 110px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border-right: 10px solid black;
border-left: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 110px;
}
OK so I have positioned images with borders, working fine in ie9 yet in ie8 for some reason the images are slightly padded right+bottom by a few pixels. I've searched for answers for a while now with no results. (If I take away positioning there's no padding)
Here is the img code and a img with class .image
img {
border: solid 8px white;
display: block;
}
.image {
position: absolute;
top: 580px;
left: 450px;
}
Any suggestions?
Are you using a CSS reset? have you tried zeroing out margins & padding to solve this problem:
img {
border: solid 8px white;
display: block;
margin: 0;
padding: 0;
}
.image {
position: absolute;
top: 580px;
left: 450px;
margin: 0;
padding: 0;
}
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.