.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
Related
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!
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.
Here is a link to my example:
http://jsbin.com/yosevagaqa/1/edit?html,css,output
If you resize the window so that the text is forces into a new line, you can see the problem.
How can I avoid this?
As you can see from the other answers, there are multiple solutions!
If the size of the square in :before is always the same, one other solution would be to add
.link {margin-left:25px; text-indent:-25px;}
to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".
http://jsfiddle.net/MrLister/3xbfyqkh/
Or what I would prefer, with sizes in ems, so that the red square depends on the font size.
.link:before {
/* .. */
width: 1em; height: 1em;
margin-right: .5em;
}
.link {margin-left:1.5em; text-indent:-1.5em;}
Making sure, of course, that the indentation is the same as the size + the margin of the square.
http://jsfiddle.net/MrLister/3xbfyqkh/1/
Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...
.link {
display:list-item; list-style:square;
color:red;
font-size:2em; line-height:.5em;
margin:.5em 0 .5em 1em}
.link a {
font-size:.417em; vertical-align:.3em}
http://jsfiddle.net/MrLister/3xbfyqkh/5/
You can add following CSS:
.link{
float: right;
width: calc(100% - 25px);
}
.link{
position: relative;
padding-left: 25px;
}
.link:before {
content: "";
background: red;
background-size: contain;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: absolute; top: 0; left: 0;
}
<h5 class="link">A long link that might wrap and then it gets all weird and stuff</h5>
I thought I had it all working. an <img>, a div.wrapper around it (with position:relative, and an <i class="icon-edit"></i> with absolute position just beneath the right top position of the <img>. something like this:
<div class="userLogo" >
<img ng-show="user.image_url" ng-src="{{user.image_url}}" /> //data from angular, doesn't make a difference here
<div class="userEdit"><i class="icon-edit hand"></i></div>
</div>
with css (less style but you can understand):
.userLogo
{
width: 233px;
height: 233px;
img {
height:233px;
}
float: left;
//border: 1px solid #borders;
position:relative;
}
.userEdit
{
background: #bajeBack;
width: 25px;
height: 25px;
line-height: 25px;
color: #lightGreen;
position: absolute;
top: 13px;
right: 13px;
z-index: 50;
font-size: 19px;
padding: 3px 2px 2px 4px;
text-align: center;
opacity: 0.7;
.icon-edit{
}
}
and then, playing with the webapp it hit me: The image size can change! since I don't want to use a set width/height (that would distort the proportion of some images) I just set the height (to fit the design) and let the browser resize the width accordingly.
My problem; A narrow image would break the design - the edit icon would be hang in air, and not on the image at all, since it's positioned according to the userLogo.
My question: how can I do the same "absolute" positioning according to the image ? since it can't be the container. please enlight me. and don't hesitate to suggest changes to the html if needed. I'll be more the happy to learn something new!
Thanks!
If i understand you correctly, you need to constrain your image to a set space. How about using max-height and max-width.
.userLogo img {
max-height: 233px;
max-width: 233px;
}
It's pretty well supported these days: http://caniuse.com/#search=max-width
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 am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.