I am trying to make a basic tooltip, but i am getting this weird outcome from the css triangle.
main.html
<div class="max"></div>
main.css
.max{
width: 160px;
height: 120px;
padding: 5px;
background: #da6262;
}
.max::before{
border-style: solid;
border-width: 15px 15px 15px 0px;
border-color: transparent #fff;
content: "";
position: relative;
}
The outcome is
I'm not exactly sure where you want to position your arrow, but try changing your ::before property to position: absolute. By doing that, you take the ::before (your arrow) out of the normal flow of the document, so it won't be constrained by the dimensions/padding of your element.
If you then want to position your arrow relative to your .max element, set position: relative to it. The absolute property positions relative to its first non-static element, in this case the .max element.
JSFiddle
Good luck!
Related
.sitemapml li db {
border-bottom: medium dotted #36383b;
z-index: -1;
left: 1px;
bottom: -4px;
position: relative;
width: 230px;
}
.sitemapml li {
border-bottom: medium dotted #888b8e;
width: 230px;
padding-bottom: 5px;
margin-bottom: 5px;
z-index: 600;
}
I'm trying to use this in order to shade the dotted seperator in a menulist, the problem is, that the dots are in place ok, but not to the proper 230px width. i.e its set to the A Href inside width.. I changed the a href width to 230px too.. but the dots still remain under the words HOME only..
Though I'm not sure what a <db> tag is, you mention the A Href inside width, so I am assuming you are trying to use an <a href="#"> tag.
Anchor tags are inline elements, not block elements. Because of this, they will only use the width of their contained text, rather than the pixel dimensions you set.
You will need to add display: block to your Anchor style. This will change it to use your 230px width.
JSFiddle Example
I have a background that covers the entire screen. Black line is end of viewport.
Main-div is just a container (dark blue) using position absolute.
Top-div (yellow) also using position absolute.
Middle-div (red) also using positon absolute.
Why? Well I want the Middle-div (red) to completely cover the screen vertically. Also only half should be visible - needs to scroll to see it.
Everything works fine, but how can I position the Footer-div (yellow) below the Middle-div (red)?
CSS code for Yellow Footer:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
border: 1px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Right now it sits on the bottom, leaving too much gap above. Problem it must work on different resolutions. Setting bottom: 100px; will only work on this resolution....
Image:
You cannot position elements relative to other absolutely positioned elements unless they are children of said elements, or both children of the same element when you know the position and size of both elements.
If you make the footer a child of the middle div, you can position it absolutely within:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: -100px;
border: 4px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
I don't know all of your other CSS/HTML, but I guessed in a fiddle here, with some exaggeration of borders, etc for visual reference:
http://jsfiddle.net/jtbowden/NuG7T/
You can also create a wrapper around middle and footy:
http://jsfiddle.net/jtbowden/NuG7T/1/
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I know that bottom, top, left, and right with position: absolute sets that edge of the element to some distance away from that edge of the parent element. But how is the edge of the parent defined? Where is it in the box model? Does it include the border or the margin? The padding?
It's within the border, but ignores the padding.
Let's show it with an example. View on JSFiddle
HTML
<div>
<span>absolute</span>
regular
</div>
CSS
div {
position: relative;
top: 50px;
left: 50px;
background: #eee;
padding: 15px;
width: 100px;
height: 100px;
border: 5px solid #222;
}
span {
position: absolute;
top: 0;
left: 0;
}
Of course, an absolutely positioned element is positioned in relation to the first parent it comes across that is positioned with anything other than static. If the div in my example had no position set, the body of the fiddle would be used as that parent.