Community
Participate
Working Groups
I'm logging this bug on behalf of visual designer Jinsil Boo, who noticed that the horizontal tabs - e.g. "Projects", "About Us" scale awkwardly when the browser window is sized to smaller widths. Compare for example how these 2 sites handle scaling tabs when browser window is sized to smaller widths: 1.Firefox tabs scale incrementally, truncating tab content for scenarios with multiple tabs 2.Amazon top level horizontal tabs remain in fixed location offscreen
Jinsil wanted me to take a look at this bug. Is it possible for me to have access to the server where the source files are stored?
Sure... The code is in anonymous CVS. :pserver:anonymous@dev.eclipse.org:/cvsroot/technology Look in org.eclipse.phoenix/eclipse.org-common But you should be OK just by using your browser's View Source function. Our two CSS files are here: http://www.eclipse.org/eclipse.org-common/themes/Phoenix/css/visual.css http://www.eclipse.org/eclipse.org-common/themes/Phoenix/css/layout.css
To fix the Navigation from scaling down, you can add the following code to the #topnav ID selector in the visual.css document - width: 700px;
Created attachment 42476 [details] Proposed fix cuts the background I applied the proposed fix. However, it seems to cut the background (attached screenshot) /* Top Navigation Rules */ #topnav { background-image: url(/eclipse.org-common/themes/Phoenix/images/topnav_tabbg.gif); background-repeat: repeat-x; color: #999; font-size: 0.9em; width: 700px; }
Re comment 4: Thanks ... Nick will look into this to see if he can find solution; aiming to get back to you in next week or so.
Add this line of code to the #topnav ID selector: WHITE-SPACE: nowrap; also, change the width to %100 This will prevent the text from wrapping when the browser is scaled down as long as there are no <br> tags in the html. I tested this out on my end and had success with it. Let me know how it goes for you.
Created attachment 42946 [details] To menus with second fix Thanks, Nick, but I applied this to visual.css and fail to see any results: #topnav { background-image: url(/eclipse.org-common/themes/Phoenix/images/topnav_tabbg.gif); background-repeat: repeat-x; color: #999; font-size: 0.9em; white-space: nowrap; width: 100%; } With the white-space and width, the top navigation menu tabs still wrap on a separate line when the browser window size is reduced.
Could you show me the HTML code that goes along with the CSS? I tested this out, with a mock-up I was working with and had no problems. I'll send you another proposal soon as well. There may be more ways to get around this.
(In reply to comment #8) > Could you show me the HTML code that goes along with the CSS? Whatever's on www.eclipse.org. In CVS, it's at :pserver:anonymous@dev.eclipse.org/cvsroot/technology/org.eclipse.phoenix/eclipse.org-common
*** Bug 117710 has been marked as a duplicate of this bug. ***
*** Bug 150433 has been marked as a duplicate of this bug. ***
Created attachment 68852 [details] Proposed fix
Created attachment 68855 [details] Proposed fix (alternative) There appears to be mixture of line endings in "layout.css" and it shows changed as whole in attachment 68852 [details] - if for some reason it doesn't apply cleanly try this one, instead.
Created attachment 68870 [details] Proposed fix (complete) I have no experience with PHP but modified the "menu.php" template on a best-guess basis to remove the extra LI elements generated just for styling the tabs. The correct way to achieve the same is using CSS generated content (e.g. the ::before and ::after pseudo-elements) but since it is not well-implemented across browsers the acceptable workaround is to use generic meaning elements like DIV or SPAN but not specialized meaning elements like LI (they are supposed to have content). In this case I went without any extra empty elements. One would also need fixed versions of two of the images I'm about to attach next.
Created attachment 68871 [details] topnav_tabstart_first.gif /eclipse.org-common/themes/Phoenix/images/topnav_tabstart_first.gif
Created attachment 68872 [details] topnav_tabstart_selected_inline.gif /eclipse.org-common/themes/Phoenix/images/topnav_tabstart_selected_inline.gif
Thanks for the patches. I'm not sure if I applied them correctly, as things don't look right on http://phoenix.eclipse.org/downloads/ At any rate, I wouldn't invest too much time in fixing this, as we've begun working on bug 160442 - Improve the Phoenix skin. The work we do there will likely fix the problem here, as the tabs will look like those on http://live.eclipse.org
This has been fixed by bug 197520
