I've wrestled with this for a long time, and ended up resorting to jQuery hacks. I'd really like to know if there is a way to implement this with CSS or LESS (using javascript mixins).
It's essentially a page with assorted fixed and fluid elements.
http://cl.ly/IagL
Any ideas on best practice?
Yes, I see a problem if you want the height of left and right column to be equal with the height of the middle column. If you make the height as a fix height than you can do it, otherwise you need to use jquery.
But if you want to achieve the fluid width, I suggest you to use twitter bootstrap. Their framework support the use of LESS as well http://twitter.github.com/bootstrap/
The middle height is technically impossible with CSS and is a known issue. http://www.dtelepathy.com/blog/telepathy/sometimes-css-cant-do-it-all
I guess I will have to resort to jQuery
Related
The main idea is to get width and height from divs (boxes) from Backend and then I want a function or something in react that will structure page like this.
I found this name is Mansory, I want to do a it like it.
Sometimes the big box (Mentions) can stay on top right.
I want the small boxes to occupy empty space. I was thinking about using tables to structure it but I can't figure out how to make a function to do this automatically and dynamically.
So the idea is to never have free space, there always be a box there.
I think you guys got the idea.
Thanks.
You can use the CSS flexbox to do so.
setting flex-wrap: wrap in the container and using flex-grow: #desiredSize for items will probably do.
here is a great guide by css-tricks:
A Complete Guide to Flexbox
I'm not sure receiving width and height dimensions from the backend is a good idea, this will not result in a responsive website. For your use case, CSS may be the best solution.
You can use either Flexbox or CSS Grid. In my opinion, a screen like this can work really well with CSS Grid and template-areas. Take a look at this.
I have made this webpage at http://www.caseums.com. I have used twitter bootstrap and fontaweome among other things , but I find that I am too much of a novice to determine the answer. I have searched the stack database but can't find a similar enough answer to answer my problem. If one was to re-size my page to be smaller, all of the items on page move in such a manner as to move out of the box they are in , namely the <p> elements.
I would love any information to help me answer this , I've been wrestling with it for awhile, thanks for your consideration.
I assume you are referring to the #Containment div? Try using percentages for your widths. You currently have the width set to 325px, which will overflow if your window size is less than 325px.
Also take a look at media queries, if you need certain portions of your site to size differently dependant on the viewport size.
If you change the width styles on #Containment and the <div> inside #Containment, to max-width instead, is that what you're after?
I am developing an application where users will be able to open tabs. For your note, I am using the Bootstrap CSS framework, and it has a tab plugin as well. (In case I need a more flexible approach I can use a different library for this job.)
http://twitter.github.com/bootstrap/javascript.html#tabs
What I need is to have a flexible width for tabs. It should work like Chrome/Firefox's tabs. If the collective width of the tabs is less than the width of the bar, it should work as it is is. However if it is longer than the width of the bar, then the size of each tab width should reduce equally. (If you open 10-20 tabs using chrome/firefox, you'll understand what I mean)
Is there any easy way to do this, without using javascript? The only solution that comes up to my mind is to get the inner width of the bar using javascript and get the width of the other tabs and sum them up. If the sum is higher, then I can resize each tab.
I can implement this solution but I fear it will be hard to ensure cross browser compatibility. Is there any easier way to achieve this?
Thanks in advance,
You don't need JavaScript as long as you can rely on a CSS algorithm that adapt width to its content: the table layout algorithm :)
See http://jsfiddle.net/r9yrM/1/ from my previous answer for examples.
Don't forget to have a minimum padding on each "cell", text stuck to a border isn't very readable (and ugly).
With JS, you could decide of a maximum number of tabs (or a minimum "reasonable" width) and above (below) that number, add a class on the parent that will trigger each tab to render as float: left and block and not table-cell anymore. Then it'll occupy 2 or more lines (like the extension Tab Mix Plus on Firefox)
You could adjust the width of nav nav-tabs li elements after they are rendered.
Calculate how many tabs fit in the parent element at their normal size and reduce each tab by a percentage of a single tab width for each tab that exceeds the max number.
I've tried to solve the same problem today... maybe my solution helps you a little more: http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/
It uses HTML + CSS only... no JS so far. But I think I'd need some JS to react on the actual width of the browser window.
My example here,
Shows an image in the center of CSS3 generated columns. I need the text in the column to the right of the image to wrap around the image so that it doesn't appear in front of the image. This to my understanding is not doable in current css.
Does someone have a NON-OBTRUSIVE way of achieving what I am looking for?
I'd love to achieve this look here,
without the title and misc stuff located in the top left of course. The idea would be to allow the adding of images anywhere in the markup and have it look correctly.
I dont care about browser support at this time, so - any solution is great!
Thanks in advance....
Erik
Without doing JavaScript hacks, I don’t believe there is any pure CSS way of doing this. There is the column-span property, which is supported by Opera (currently not in a public build), but it only has two values; none and all. The spec currently doesn’t allow you to specify the number of columns, which would be very useful. It’s something I’d love to see.
Maybe the column span property can help if you create an additional container for the image and set the column-span width to the cumulated width of the middle columns.
You could also make the middle column larger and remove the need for another column, so the text and the image will be nicely aligned, but at this step, it is design consideration.
http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns
Knock out the height and width img attributes - they're not needed - and use CSS max-width:100%;
There are some backwards compatibility issues (notably with IE), but they can be plugged with JS. This method is the future.
A useful related article with references:
http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/
Best,
Instead of defining the number of column you could define their size to adjust to the size of pictures.
Or you can define a size for every column, then you add a css selectors on images for making them automatically resize depending the width of the column.
Something like that
.column{
columns: 12em;
}
.column img{
width: 10em;
}
This is not exact answer to your question but at least there is possibility to wrap text around the image inside one column. Check "Example X" from here.
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.