I created a little Tooltip thats in a Container. So there a two divs both with position: absolute;. They have to be position absolute or otherwise they will mess up the whole design.
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
}
<div class="container_1"><div class="container_2">Full Name-Name</div></div>
I also have a CSS Triangle in the first container so that's why there are two containers.
In the Tooltip there is shown the Full Name of a user. But now I have the problem that the div isn't as wide as the content. So I fixed it through replacing space with but now there is the same problem with dash's. But the problem doesn't get fixed by replacing the dash with –. Anybody knows a solution?
CSS:
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
width: 95px;
overflow: hidden;
white-space: nowrap;
}
http://jsfiddle.net/yG5eF/
Edit: Sorry, totally misread it the first time.
Related
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
I have a div menu which has a fixed size (e.g. 100% of the height). The content could be larger. Then it would have to scroll.
div {
overflow-y: auto;
width: 10%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
There is also an :after element on the div which is positioned absolutely right outside the div.
div::after {
content: "";
position: absolute;
left: 10%;
top: 45%;
height: 10%;
width: 5%;
}
The problem is that once I add the overflow auto to the div the after element is hidden. How do I get a scrollbar AND have the after element outside the div?
Found some similar questions but none of the solutions seem to work for me.
I solved this for now by simply adding another div inside the original one
div.original div.inside {
overflow-y: auto;
position: relative;
width: 100%;
height: 100;
}
and remove the overflow from the original div. You need one more div, but this seems to be the easiest and cleanest solution.
I want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
HTML:
<div class='veil'></div>
CSS:
.veil{
display: inline-block;
position: fixed;
top: 34%;
left: 0;
right: 0;
margin: 0 auto;
background-color: lavender;
}
each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.
Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks #Paulie_D) don't use right: 0.
Just add another container.
and split the contradiction in CSS between them.
HTML:
<div class='container'><div class='veil'></div></div>
CSS:
.container
{
position: fixed;
top: 34%;
left: 0;
right: 0;
}
.veil
{
display: inline-block;
margin: 0 auto;
background-color: lavender;
}
So, I modified a wordpress tabs widget so that I could make it look like in the image I attached, only that I have one problem.
I can't make the ribbon edges stay on top of the website layout.
I have a demo of what I've done so far here.
So I added this code to show the images:
#wp-tabs-1 .ui-tabs .ui-tabs-nav:before{
content: url(../images/l-corner.png);
width: 47px;
height: 43px;
position: absolute;
left: -5em;
z-index: 999;
}
#wp-tabs-1 .ui-tabs-nav:after{
content: url(../images/r-corner.png);
width: 47px;
height: 43px;
position: absolute;
right: -5em;
z-index: 999;
}
I tried all the positioning combinations with the z-index that I could, and nothing seems to work, to make the ribbon edges stay on top.
They're hidden by .grid { overflow: hidden }. Change it to .grid { overflow: visible } or simply remove it and it should work.