I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.
How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/
Answer
While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.
use a fixed width with inline-block on the buttons.
Working Fiddle
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
using inline-block provides a little-bit of margin between the elements (caused by a white-space in the HTML) so I removed the marin from the CSS, but you can put it back.
Easily done with flexbox:
.button {
padding: 10px 15px;
width: 150px; /* Fixed width links */
background-color:deepskyblue;
color: white;
margin: 3px;
}
.callToAction {
margin: 30px 0;
display: flex; /* Magic! */
justify-content: center; /* Centering magic! */
}
Working Example
.button
{
width: 150px; /* Your custome size */
background-color:deepskyblue;
color: white;
margin: 3px;
padding: 10px 15px;
}
Section a
{
width: 150px; /* for your all buttons */
}
Related
The issue I'm experiencing is so simple it's confusing me...
I've implemented my social media logo as links. They work completely fine on the index page, just not elsewhere. I've essentially copied and pasted the exact code below to the remaining html pages, and nothing. The code isn't responsive. Please see examples below.
index.html
resume.html
Here is my code...
.socialBanner {
position: absolute;
}
.githubLogo {
position: absolute;
width: 40px;
height: auto;
top: -1260px;
left: 185px;
}
.linkedinLogo {
position: absolute;
width: 40px;
height: auto;
top: -1260px;
left: 265px;
}
<div class="socialBanner">
<img src="githubLogo.png" alt="githubLogo" class="githubLogo">
<img src="linkedinLogo.png" alt="linkedinLogo" class="linkedinLogo">
</div>
Thank you in advance!
As stated below, I've tried copy and pasting the code as well as reviewing it line by line, and I'm not sure what I'm missing exactly. Any guidance is appreciated!
It’s a positioning issue. Remove all your positioning code and you’re good to go.
img {width: 64px;}
<div class="socialBanner">
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="githubLogo" class="githubLogo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/LinkedIn_icon_circle.svg/1200px-LinkedIn_icon_circle.svg.png" alt="linkedinLogo" class="linkedinLogo">
</div>
Looking at the code I cannot think of a reason to use top: -1260px for social icons other than some animation moving them in from 'above'.
I have somewhat replicated the example image showing three icons below the byline. As you can see in the snippet CSS, with careful planning of flexbox elements and proper alignment you can have a responsive 'banner' without media queries.
The left side of the banner .me is a vertical flexbox container with three rows of which .socialBanner is a flexbox row container.
The right side of the banner .menu is a horizontal flexbox container with four menu options.
Upon resizing the browser, the flexbox alignment and wrapping options make the banner neatly fit in viewports >= 320px wide.
Check out the little math in html { font-size: calc(0.625vmin + 0.75rem) } which calculates the root font-size relative to the minimum viewport size (vmin) resulting in:
font-size: 14px on 320px viewport minimum size devices
font-size: 20px on 1280px viewport minimum size devices
All other font sizes are calculated relative to the current viewport minimum size. Effectively: for each 160px change in viewport size, the font size changes 0.25px
Math: linear equation y = mx + b for points p1(320,14) and p2(1280,20) => y = 0.00625x + 12 converted to CSS using 100vmin for x and 0.75rem for b (which is 12 / 16 = 0.75rem).
BTW site wide will still require you to copy the code to each individual html file unless you use some framework that does the copying automatically...
Snippet
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap');
*, ::before, ::after { box-sizing: border-box }
/* Linear equation y=mx+b using points p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) }
body {
margin: 0; /* remove default spacing */
display: grid; place-items: center; /* Easy centering demo banner */
width: 100%; min-height: 100vh; /* at least full screen */
font-size: 1rem; /* inherit responsive root font */
font-family: Poppins, sans-serif;
background-color: #222222; color: White;
cursor: default;
}
a { text-decoration: none; color: currentColor }
.main-banner {
width: 100%; min-height: 40vh;
padding: 1.5rem 2.5rem;
background-color: #c1e1c1;
}
/* horizontal orientation */
.main-banner, .me, .menu, .socialBanner {
/* Flexbox layout */
display: flex; flex-wrap: wrap;
/* Flexbox alignment */
align-items: center;
/* text alignment */
text-align: center;
}
/* vertical orientation */
.me { flex-direction: column }
/* Flexbox alignment specifics */
.socialBanner { justify-content: center }
.main-banner { justify-content: space-around }
.menu, .me { justify-content: space-between }
.me > * { width: 100%; text-align: center; font-weight: bold }
.name { font-size: 3.5em ; line-height: 1 }
.byline { font-size: 1.25em; line-height: 2 }
.socialBanner a { display: block; padding: 1rem 0.5rem 2rem 0.5rem }
.socialBanner img {
display: block; /* removes tiny whitespace below images */
border-radius: 50%
}
.menu { color: #b5b5b7; font-size: 1.25em; font-weight: bold }
.menu > * { border-bottom: 1px solid transparent; flex: 1; padding: 1rem; cursor: pointer }
.menu > :hover { border-bottom: 1px solid White; color: White }
<div class="main-banner">
<div class="me">
<div class="name" >jordan fichter</div>
<div class="byline">portfolio + ux design + web development</div>
<div class="socialBanner">
<a target="_blank" href="https://github.com/thesd5x"><img src="https://picsum.photos/40?random=1" alt="githubLogo" class="githubLogo"></a>
<a target="_blank" href="https://www.linkedin.com/in/jordan-fichter-a40762152/"><img src="https://picsum.photos/40?random=2" alt="linkedinLogo" class="linkedinLogo"></a>
<a target="_blank" href="https://google.com"><img src="https://picsum.photos/40?random=3" alt="googleLogo" class="googleLogo"></a>
</div>
</div>
<div class="menu">
<div>welcome</div>
<div>resume </div>
<div>about </div>
<div>contact</div>
</div>
</div>
I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here:
What I want it to do is to only fill the area where the text is. The only way I've been able to do this is making the left and right margins really large, and even then it's not perfect.
margin-left: 600px;
margin-right: 600px;
you can reset display to use the table-layout model so it will shrink to fit content.
example
h1 {
display: table;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.
h1 {
width:max-content;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill
max-content
The intrinsic preferred width.
I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.