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!
Related
NOTE: I've modified the subject and some of the content of this post.
I'm writing a responsive menu that is position:fixed and overflow-y:scroll.
The menu height can be greater than the height of the device screen, and I'm trying to find a work around so the menu is scrollable, regardless of either the document or the window/device height
I've put together a little demo here:
http://s.codepen.io/onebitrocket/fullpage/iysLI?
and here's the codepen iframed link:
http://codepen.io/onebitrocket/full/iysLI
Unless I missing something, I don't think a vertical fixed position menu is possible. Mainly due to the height of the menu being larger than the height of the device window.
Is there a solution to enable this?
-- Additionally
My initial question was this
The iOS bottom 'nav' bar seems to have a reserved touch area, which conflicts with the last elements in my menu - see the image below.
This prevents me from clicking on the last item in my menu.
Is there a fix for this?
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.
I'm using Adobe Edge Animate and I'm really having trouble with all the different screen sizes and resolutions. I see that Adobe is coming out with new products which may address this issue. Basically all I'm tryng to do is have an image display (like a banner for example) that fills the width of the user's screen. I see the following questions, but answers are old and I know that there has been a lot of development in this area. Any ideas greatly apprciated.
Stackoverflow questions
From the splash screen. In the Properties tab change the switch next to the width to make it 100%. Select the Max W parameter and change this to too. All these tweaks will make the layout responsive. Next drag the image onto the stage and position in the top-left corner. In Properties click on Use Presets for Responsive Layout and choose the Center Background Image option, then Apply. This means the image will stay central whenever the stage morphs. Drag the bottom-right corner handle so the image fits over the entire background. Notice the image doesn’t scale or stretch but stays in the centre. In the Position and Size tab is an expand button; click this and add a Max W of (how many px your image is). Change the width to 100% and press Enter. It will jump right back to 75% but it has accepted the change. Click on the resize marker and drag to the left to see what happens when the stage is resized to a smaller layout. As you can see, the background is clipped but the image resizes to fit.
Here is a link to the tutorial I think this will better answer your question if you do this tutorial. http://www.webdesignermag.co.uk/tutorials/create-a-responsive-animation-with-adobe-edge-animate/
I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.