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
Related
When I resize my webpage everything goes out of position. The text goes below the container and the image get too wide. How can I make it so everything stays in place when the image gets resized? I looked at a few solutions but none seemed to work for me. Any help would be appreciated!
body {
background-color: #ADD8E6;
padding: 10px;
margin: 0;
}
.hcontainer {
background-color: #FFFFE0;
height: 600px;
text-align: center
}
div h1, p {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0;
}
img {
margin: 0;
padding-top: 20px;
}
#mini {
font-size: 13px;
margin-top: 5px;
}
.imgcontainer {
background-color: pink;
}
.mcontainer {
background-color: #FFFFE0;
height: 600px;
margin-top: 20px;
padding-top: 30px;
}
li {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
h3 {
text-align: center;
}
.list {
width: 50%;
margin-left: auto;
margin-right: auto;
}
h4 {
text-align: center;
padding-top: 20px;
Use percentages instead of px, this will make any elements a relative size when resizing the window.
Use percentages instead of Pixels, And be careful the width of all the components companied should be 100%.
So all the components width, the paddings, the margins even the borders counts! All companied should be 100% at the width.
Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.
Another thing I recommend to you to learn and use Bootstrap to make responsive website to all platforms.
I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>
url: http://www.5vforest.net/#portfolio
#portfolio .projectWrapper{
width: 100%;
float: left;
}
.projectLeft{
font-size: 10pt;
padding-top: 10px;
margin-right: 500px;
}
.projectRight{
width: 500px;
text-align: right;
float: right;
}
No idea why this isn't working.... I'm totally stumped. Any advice? Thanks.
You can make it work by moving <div class="projectRight">..</div> to before <div class="projectLeft">..</div> in the HTML.
both columns should float:
.projectLeft{
font-size: 10pt;
padding-top: 10px;
float:left;
//the width you need
width: 500px
}
.projectRight{
width: 500px;
text-align: right;
float: right;
}
Because there is no space for it. Project left has a 500px margin right which is pushing it down.
.projectLeft {
font-size: 10pt;
padding-top: 10px;
width: 500px; // other div must have fluid space, thanks thirtydot
float: left;
}