I am currently creating a fixed header which looks a bit like this.
https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568
The logo is always at the left, the small buttons always at the right, and the menu buttons in the middle. I gave the logo left: 0, the menu buttons using the code below this text, and the small buttons right: 0.
left: 50%;
transform: translateX(-50%);
What I want to happen: The buttons in the middle are always centered until one of the things at the side (the logo or the small buttons) pushes it somewhere else. When the bar gets way too small everything gets pushed off at the right, but this only happens when all white space is filled up. (At this point my mobile layout will activate)
Here is the problem: When the screen gets too small this happens:
https://gyazo.com/044c02f056fd7d76d34cf4e1a912af45
My second try was using inline-flex. This is the code I tried to use (applied on the whole header):
display: inline-flex;
position: fixed;
justify-content: space-between;
flex-flow: nowrap;
white-space: nowrap;
overflow: hidden;
The problem here is, that the logo on the left is wider than the small buttons on the right, and because I use space-between the middle buttons get offcentered by default.
(It is not that clear in this picture, but they are definitly offcenter)
https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d
Is there some option in flex I missed? Or is there a better way to solve this problem?
EDIT: A friend suggested I add an invisible element to the small buttons on the right, which is exactly wide enough to keep the middle buttons in the center. Altough this works, it still has SOME whitespace because of the invisible element.
you could add an equal min-width to the logo and the small buttons, that way the remaining space is distributed evenly.
Related
It's a bit hard to explain, but consider a flex header with a menu and then something else on the right which is fixed width. As the window size shrinks in width, there is less room for the menu. Eventually, the menu pushes the other thing out of the container.
Working example here.
Bad
Note how the "other thing" falls out to the right.
Adding overflow: hidden to the menu container element makes it so the "other thing" doesn't get pushed. However, this also prevents the drop-down menu from showing, of course. I tried to work around it by setting overflow-x: hidden; overflow-y: visible but this is apparently not a valid setting.
Better, but no drop-down menu
(Ignore that "Item 1" has been hidden. In the real code "Item 5" would have been moved to an overflow menu -- not included in the demo here.)
Question
How can I make it work like the bottom example, but without adding overflow: hidden to the menu? That is, how can I stop flex-box from pushing the "other thing" out to the right?
TL;DR. See the CodePen example linked at the bottom.
Limited spaces + multiple elements = unavoidably overflowing content
Your .logo takes up 50px and the .other-thing takes up 200px. Because you didn't set flex-wrap to the .menu, its width won't go smaller than the content. That means, as the viewport width shrinks, your .header will inevitably overflow.
Setting your .menu with overflow: hidden; wouldn't work in your favor either. Once your Item 1 and Item 5 are cropped out, your users won't be able to scroll to them because overflow: hidden; prohibits it.
flex-wrap: wrap; and #media for better responsiveness
Adding flex-wrap to the .menu would be a good start. That way, in small viewports, the .menu will flexibly wrap as needed. Also, to accommodate a wrapping behavior, I'd suggested you remove explicit height from .header and use padding for consistency.
Using #media for responsive layout will be a better long-term solution for you. Here I suggested resizing the .logo and .other-thing on smaller viewport as an example. In real life, you'd probably want to introduce a mobile-only menu UI (e.g. hamburger button) rather than keeping all menu items visible. Say, in a smaller screen (< 640px), showing 50px logo and 200px other thing with all those individual menu items simply won't work elegantly.
See this CodePen example here
Use example 2 and remove the overflow-hidden class. Add min-width: 0; to menu to fix overflow issues. Then set dropdown-menu to display: none;. I added a class called item-4 to your first child of menu. Then you can use the following CSS to show dropdown-menu.
.dropdown-menu {
display: none;
}
.dropdown > div.item-4:hover ~ .dropdown-menu {
display: block;
}
Fiddle
This is my site URL
In Inspect mode mobile view when I click on the last circle of heel, two circles appear on top of it. I want those two circles to appear at the center.
If I remove justify-content: space-between from the css, then those two circles appear at the center. However the first circle appears only partially in mobile view while scrolling horizontally. How to solve this problem?
Thanks
Add Justify Center to the div after .container height in style and mark it important
position: relative;
bottom: 215px;
justify-content: center !important;
After digging for quite a while i found the solution.
just give the container of the circles a padding left of 100px in the media query.
code :-
.row.align-center.justify-center {
padding-left: 100px;
}
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/
I'm wondering why adding a "width" element to a box is destroying the effect of "float".
For example, when I have
.login form {
float: right;
background-color: green;
}
All elements shifts to the right and the background color only encircles the elements that are there (it does not create a green bar at the top of the screen as I want). I figured I could ameliorate this problem by setting a width,
… width: 800px; …..
but although I get a green by striping the top of the screen, all of my box elements seem to float to the left, so I have a green bar with login elements at the left and not the right.
Could someone please tell me how to take my .login box element, justify all of the five attributes that it has to the right (textfields, boxes, and a button), and still have a green bar at the top of the screen even where there is just blank space.
trying it with padding-left:(something px) ; instead of width: 800px; will probably fix this problem
What is likely causing this problem is that you're using the full capacity of the overlaying div, this makes it useless to float-right since there is nothing left to float away from
You can even put to the container: overflow:auto; or you can you the clearfix method found here.
I would like to create a page with a logo that is always horizontally dead centre and upon opening the page before anything is clicked on is also vertically centred.
I have created the page with the logo centred using simple margins:
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
This works great with a full page background, but I would like to have a number of small 50px square divs to the right of the logo that will have icons for login, mail, info and if someone clicks on those divs they expand to show login fields etc.
Now the problem I have is I am very used to using 2/3 column layouts but I have no idea how to keep the logo dead centre if the div next to it expands.
(I dont mind if the logo moves up the page as the div next to it expands or whether the logo stays dead centre and the div expands downwards.)
This does not have to be compatible with anything before IE9
I may not fully understand your question but have you considered displaying the logo as a background-image:?
If that's not the solution you're looking for you should consider placing the logo in the first column of a table, and the boxes on the right in a second column of that table. Then vertically and horizontally center that table.
If you don't want to use a table you can achieve something similar with divs.