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.
Related
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.
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.