I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :)
In an attempt to make a simple, static progress bar, I use the HTML file below:
<html>
<head></head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td>
<!-- This is meant to be a progress bar -->
<div style="background-color: #0a0; width: 20%;">
<div style="text-align: center; width: 300px;">
Text Here!
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
and I get this:
which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change width: 300px to width: 100%, the text instead goes into the green box, rather than the whole table cell.
How can I "fill" the table cell with the text, without imposing a specific length restriction?
By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.
EDIT: added code
*EDIT: updated code*
<html>
<head>
<style>
#bar{
width: 100%;
position: relative;
}
#progress{
background-color: #0a0;
width: 20%;
position: absolute;
z-index: 0;
}
#progress_text{
text-align: center;
width: 100%;
position: relative;
z-index:1;
}
.progress_cell{
}
</style>
</head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td class="progress_cell">
<div id="bar">
<!-- This is meant to be a progress bar -->
<div id="progress">
</div>
<div id="progress_text">
Text Here! Text Here! But it's really long, and it's going to overflow ...
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
here's your intro to html / css. thank me when you get my bill ;). first ... tables are for tabular data. not layout second ...
#wrapper {
position:absolute;
top:10px;
left:50%;
width:900px;
height:500px;
margin:0px auto 0px -450px;
padding:0px;
background-color:#369;
}
#box_1 {
width:100%;
height:100px;
margin:0px auto;
padding:0px;
background-color:red;
}
and here's the html ...
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="box_1">
<p>stuff</p>
</div>
</div>
</body>
</html>
hope this helps get you started
If you set width to %,it will take the width of their parent element.In your case.the div takes the width of the parent element i.e td
Here's a solution (I think?)
http://jsfiddle.net/tT2HR/
Related
There are one header and one footer in a FreeMarker template page.
I want to insert a div between the header and the footer.
And the div must extend to the footer.
The code is as follows:
<?xml version="1.0"?>
<!DOCTYPE pdf PUBLIC "-//big.faceless.org//report" "report-1.1.dtd">
<pdf>
<head>
<macrolist>
<macro id="nlheader">
<table style="width: 100%; font-size: 10pt; position:fixed">
</macro>
<macro id="nlfooter">
<table class="footer" style="width: 100% ;position:fixed">
</macro>
</macrolist>
</head>
<body header="nlheader" header-height="10%" footer="nlfooter" footer-height="65pt" padding="0.5in 0.5in 0.5in 0.5in" size="Letter">
<table>
<tr>
<td>Here is a table</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="extend_div"></div>
</td>
</tr>
</body>
</pdf>
The height of HTML tag seems invalid in FreeMarker templates.
And I want to use JavaScript to detect the height of tables, but it seems also invalid.
How to configure the div to make it extend to the footer?
Check the fiddle at https://jsfiddle.net/u7reck5L/9/. You could see the purple background covering the whole space, Use flex property.
<div class="starter">
<header>
This is Hweader
</header>
<div class="main-wrapper">
<h1>
This is content
</h1>
</div>
<footer>
This is footer
</footer>
</div>
html, body {
height: 100%;
}
header, footer {
height:30px;
}
.starter {
display: flex;
height: calc(100% - 30px);
flex-direction: column;
}
.main-wrapper {
background-color: #8723FF;
position: relative;
flex: 1 0 auto;
}
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'm trying to make a simple web interface with a table with two columns:
Left: width 400px
Right: the rest of avalaible width
I think that is very simple, but i can't do it. The more closer that I were from the success was with this code
HTML:
<table id="container">
<tr>
<td style="width: 20%">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td style="width: 80%">
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS:
#map_canvas {
position: absolute;
min-height: 99%;
height: auto !important;
height: 99%;
_height: 99%;
width: 80%;
}
but always appears the horizontal scroll bar and the map overflows the width of the window
Thanks, and sorry about my bad english...
The scroll is probably for the default margin of the body and also the border of your table. You can try this
HTML
<table id="container">
<tr>
<td style="width:400px">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td>
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS
* {
padding:0;
margin:0;
}
table {
width:100%;
border-collapse:collpse;
border:0 none;
}
Review this Demo http://jsfiddle.net/pTZKa/
Edit
As an asnwer for your commentary : That happens because you have positon:absolute so he is searching for his closest parent with a non absolute position declared to be positioned. To fix that add this on the css:
table td {
position:relative;
}
New Demo http://jsfiddle.net/pTZKa/4/
Sorry to have to ask this since there are many CSS 100% height questions here (which I've read).
I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are fixed height, the 4th row should expand and the fifth row should be a fixed size (at the bottom).
This is strait forward with a table, how can I do this with DIVs?
Here's the TABLE version:
<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr height="20px">
<td>
fixed height 20
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
<tr height="100px">
<td>
fixed height 100
</td>
</tr>
<tr>
<td>
auto expanding height
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
</table>
</body>
</html>
Here's my best attempt so far which doesn't work.
<html>
<head>
</head>
<body>
<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;">
<div style="height: 20px; border-width: 2px; border-style: solid">
fixed height 20
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
<div style="height: 100px; border-width: 2px; border-style: solid">
fixed height 100
</div>
<div style="border-width: 2px; border-style: solid;">
Auto expanding?
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
</div>
</body>
</html>
Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:
HTML
<div class="container">
<div class="twenty">
fixed height 20
</div>
<div class="fifty">
fixed height 50
</div>
<div class="hundred">
fixed height 100
</div>
<div class="auto">
<div class="content">
....
</div>
</div>
<div class="fifty" style="border-bottom:none; border-top:1px solid">
fixed height 50
</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.container {
width:100%;
height:100%;
}
.twenty, .fifty, .hundred, .auto {
border-bottom:1px solid black;
}
.twenty {
height:20px;
}
.fifty {
height:50px;
}
.hundred {
height:100px;
}
.auto {
height:100%;
overflow:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:-120px 0;
padding:120px 0;
}
.content {
float:left;
overflow:auto;
height:100%;
}
.content{
width:100%;
}
EDIT Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.
Full view: http://jsfiddle.net/8abeU/show/
Fiddle: http://jsfiddle.net/8abeU
You need to set the parent's position attribute to absolute and set the auto div's height to 100%. You can see it here. Also remember to include a doctype declaration at the top of your HTML, that'll help make it render more consistently across browsers.
Note:
This won't cause the container to fill the entire window vertically but if you don't have to put a border on it, it will look as if it does.
The quick answer is replace your table and tr elements with DIVs. Then set the first three rows with a css class="fixed-height-(whatever size)" Let the forth div expand as needed and the last row have a css class="fixed-height-(whatever size). You can use the same class where the heights are the same, assuming all the other styling is the same.
I have a div inside a table that is overflowing the screen size. It looks like this:
<table id="hlavni" style=" position:absolute; border:none; position:relative; background-color:#FFC; border:#999 1px solid;" cellpadding="5">
<tr>
<td id="yamana" class="trida" valign="top" style="line-height:1.5em;">
<div style="background-color:#FFC;" id=load_tweets>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
</td>
</tr>
</table>
How can I prevent it from overflowing?
<html>
<head>
<style type="text/css">
#limit {
max-width: 500px;
}
</style>
</head>
<body>
<div id="limit">Your content goes here</div>
</body>
</html>
max-width and width -both- do not prevent the overflow if the text does not contain any spaces as in the example in the question.
div {
max-width : 300px;
word-wrap: break-word;
}
see this fiddle for a solution.
For this case, the div must have the style "word-wrap: break-word"
in order to work.
Or "overflow-wrap: break-word"
With max-width . Example : http://jsfiddle.net/YCV8H/