I am looking to do two things. I would like my text of log in and create account to be centered in the true middle of my custom buttons (divs).
The other is figuring out how to keep all content on page to not move around or become bigger when changing window size or dragging to a a bigger monitor. The best example I can give is when looking at Uniswaps ‘swap’ page where the middle container always stays the same size and stays in the center when shrinking the window or moving/ dragging to a bigger monitor.
let me know if repo link doesnt work. I just sigend up for github.
If you want a button use the button element and not a div.
I would suggest you take the time to learn more about doing layouts. Specifically flexbox and CSS Grid. Most of the styles you have for the layout are pretty broken, like fixed margins and using position absolute.
For the centering you can use flexbox or grid (for the button text and just overall centering elements).
Thanks for tips. grid centering did the trick for the text thank you.
i wanted to avoid using a button because i figured i could make a cleaner customized button using a div. I took a guess thinking that is what companies might do…? for example facebooks log in page. there is a blue button that says log in and a green button that says create account. both have an button click animation to it, but does this mean that both are button elements or a customized divs maybe? I attached a screenshot showing a button element for log in with and div for create account from my project. log in has a grey button default border that i wanted to avoid.
i watched the video attached but still do not understand on how to fix window shrinking to be identical to how for example shrinking uniswaps ‘swap’ page looks like with its center container.
The button element has a tonne of functionality hidden in the background, and in using div you will lose that utility and have to configure it yourself.
you can also edit these buttons the same way you edit the div, and you are able to overwrite all the styling for buttons to make them as you wish. I’m sure there is a section on editing buttons in the html course on FCC.
As for shrinking the elements to suit the screen, you can look at concepts like relative font size units
by setting these up, or looking into the media query tool to change styling depending on screen sizes I think you can get the desired effects you are looking for
You should really try avoiding using divs as buttons. There is nothing you can do with a div you can’t also do with a button element. The button element is both semantically correct and accessible.
However, there can be some cross-browser inconsistencies with buttons. On the other hand, creating a well-behaving accessible button using a div is also not as easy as it might sound. So I would suggest you stick to buttons when at all possible.
