Menu
Currently I'm learning about HTML/CSS, I want to create a blog in windows 8 style (metro style). But I have a problem in disabling the overflow-y. I'm using a table in <body> of html with a fixed size of each table data. But whenever I add a cell into a row in the table, if the row is overflow in x direction, that cell automatically jump down.
Is there anyway to avoid this?
this is a part of my code:
CSS:
/***Creating the dashboard in metro style***/
.dashboard {
position: fixed;
top: 10.5em;
left: 0;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
border: 5px solid white;
overflow-x: scroll;
overflow-y:hidden;
}
td {
border: 3px solid yellow;
float: left;
margin: 0;
color: black;
width: 300px;
font-size: 1.5em;
cursor: pointer;
position: relative;
background-color: white;
}
.tile-1{
background-color: #56d9c9;
color: white;
}
HTML:
<div class="dashboard">
<table style="border: 1px solid red">
<tr>
<td><p>I just got you babe 1</p></td>
<td><p>I just got you babe 2</p></td>
<td><p>I just got you babe 3</p></td>
<td><p>I just got you babe 4</p></td>
<td><p>I just got you babe 5</p></td>
<td><p>I just got you babe 6</p></td>
</tr>
<tr>
<td><p>I just got you babe 7</p></td>
<td><p>I just got you babe 8</p></td>
<td><p>I just got you babe 9</p></td>
<td><p>I just got you babe 10</p></td>
<td><p>I just got you babe 11</p></td>
<td><p>I just got you babe 12</p></td>
</tr>
<tr>
<td><p>I just got you babe 13</p></td>
<td><p>I just got you babe 14</p></td>
<td><p>I just got you babe 15</p></td>
<td><p>I just got you babe 16</p></td>
<td><p>I just got you babe 17</p></td>
<td><p>I just got you babe 18</p></td>
<td><p>I just got you babe 19</p></td>
<td><p>I just got you babe 20</p></td>
</tr>
</table>
</div>
466
What you are after is a table-like layout not really tables. Tables are used for tabular data, not for layouts.
Having said that, you can add more blocks without breaking horizontal scrolling easily without making much changes to your mental layout. Here is an example:
Demo: http://jsfiddle.net/abhitalks/HSE4e/2/
HTML:
Remains similar to your layout, the only difference being instead of tables and rows and cells, you have divs.
<div class="wrap"> <!-- wrapper to contain the layout -->
<div class="table"> <!-- this holds your blocks and scrolls -->
<div class="row"> <!-- this allows you multiple rows -->
<div class="content"></div> <!-- actual content -->
<div class="content"></div>
</div>
<div class="row">
<div class="content"></div> <!-- by having rows, -->
<div class="content"></div> <!-- you can have differing number of.. -->
<div class="content"></div> <!-- ..content blocks in each row -->
</div>
...
</div>
</div>
CSS:
* {
margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
}
.wrap {
width: 100%; height: 200px; /* restrict width to viewport */
overflow-y: hidden; /* hide vertical scrollbar */
overflow-x: scroll; /* show only horizontal scrollbar */
}
.table {
width: 1000px; /* arbitrarily high width to allow scroll */
height: 100%; /* restrict height to the container */
}
.row {
margin: 8px 8px; /* visually separate rows */
}
.content {
display: inline-block; /* make content blocks flow inline */
width: 100px; height: 50px; /* any height/width you want */
margin: 0px 8px; /* visually separate content blocks */
}
So, using the same mental model as you have, just think CSS and not tables.
With this arrangement you can have differing number of content blocks in each row. You can have as many rows as you can fit in the available height.
Using Javascript you can handle mouse-wheel as well, to scroll horizontally.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
