Forum Replies Created
It can also be done using CSS: http://codepen.io/joshnh/pen/YWvpxg
Let me know if you have any questions.
Glad this is working now. Just to offer an alternative, possibly simpler solution. As you’re using fixed positioning, and you’ve set the width of the nav to 95%, you could actually just use the following:
With the above, you wouldn’t even need to set the width to 95% as it would naturally be that anyway.
In regards to fixed (and absolute) positioning, that removes the element from the natural flow of the document. What that means is that the affected element no longer stacks along with every other element; it now exists on its own layer essentially, above the rest of the document. This is why using left and right margins of “auto” won’t work.July 26, 2016 at 5:40 pm in reply to: Theoretical improvement of "class" and "id" in html #243919
@mmcgu1966, You are correct; this is from the W3C spec: “In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.”July 26, 2016 at 5:36 pm in reply to: Full width header responsive image, with left & right overflow #243918
Well you could use the BEM syntax prefixed with your identifier:
.[prefix]-[block] .[prefix]-[block]--[modifier] .[prefix]-[block]__[element]
I wouldn’t recommend using random digits/letters as they carry no meaning. Try and have each part of your class names carry some meaning so that they’re easier to work with in the long run. It’s also good practise for working in teams.
I double the resolution of the document. I’ll need that for my @2x assets anyway.
It will adjust according to screen size, but it probably shouldn’t increase indefinitely. Lines of text are optimally read at certain widths, so you don’t want people on large screens having to scan a long way horizontally.
No worries :) That way the content will have a fluid width between the max and where the media queries kick in (as the sidebar has a fixed width).
So the best thing would probably be to set a max width on the container and a fixed width on the sidebar, then use media queries to push the sidebar down below when the content gets too narrow.
The simplest solution would be to simply use media queries to adjust the sidebar styles as needed. What is your ideal behaviour?
Use spans if they are wrapping around content, if there’s no content, use pseudo-elements.September 1, 2015 at 4:44 pm in reply to: [Solved] Percentage based dimensions with max / min #207447
You can use the CSS display property and table/table-cell values to achieve your desired result. Here is a fork of your code: http://codepen.io/joshnh/pen/9c9abe74b4c20dbe51d22abbc10fe777/
Here is a simplified example: http://jsfiddle.net/joshnh/ubf3F/1/August 16, 2015 at 10:12 pm in reply to: [Solved] Why can't I animate relative positioned div left or right? #206625
Some browsers (e.g. Safari) are smart enough to assume a starting position for the transition but in general, it’s best practise to have both a start and end value for transitions.