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.
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 this layout with flexbox:
However, when the content in one of the columns of the first line increases, I don't get what I want. This next image explain what I get and what I want:
Basically, I want box 3 to span multiple lines, if needed, without changing the position of box4
Please help me into this. Thanks
This thing is not possible using Flexbox. You Should Use lots of Available JQuery plugins.
You can Check it out following JQuery plugins.
1.) Packery.
2.) MCPants.
3.) Gridster.
4.) Masonry.
This are some of the available plugins which will give you, Your desirable output.
You can also find other plugins on search engine.
Hope it helps.
Flexbox doesn't work this way. It won't randomly fill out to use minimum height. The calculations required by your browser would slow everything down, if it is even possible to have the browser guess what you want precisely. You'll have to adjust your design I'm afraid.
Flexbox won't do what you need but you still can use them.
Here's what it would look like so below explanations will be easier to understand :
Create 2 containers that will display inline-block. The 1st (blue blocks) is 75%, the 2nd is 25%.
Blue blocks are in a flexbox. Set the flex rules as you need it.
The red block has is own container, style it as you want too.
Based on the images you posted, blue blocks 1 and 2 are flex: 1 and flex: 2, that means block 1 will always be 25% of its parent. This is why I set 25% to the red block container.
Check fiddle for full CSS : https://jsfiddle.net/Paf_Sebastien/dyxtq144/
I'm very new with JS, and I don't even know whether what I try to do is doable. Some guys told me "try javascript", and google can't help me because it's too specific.
Ok so, firstly I have some huge text in the center of my page. So far so good. Call it the "main text"
Then, on the side of the main text, there has to be another column containing more text blocs. But this time, these blocs have to align with the height of specific words found in the main text.
You will probably understand better with this picture :
Any idea how to do that ? thanks !
Use CSS and HTML, there is no need for JavaScript. In CSS you can use top:; to vertically align an element, e.g.
.text {
top: 40%;
}
This will align an element with class "text" 40% of the pages height from the top. Use % as your units to make the text align correctly no matter what size the window is.
You don't need JavaScript to do what you're trying to do. All you need is CSS and html.
First of all you need to take a look at basic html layout here.
Take a look at this Fiddle its something similar to what you need
Guys didn't understand you. It is really hard to find out the x/y position of the word in the div for a lot of reasons. The best way for you is to wrap the needed word with some tag (kind of span or something). Here's a jQuery plugin to do that.
Then seems you will not have troubles to find out the position of your tag for example with jquery position method and to give this position to your left column text.
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
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.