How can i make the inner table to overlap the parent div with 5 px while resizing?
my current solution:
<div id="crop">
<table style="width:105%; height:105%;">
//table cells
</table>
</div>
problem is that it gets smaller when resizing...
how can I make it constantly overlap with 5px;
The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.
You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.
Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.
<html>
<head>
<style type="text/css">
#outer {
position: relative;
border: solid 1px blue;
height: 100px;
}
#inner {
position: absolute;
border: solid 1px red;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
border: solid 1px green;
height: 108px;
width: expression(document.getElementById("outer").clientWidth + 10);
}
</style>
<![endif]-->
</head>
<body>
<table width="100%">
<colgroup>
<col />
<col width="100" />
<col width="200" />
</colgroup>
<tr>
<td>
<div id="outer">
<div id="inner">
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</div>
</div>
</td>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
In short:
Stick the table inside another div and set the table's width to 100%
Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
Use negative margins on the new div to pull it out by precisely 5px.
It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...
Have you tried the following:
table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.
Here's a full example:
<style type="text/css">
#container {
background-color: red; //color added for illustration
}
#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>
<!-- ... -->
<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>
Related
I am having some trouble formatting DIVs. I'm not much of a web guy so sorry if this question is a little silly.
Currently in my web page I have a Form with 3 divs inside. One div lays on-top, and the other two lay abreast:
However if the bottom two divs are both set to 50% width of the container they will stack vertically. If set to 50% and 49% they will stay abreast but there is a large ugly gap:
Here is a simplified version of the HTML, the styling is included.
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div2" BorderWidth="1" Style="display: inline-block;
width: 49%; float: left;">
<table id="Table2" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div3" BorderWidth="1" Style="display: inline-block;
width: 50%; float: Right;">
<table id="Table3" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
</form>
Thank you for your help.
I would use flexbox.
Use tables for tabular data and not layout.
You will need to account for the width the border adds to your element's width. The simplest fix is to apply box-sizing: border-box; to those elements. This will tell the browser to include the border when calculating the width.
i.e. If you tell an element to have a width and height of 200px and give it a 5px border, without box-sizing: border-box; your element will have a width and height of 210px ( 5px + 200px + 5px ). With box-sizing: border-box; the border is included in the width so the width and height remain 200px and the border is placed within, reducing the available space for content.
div {
min-height: 100px;
}
form {
display: flex;
flex-wrap: wrap;
}
div {
box-sizing: border-box;
}
div:nth-child( 1 ) {
width: 100%;
border: 1px solid red;
}
div:nth-child( 2 ) {
width: 50%;
border: 1px solid green;
}
div:nth-child( 3 ) {
width: 50%;
border: 1px solid yellow;
}
<form>
<div></div>
<div></div>
<div></div>
</form>
That's because the border-width. If you puts 50% + 50% + borders is more than 100%. I don't remember right now but exist a css property or something similar that's allows to the border to be included to the % of width. That will fix your problem.
I have a table and in one of the columns I have some graphics. What I need is a vertical line 20px from left on top of all what is in the td element.
I tried something like this but the result is not good.
<td>
<div>
<!-- my vertical line -->
<div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
</div>
<!-- other content under the vertical line in td -->
<!-- here width can be more than 20px -->
<div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
</div>
</td>
I have also tried with position: relative; for "main div" and absolute for other 2 but not a good result.
With this in place is perfect, I just need to add a vertical line on top of this 20 px from left
<td>
<div>
<div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
</div>
</td>
red line
--------|----------td-----
|
--------|-- some line (one div in may case)
|
--------|---------</td>---
--------|---------<td>----
|
--- | other line
|
------------------</td>---
Fiddle wrong result ("not good")
this is what is expected
There are numerous pitfalls with a table used for creating a chart.
First, the table's cellspacing and the cells vertical padding must be set to zero to make the red line all the way from top to bottom. Second, the height should probably be set to some value, so the inner div of the last cells in a row can be set to 100% height in order to make the red line go from top to bottom within a cell (it also needs to be position absolutely due to possible overlap). Third, to make the horizontal lines appear in the middle of the cells, all cells should have a fixed line-height and the horizontal lines should be displayed as inline-block with vertical-align: middle.
table tr td {
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
line-height: 20px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.vertical-line{
width:0px;
z-index:10011;
border-right: thin solid red;
position: absolute;
height: 100%;
left: 20px;
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
td, td > div {
height: 100%;
position: relative;
line-height: 30px;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td>11</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-5"></div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-30"></div>
</div>
</td>
</tr>
</table>
Note: I also added and altered some other minor stuff like border-radius to reflect your screenshot a bit. If you want to play around, here is the fiddle.
I just made minor changes to your stylesheets and its working.
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
margin-left: 5px;//addes this
}
.vertical-line{
height:30px;
width:20px;
z-index:10011;
border-right: thin solid red;
position: absolute;//and this
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
Let me know if you are satisfied with this answer. :)
Try this :-
<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>
or
<div style="width:5px; height:10px; z-index:1001; background-color:gray;margin-left: 20px"> </div>
Hope this'll help.
I am making a game for a school assignment (mastermind), but i'm having trouble getting the divs to do what I want. I have a board div, with multiple other divs inside it ( 5 each row). I am now planning on making a second div next to it to have it display scores. However I can't seem to get the "scoresheet" div next to the "board" div. I have just picked up programming so my code may be really primitive or ineffecient. this is what I have thus far:
<div id="board">
<div id="turn0">
<div id="space0.0" class="spacex"></div>
<div id="space0.1" class="spacex"></div>
<div id="space0.2" class="spacex"></div>
<div id="space0.3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
this is one row of the board, this code is copied with each row of the board.
the table is for displaying white or black pins based on the amount of colors you guessed correctly, the first four divs are previous displays for showing the colors you chose for the previous turn. the "board" div is used for displaying previous turns.
this is my CSS code on the "board" div:
#board{
width: 335px;
height: 600px;
margin: auto;
background-color: darkgrey;
left: 50%;
overflow: hidden;
}
this is the CSS for the first four squares inside the "board" div:
.spacex {
float: left;
width: 50px;
height: 50px;
margin: 6px;
vertical-align: center;
}
and lastly the CSS for the small table:
table, td {
border: 1px solid black;
height: 22px;
width: 50px;
margin; 4px;
}
I was thinking of having the "scoresheet" div stick to the right side of the page, up against the scrollbar.
I also don't know if using a table to display the amount of white and black pins is the best course of action, if you know a more efficiënt or smarter piece of coding then please let me know.
I am not at all familiar with more intricate pieces of coding, so if you could explain the steps, and function of each piece of code that would be much, much appreciated.
Thanks in advance for all the help.
I have now managed to get another div that will display highscores and other usefull information, which was the struglle I was having: to get a div that displays information to be placed to the right of the "board" div. It turned out be simpler than i thought, I just had to give the div a top and right value and posistion. While you all have been a great help, I still have two more issues remaining concerning the placement of my divs. Right now i have a button that is going to check if the guessed colors match the coputer generated color code, however I cant get the position of the button to change. I also have a problem with the the divs inside the "board" div not showing correctly. The whole concept behind the code is hard to explain, so I will copy the code I have thus far below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Master Mind </title>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<h1> Master Mind </h1>
</p>
<div id="turn-interactive">
<div id="choosecolor0" class="colorfield"></div>
<div id="choosecolor1" class="colorfield"></div>
<div id="choosecolor2" class="colorfield"></div>
<div id="choosecolor3" class="colorfield"></div>
<form> <input type="button" value="Check!"name="button" class="button"></form>
</div>
<div id="board">
<div id="turn0">
<div id="space0-0" class="spacex"></div>
<div id="space0-1" class="spacex"></div>
<div id="space0-2" class="spacex"></div>
<div id="space0-3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div id="board">
<div id="beurt0">
<div id="space0_0" class="spacex"></div>
<div id="space0_1" class="spacex"></div>
<div id="space0_2" class="spacex"></div>
<div id="space0_3" class="spacex"></div>
<div id="table0">
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
<aside><div id="infobar" class="infobar"></div></aside>
CSS:
body {
overflow: auto;
background-color: lightgrey;
height: 99%;
width: 99%;
}
div {
border: 2px solid black;
}
.infobar{
height: 600px;
width: 200px;
right: 50%;
overflow: hidden;
position: absolute;
top: 40%;
right: 0%;
background-color: white;
}
.button{
display: block;
height: 100px;
width: 300px;
background: #34696f;
border: 2px solid rgba(33, 68, 72, 0.59);
position: static;
top: 50%;
left: 75%;
}
}
.spacex {
float: left;
width: 50px;
height: 50px;
margin: 6px;
}
.colorfield {
float: left;
width: 120px;
height:120px;
background-color: white;
margin: 10px;
left: 50%;
}
#board{
width: 350px;
height: 600px;
margin: auto;
background-color: darkgrey;
left: 50%;
overflow: hidden;
}
#turn-interactive{
width: 1000px;
height: 150px;
background-color: red;
margin: auto;
margin-bottom: 10px;
top: 15%;
}
table, td {
border: 1px solid black;
height: 22px;
width: 50px;
margin; 4px;
}
the idea is to later (when I start coding the javascript) to have the values of the four colorfields displayed copied down below inside the "Board" div. The table inside the board div is for displaying the amount of white and black pins ( four colorfields, four squares inside the table). If you run the current code you can see that the four divs that are supposed to be displayed inside the "board" div before the table are not showing correctly, and are just creating a big black border inside the board." I have no clue of how I'm supposed to fix this. The four divs did show up correctly when i had just one row of "four colordivs-one table" ofcourse there is going to be a history of turns so I need muliple rows of four colordivs followed by a table displaying pins. Since it did work with only one row that had a table I'm guessing that the table is the troubleshooter. I translated the div ID's and class names from Dutch to English so it's clear what's what.
Again, thanks a bunch for the help.
PS. Since the website also is going to need a javascript code later on I thought that i should add the tag. Sorry about that, since my question indeed wasn't javascript related.
I think using a table to host your score is a god idea.
You could use position: absolute to position you table according to another element. This element is its Containing Block and you can indicate it is your board game by adding a position: relative to it.
If you do so, you can add left: 100% to your score sheet to make it stick on the right of your board.
#board {
position: relative;
width: 335px;
height: 600px;
margin: auto;
background-color: darkgrey;
}
#scoresheet {
position: absolute;
left: 100%;
width: 52px;
border-collapse: collapse;
}
#scoresheet td {
border: 1px solid black;
width: 22px;
height: 22px;
}
<div id="board">
<table id="scoresheet">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
I made a CodePen of your example: http://codepen.io/angeliquejw/pen/MyJGaz?editors=1100
As #GCyrillus pointed out, you're going to want to swap the points/periods in your IDs with hyphens/dashes or underscores. I've used dashes here, but do what you want.
It's not clear from your question if you want the score table to appear inside the board (which is how it's coded) or at the upper right corner, regardless of the board. I added the following CSS to your example:
#table0 {
position:absolute;
top:0;
right:0;
}
If you want the table to be inside the board, you just need to add position:relative to the #board. I've added that already, but commented it out. I also commented out the left:50% which isn't doing anything at all in the current code and just mucks things up if/when you change the position of #board.
The reason that you can't put the scoresheet table next to the gameboard div, is because the table tag is nested inside of the gameboard div. So the gameboard div wraps around the table. Here is how to solve this issue: "However I can't seem to get the "scoresheet" div next to the "board" div."
Change this:
<div id="board">
...
<table>
...
</table>
</div>
To this: jsfiddle
<div id="board">
...
</div>
<table id="scoresheet">
...
</table>
To make them appear side-by-side, apply a left float to both of them:
#board,
#scoresheet {
float: left;
}
You can use that same float:left trick to horizontally align the spacex div tags into a row of squares. This would solve this issue: "I have a board div, with multiple other divs inside it ( 5 each row)." To create multiple rows, wrap them in a row div, which doesn't have a float applied to it.
<div id="row1" class="rows">
<div id="space0.0" class="spacex"></div>
<div id="space0.1" class="spacex"></div>
<div id="space0.2" class="spacex"></div>
<div id="space0.3" class="spacex"></div>
<div id="space0.4" class="spacex"></div>
</div>
<div id="row2" class="rows">
<div id="space1.0" class="spacex"></div>
<div id="space1.1" class="spacex"></div>
<div id="space1.2" class="spacex"></div>
<div id="space1.3" class="spacex"></div>
<div id="space1.4" class="spacex"></div>
</div>
.spacex {
float: left;
}
Try giving .spacex a border, background-color & margins/padding to style them up! Good luck! :)
I have a webkit scrollbar attached to a div. I have disabled the default scrollbar by setting the overflow property to hidden, in the body element. I can see the scrollbar which is attached to the div, but cannot see its thumb, and hence also not able to scroll. The div to which scrollbar is attached has id="container". Here is the css -
html
{
}
body
{
overflow-y:hidden;
overflow-x:hidden;
}
#container
{
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
#Title
{
padding-bottom: 10px;
}
table
{
width: 100%;
table-layout: fixed;
}
#container::-webkit-scrollbar
{
background: transparent;
width: 12px;
}
#container::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
/* border-radius: 10px; */
}
#container::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:rgba(104,102,102,0.8);
}
The container hosts a div (with id="Title"), and a table. The table has lot of content, so scrolling should happen, but unfortunately it doesn't. If someone could please point out what am I doing wrong, that would be great. Thanks!
Edited : Adding the html -
<body>
<div id="container">
<div id="Title">
<span id="Heading_part_1">abc</span>
<span id="Heading_part_2">xyz</span>
<span id="Heading_part_3">pqr</span>
<span id="Timestamp"></span>
<span id="WrenchIconContainer" onclick="togglemenu();">
<input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/>
</span>
<div id="menu_container" style="display:none">
<p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p>
</div>
</div>
<table id="table1" cellspacing="0" width="auto">
<thead>
<tr>
<th id = "headline" width="85%"></th>
<th id = "storytime" width="15%"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
Because your #container has a height of 100%, the scrollbar "thumb" has no reason to appear because container is actually big enough to fit the entirety of its contents. If you give it a fixed, pixel height, your "thumb" will appear and function beautifully. Here's an example.
If you wrap your container with yet another wrapper and give it position: relative; you can leave your container with a 100% height, but add
position: absolute;
top: 0;
left: 0;
If what you're really trying to do is replace the main browser scroll bar for the page, just replace #container with body for your ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb selectors.
This question already has answers here:
CSS table right margin in scrollable div
(4 answers)
Closed 6 years ago.
I have a div enclosing a table.
Div has a padding of 20px.
If the table size is more than the div then scroll bar should be shown on the div.
Issue:
Padding is working fine when scroll bar is not present.
But when scroll bar is present then the scroll bar totally occupies the right side padding.
But some how the bottom padding is still applied event with scroll bar.
Question:
How to give 20px padding to div and make sure its content do the padding calculation from scroll bar if present else from border of div?
Note: No styles can be specified at table element. Since this table doesn't aware of the div wrapper.
Sample code and output image attached.
<html>
<head>
<style type="text/css">
.parentDiv {
border: 1px solid red;
height: 50px;
width: 200px;
overflow: auto;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<br/>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td>
</tr>
</table>
</div>
</body>
</html>
Output:
take the padding out of the parentDiv class, wrap the table in a new div - you'll still get scroll bars in the parentDiv, but your container div should compress the table to accomodate them.
try this:
<div class="parentDiv">
<div class="childDiv">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
overflow:auto;
}
.childDiv {
border: 1px solid blue;
padding: 20px;
width:100%;
height:100%;
}
</style>
You'll notice that as you increase the height of the table, the lower border drops off the bottom of the div - you can scroll down to see it.
You could move the scrolling in to the new div:
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
width:100%;
overflow-y:auto;
height:50px;
}
</style>