I have a layout problem on my site..
I develop using MVC for it..
the layout will become a bit strange when I minimize it or I using smaller resolution..
my pc using 1366 x 768 resolution..
if I'm not minimize it, it will be okay..
but when I'm trying to make the browser smaller, it has a gap on the right..
I want to center it like www.bluenile.com website..
thank you..
Images:
before I minimize: http://i.imgur.com/aQyoAYH.png
after I minimize: http://i.imgur.com/9cWtl13.png
Thank you guys!
this is my layout:
<body class="body">
<table class="wrapper" style="width: 100%;">
<tr>
<td>
#Html.Partial("Header")
<table class="main" width="1000" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td colspan="3">#Html.Partial("TopMenu")
</td>
</tr>
<tr>
<td colspan="3" width="100%">#RenderBody()
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("ResourcesCentre")
</td>
<td class="sidepadding">
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("Networks")
</td>
<td class="sidepadding">
</td>
</tr>
</table>
<table width="1015" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td style="width: 5px; height: 1px;">
</td>
<td>#Html.Partial("Footer")
</td>
<td style="width: 5px; height: 1px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
this is my style:
.body
{
background-image: url('/Content/images/Diamond_Background_Blue.png');
font-size: 0.75em;
font-family: "Gotham Book", "Gotham Bold", "Gotham Light", "Gotham Thin", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
.wrapper
{
margin: 0 auto 0 auto;
}
UPDATE:
After I check my css, there is a css code on navigation that make it run: position: relative.. I remove that code and now the layout okay already..
Thanks guys for your help.. :)
The trick to centering an element is to give it a width and left right margins of auto. E.g. margin: 0 auto. For more help, post an example of your code.
In your CSS just add this line on your page ,containers, wrappers etc.
{
margin:0 auto;
}
Here's a reference, How to Center a Website With CSS. If you want to test it to different screen resolution you could test it here. Hope this helps you. :)
Add margin: 0 auto to body and give it a width: 80% or something. And to make your page fluid, use width in % and not px
DEMO
Related
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
I am trying so solve a problem that causes me and my colleagues a splitting headache. Even though we've been provided a painkiller each we continue to be baffled by the way Google Chrome renders a checkbox in a container that has a font-size of 10pt.
The problem
Google Chrome seems to render some extra space around a checkbox element that I cannot seem to get rid of. The checkbox and its parent element must be 15 pixels tall. Setting the font-size of the parent element to 10pt causes that parent element to be 16 pixels in height.
An example
Take a look at the snippet below.
I have yet to find out (or understand) what causes the checkbox element to render as 15 pixels tall but effectively making its parent element 16 pixels tall.
td,
th
{
padding: 0;
font-size: 10pt;
}
input[type=checkbox]
{
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Exchanging the table for a div, a p or any other container also results in an incorrect height for that container.
Possible solution?
Setting the checkbox height to 14px makes the parent row 15 pixels tall. But then the checkbox itself does not meet the designer's requirements and thus this solution will not be accepted. Any workarounds?
input has default font property:
font: 13.3333px Arial
If you ensure that both the input and text in adjacent cells are the same font it should remove differences in line-height (I think).
Also, add display: block to input
td,
th {
padding: 0;
font-size: 10pt;
font-family: sans-serif;
}
input[type=checkbox] {
height: 15px;
border: none;
padding: 0;
margin: 0;
display: block;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Another solution:
First, add display: block; to the input.
You can change the parent behaviour with the box-sizing property.
td {
box-sizing: content-box;
}
should fix your problem.
td,
th {
padding: 0;
font-size: 10pt;
}
tr {
box-sizing: content-box;
}
input[type=checkbox]{
display: block;
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
I also had this problem in 2020, on Chrome and Firefox, and none of the solutions here worked. This is what worked for me
input[type=checkbox] {
height: 21px;
vertical-align: top;
position:relative;
top:-5px;
}
.checkboxcontainer{
max-height: 16px;
}
In my case we had a structure
<div>
<div data-x="lots of these" />
<div data-x="lots of these" />
<div data-x="lots of these" />
<div>
<div class="checkboxcontainer">
<input type="checkbox" ...>
And the outer div was being given a huge top margin. Deleting the checkbox in f12 confirms that the checkbox was the culprit, and the css provided seemed to work ok
Want to show table contents(text / hyperlink/ div contents) horizontal in safari browser but dont know how to fix it as in google chrome table contents are absolutely showing fine as horizontal
enter code here
<div class="itemFields">
<table>
<tbody><tr>
<td class="label" dir="ltr">Call Number</td>
<td><div>PS169.F7 H3 1961</div></td>
</tr><tr>
<td class="label" dir="ltr">Publisher</td>
<td><div><span dir="ltr">F. Ungar Pub. Co.</span></div></td>
</tr><tr>
<td class="label" dir="ltr">Year</td>
<td><div><span dir="ltr">1961</span></div></td>
</tr>
</tbody></table>
</div>
div.itemFields {
margin: 0;
margin-right: 15em;
}
.itemFields table tr td {
vertical-align: top;
}
.itemFields table tr td {
padding: 0;
}
.itemFields table tr td.label {
padding-right: 1em;
font-weight: bold;
white-space: nowrap;
}
.itemFields table tr td div {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
word-wrap: break-word;
}
.itemFields table tr td div a,
.itemFields table tr td div span {
display: inline;
}
this itemFields class content is showing contents of it vertical in safari browser
Try This Code ! You have to need reset code also better if you use bootstrap............. This code just simple HTML5 Table format & Style. You can change table width 960px & more..........
<div class="itemFields">
<table width="960px" align="center" border="1">
<tbody>
<tr>
<td class="label" dir="ltr">Call Number</td>
<td>
<div>PS169.F7 H3 1961</div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Publisher</td>
<td>
<div><span dir="ltr">F. Ungar Pub. Co.</span></div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Year</td>
<td>
<div><span dir="ltr">1961</span></div>
</td>
</tr>
</tbody>
</table>
</div>
I am a student and am trying to create a table with a image centered within a cell. I also want to add text underneath the image centered within the same cell. Here is my html and css so far. Attached an image.
table { margin: auto;
width: 70%;
height: 500px;
border-collapse: separate;
border-spacing: 20px;
}
.tableImage { background-image: url(chick.png);
background-repeat: no-repeat;
background-position: center
}
caption { font-size: 1.5em;
}
td, th { border: 2px solid #3399cc;
padding: 5px;
}
td { text-align: center;
}
tr:nth-of-type(even) { background-color: #b3cce6;
}
tr:nth-of-type(odd) { background-color: #b3e6cc;
}
<table>
<caption>The Polish Chicken</caption>
<tr>
<th>text</th>
<th>text</ht>
<th>text</th>
<th>text</th>
</tr>
<tr>
<td>text</td>
<td colspan="2", rowspan="4", td class="tableImage">Silver Laced Polish Chicken</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
Here is a jsfiddle example:
https://jsfiddle.net/pwa6kg62/1/
<td colspan="2" rowspan="4" valign="bottom" class="tableImage">
I have used valign property of a table cell to align the text vertically.
I am sure you have your reasons, but it is highly recommended that one does not use table cells for layout. If you have any questions, please leave a comment below.
Give the .tableImage class a padding-top that is larger than your image.
For example:
.tableImage{ padding-top:200px;}
Here is a fiddle example: https://jsfiddle.net/0xjygxmt/1/
Minor side notes, I see are that you have the "t" and "h" transposed in your second closing </th> tag and no closing <table> tag, but those wouldn't affect the cell in question.