- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone.
Recently I have been implementing a Button Group to (eventualy) select the language for a website that Im developing but I have runned into 2 problems:
1 – The Button group needs “float: left” for the buttons to be joined and the thing is… the floating is making the button group stay out of alignment with the other nav items.
2 – Another problem is that there is some sort of property in the nav that is making my button group having this huge rectangular padding, which shouldn’t happen… I have already checked the Chrome Inspector and I haven’t found anything and I am getting frustrated as hell with this.
So to sum it up, I want my nav to look like this:
http://res.cloudinary.com/dbssny2ox/image/upload/v1527846362/Resultado_Desejado_qkw5ie.jpg
And Here is how I implemented my code:
See the Pen JZdqJm by hell nino ( @wristcutter69) on CodePen.
https://static.codepen.io/assets/embed/ei.js
Any help will be really apreciated!
The Button group needs “float: left” for the buttons to be joined…
1- Not necessarily. Let both a
elements sit alongside each other, on one line, so there are no spaces or line breaks/new lines between them. There won’t be any visual gap and no need for the left float.
2- Dont forget about line-heights. There are some big 60px values in there. Also consider compounded vertical paddings; child element vertical paddings butting up against parent element vertical paddings – their combined values will over inflate things. Best to zero them all and try adding them back in again systematically.