I am a beginner in HTML and web design, and I am making a simple header for my website. I have a logo image aligned to the left using float left. I also have a simple navigation bar including all the other web pages that I have on my website in the header, and it is also aligned, this time to the right, with float right. However, the webpage displays not in the way I want it. Instead, it displays like this:
As you can see, the navigation bar and image are all floated to the right and left respectively, but the navigation bar is clearly below the image and the title, instead of being on the same horizontal block. How can I change this? I want the navigation bar to be directed right of the title and image. I tried using display: inline but it did not work.
Thanks in advance...
Forget float. Use flex
.header {
display: flex;
justify-content: space-between;
}
Read about CSS flex-box layout. It will speed up your work and make it more pleasant.
pls adding header class
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
Related
Currently I'm making a periodic table with Html and Css, and I needed to centralize my page then I did:
page {
display:flex;
align-items:center;
justify-content: center;
}
but, when I zoom it, I can scroll to top or down, but I can't scroll to right or left.
May you help me?
try adding min-width: min-content;
https://codepen.io/anon/pen/BOQaZP
When I try to add a navbar it keeps pushing the images to the right. I want a hamburger menu, then to the right of it I want list items side to side next to each other. I want the images to stay centered on the page both horizontally and vertically.
I've tried
header{
display: flex;
}
.menu{
display: flex;
}
but this pushes the images over to the right.
The only thing that comes to mind is floats and clears, but I've heard that's outdated.
I feel like a complete noob with this question, but I cannot get anything to work. I have social media icons within my footer and I want to center them within the block they are in.
I have tried text-align: center and margin: 0 auto;. Neither has worked.
What should I do?
Just use following css will make you social icon to center withing block.
#footer-social-images {
display: flex;
justify-content: center;
}
Working Fiddle
I have problem with positioning three elements in fixed top menu on my website. I want to look like that: logo on left site, sign in on right site and menu in the middle of navbar.
How should I do this right?
You can create this layout really easily with flexbox !
Here is an example: https://jsfiddle.net/7n1w4sn6/
Apply a display: flex; & justify-content: space-between; on the container of your menu.
Given that IE does not fully support flex-box, here's an alternative solution which is based on Mamboleoo's code, but uses float: left; and float: right; on the logo and sign-in link respectively: https://jsfiddle.net/vavx5heb/
I can not get the menu div centered inside the header without changing the responsive menu structure.
I use a template from JA and the client wants to have the logo centered above the menu
I was able to get the logo centered within the main div but the menu is sticking to the left and i think i tried almost every possible solution.
here is the link to the site
http://dev.turnim.com/clients/antonio_j3/
Here is one option..
.nav-collapse.collapse {
text-align: center;
}
.t3-megamenu {
display: inline-block;
}
Tested in the browser.. it works.