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.
Related
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
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'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 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.
Seems like a simple thing at first, but becoming a bit more complex than I thought. I'm working on a simple portfolio site which I'm doing as one page with jquery to make it look like a full website. Currently my plan has been to have each piece of a content in its own div. I'll have the content, above, on either side and on the bottom. I specifically want to achieve this effect. How can I align these things so that there's a block of text to each of these directions, all aligned and in such a way that if there's window resizing the whole thing doesn't look broken?
I'm not able to imagine what you are looking for. It would help if you post a sample code or a image of what you are looking for. But you could try style="float:left;width:100px" for the DIV tags. All div tags will appear stacked next to each other.
Also ensure you put these child DIV tags in a parent DIV tag with style="overflow:auto"
I do not know what do you mean, but i think you can look for a css floating grid system.
Here for a starting point: CSS: Fun With Floating in the Grid
Search for a grid system and look at the css definitions.