how can i prevent overflowing button? i do not know how to solve it...
i tried everything...
or maybe im just stupid or i just dont know a specific solution to fix this
.tips input {
padding: .5em;
background: var(--verydarkcyan);
border: none;
color: white;
border-radius: 7px;
width: 100%;
font-size: .7em;
font-weight: 700;
color: var(--darkgrayfishcyan);
background: var(--lightgrayfishcyan);
text-align: center;
}
.tips {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
gap: .35em
}
.tips button {
position: relative;
padding: .5em;
background: var(--verydarkcyan);
border: none;
color: white;
border-radius: 7px;
width: 100px;
font-size: .7em;
font-weight: 700;
}
It is overflowing because of your padding: .5em. The text is bigger than the available space you give it.
There are multiple ways to fix that, here you have two:
1. Hide overflow
You can add overflow: hidden to your buttons, now to button won't grow with the text.
2. Give text more space by changing the padding
You can change padding: .5em to padding-block: .5em. With that you are setting the padings only on top and bottom of the button, not left and right.
Add a width property to .tips class with a fix value or you can use max-width in .tips button property with a 100% width to make all buttons of same width
Related
I made a link that looks like a button, with the same properties in CSS as the button next to it, but for some reason the text is a bit higher in the link that looks like a button... any suggestions?
This are the properties:
.submit,
.btn_advance_search {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
I tried for the link that looks like a button:
.btn_advance_search {
horiz-align: center;
}
without success. I also played with the padding at the top but that makes the actual button bigger...
You can center align using flex:
.btn_advance_search {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Add if the above styles don't take full height and width */
height: 100%;
width: 100%
}
You can try to change the line-height to be the same as the height of the element. Make sure that there isn't any (vertical) padding on the element.
You can try this:
line-height: 36px;
height: 36px;
Bonus tip: You could also add box-sizing: border-box; to your CSS if you want to prevent that the element grows when you add padding to it.
I'm new to prgramming. I'm trying to align the multiple buttons on top to the center of the page, I have tried text-align and margin: 0; none of which have worked. Now, I have centered the buttons but the buttons are below each other. Is there any fix to this? How exactly do I center it? I'm using flask.
CSS:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
width: 43%;
padding: 5px;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
border: none;
outline: none;
background-color: transparent;
color: #606060;
top: 30px;
font-size: 27px;
font-family: 'Roboto', sans-serif;
width: 40%;
margin-left: 30%;
margin-right: 30%;
}
This is the image. The border is aligned to the center and is supposed to contain the buttons next to each other as a Nav bar. I want each of the buttons to be centered too. I want all the buttons to be centered at the same place and then I will move each button individually to the left and right. But if you know a way to center all of them side by side, please let me know.
you have some problems in your CSS code that prevent you to reach your goal:
each button has a big margin on left-right, which makes it so that not enough items can fit in a single row
when you set each button size as percent, it refers to the parent element. if you have more than 2 buttons with 40% width, they will overflow the row to the next one.
about how to style multiple elements at the same time: Right now, you style each button based on its id, which is unique. But classes can be applied to multiple elements simultaneously, giving them all the same styling. So Instead of styling through ids (with #), I'm styling based on .btn, which tells the CSS to style everything with the class (represented by a dot) that's called btn
I also set display: flex, align-items: center, and justify-content: center on the parent element to tell it to align all items to center both horizontally and vertically.
so, here's a demo:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
min-width: 43%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/* The buttons that I want to be centered */
.btn {
border: none;
outline: none;
background-color: transparent;
color: #606060;
font-size: 27px;
font-family: 'Roboto', sans-serif;
/* used to show a line seperator */
padding: 0 0.5em;
border-right: 2px solid black;
}
/* Remove border for last item */
.btn:last-of-type {
border-right: none;
}
<nav id="navBar">
<a class="btn">Deals</a>
<a class="btn">Burgers</a>
<a class="btn">Drinks</a>
<a class="btn">Sides</a>
<a class="btn">Desserts</a>
</nav>
I am currently a student learning HTML and CSS to become a web developer and i am having some trouble with getting my navigation buttons to properly display as the page window is resized. I want them to stack on top of one another like blocks but instead they overlap as you can see. Webpage Example
I'm sure i'm missing something obvious, but i would greatly appreciate the help.
Thanks!
body {font-family: verdana, arial, sans-serif;
background-color: #523925; }
header { text-align: center;
padding-top: 50px;
background-image: url(coffeemug.jpg);
height: 120px;
font-size: 400%;
font-family: verdana pro black;
font-weight: bold; }
nav { text-align: center;
margin-top: 20px;
max-height: 150px; }
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
font-size: 120%; }
footer { text-align: center;
margin-top: 20px;
font-size: small; }
#wrapper { width: 95%;
margin-left: auto;
margin-right: auto;
background-color: #EAB987; }
.charpic {max-width: 100%; }
#media only screen and (max-width: 1024px) {
nav a { font-size: 100%;
padding: 8px 50px; }
}
By default, a tags have display: inline, which lets them display side by side and fit as ends up not respecting margins very well. As noted in a previous answer, changing them to display: block will get them to respect margins, but prevent them from sitting side by side unless you add additional logic.
Probably the simplest change to get the behavior that I think you're looking for is to make them display: inline-block, which will continue to lay them out side by side but treat them as block elements that won't overlap as they end up wrapping. This would look like:
nav a {
text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: inline-block;
font-size: 120%;
}
You could also do this by using flexbox, making nav a flex parent with display: flex and then using flex properties to determine layout. This would be a bit more of a change, but I think probably get you a nicer solution. As an example, if you wanted to have them overflow when necessary and be centered each line, you could do:
nav {
display: flex;
justify-content: center;
}
try adding display: block; to the a element, like so:
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: block;
font-size: 120%; }
I'm having an issue trying to get the green buttons underneath the header to lay properly across devices. Full desktop is fine, but as the screen gets smaller, the buttons will break between words and go the next line. And on mobile, I'd like them to stack, but they overlap, and I'm trying to add a bottom/top margin, but nothing helps.
http://www.cooldownjuice.com/collections/menu
How can I get this to lay properly?
Here's my code. (added max/min width as suggested on another topic here)
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
max-width: 300px;
}
You'll need to use float, like so
.catbn {
display: block;
float: left;
margin-top: 10px;
}
Also I personally believe the behavior is better when you remove width: 100% but that's a matter of personal preference.
Use
display: -webkit-inline-box;
display: inline-block;
margin: 10px,
And voilà! And you can maintain your center buttons. If you wish, you can float:left/right to align
To avoid breaking of words and overlapping buttons, add following rules in your css
.catbn{
white-space:nowrap;
display:inline-block;
/*Rest of the css*/
}
The best way to do that is to set the a to block. You may use float or display:inline-block
Here is your modified code for button.
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}
Hope this help you.!
I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)
The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/
Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>