Specifically, how would I do this without any JavaScript?
I have a RadMenu that I made 1080px wide, I have about 7 items in it so they only take up about 2/3 of that width.
I want force the items to split the width of the whole RadMenu between them so there's no awkward blank area on either side.
(Similar to using Justify on a RadTab)
Can this be achieved with CSS, or existing functionality of the RadMenu?
You'll have to play with the padding element of the RadMenu and adjust the right and left side to get the desired with you want.
.RadMenu .rmRootGroup .rmRootLink {
padding: .25em .54em .35em .50em;
}
Remember the order is top, right, bottom, left.
Related
Actually my first question on stack:)
I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.
It seems there is no css syntax for this.
To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.
screenshot of the page
You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.
body {
min-height:170px;
background:
url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}
PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.
For an application with a good lot of icons, I want to make an image sprite.
Since I started my 'adventure' in the land of webdesign/ front-end webdev, I've always wondered: what is the logic behind background-position: (left)<number>px (top)<number>px;
When you compare this to the shorthand property for either padding or margin(when only specifying top and left), these are both property: (top)<number>px (left)<number>px;
So top and left values are reversed.
Also, suppose I have a sprite that is 64px (length) x 16px (height) and contains a total of 4 16x16 icons. To get the second icon in the sprite (|____|_this_|___|____|), you have to type background-image: -16px 0px; instead of 16px 0px (which would be logical, because the second icon starts 16px later than the first one).
If you want an example (I know w3schools is not always correct but it will do for the example): http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
So my question is: Why are all the values for the background-position property like,... reversed? Is there any logic behind it? Does CSS read the property from right to left?
When using shorthand for margin (or padding) with only two values you are not setting a X/Y position - you are setting four margins, using the same value for top & bottom (vertical margins), as well as right & left (horizontal margins). You can also pass four values and they will start with margin-top and continue clockwise around the box (top -> right -> bottom -> left).
I usually remember this using the word "trouble" without any vowels (TRBL).
Anyway: for positioning there is only two values, and it is common practice to use the vertical axis (x-axis, 0 is top) and then then horizontal (y-axis, 0 is left), so using a negative value for the y-axis on background-position would move a background the same direction you would move the box if you were to give it a negative left margin.
.class1 {
background-position: -20px 0; // move background 20px left
margin-left: -20px; // move box 20px left (margin, following items will also move)
}
.class2 {
position: relative;
left: -20px; // move box 20px left (position, following items will stay put)
}
So I guess what I'm trying to say is that the values are basically coherent, depending on how you look at it ;)
Docs for margin (check the syntax list)
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
Can anyone tell me what is going on with this widget: http://davidbeckblog.com/notify/? The relevant CSS is mostly at the bottom of style.css.
Basically, the widget has 3 sections. On the left is the button, the middle is the text box, and the right is a spot for a progress indicator. When I add in the text box and the progress indicator, everything gets pushed down.
Those are inline elements and the vertical align is baseline by default I believe. Set the vertical align on all 3 spans to top, and then it looks like you need to specify margin-top:-3px on span.status and maybe apply 1px top margin to the notify me span.
Alternatively you could have floated all 3 with a clearing element.
This seems to fix it:
.notify-me input, .notify-me span {
vertical-align: top;
}
.notify-me input {
margin-top: 0.4ex;
}
(Try to avoid, fixed-pixel margins/padding, as these will more quickly bust when the user changes font sizes.)