I have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
Related
I wanna know if it's possible to edit chrome/chromium devtools layout.
The reason is with a x Width > actualWidth, the layout is the left one (this is what i want as full time layout) and over the x Width < actualWidth, the layout change with the right one and I got square monitor so I can put the width too much if I want to see my render and the code javascript side-by-side.
So does it have a way to edit the devtools layout? If there is a way, how I can change the devtools layout?
Layout sample
Note: I'm using the right layout (dock to right)
Thanks for the answer
In the tab area for the content you are editing. On each side there is an icon that looks like a triangle towards a sidebar. Click that and it will hide the sidebar it is beside to give you more space.
Beyond that, you can click the overflow menu in the primary panel menu (the three icons beside the close button) and then select "Dock to Bottom" from the top layout choices.
Finally, the latest method available is to go into the Settings. Then under "Appearance" find Panel layout and change that to horizontal. This will then force the panels in elements and sources at least to be at the bottom always.
Each of these methods should provide you more area to work.
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
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.
I have a website with a blog and sidebar on the right hand side and it looks fine, however when I go onto page 2 of the blog, the sidebar moves down to the bottom of the page.
You can see what I mean by going to these links
http://www.beatinganger.com/blog (Sidebar looks normal)
http://www.beatinganger.com/blog?page=1 (Sidebar moves down to the bottom)
I have looked at the source code and I can see no changes in the difference between the 2 pages.
Any help would be much appreciated.
Your #left_container element on the sub-page is not being closed and therefore the #right_container element is being contained inside it.
The container div closing is causing a problem (as the other answers point out); also your div with the vertical_menu class is breaking out of its allotted size - which will probably cause float issues when your divs are closed:
Yeah, something is up with the template of the second URL, so that the sidebar is injected INSIDE the left 'main' column.
the #right_container http://www.beatinganger.com/blog?page=1 is in the different hierarchy than the enter link description here. #right_container and #left_container should be in the same parent and level as shown in the first link.
Another advise though, I notice that the content of the #right_container has slightly "wider" content than the container itself. Make sure the content elements are smaller or equal to the width of the parent container, or set #right_container -> overflow: hidden; a quick hackish way though.