I'd like to create a webpage which looks like this:
http://i.imgur.com/HVKRB.png
I can't use frames(I'll be using AJAX on the site so more reason to have everything in one page because content on one page influences others. What's the cleanest way to do something like this?
A website which does something similar would be Google Reader. I'm a total noob with HTML and I'm not sure how they accomplished that.
EDIT: the sections should take up the entire browser window (so there is no scrolling down on the page, just individual sections. Google Reader is a good example of this. Thanks :)
Here is a very simple example: http://jsfiddle.net/C7eA8/. Note you will get problems using prozentual width and border on the same element. To get pixel perfect solution use width in px or draw the border to elements in the section divs.
Here's one way to do it:
<?DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.left {
float:left;
width:20%;
height:500px; /* probably want to let content set height, though */
background:#ccc;
}
.right {
width:80%;
float:right;
}
.right .top {
height:200px; /* probably want to just let content set height, though... */
background:#00f;
}
.right .bottom {
height:300px;
}
.right .bottom .bottom-left {
float:left;
width:20%;
height:100%;
background:#ddd;
}
.right .bottom .bottom-right {
float:right;
width:80%;
height:100%;
background:#666;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
</div>
</body>
</html>
Just make a layout like the page you want and set
overflow-y:scroll; in the required div. That will work fine.
This can be accomplished by using HTML's framset tag. The syntax looks like this:
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
Read more about framesets here: http://www.w3schools.com/tags/tag_frameset.asp
EDIT: Oops, forgot you can't use frames. You should use tables to accomplish this, but I wouldn't recommend it. You'd use rowspan="2" to make that first cell span the entire height of the page, and a colspan="2" on that top right cell.
Everybody always disrespects my old-school tables. However, it is crossbrowser and it doesn't mess up the layout when windows width gets manipulated. Live demo: http://jsfiddle.net/hobobne/CPvTw/
<html>
<head>
<title>4 section demo</title>
<style>
html, body {height: 100%;}
#global_table {border-collapse:collapse; width: 100%; height: 100%;}
#section_0,
#section_1,
#section_2,
#section_3,
#section_4 {border: 1px solid #000000; font-weight: bold; text-align: center;}
#section_0 {padding: 20px 0px; height: 1%;}
#section_1 {}
#section_2 {}
#section_3 {}
#section_4 {}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="global_table">
<tr>
<td colspan="3" id="section_0">section 0</td>
</tr>
<tr>
<td rowspan="2" id="section_1">section 1</td>
<td colspan="2" id="section_2">section 2<div id="dragbar"></div></td>
</tr>
<tr>
<td id="section_4">section 4</td>
<td id="section_3">section 3</td>
</tr>
</table>
</body>
</html>
Related
I have a div inside a td and I can't seem to remove a 1 px border around it.
If I try adding td {padding:0}, the border disappears, but the div jumps to the left, and the variable td's automatically change to 0px width.
How can I remove the border around the div without messing up the whole table?
HTML:
<table>
<tr>
<td class="header-left"></td>
<td class="header">
<div class="header-image"></div>
</td>
<td class="header-right"></td>
</tr>
</table>
CSS:
table {
width:100%;
border-spacing: 0;
}
.header-left {
height:100px;
background-image:url(img/header-left.png);
background-repeat:repeat-x;
}
.header-right {
height:100px;
background-image:url(img/header.png);
background-repeat:repeat-x;
}
.header {
height:100px;
width:960px;
background-image:url(img/header.png);
background-repeat:repeat-x;
margin:0 auto;
}
.header-image {
height:100px;
width:548px;
background-repeat:no-repeat;
background-image:url(img/header-image.png);
}
<table cellspacing="0" cellpadding="0" border="0"></table>
This way there won't be any spacing around td's you create within a table.
ADD THE FOLLOWING CODE IN THE DIV TAG
<DIV class ="header-image" style="border:0px">
or if you have problem with table border then SET table border=0
you need to just set properties of table as like below
<table cellpadding="0" cellspacing="0" border="0">
In css changes try below
table { border:none;}
if still didnt get solutions give me example that have border around div because here i cant see any border around div
Try:
Border:none in class header
or
creat class global
table { border-collapse: collapse; border-spacing: 0; border: 0; }
I have made a simple html page with an image on it to display as a header. The problem is that the image is not repeating.
When I set the width to 100% the td (side) disappears.
If I remove width from basestrip, then it only covers half of the screen area. I want to cover all of the screen with the image with the specified height.
<table cellpadding="0" cellspacing="0">
<tr>
<td id="side" width="10px" height="25px"></td>
<td></td>
<td id="basestrip" width="100%" height="25px">
</td>
</tr>
</table>
This is the css:
#side {
background-color: #014160;
}
#basestrip {
background-image: url('../Images/topstripbg.png');
background-repeat: repeat-x;
}
Try adding a width="100%" (or better a style="width: 100%" or even better with applying a CSS style of width: 100%) to your table. With your code, the cell takes 100% of the table. But the table takes by default the size of the content of all the cells.
First off, the element has no height property, that can be applied to the . Also you can not append the 'px' to a height or width attribute for an html tag, this only applies to CSS. I assume this table should be the width of the browser window, and 25 pixels high, 1 row with 3 cells, the first being 10px wide, the second you have not specified and the last you have 100%. Here is my cross browser approach:
<html>
<head>
<style type="text/css">
#thetable { width:100%; height:25px; }
#thetable>tr { height: 25px }
#thetable>tr>td#side { width: 10px }
#thetable>tr>td#basestrip { background: url('../Images/topstripbg.png') repeat-x; }
</style>
</head>
<body>
<table id="thetable" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="side" width="10"></td>
<td width="auto"></td>
<td id="basestrip" width="100%"></td>
</tr>
</table>
</body>
</html>
take that property like this
#basestrip { background: url('../Images/topstripbg.png') repeat-x; }
My wish is simple - to make a clickable cell (i.e. cell with a link) with a minimum height requirement (40 px in this case) ant vertically centered text. Here's what I come up with so far:
<html>
<head>
<style>
table.test td {
border:1px solid black;
width: 200px;
height: 100%;}
table.test td.cell a {
background-color: #FFF5EE;
display:inline-block;
height:100%; width:100%;
min-height: 40px;}
table.test td.cell a:hover, td.cell a:active {
background-color: #D2691E;}
</style>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
</html>
Everything's ok, but I can't get the text aligned (centered) vertically :/ The vertical-align property doesn't work in this case.
Here's the example in action (link).
Remove the line
height: 100%;
from
table.test td.cell a { ... }
and add
vertical-align: middle;
to
table.test td { ... }
use vertical-align:
http://jsfiddle.net/pN4pQ/1/
Try This ::
.cell {
line-height: 4em;
}
and for horizontal alignment
.cell {
line-height: 4em;
text-align: center;
}
http://jsfiddle.net/HA6Wq/1/
Ok i made a lot of modification and included jquery but i think it's what you want
So here we go :
<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>
table.test td
{border:1px solid black;
width: 200px;
height: 40px;}
.cell
{background-color: #FFF5EE;
cursor:pointer;}
.hover
{background-color: #D2691E;}
</style>
<script>
$(document).ready(function() {
//Replace your link and redirect when you click on the cell
$(".cell").click(function() { window.location = 'http:\www.google.lt'});
//Since you can't put a hover class on a td, you have to do it in jquery
$(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});
});
</script>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
And I've put the min-height as a height in the td style
I know it's a lot of change but it's working :)
And here is the fiddle : http://jsfiddle.net/d9CGX/
EDIT :
I've updated the fiddle : http://jsfiddle.net/d9CGX/2/ So you can have multiple link
Try the following css to center and vertically align the text:
table.test td {
text-align:center;
vertical-align:middle
}
just if it helps I did this and switched the link to a javascript onclick:
.tdmenu
{
vertical-align : middle;
padding-left : 10px;
padding-right : 10px;
}
.tdmenu:hover
{
background-color : rgb(220,220,220); /*set color to whatever you like*/
cursor : pointer;
}
And my HTML
<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
<td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
<td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>
Seems to play nice.
I was involved with a similar situation and it took many hours to figure out. This method will allow you to vertically align and center. Replace your
code with this.
<div style="display:table;width:100%;height:100%;">
<a href="http://www.linkhere.com" style="display:table-row;">
<div style="display:table-cell;vertical-align:middle;align-text:center;">
Link contents go here
</div>
</a>
</div>
Put the contents of the link inside the div table-cell of course. This will stretch the link also to the edges of the container your using for this code. Hope that helps.
I have a simple two column table; I want a way to align the data in the first column to the right and to be able to style the two elements separately. Perhaps a table is not the best solution here, but I don't know what else to try. I tried with column groups, but it isn't working. Even when I try applying text-align: right to the 'label' element.
<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>
Since you're probably talking about heading cells, I'd go for a different approach:
<style type="text/css">
table th { text-align: right; }
table td { text-align: left; }
</style>
<table>
<tr>
<th>Right aligned</th>
<td>Left aligned</td>
</tr>
</table>
Give id or class to your HTML tags. eg ..
Then use css to style them as you want.
tr#cell1{
text-align:right;
}
Use this for every row yoou want to align seperately
Label doesn't right align because it is an inline-element. If you give it display:block or display:inline-block it will fill the whole table cell and apply your right align:
label {
display: block;
text-align: right;
}
Try to give the table cell a class
<td class="sub">…</td>
and then style them with CSS:
table td {
// style for all except .sub
}
table td.sub {
text-align: right;
// and other styles that differ from rest
}
This should do!
<html>
<head>
<style>
.one { width:100px; border:1px solid red; }
.one label { display:block; width:100%; text-align:right; }
.two { width:150px; border:1px solid green; }
</style>
</head>
<body>
<table>
<tr>
<td class="one"><label>one</label></td>
<td class="two">two</td>
</tr>
</table>
</body>
</html>
If you don't want to turn the td element into th you can do this:
<style type="text/css">
table td:first-child { text-align: right; }
</style>
<table>
<tr>
<td>Right aligned</td>
<td>Left aligned</td>
</tr>
</table>
It works well with Firefox, Chrome and IE 8 (probably IE 7 too).
I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)