I have a simple div, here the code:
<html>
<head>
<title>Head</title>
<style>
div.ex {
height:700px;
width:150px;
padding:10px;
border:1px solid gray;
margin-bottom:10px;
float:left;
text_color:#ffffff;
}
</style>
</head>
<body>
<div class="ex">
</div>
</body>
Now, I have a table, and I want to use all the space just for that. How can I do it?
If i got you properly try this...
<html>
<head>
<title>Head</title>
<style>
div.ex {
height:700px;
width:150px;
<!--padding:10px;-->
border:1px solid gray;
margin-bottom:10px;
float:left;
text_color:#ffffff;
}
table{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="ex">
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>
</html>
Since, entire div space is to be used so remove padding from div..
Related
I am having issues with a large font size and weight fitting in a div tag.
I want it vertical-align bottom, so please help me.
div
{
border:1px solid black;
height:100px;
}
table
{
border:1px solid black;
height:100px;
width:100%;
}
p
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
vertical-align:bottom;
}
td
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
vertical-align:bottom;
}
<div>
<p>TEST</p>
</div>
<hr>
<table>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
I have included a demonstration of what I can do with a but I want a div tag to do the same thing.
http://jsfiddle.net/t9m6umvd/3/
Not sure what are you looking for exactly , but margin-top could be an option here to position your text
http://jsfiddle.net/t9m6umvd/2/
and this : jsfiddle.net/t9m6umvd/5
you can also try the top:0; with relative/absolute positioning.
like this:
div
{
border:1px solid black;
height:100px;
position:relative;
}
p
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
position:absolute;
top:0;
}
http://jsfiddle.net/t9m6umvd/4/
Introduction
I have this portion of HTML:
<!DOCTYPE HTML>
[...]
<table class="inv">
<tr>
<td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
<td class="dt" rowspan="5">
<div style="height:460px;position:relative">
<div class="st msg"></div>
<img src="content/images/site/inv.png"><br>
<a id="nm">USER INVENTORY</a><br>
<span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
<div style="text-align:right;padding-top:15px" class="bts"></div>
</div>
<div id="bot" style="display:none"><span class="bt i_b pp"><</span> <span class="bt i_b np">></span> <span style="font-weight:bold" id="pgs"></span></div>
</td>
</tr>
<tr>
<td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
</tr>
<tr>
<td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
</tr>
<tr>
<td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
</tr>
<tr>
<td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
</tr>
</table>
[...]
Linked to this CSS:
body{
font:16px Arial, Tahoma;
background-color:#222222;
margin:auto;
width:100%;
}
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.inv{
table-layout:fixed;
}
.inv td:not(.dt){
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
}
.inv td:not(.dt) > img{
max-width:100px;
max-height:100px;
cursor:pointer;
}
.inv td:not(.dt) > img:hover{
position:absolute;
z-index:100;
width:110px;
height:auto;
margin-top:-55px;
margin-left:-55px;
box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
width:35%;
padding:10px;
}
.inv .dt img{
width:100%;
height:auto;
}
.inv .dt #desc{
font-size:12px;
color:#B8B6B4;
max-height:60px;
overflow:hidden;
display:inline-block;
}
.bt.i_b{
color:#FFFFFF;
}
.bt.i_b:hover{
background-color:#1B1B1B;
}
.det #nm{
font-size:20px;
font-weight:bold;
}
All the TDs inside the table are filled with images with this code:
for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
$("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}
The problem
Everything works fine, I get what I need (the table filled), but I get some sort of padding/margin at the bottom of every td with an image in it. Even if I have set width and height of the cells to 100px, in Firebug I can see a height of 103.5px, why this happens? I've read that it can be DOCTYPE causing it, but I can't remove it, id there an alternative solution?
Thanks.
"but I get some sort of padding/margin at the bottom of every td with an image in it."
Because img is an inline element, and thats why you see white space at the bottom, use this
table img {
display: block;
}
Now this will target all the images inside table element, so if you want the specific ones, use a class instead and assign like
table img.your_class {
display: block;
}
Demo
In the first image, I've used style="display: block;" and written inline, and not for the other two, so, you will see white space for the next two images but not the first one
I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>
I want to set margin-top and bottom to my print page for writing header and footer.
I did it in Firefox. But it doesn't work in chrome and internet explorer.
When I used #page code it works in chrome. But I cant write header on the top and footer on the bottom. How can I solve this problem?
Here is my code
pagination.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
pagination.css
#media screen{
.header{
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
}
.footer{
width:768px;
height:100px;
border:2px solid #000;
}
}
#media print{
.header{
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
}
.footer{
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
}
#page{
margin-bottom:150px;
}
}
IE screenshot:
Firefox screenshot:
Chrome screenshot:
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>