I have been having some trouble figuring this out so I have decided to include both my html and css in full this time.
I want my calendar section to be centered on the page below my header section which is to be fixed at the top of the page. I want my code to be dynamic so I am using translate to center my calendar.
When I view my code using IE or Edge the calendar is set in front of my header (centered horizontally but not vertically).
Could this have to do with my using positioning along with transforms?
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
<title></title>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"> Title </p>
</div>
<ul id="navUL">
<li>Home</li>
<li>Browse</li>
<li>Stats</li>
<li>Calculator</li>
<li>Blaster</li>
</ul>
</div>
</head>
<!--------------------------calendar------------------------->
<body>
<div class="calendar">
<div>
<p class="month">December</p>
<table>
<tr>
<th class="cell">Sunday</th>
<th class="cell">Monday</th>
<th class="cell">Tuesday</th>
<th class="cell">Wednesday</th>
<th class="cell">Thursday</th>
<th class="cell">Friday</th>
<th class="cell">Saturday</th>
</tr>
<tr>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
</tr>
<tr>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
<td class="cell">10</td>
<td class="cell">11</td>
<td class="cell">12</td>
</tr>
<tr>
<td class="cell">13</td>
<td class="cell">14</td>
<td class="cell">15</td>
<td class="cell">16</td>
<td class="cell">17</td>
<td class="cell">18</td>
<td class="cell">19</td>
</tr>
<tr>
<td class="cell">20</td>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23</td>
<td class="cell">24</td>
<td class="cell">25</td>
<td class="cell">26</td>
</tr>
<tr>
<td class="cell">27</td>
<td class="cell">28</td>
<td class="cell">29</td>
<td class="cell">30</td>
<td class="cell">31</td>
<td class="cell">1</td>
<td class="cell">2</td>
</tr>
</table>
</div>
</body>
</html>
CSS
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("Gradient.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:#ff6600;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
#navUL{
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
#navUL li{
padding: .2em 1em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
}
/*------------------calendar--------------------*/
.calendar{
text-align:center;
float:left;
background-color:#ffeeff;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.month{
padding-bottom:-20%;
font-size:260%;
text-align:center;
}
table,th,td{
border: 1px solid black;
text-align:center;
}
table{
text-align:center;
margin: 0 auto;
border-collapse: collapse;
width:100%
}
Your header should be in the body. If you want the calendar centered try either the following:
Include text-align:center in the body or..
Margin:auto in .calender or..
TranslateX(-50%) and margin-left: -35% or use pixels for width like 300px and then use margin-left: -150px which centers it.
If it doesnt work try absolute positioning. I hope this helps :).
Related
I have to make a table, but I don't know how to build it, I've try a lot, but I can't.
I want to make a table like this -->
But I can only do this -->
I want the f cell to merge the two cells down, in the left middle of the b cell and the g cell.
How can I solve ? THANKS !!!
Here is my code:
table, td {
border:2px solid black;
border-collapse: collapse;
}
td{
height: 10px;
width: 200px;
vertical-align: top;
line-height: 25px;
}
td.a{
text-align: center;
vertical-align: top;
}
td.b{
text-align: left;
vertical-align: bottom;
}
td.c{
text-align: left;
vertical-align: middle
}
<table align="center">
<tr>
<td>a</td>
<td class="a" rowspan="3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td class="c" rowspan="3">e</td>
</tr>
<tr>
<td class="b" rowspan="2">f</td>
</tr>
<tr>
<td class="a" rowspan="2">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
</table>
Better to use grid but if you really wan to use table, you will need to fix a height to your tr, otherwise you wont see any difference:
tr{
height: 25px;
}
And if you really want to that the height fit with your image, you can double height on the fourth row:
tr:nth-child(4){
height: 50px;
}
DEMO
table, td {
border:2px solid black;
border-collapse: collapse;
}
tr{
height: 25px;
}
tr:nth-child(4){
height: 50px;
}
td{
height: 10px;
width: 200px;
vertical-align: top;
line-height: 25px;
}
td.a{
text-align: center;
vertical-align: top;
}
td.b{
text-align: left;
vertical-align: bottom;
}
td.c{
text-align: left;
vertical-align: middle
}
<html>
<head>
<title>Table</title>
<style> </style>
</head>
<body>
<table align="center">
<tbody>
<tr>
<td>a</td>
<td class="a" rowspan="3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td class="c" rowspan="3">e</td>
</tr>
<tr>
<td class="b" rowspan="2">f</td>
</tr>
<tr>
<td class="a" rowspan="2">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
<tbody>
</table>
</body>
</html>
I recommend you to use CSS-Grid to specify the rows and columns and then use grid-row property on the the item you want to span to other row it will make your task easier. Make sure you have enough rows available in your table to span one row item to other line.
I am trying to make a table, and I want some of the rows to have 2 different colored 35px borders, kind of like this:
.
Please let me know if you know of a way to do this, all of the pots that I've seen online only tell you how to make a multicolored four sided border and I have not figured out how to modify those solutions to only apply to one edge.
You'll just need to wrap the table in a <div> and apply a left margin and a negative box-shadow.
<style type="text/css">
.outer {
padding-top: 35px;
margin-left: 35px;
box-shadow: -35px 0 0 rgba(0,0,128,0.8)
}
.outer table {
border-collapse: collapse;
}
.outer th, .outer td {
padding: 3px;
}
.ltBlue {
background-color:cornflowerblue;
color: white;
font-weight: 500;
}
.outer tr td:first-child {
width: 35px;
padding: 0;
}
.outer tr td:nth-child(5) {
text-align: right;
}
</style>
and...
<div class="outer">
<table>
<tr>
<td class="ltBlue"> </td>
<td class="ltBlue" colspan="4" style="text-align: center;">Overdue Books</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<th>Date</th>
<th>Title</th>
<th>Due</th>
<th>Fine</th>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
</table>
</div>
This should get you where you want.
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="table_2_border" style="width:300px;border-left:1px solid orange;border-top:1px solid black;border-right:1px solid pink;border-bottom:1px solid yellow">
<table style="width:295px;margin-right:auto;margin-left:auto;border-left:1px solid green;border-top:1px solid blue;border-right:1px solid yellow;border-bottom:1px solid red">
<tr>
<th style="border-left:1px solid green;border-bottom:1px solid pink">One</th>
<th style="border-left:1px solid red;">Two</th>
<th style="border-left:1px solid blue;">Three</th>
<th style="border-left:1px solid orange;">Four</th>
</tr>
<tr>
<td>One info</td>
<td>Two info</td>
<td>Three info</td>
<td>Four info</td>
</tr>
</table>
</div>
</body>
</html>
As you can see, you can style each section to the color of your choice.
What i am trying to do is to make HTML similar to this image.
I tried Below HTML with table and with div as well. but text is not aligning proper. Not sure what is the best way to do it. As i am using bootstrap.
Here is my HTML that i tried.
h1{
font-size:45px;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
You can try with elements to get the result you want.
<div class="item">
<span class="count">1</span>
<div class="txt">
<h2>Shopping Cart</h2>
<p>Manage Your Item list</p>
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.clear {
clear: both;
}
.count {
float: left;
font-size: 45px;
width: 30px;
}
.txt {
margin-left: 40px;
}
.txt h2,
.txt p {
margin: 0;
}
</style>
try this
<style>
.sc-col-4{
width: 33.33%;
background: #ddd;
height: 150px;
}
.left-box{
background:#007bff;
padding: 1.5rem; color: white;
padding-right: 3rem;
padding-left: 3rem;
margin-right:1.3rem;
float:left;
font-size: 50px;
}
.right-box{
float: left;
}
</style>
<div class="sc-col-4">
<div class="left-box">1</div>
<div class="right-box">
<div style="padding-top: 1rem; font-weight:600; font-size: 1.25rem; color: #007bff;">$1.999,50</div>
<div style="color: #868e96; font-weight: 700; font-weight: bold">INCOME</div>
</div>
</div>
h1{
font-size:45px;
}
#bottom{
vertical-align:bottom;
}
#top{
vertical-align:top;
}
td{
padding:0;
margin:0;
line-height:1;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td id='bottom'>Shopping Cart</td>
</tr>
<tr>
<td id='top'>small content</td>
</tr>
</table>
Your code is actually working but the output comes like that due to the size of each cell in table try this :-
<table >
<tr>
<td rowspan="2"><h1>1</h1></td>
<td style="vertical-align:bottom">Shopping Cart</td>
</tr>
<tr>
<td style="vertical-align:top">small content</td>
</tr>
</table>
A solution using styles as mentioned above would probably be cleanest. But if you're looking for something purely within the table element, you could add a nested table as follows.
Hope this helps!
h1 {
font-size: 45px;
}
<table>
<tr>
<td rowspan="2">
<h1>1</h1>
</td>
<td>
<table cellspacing="0">
<tr>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
</td>
</tr>
</table>
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
I'm trying to get a table to be 100% width of a div...
But when I use width=100% it expands outside of the borders... When using on different devices...
So I'd just like this table, across full width - and the N/A button right aligned...
Seems it is always extending past borders on different devices...
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
Take this example :
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.
div.flist{width:500px;}
div.flist table{width:100%;}
This should work in most cases.
if you need mobile, use media queries instead.
Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
Just write table tag like this
<table width=100%></table>
This might have worked
Added this also into table
style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>