Can I set all offset sides in CSS at once? - html

Instead of having:
right:0px;
left:0px;
top:0px;
bottom:0px;
Can I have something like this?
sides:0px;

No, there does not exist a shorthand sides property for setting the offsets. You have to set them all separately.
There are shorthands for other kinds of properties that involve the sides of a box, e.g. margin, padding and border, but not for the positional offsets top, right, bottom and left.

If you're using a preprocessor such as LESS or Sass, then yes, you can. If you're using vanilla CSS, then no, not yet.
Example in LESS
.sides (#length) {
top: #length;
bottom: #length;
left: #length;
right: #length;
}
div {
.sides(0px);
}
Example in Sass
#mixin sides($length) {
top: $length;
bottom: $length;
left: $length;
right: $length;
}
div {
#include sides(0px);
}

No. It wouldn't be very useful anyway, since you hardly ever set all of those values at once and all to the same value. You usually two of them, namely left or right and top or bottom and again rarely to the same value so there is no real way to shorten that.

Not with the CSS attributes that you are trying to use, but yes for border, margin, padding, ect.

Are you trying to position something? It just seems kind of strange to position something with left: 10px and right: 10px.
But no, their is no shortcut... typically you wouldn't position using all of them.
Reference: http://www.w3schools.com/Css/css_positioning.asp

If you changed the offset to 0px because you want to overwrite other defaults, maybe you want to use:
position: static
The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Related

How do i attach picture to table top-right corner with css?

I only have access to the css code so i can't edit the html. here's the page: http://myanimelist.net/animelist/linodiogo and the css code can be found here: http://pastebin.com/Kyz3dkmB. What i wanted to do was attach a transparent picture to the table right top corner so it would look better.
If you have any other recommendation I'm here to listen.
You can use the following via CSS, however you would probably need access to the HTML to be able to incorporate this without affecting the layout of the rest of the table.
class/id {
content:url(http://example.com)
}
I'm not entirely sure from the question/site what your aim is, but if you don't have access to the HTML it sounds as though an absolutely positioned pseudo-element might be the way to go here (even if you do have access to the HTML, it's still a good way to avoid clogged markup). The absolute positioning may avoid disruption to the table element.
Add position: relative to the table (or whatever you want the parent to be), and use the following to position a transparent element in the top-right:
parent:before {
content: '';
width: ...
height: ...
background: transparent;
position: absolute;
top: 0;
right: 0;
}

make div over another on liquid template

I'm trying to make two div's, one overlaps on another
As you can see on the fiddle below there is position:relative; top:-20px; And I would like to make it fully liquid without any px maybe on percentage, however I have no Idea how to make that.
Here's fiddle
I'm not sure what you mean by "fully liquid", but those position sub-values don't accept percentage values.
The best I could offer is to use
#first {
margin-bottom: -5%;
}
or
#second {
margin-top: -5%;
}
or some combination thereof.
Do you mean switching this line as in this fiddle:
//top:-20px;
margin-top:-3%;

How Do I Remove a CSS Value

I am working with zurb foundation 5, and I want to have a fullsize cover on the front.
But because zurb sets the position of the body "relative", I have trouble setting absolute positioned Divs.
Here is the jsfiddle and when you just remove the:
body {
position: relative;
}
you will see, how I actually want it to look like.
http://jsfiddle.net/ZULv9/
I guess I could remove it from the framework, but I rather would like to overwrite it or just to remove the css value in hindsight to keep the my hands out of the framework. I believe that it must be possible somehow, I just haven't found out how this is done.
Therefore I would be happy for any suggestions.
You can set the body styling to:
position: static;
which display all elements in order of how they appear in document flow.
Hope this helps!
body {
position: absolute !important;
}
css override

How add padding-top to an ancre link?

I would like add a padding-top to my div when I click on the link to the anchor :
Go to my anchor
...
<div id="myAnchor"> ... </div>
The issues is that I want add the padding just when my link redirect me to the anchor. I don't want add padding-top in the html, I just don't want that my div is on the top of my page, I need a padding or margin top.
Thank you.
I think what you're trying to do is cause the link, when clicked, to scroll the browser window to a few pixels above the target, instead of having the target flush with the top of the browser window.
You can check this article for several solutions http://css-tricks.com/hash-tag-links-padding/
The simplest solution, generally would appear to be to add in your css:
#myanchor{
margin-top: -200px;
padding-top: 200px;
}
Replacing 200px with whatever value you feel is appropriate.
You may also wish to use a class to apply this, as I asume you won't just wish to use it on the one item :)
There's only one way I know of: javascript. If you're already using jquery:
$('a[href="#myAncre"]').click(function(){
$("#myAncre").css("padding-top", "20px");
});
Although if you don't use jquery already, it might be worth to do it with simple javascript.
I think, best way is
#myanchor:before {
display: block;
content: " ";
height: 50px;
margin: -50px 0 0;
}
Source and demo: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B
If you choose ugly way (that is margin-top: -50px; and padding-top: 50px;) layer will remain on the bottom and you need to use z-index.

Place background image outside border of containing div

I am trying to set a background image to be outside the actual containing div.
<div class="expandable">Show Details</div>
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
so the "expand" image should basically appear just to the left of the div.
I can't get this working, the image doesn't show when it's positioned outside the borders of the container. I'm not sure if there's a CSS trick I am missing, or if it's something to do with my page layout (the "expandable" div is nested inside several other divs).
Is it possible to do this? Any hints?
Edit: here is a jsFiddle showing the problem: link
I know this is an old thread but I just wanted update it and add that this is possible using CSS pseudo elements.
.class:before {
content: "";
display: inline-block;
width: {width of background img};
height: {height of background img};
background-image: url("/path/to/img.png");
background-repeat: no-repeat;
position: relative;
left: -5px; //adjust your positioning as necessary
}
You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.
edit your question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)
edit — Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.
You can't do this how you want to exactly, but there is a pretty straightforward solution. You can put another div inside of .expandable like:
<div class="expandable">Show Details<div class="expandable-image"></div></div>
Then your CSS would look something like:
.expandable{ position:relative; }
.expandable-image{
position:absolute; top:0px; left:-20px;
width:<width>px; height:<height>px;
background: url('./images/expand.gif') no-repeat;
}
Depending on the details of your situation, you might be able to get away with CSS3's border-image-* rules. For instance, I used them effectively to place "dummy search buttons" in the filter row of a CGridView widget in yii (clicking anywhere outside the filter's input boxes will trigger the ajax call, but these "buttons" give the user something intuitive to do). It wasn't worth it to me to subclass the CGridColumn widget just to hack the html in its renderFilterCell() method * -- I wanted a pure CSS solution.
.myclass .grid-view .items {
border-collapse: separate ;
}
.myclass .grid-view .filters td + td {
border-image-source: url("/path/to/my/img_32x32.png");
border-image-slice: 0 0 0 100%;
border-image-width: 0 0 0 32;
border-image-outset: 0 0 0 40px;
border-width: 1px;
}
.myclass .grid-view .filters input {
width: 80%;
}
There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier not a length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, I didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, I hope this helps people looking for a pure CSS solution 😀 :-D
* Not long after writing this, I discovered I can just concatenate code for an image in the 'filter' property of the array used to construct the CGridColumn, so my rationale turns out to be moot. Plus there seems to be an issue (in Firefox, anyway) with the border-image-repeat being forced to stretch even when space is specified. Still, maybe this might come in handy for someone 😕 :-\