I'm trying to achieve a menu very similar to the one here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right
except - I want it to be at the bottom of a div.
(If you can imagine an image box that has that kind of nav bar at the bottom - with the image on the layer below the menu because I might want it to show through a partial opacity).
I thought it would be very simple with a bit of absolute and relative positioning. But I'm getting really messed up, with the contents of the nav being moved about, and the buttons to the right moving left.
<header>
<nav class="main">...</nav>
<nav class="sub">...</nav>
</header>
just apply space-between to header element:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
Related
I am practicing out using css flexbox.
My question is: what should I do if I want to put the button at the right side of the pag?
I already tried flex-end and text-align right. I used flex at row also tried it on col-12 too, but the output is still the same..
here's the repl link
repl.it
You can try
display: flex;
justify-content: space-between;
on .col-12.
This will make .col-12 span the full width of the page and evenly distribute the extra space between the flex items inside it.
i am trying to get a fontawesome icon to be right aligned while a input field on same line shoule be left aligned. both units should be responsive and stay at there positionings.
i created a sandbox and a img where it is wrong to show what i mean.
https://codesandbox.io/s/bold-wind-cut7z?file=/src/components/HelloWorld.vue
https://cut7z.csb.app/
this is what i want
Here you go https://jvfe7.csb.app/
I removed the w-50 class which made the element only stay at 50% width and I remove the left: 300% from the icon. The flex property on the input field is also overridden by a flex: none property and then instead controlled it with the code beneath.
Then I added
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%
To the element containing both the input field and the icon. The justify-content: space-between makes the two element stay at both the sides, which you want.
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
We're using flexbox in our Angular 2 app but I'm running into an issue where, while once data is loaded the div containing pagination components appears below the data, in the second or so where the data is still loading the pagination components float to the top of the screen. I want to lock the position of the pagination components so a user doesn't see that movement. This is the css for the pagination component:
.pagination {
display: flex;
justify-content: flex-end;
}
What can I add to force this to position at the bottom of the page so it doesn't float to the top before the data loads? When I tried adding position: fixed and bottom: 0 it overrode other flex positioning and aligned left, when it should be right. So I want to use flex to do this - not standard css.
So, to summarize, I need this to force align right, AND align bottom.
.pagination {
display: flex;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
}
An initial setting of a flex container is flex-direction: row. This means that the main axis is horizontal and justify-content – which only works on the main axis – will align flex items horizontally.
For vertical alignment in a row-direction container use align-items (for a single line container, i.e., nowrap) and/or align-content (for a multiline container, i.e., wrap)
At the bottom of my web site at http://clearwaterfloridabeachrentals2.imbookingsecure.com/ there is a nav menu and three boxes with images. They are not centered instead they are left aligned. What CSS code can I use to center it?
This is the CSS I have:
.row-fluid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.textwidget {
text-align: center
}
Adding the .textwidget css fixed the three boxes but the menu is still left aligned. Not sure what code directly affects it.
use text-align: center on the element
Use text-align: center for the div wrapping the three images.
And make the table width="100%" for the nav menu
Flexbox only works one level deep:
flexible container and flexed child. So you need to make the menu a flex container too and then justify-content: center the child elements
Add flex: 1 to the child elements when you need them spaced evenly.
But this may not work well in your design as it is rather nested.
Essentially your footer is a column of two flexible rows
menu (row of 8 flexed columns which need to be centered on the row)
copyright (row of 2 flexed columns which seem to need space-between)
React on this first so I can help you further with restructuring