How would I create even borders for uneven content boxes? - html

I am about halfway through completing a course for learning HTML and CSS, the first time I've ever tried programming, so pardon the (probably) simple problem I have.
I am creating navigation tabs for a fictional website, the tabs being "Menu", "Nutrition", "Order", and "Locations". As you can see, each tab would be a different size because the content varies. I am trying to make a border for each tab, so that the borders would be the same height and width for each one, effectively lining up as four congruent rectangles with words inside of them. The code in HTML for this part that I am working with is:
<nav>
<span>MENU</span>
<span>NUTRITION</span>
<span>ORDER</span>
<span>LOCATIONS</span>
</nav>
The code I currently have for CSS that would effect this is:
* {
box-sizing: border-box;
}
,
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
and
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}
This is the resulting visual
How would I make it so that the borders for each tab would be congruent and in line with each other?

* {
box-sizing: border-box;
}
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
text-align: center;
}
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
text-decoration: none;
display: inline-block;
}
https://codepen.io/stargroup0075/pen/MWwLxMd

You want to
Give the elements with the borders (<a />) display: block;, which causes them to occupy the maximum horizontal space available
Give a container of the blocks (<nav />) display: inline-block;, which makes the container shrink-wrap its content
Give the parent of <nav /> (in your HTML example there is no parent, so I assume it's <body />) text-align: center;, which centers the <nav />, like with your original code.
The resulting CSS would look something like this:
* { box-sizing: border-box }
body { text-align: center } /* Centers child inline content */
nav { display: inline-block } /* Shrink-to-fit content */
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
nav a {
display: block; /* Take up maximum horizontal space */
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}

Related

How do I fix CSS style border around the anchor element?

This a simple sign up formed I've made my school project and for one to sign up is to choose their roles. There's not much to this but I can't seem to figure how to fix this border problem under the anchor? How do I make it so that the space at the top is equivalent to the bottom as well?
enter image description here
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
top: 150px;
width: 99%;
text-align: center;
font-size: 18px;
}
.box {
margin: auto;
border: 1px solid #ccc;
width: 30%;
padding: 15px;
}
a {
background-color: #333;
text-decoration: none;
display: block inline;
color: white;
padding: 14px 20px;
margin: 8px 0px;
border: none;
cursor: pointer;
width: 100%;
opacity: 1.5;
}
a:hover {
background-color: #ddd;
color: black;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
<div class="center">
<div class="header">
<h2>WELCOME TO SMK USJ 12<br/> ENGLISH QUIZ</h2>
</div>
<form action="role.php" method="post">
<div class="box">
<h3>Choose your role<br/> You are a...</h3>
Teacher</button>
Student
</div>
</div>
You have a typo with the display property on the a tags. I think you meant to use inline-block instead of block inline?
a {
/* ... */
display: inline-block;
/* ... */
}
The correct solution (in my opinion) would be to change your markup a bit, employ a wrapping container for the buttons and then apply the proper styles to that container. However, without changing your markup - you can still achieve what you are looking for, by adding some line-height to your buttons. Something like:
.box a{
line-height: 5em;
}
Should put you in the ball-park of what you are trying to achieve.

How to center multiple buttons on top right next to other

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>

How to make text always stay in center horizontally when changing height of button

I recently created a website and after I created a button with a <a> on it, the text kept aligning it self to the bottom of the text.
How do i make the text align to the center horizontally.
I have tried adding this code: "display:table-cell; vertical-align:middle;" to the button's CSS, and I have tried changing the position with these code snippets: "relative, fixed, static etc." But none of them changed the horizontal position of the text.
.button {
background-color: #171717;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
height: 10px;
}
a {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<center>
<button class="button">Buy Now!</button>
</center>
As commented, do not use <center> but text-align or display:flex/grid/table behavior and margin. Also a clickable element is not made to hold another clikable element. Use <button> or <a> . button is a form element and could be tricky to restyle.
example of what you could do :
.button {
/* what seems to trouble you */
padding: 15px 32px;
font-size: 20px;
/* okay so far, but height is half of font-size !! */
height: 10px;
/*Your reset*/
background-color: #171717;
border: none;
color: white;
font-size: 16px;
border-radius: 30px;
text-decoration: none;
/* Now try the layout reset and use flex behavior */
display: inline-flex;
align-items: center;
/* ==> because items too big will overflow from the container */
}
a {
box-sizing: border-box;
}
body {
text-align: center
}
<button class="button">Test me! (form element) </button>
Test me! (hyperlink)
How about adding style="position:absolute" in the button tag?
The problem appears to be – quite apart from the use of obsolete and invalid HTML – that you've defined a height of 10px, with a font-size of 16px and padding of 15px (top and bottom). That sum doesn't add up, the height would require:
16px + 2*(15px) = 46px
to contain the text in the centre. To center the text, though I'm replacing the <a> with a <span> for the purposes of validity, you could simply remove the height declaration:
.button {
background-color: #171717;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
}
span {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<div class="centered">
<button class="button"><span>Buy Now!</span></button>
</div>

Vertical alignment of text inside div

I really need help on this: cracking me for 2nd day already. I have the following code:
* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
.plus:before {
content: "+";
}
<div class='inlbtn'><span class='plus'></span></div>
It basically has a div and span inside with a "+" symbol. The horizontal alignment seems fine, but the vertical is a little shifted down. How to make it perfectly centered vertically?
I played around with the code and it seems the code under * is the culprit, but why?
Here's fiddle http://jsfiddle.net/jk34josq/2/
You do everything right, I always use the same method. The problem is that this line
content: "+";
is a piece of text, so it automatically has top margin inside of the line-height preserved for the capital letters (and + symbol is not the one); the margin value could also be different depending on the font.
As a proof try the following:
content: "A";
This looks centered.
What you can do to avoid this behavior:
Negative margin / top property
Use image instead of text
Maybe play with reducing the line-height property but I have doubts about this method
I would use only a single HTML element, since there is no need for using an extra element nor a :before pseudo class:
<div class='inlbtn'>+</div>
Then I would use display: inline-block, instead of table.
As mentioned by Simon in his answer, the + character is smaller than A. But instead of using negative margins or paddings, I would alter the line-height:
.inlbtn {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
display: inline-block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
Updated Fiddle
Try like this: Demo
.inlbtn {
width: 2rem;
height: 2rem;
display: block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: inline-block;
vertical-align: middle !important;
}
.plus:before {
content:"+";
display: inline-block;
}

font-size changes position of element

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>