I'm working on a webpage with a certain design: I would like to get text to be on both sides of some other text, and when the browser window is narrowed, I would like for all the text to be below the original text. The situation is as in the picture below, with a wide browser window on the left and a narrow one on the right.
It would be great if the text would continue from the left side to the right side. If that's not possible, then I wouldn't mind the text on the top right starting where the text on the middle left ended. Honestly, the "Text 2" part is just a bunch of small pictures (all of which I want to appear somewhere on the page), so the order in which they appear does not matter.
What matters is that when the browser window is wide, the space near the top of the page gets filled first, and then moving down to the bottom. And when the page is narrowed, more space down below gets filled, until no more space is left on the sides, so everything is in the bottom (when the window is narrowest).
So far I have tried looking at floating a div in the center of the page, but that doesn't allow me to have text on both sides. Also if I have 3 columns, then I may lose some of the "Text 2" when the browser window is narrowed. "Text 1" has fixed width and height, and "Text 2" has variable width and height. Any tips are appreciated!
Related
I have 2 monitors. One is slightly wider than the other. When I put my page that has the right side bar with nav links and other controls, it shows properly off to the far right side of the page as you can see below. This is on the wider monitor.
And when I drag the browser onto my narrower monitor, the next image below demonstrates the results of pushing the entire contents of the sidebar down underneath the main content. How can I correct this problem to insure the right sidebar lines up with the tables that are floating next to each other down the main content area?
I have a 'header' element that has an icon on the left and a div with text in to its right.
If the text is shorter than the space to the right of the icon, then I want it centred on the screen, but when it is long, I want it to start to the right of the icon and fill the rest of the screen, with ellipsis.
| [icon] centred |
| [icon]Starts from the lef...|
Here's a jsbin to illustrate the problem:
https://jsbin.com/jaxolic/edit?html,output
I want 'START' to be just to the right of the square icon, but also 'more text' to be centred on the screen, rather than the area to the right of the icon (which is what would happen if I made #icon not position:absolute and started #text the right of it).
[EDIT] I made some changes to illustrate where I want 'more text' to be aligned - the two 'more text' text should be aligned.
Not sure if it works in your project purposes, but I got it to work by declaring a fixed width for your #text div, so that it would not try to take 100% of the container width: https://jsbin.com/votixoj/edit?html,output
so I have this issue which I feel like it should be simple enough, but for some reason I am stumped...
I have this select dropdown that looks like so:
When the screen size gets smaller, the content text is hidden the smaller the screen gets. Is there a way to make the text wrap, so that all of it displayed in the dropdown box?
The caret is a background image with absolute positioning, so I will need to add some padding between the caret and where the text ends, but I want to make the text wrap (and the select box will become taller) so that it all fits and is visible.
Thanks!
my goal is to add text inside the box below which is an image and depending on how much text I enter, I would like to have the middle part of the image extend to accommodate for the increase of text inside. I do understand that one method is to "chop" the top part, a small section of the middle part, and the bottom part, and have the middle part repeat numerous times. I was wondering if someone could suggest how one goes about doing this, or, if there is a better option to take instead. Thank you in advance.
I've hosted the pictures through Flickr
You could make the image the background of the div then set "background-size: cover". The image would then grow to fill the div as the div grows.
I asked a question yesterday:
Fixed Menu at the Top of Webpage that Changes Size as Window Resizes
I've updated a few things, and now it's looking much closer to what I want it to be. B,ut I just have a few follow up questions that I hope someone can help me with.
Please see what I have now: http://jsfiddle.net/ovr8spfu/6/
I would like to set a minimum width to my #container. I tried min-width:950px in #container, but to no avail. I want to do this because if you minimize the window now, the menu items disappear, first "Home" disappears, and then on and on. I'd like a minimum width so that the green filler part all goes away, afer that, a scroll bar should appear at the bottom of the window to fit the 950px menu.
My flash file is 1300x500. I want it to always fit the width of my window, with no padding, no background visible. So for example if the window is 1500 in width, the flash file should scale and stretch to 1500x577. If the window becomes its minimum (950 from question #1), the flash file should scale down to 950x365. The flash file should also always be touching the menu, and #section should be directly beneath it.
Lastly, if my menu item has a lot of text, how do I set a max width and text wrap to it? I'd like to wrap the text on 2 lines with a narrower menu item.
Thank you very much!