In the following example the gray "td" bar will fill the entire window width, but I can't get the encapsulated link to. I want the entire bar to be an active link, not just the text:
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Unfortunately, I don't have the ability to change the order of the HTML elements. This must be solved only by CSS/Javascript.
Simply add display: flex; to a in the CSS:
<html>
<head>
<style type="text/css">
<!--
table, tr, td {width: 100%;background: gray;}
a {width:100%;
text-align:left;
color:white;
background-color:black;
font-size: 24px;
display: flex;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Adding display:block could do it.
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px;
display:block
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Related
I'm trying to apply a CSS Tooltip to a table entire row not just to a cell but I can't figure out how.
Right now I'm only be able to apply a tooltip over a cell (as you can see on the snippet). Is it possible to apply a CSS Tooltip to a <tr> element? How?
This new gif shows exactly what I'm trying to achieve
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="http://arsil.games/images/logo-02.png"></span></div></td>
<td>Director #1</td>
<td>152</td>
<td>Email #1</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance
If I understand what you're trying to achieve, all you need to do is insert your tooltip div into each of the table's cells in that row, like so:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
display: none;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
/*visibility: visible;*/
display: block;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Director #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">152<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Email #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
</tr>
</table>
</div>
</body>
</html>
However, I don't think you really understand what's going on here. This is not a "CSS tooltip" (no such thing exists). All it is is a simple HTML element styled with CSS such that it displays itself whenever you hover over its parent element. So, wherever you want there to be a tooltip, you'll need to add that class="tooltip" div (and its child span element).
It's also worth noting that the formatting of this div seems somewhat sloppy to me. In your CSS you've styled the tooltip with visibility: hidden rather than display: none. The difference between these two is that elements with visibility: hidden still take up space (have width and height) whereas elements with display: none don't "take up space". I believe that for a tooltip the desired option would be display: none, since tooltips are generally just supposed to be overlayed over the webpage's elements. (The code snippet I've provided has changed visibility: hidden to display: none.)
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
/* display: inline-block; */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip-relative {
position: relative;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr class="tooltip">
<td><div class="tooltip-relative">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td>Director #1</td>
<td>152</td>
<td>Email #1</td>
</tr>
</table>
</div>
</body>
</html>
I need to send mail with the image embedded as mail body. Below is the code
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="background: url(http://localhost/image/mvp-bg.jpg) no-repeat top left; width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;">
<div style="width: 700px; margin: 0 auto; padding-top: 80px;">
<p>Mail Body</p>
</div>
</div>
</body>
</html>
Could some one let me know how to fix this.
Thanks
For email templates better refer the images from server instead of localhost, You cannot expect the user will have the images loaded in their localhost :)
Change it to url(http://domain.com/image/mvp-bg.jpg)
Got the solution from html email with background-image style not shown . Also below is the code i modified so that css are rendered properly in mail. When using tags the css were not rendering, so instaed used table tags.
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:*
{
behavior: url(#default#VML);
display: inline-block;
}
</style>
</head>
<body>
<table style="background-image: url('image/mvp-bg.jpg'); background-repeat: no-repeat;width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;" >
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="http://www.domain.com/image/mvp-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody>
<tr>
<td>
<div style="width: 700px; margin: 0 auto; padding-top: 85px; font-family: Arial; font-size: 16px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2" valign="top" style="padding: 10px; color: #ffffff;">
Mail Body
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}
I have this dropdown in a table. The dropdown list is a long ( 90 characters)
for 1 item. Others are are lot shorter.
This is a generated page so there will be more records than the one listed.
I was able to delete the white space at the bottom of the page,
however I lost the horizontal scroll on the browser.
I want to scroll in the browser to see the right side of the table.
How do I delete the white space below the table and keep the horizontal scroll
on the browser?
How do I get a horizontal scroll on the browser, not the table?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html Lang="en">
<head>
<title>test_Scroll</title>
<style type="text/css">
#wrappergo { background:#ffffff;}
.main_clearr{
clear:both;
}
table.myview{
width:96%;
margin: 0px auto;
border-collapse: collapse;
border-width:1px 1px 1px 1px;
overflow:visible;
overflow:auto;
border-color: #000;
border-style: solid;
}
table.myview td{
margin:3px 2px 2px 4px;
}
td.tblnormal_1_4em
{
FONT-WEIGHT: normal;
FONT-SIZE: 1.4em;
COLOR: #000000;
font-family:'Rockwell',arial, verdana, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
tr>th, tr>td {
text-align: center;
vertical-align:top;
font-family: Rockwell, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
FONT-SIZE: 1.0em;
}
th+th, td+td {
text-align: left;
padding-left: 150px;
}
th+th+th, td+td+td {
padding-left: 0px;
text-align: right;
}
.cssdropdown{
height:auto;
FONT-SIZE: 1em;
COLOR: #000000;
font-family:'Rockwell',arial, verdana, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
.contentmain {
padding:10px 20px 0px 20px;
}
#outerdiv {float:left; width:99%; background:#ffffff;
padding-bottom:32767px; margin-bottom:-32767px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outerdiv {float:left; width:75.8%; background:#ffffff;}
/* for IE6 */
* html #wrappersn {display:inline-block;}
</style>
<![endif]-->
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#800000" vlink="#800000" alink="#800000" >
<div class="main_clearr"></div>
<div id="wrappergo">
<div id="outerdiv">
<div class="contentmain">
<form method="Post" name="form3" >
<table class="myview" border="1" >
<thead>
<tr>
<th width="10%">
Country</th>
<th width="15%" >
State</th>
<th width="20%" >
City</th>
<th width="50%" >
School </th></tr>
</thead>
<tbody>
<tr><td colspan="4">The testing data</td></tr>
<tr><td class="tblnormal_1_4em">USA</td><td class="tblnormal_1_4em">Pennsylvania_PN </td><td class="tblnormal_1_4em">Pittsburg</td>
<td class="tblnormal_1_4em">
<select name="ohighschool" class="cssdropdown">
<option value="0" SELECTED >Select Lunch</option>
<option value="2"> Healthy Lunch Deluxe Supreme (This will be the longest line in this dropdown 90 characters)</option>
<option value="3"> Healthy Lunch Express</option>
</select>
</td></tr>
</tbody>
</table>
</form>
</div> <!-- end contentmain-->
</div> <!-- end outerdiv-->
</div><!-- #wrappersn -->
</body>
</html>
If the content is wider than the browser window, you get a scroll bar. That happens automatically.
There is no "white space" under your table - that's just the remainder of the unoccupied browser window.
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/