I realise that I can workaround this problem by using margins/padding etc., but I’m wondering if there is an established, or accepted way of avoiding these overflow issues? I’ve tried every setting or combination thereof, that I can find in the Inspector.
A simple style at the before /head level (in a block) could make this problem go away:
.fwNavItem {
white-space: nowrap;
}
What this does is force the text content of the fwNavItem to never wrap, which then forces it to the proper width of your menu text. This is a big hammer, usable only when you know that you aren’t going to allow really long menu option labels.
Walter
On Jan 10, 2016, at 3:30 PM, grantsymon email@hidden wrote:
I realise that I can workaround this problem by using margins/padding etc., but I’m wondering if there is an established, or accepted way of avoiding these overflow issues? I’ve tried every setting or combination thereof, that I can find in the Inspector.
Oh wait, sorry, I didn’t see what you were aiming at. TL;DR: to fix this, change the height of #item4 (which really ought to be named logo or something like that) to 0, and padding-bottom to 100%.
Currently this item is set to a flexible height of 6.9%, so remember to ask yourself the question: “6.9% of WHAT?”. In this case, that would be 6.9% of the page, which is almost certainly not what you want. Using the “zero-height, N% padding-bottom” trick, you basically tell this item to retain its aspect ratio no matter what width it becomes. Since your logo is square, 100% makes it stay square regardless.
In other news, your hamburger does not seem to work. There’s a JS error saying that it cannot find variable fwShowHideMenu. You may want to force republish by holding down the Control key and choosing Publish Everything from the File menu. Then upload and see if that error clears.
Walter
On Jan 10, 2016, at 3:36 PM, Walter Lee Davis email@hidden wrote:
A simple style at the before /head level (in a block) could make this problem go away:
.fwNavItem {
white-space: nowrap;
}
What this does is force the text content of the fwNavItem to never wrap, which then forces it to the proper width of your menu text. This is a big hammer, usable only when you know that you aren’t going to allow really long menu option labels.
Walter
On Jan 10, 2016, at 3:30 PM, grantsymon email@hidden wrote:
I realise that I can workaround this problem by using margins/padding etc., but I’m wondering if there is an established, or accepted way of avoiding these overflow issues? I’ve tried every setting or combination thereof, that I can find in the Inspector.
Right. What this does is force the menu item labels to each be one line of text, no matter how long they are in characters, or how narrow the menu itself is in pixels. This may have unintended consequences, and it is best to consider this move carefully. But my other answer has to do with the fact that your entire menu is apparently sliding up over the top of your logo. The reason is that your logo is not reserving enough space for itself in the inline flow of that left column. Because all items in Freeway are overflow-visible by default, your entire logo appears visually. But because it only reserves 6.9% of the page height for itself, it does not push away items below itself far enough to appear by itself in that corner of the screen.
Walter
On Jan 10, 2016, at 3:57 PM, DeltaDave email@hidden wrote:
This is the answer I’m really after … it seemed to me that if there are two items inside a container, then the logical behaviour would be for the lower one to be pushed down the page, rather than for it to flow over the higher one (unless this was specifically desired). The logic being, that on the web, pages can grow downwards, but not upwards. (The overflow also happens when the page is enlarged, because the graphic is set to a percentage too.)
So, really, I should just be leaving sufficient space, even if that is not my preferred design, visually speaking?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You should be considering a flexible way to position your element among its peers if you are also using a flexible width item. That’s what the bottom-padding hack does – it gives you an item that can be any width while maintaining its proper aspect ratio. Because you are using an SVG logo, it will also appear perfectly sharp at any size, too, which is a really great combination.
Walter
On Jan 10, 2016, at 4:16 PM, grantsymon email@hidden wrote:
So, really, I should just be leaving sufficient space, even if that is not my preferred design, visually speaking?
I’ve been using padding and margins previously, but then tried various other ideas to force the space to be retained, such as inserting another (empty) html item, but as you doubtless already know, it didn’t help.
There are a lot of options for width and height, when you have 3 or 4 items to play with … which makes it hard to know which is the best, but admittedly, hours of trial and error is a reasonably effective way of learning. I shall pad and fudge.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
This is driving me nuts, despite Walter’s help, I’ve still not managed to get this working satisfactorily.
Basically, I get to choose between the worse of two evils.
If I set the item named GSTimbreBox’s height to Flexible, I get this:
The menu overflow the SVG. This happens on big monitors when the page height is proportionally reduced. It’s hard to see on mine (1920) without reducing the page height quite a bit, but I suspect it would happen quite easily on an iMac 5K.
Yuk
So, to get around this, I find that I can set GSTimbreBox height to Fixed%, but then, I get a yoyoing menu when moving between pages, which is really ultra yuk.
So how can I get the best of both worlds. A menu that stays put and doesn’t overflow my logo?
Here’s the site where you can see it happening … currently running the yoyo flavour.
I’m wondering if I should be dealing with this by creating another breakpoint, say at 2000 or 2500 and adjusting the largest (default) size so that it doesn’t overflow?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I’ve got honestly no real idea what you’re after which has mainly to do with the design attitude itself.
Whatsoever:
A navigation aside is damn fair. As long as you’ve got enough space (width) available. Or in other words on desktop. As soon as you reach mobile devices, I’d never cover (left/right) space by a “nav-bar”. Space is rare and valuable - especially in width.
Am not sure if it has to do with your specifically problem, but am currently on a huge test/play/ thing where I decided as well to go with a navigation sitting aside (the first time in years). It is looking like so:
The wrapper is declared position:absolute (however placed inflow to keep the Dom hierarchy). It has a fixed width and is breaking to a top-nav pretty quick (theMobile world).
But back to your “problem”:
Remove the “height” attribute from #GSTimbreBox. It may happen, that this buddy collapses to nil - am not sure how SVG in Freeway works. In a responsive world, the height is happening automatically and is steered by the width.
A thing I’d like to know personally (if allowed)?
You mentioned:
hours of trial and error is a reasonably effective way of learning.
What is “one” or “many” hours worth. I mean in real hard dollar, pound, €uro … whatever? We all have to pay our rent and some other stuff - and I’d really like to know how much energy you guys are blowing in the wind.
The question of sidebar navigation is to me an obvious one for anyone showing images. Modern monitors are very wide, but not all images are landscape (horizontal). So it is much smarter to reduce the width of the available space, than the height. I’ve always had the Mac’s Dock in OSX to the right of my monitor as many photographers do (left or right) because we need all the height we can get for portrait (vertical) images. (In the original MacOS, the application bar was always to the right.)
As for what I want, it’s pretty simple. I want my logo to be top-left and responsive. I want the menu below it, to always have the same spacing to the logo (distance between them) and I want the menu to be pushed down the page as the logo grows (as the page is resized).
This isn’t what happens. What happens is that the logo grows as the page is resized and the menu gets closer to it and eventually overlaps it. However! I can make the logo stay in the right place, but if I choose to do that, then when a visitor moves between pages by clicking the menu, the logo momentarily disappears, the menu jumps to the top of the page, the logo then reappears and the menu jumps back down to its correct position. So both solutions are flawed. I’d just like one that isn’t flawed.
Regarding the time spent. Well … it’s an old equation … lots of people do stuff, fumbling their way through, when they could just pay a professional to do it properly. In the end it comes down to two things. Money and/or fun. The choice of using a professional is mostly about cost … and that is entirely relative to how much money you have available yourself … and the fun bit is; is it fun/enjoyable? As long as it’s enjoyable, I’ll keep doing it myself.
As for my design … well that’s a matter of taste I guess.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
The question of sidebar navigation is to me an obvious one for anyone showing images. Modern monitors are very wide, but not all images are landscape (horizontal). So it is much smarter to reduce the width of the available space, than the height. I’ve always had the Mac’s Dock in OSX to the right of my monitor as many photographers do (left or right) because we need all the height we can get for portrait (vertical) images. (In the original MacOS, the application bar was always to the right.)
… and mine is animated so it isn’t visible anyway.
As for what I want, it’s pretty simple. I want my logo to be top-left and responsive. I want the menu below it, to always have the same spacing to the logo (distance between them) and I want the menu to be pushed down the page as the logo grows (as the page is resized).
This isn’t what happens …
Reasonably - and therefor you need to remove the height-attribute of this item already mentioned above (#GSTimbreBox).
Regarding the time spent. Well … it’s an old equation … lots of people do stuff, fumbling their way through, when they could just pay a professional to do it properly. In the end it comes down to two things. Money and/or fun. The choice of using a professional is mostly about cost … and that is entirely relative to how much money you have available yourself … and the fun bit is; is it fun/enjoyable? As long as it’s enjoyable, I’ll keep doing it myself.
It’s not about hiring professional help, it’s about clever investing time (or even money) in order to get things running.
As for my design … well that’s a matter of taste I guess.
Never doubted on this, but now that your issue is solved, maybe a quick addition on this:
I’m aware of different image orientations and am even aware of its pretty hard handling. So the best handling ever is to ignore this fact for making things running later. Assumed you’d post 10 of your images each different oriented on Instagram (or others), what happens? Correct - all are wrapped in a squared placeholder. Why? Because it’s a grid - and a grid is making things easier. Easier to follow, to sort, to concentrate on what’s going on. Even easier to decide which way going down the road later if it comes to present the “entire” image. Text is no different. Or would you like to read a newspaper, each article different font-size, weight or even font-face?
Grid is structure and therefor the number one tool in graphic-design - off any question of taste, throughout all media.
And sometimes, well cropped images are even more exciting than the entire image (opening other opportunities).
Reasonably - and therefor you need to remove the height-attribute of this item already mentioned above (#GSTimbreBox).
Aaagghh! I just read back through the thread and realised that I totally missed Walter’s corrected reply. I was busy replying to his first post and didn’t see that he’d quickly posted a correction. Bum. (Thanks anyway Walter!!).
Thanks for pointing this out to me Thomas.
It’s not about hiring professional help, it’s about clever investing time (or even money) in order to get things running.
Time is money Thomas. Do you want to do my website for me for free, to help me ‘cleverly invest’ my time? No, I didn’t think so. Of course it’s about the money. Professional help is about money, that’s what a profession is … a paid occupation.
I’m aware of different image orientations and am even aware of its pretty hard handling. So the best handling ever is to ignore this fact for making things running later. Assumed you’d post 10 of your images each different oriented on Instagram (or others), what happens? Correct - all are wrapped in a squared placeholder. Why? Because it’s a grid - and a grid is making things easier. Easier to follow, to sort, to concentrate on what’s going on. Even easier to decide which way going down the road later if it comes to present the “entire” image. Text is no different. Or would you like to read a newspaper, each article different font-size, weight or even font-face?
The reason that Instagram adapted their system to allow for any format, is because professionals hated that their images were always cropped to square. Honestly, it has no merit in my eyes except when it is done by design in the first place. Perfect for old Hasselblad shooters. Imagine if you will, the entire contents of the Louvre, cropped to square. Terrific.
And sometimes, well cropped images are even more exciting than the entire image (opening other opportunities).
Aside from the intellectual approach of re-visiting work in a new light, in my view, images created by talented professionals are very very rarely improved upon by subsequent cropping.
I have always been baffled by designers’ willingness, almost to the point of necessity, to crop images. Obviously having worked in the industry all my life, I understand the contraints (bleeds, unknown text length, different media formats etc.) but in my early days, when I was new to the business, I used to just look on in disbelief when the tests would come back from the lab and we would put a beautiful (hopefully) 10x8 transparency on the lightbox and the first thing the art director would do, is grab the ‘Ls’ and start to crop the image in various ways. It seemed like there’s a sort of universal belief amongst designers, that photographers don’t understand composition … especially around the edges of an image. Unbelievable. I can honestly say, that only on very few occasions have I seen an improved composition thanks to a designer’s cropping … and I have a lot of photographers friends whose work I have seen both in their studios and when subsequently printed. I loved it when I came to live in France and discovered that here, book designers ask you politely first, if you mind if they crop your image because they can’t get it to fit in their layout. Speaking as a photographer, it is extremely rare that I crop an image myself. Obviously, lots of photographers will compose, then take a step back to allow some margin to cater to the practicalities of the business … although, for obvious reasons, you can’t really do this with wide-angle.
