I'm new to web development. I'm building a simple site using HTML and CSS. I have a page with 2 price lists made from tables. I have them both in one div and I want them on top of each other. There is a picture to the right of them. In firefox all is ok when I use absolute position, but in IE7 the picture pops up in between the two tables. I've tried floating right and left, positioning absolute and relative. Is it something to do with Quirks? I also changed the doctype to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
This a bit of my code.
HTML:
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
<tr>
<table>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
And CSS: (My last attempt using float)
#pricepicture {
float: right;
margin-right: 40px;
margin-top: 100px;
border: 1px solid #2c2e32;
height: 365px;
width: 310px;
}
#table {
float: left;
margin-left: 40px;
margin-top: 50px;
border-collapse: collapse;
}
#price {
float: left;
margin-left: -5px;
margin-top: 40px;
}
td {
text-align: left;
padding: 0.2em;
font-size: 1.3em;
}
th {
text-align: left;
padding: 0.2em;
font-size: 1.1em;
}
tr {
height: 20px;
}
I've been searching the Stack overflow Questions for days. Please help before I throw my laptop out of the window!
Thanks....
There are some HTML syntax errors. You must ensure that all tags are properly closed, and in the correct order. See the following.
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
</table>
<table>
<tr>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</table>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
Related
Trying to make a two column page so I can have two columns of information. I cannot get it to work though. I have a large table that takes up half the page and is pushed to the left, but I cannot get the other part to go on the right! It just goes underneath. Please if you know how tell me. I have to do this for a school project! Here is my code:
.body {
font-family: "Bookman Old Style";
background:url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;-->
.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {
}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>My Typical Day</title>
</head>
<body class="body">
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td><!--TAKEN OUT--></td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td><!--TAKEN OUT--></td>
</tr>
<table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<h5><em>Email Me!</em></h5>
</div>
</center>
</body>
</html>
Can anyone tell me what to do to fix it and attach a working version? I'm also doing this in Notepad++, not sure if that makes a difference.
You just need to make sure that your element tags are closed in the correct places, CENTER, DIV and TABLE tags all needed to be closed correctly.
Also, the CENTER tag is now deprecated and it is recommended that you use CSS to center your elements, like text-align: center
body {
font-family: "Bookman Old Style";
background: url('https://i.gifer.com/7sav.gif');
color: white;
}
<!--backup background-color: #D10F0F;
-->.table {
background-color: #B6B6B6;
font-size: 17px;
border-color: white;
}
.header {}
.rowone {
float: left;
width: 50%;
}
.rowtwo:after {
content: "";
display: table;
clear: both;
float: right;
}
<div class="header">
<center>
<!--Header-->
<h1><u>My Typical Day</u></h1>
<h4><u>By: Taylor Sloan</u></h4>
</center>
</div>
<!--End Of Header-->
<center>
<!--Table Start (ROW 1)-->
<div class="rowone">
<table border="2" bordercolor="white" class="table">
<tr>
<td><strong>Hour</strong></td>
<td><strong>Class</strong></td>
<td><strong>Teacher</strong></td>
<td><strong>Image</strong></td>
</tr>
<tr>
<td>1</td>
<td>Spanish 2.5</td>
<td>Córdoba</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>2</td>
<td>Wood Technologies I</td>
<td>Cortez</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>3</td>
<td>Honors Geometry</td>
<td>Alexander</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>4</td>
<td>Honors Biology</td>
<td>Martens</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>5</td>
<td>Honors English Language Arts</td>
<td>McCrossen</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>6</td>
<td>Physical Education</td>
<td>Lowe</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
<tr>
<td>7</td>
<td>Web Design</td>
<td>Foster</td>
<td>
<!--TAKEN OUT-->
</td>
</tr>
</table>
</div>
<!--Table End-->
<!--ROW2 STARTS-->
<div class="rowtwo">
<h3>My Top Three Favorite Books and Why</h3>
<ol>
<li>The Dragon Inside Series</li>
</ol>
</div>
<div>
<h5><em>Email Me!</em></h5>
</div>
</center>
Div elements will display as "block" elements by default, which only allows one per line. The next block level element will appear below it.
Add this CSS rule to .rowone and .rowtwo: display: inline; or display: inline-block;
Edit: MichaelvE's answer is correct. Floating block level divs will allow two blocks to appear on the same line, much like an inline element. I missed the open tags when skimming over the code.
I'm struggling with TABLE HTML.
I have no idea why this table tag doesn't work properly in browser
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
<td rowspan="3">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">1-3</td>
</tr>
</tbody>
</table>
The html above would be rendered like this
However the view I expected to see is like this
As I figured out, If I want to see what I want in browser, I should fix rowspans like this
<table border="1">
<tbody>
<tr>
<td rowspan="1">1-1</td>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-2</td>
</tr>
<tr>
<td rowspan="1">1-3</td>
</tr>
</tbody>
</table>
But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.
According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
</tr>
</tbody>
</table>
Have you tried flexbox yet? It is little bit different approach to solve this.
#main {
width: 100px;
height: 150px;
border: 1px solid #c3c3c3;
align-items: stretch;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 50px;
height: 50px;
line-height: 45px;
text-align: center;
}
#right {
width: 50px;
height: 150px;
}
#right div {
width: 50px;
height: 75px;
line-height: 70px;
text-align: center;
}
<div id="main">
<div style="background-color:lightgrey;" >1-1</div>
<div style="background-color:grey;">1-2</div>
<div style="background-color:lightgrey;">1-3</div>
<div id="right">
<div id="right" style="background-color:lightblue;">2-1</div>
<div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>
I am struggling to put the cells containing { Lazy, Dog, Then, It } under the same header (with a colspan of 1)
I've tried creating div tags within my cell, creating 2 cells, and all the possible widths and colspan combinations I can think of.
Using div tags and CSS I can get Lazy and Dog under the header, but they are not individual cells.
<html>
<head>
<style>
table,td,tr,th{
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Quick</th>
<th>brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=2> prey to a lion </td>
</tr>
</table>
</body>
</html>
Thank you for any advice.
add colspan="2" to <th>brown fox</th>
you don't have to put div inside <td> to separate data
then edit your <td colspan=2> prey to a lion </td>
to <td colspan="3"> prey to a lion </td>
here is the working fiddle, hope it helped you
https://jsfiddle.net/LLa90017/1/
Easy as pie as follows:
table, td, tr, th {
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
<table>
<tr>
<th>Quick</th>
<th colspan="2">brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td>lazy</td>
<td>dog</td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=3> prey to a lion </td>
</tr>
</table>
I have two tables and one image and I want them to be in one line while using the float attribute.
How can I prevent the image and the right table to jump below the other elements when making the browser window smaller?
before
after
<body>
<div>
<table class="datagrid">
<tr>
<th colspan="2">Test table one</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<table class="datagrid">
<tr>
<th colspan="2">Test table two</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<img style="float: left; height: 200px;" src="data:image/png;base64,..."/>
</div>
</body>
table.datagrid tr th
{
text-align: left;
padding: 5px 5px;
background: #ebebeb;
}
table.datagrid
{
float: left;
width: 30%;
margin-right: 15px;
}
You can create a responsive layout and set the width of each block to, say, 33%, leaving some room (1%) for the margines.
First of all, I would wrap the image in a div wrapper
<div class="imagery"><img src=""/></div>
Style the image wrapper
.imagery {
float: left;
width: 33%;}
And make sure the image scales appropriately:
.imagery img {
max-width: 100%;
height: auto;
display: block;
}
Then I would set the tables width to 33% and 1% for the margines
.datagrid {
float: left;
width: 33%;
margin-right: 0.5%;}
http://jsfiddle.net/ny86yjm4/
First of all, name your <div> after your <body>. Then, set a min-width rule to that div.
Then, you just set the 2 tables and the image to float to the left.
Let's call your div 'content' for brevity. You also have to give an id to your img element, we'll call this x-img.
HTML:
<body>
<div id="content">
...
<img id="x-img" ... >
</div>
</body>
CSS:
div#content{
min-width: 50em; /* Or whichever, this value is going to be trial and error, you can also use px */
}
table.datagrid, img#x-img{
display: inline;
float: left;
clear: none;
}
Otherwise, you can mess with other values; CSS is a lot of trial and error.
how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts
it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>