I got these share buttons from simplesharebuttons.com. I added a more button that will eventually be used to unhide less popular social media icons on smaller screens, but it's not lining up with the rest of the buttons and I can't figure out what the problem is.
http://jsfiddle.net/WLSqw/41/
#share-buttons img {
width: 35px;
padding-right: 5px;
display: inline;
}
#more {
width: 35px;
margin-right: 5px;
background: #ccc;
display: inline-block;
border-radius: 50%;
color: white;
font-size: 1em;
text-align: center;
line-height: 35px;
}
Actually, being an inline-block element, all you need for your #more is:
vertical-align: top;
DEMO
Add float:left; to the links and that button
JSFiddle
Related
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 have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.
Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/
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 have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
I have a column in a table that contains and icon and a chunk of text. the icon is a div with a data url background. I need the cell to be a little bit bigger than the content and the content to be centered within the cell. I've been banging my head over this for a while now and can't get it to work.
CSS
body {
width: 90%%;
margin-left: auto;
margin-right: auto;
font-size: 100%;
font-family: "Arial"
}
table {
/*width: 100%%;*/
width: 100px;
margin-left: auto;
margin-right: auto;
font-size: 100%;
border-collapse: collapse;
}
td.bordered_centered {
border: solid 1px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
.icon {
float: left;
height: 20px;
width: 35px;
margin-right: 0.25em; /* 0.25em is roughly equal to one space character. */
}
.lastFour {
float: left;
width: 35px;
padding-top: 2px;
}
.visa {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWZJREFUeNrElmlsVFUYhp87SztD95VSoDNdWVILWkBokBr4UbBuGAUUJERiYoLGjR8GI4kJiCAI7sEQ0j/8MRq3IkShAYpSEFp2JNBl2kJLp9NlOrcz05m51+9OcIEiJSbimZyZb86dc+Y97/t97znK8ePH44G90mdKN3P3mya9Sfpsi7z9NGrUqJkOhwP5vOtI/H6/yeVyFaiqWmeS7zNyc3P/FyBGs9vtFBUVGaHTYMZks9miD1rbe/i+xsWuL5tIibPy7LJJLKkspKc/wEfb66mubmTFyhLmz81hw6ZfaXL1s/7t2WRl2Nn80Sn2H+7AF4iQbrPySGUOz6+YTE52Irqus2l7A3uqWwgGw8yrcLDiqQkUOJKj/2symVAUBdPfUeaMS2XubAeNzT727W7nYstAdHzf4Sus31RP99UAxcWZnL/sZeeOC6ieMBGzwqaPT/Lp5gYyk2wsrHASDIQ5/Vs3qj8cnV/X0MHWT87w87Fu6g66OVzXzbWuwDCWTDcPOMcmUv7AeBS7FbstFt9giKqq80R6Q6x4aRrlpWOoPdSBHtB4+LF80tNiOXWkK5qGFZVOtq0ro/qbSj54t5yJeamEIzqf7TiPtyfAouX5JE+SehGmBoXBEcFEIhoZybES6Az4AtQcbGXPt40Ul41l8RP5tHaq1IiUZruZgslp5I9JomhqOpZYE1s3nuCtjUexx1pwZicI9VBztJ09P7iYIr95bvEEUs1mVG8Qt8c/MhiLxUxmegxhdI6cdPPh9jNYrWaWiv4Txydy4nQXFy/0UFCYTF5uIlbRe83r97F0VQlhNcSGNUd49c1DdLhVhsIaVTvP0d3pZ/nTE6NMGZmh+kJ0dPmGgbEMG5AcyEi3EREwv4jG/i6VuQscLHs8VyjXOHK0E587yIyFBRTlJtHXP4QjK5GqLQ+yrTSDtS/X8sWuRlYuvwfd0suB2mvGDrlwsYe2di+egSCpFhsdnsDIYEzCbaZUB/4Q/mYvKdk2qaoJZKfFca6xl9oDrUK/xvSybLrcg2x5v4HExBieWVKIWTf8S2dcTgLu/kG+/uoyHe0qGXkJ7P3RRZ8w1+cJopt0GqUSRwRj6Jw92k5yqgCSqpi/YDxPVuRGnzW5eqX3MGlqCvdPy6Sp1ct3uxu5JqA/rzpLOKhhF5lfeW0Knr4AtfvbyXLYeWN1CROdybS5/byzpR6PyOb1Dt0JGEXoT2HtulmYQhpzZmURb4+R/erkjIln1YvTxTuSKJGc8arxbH6vnJOnumnrDGCzWpgzJ5tFj+ZRf9bLC6vtFE9O4qHyTMS2oi0pIYUrHYNkZcYMA6PI2aSXlpbekVsagGSKvIa3cPSJcbiJVJoPTQuimDXZXAhxOvSwEcveDYM1GW5voPvL9evr64czc7t2Mww96EEZEo8Z6sUSvip51ggDbnS1F5PmiYJiSIBEItHZutku/hUnZ0AGxOVB4ZrbyzTiETtwCdQm+Z/LaD3HYVA8xy8Agn1CjyoIhQFNiZqgokmsi0noIYlDBrVISEQU0tPGY/03YPRgN5H+c7Ljy9BzQhhoQwkPosQkQEIBSnqZsJ4mpZwo0kjim2RZRSxMC6NF/MKMTxgUpgKd4G2BUC9K/NiRE/gGN1Zd6MKA7r2E5r8q62uYk4ph7EKRXRaLTZMV4mXchq6Yr0t5c55dl1go0TWpoNAAmgBTFPMtwWiBQODPk9uYHhnqQ1Pb0P0uQTSIKS4Hy+h5AmC0ZGjcLRdS/jHP/giswpo1Ot9sy7pRepHTONkNMMeam5tnOp3O6N3CmG6OSYl2Ukr+8/uMEEFLS4sRtivXr50HpN97q7PqLl07DTRlvwswANn8NfEnziBGAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
}
td,th {
font-size: 95%;
}
HTML
<td class='bordered_centered cardNumber' valign='center'>
<div class='cardHolder'>
<div class='icon visa'></div>
<div class='lastFour'>9999</div>
</div>
</td>
I can make it look right on some screens and some resolutions by using padding to center the text, but I can't get it looking good everywhere. It's to be viewed on phones and tablets so I can't just ignore some screen sizes.
I've also tried using an img with the data uri. That helps a little. Unfortunately it would make the page I'm trying to build monstrous so I'd like to avoid it if at all possible.
Any help would be appreciated, thanks.
vertical-align: center;
Is not correct; try:
vertical-align: middle;
Form more information see:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align