I keep trying to convert the below code, but I keep getting either no changes or it breaks the html.
This is the css
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
font-size: 12px;
}
#map {
width: 440px;
}
#listing {
position: absolute;
width: 200px;
height: 470px;
overflow: auto;
left: 442px;
top: 0px;
cursor: pointer;
overflow-x: hidden;
}
#findhotels {
position: absolute;
text-align: right;
width: 100px;
font-size: 14px;
padding: 4px;
z-index: 5;
background-color: #fff;
}
#locationField {
position: absolute;
width: 190px;
height: 25px;
left: 108px;
top: 0px;
z-index: 5;
background-color: #fff;
}
#controls {
position: absolute;
left: 300px;
width: 140px;
top: 0px;
z-index: 5;
background-color: #fff;
}
#autocomplete {
width: 100%;
}
#country {
width: 100%;
}
.placeIcon {
width: 20px;
height: 34px;
margin: 4px;
}
.hotelIcon {
width: 24px;
height: 24px;
}
#resultsTable {
border-collapse: collapse;
width: 240px;
}
#rating {
font-size: 13px;
font-family: Arial Unicode MS;
}
.iw_table_row {
height: 18px;
}
.iw_attribute_name {
font-weight: bold;
text-align: right;
}
.iw_table_icon {
text-align: right;
}
</style>
Here is the HTML file
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Hotel Search</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div id="findhotels">
Find hotels in:
</div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter a city" type="text" />
</div>
<div id="controls">
<select id="country">
<option value="all">All</option>
<option value="au">Australia</option>
<option value="br">Brazil</option>
<option value="ca">Canada</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="mx">Mexico</option>
<option value="nz">New Zealand</option>
<option value="it">Italy</option>
<option value="za">South Africa</option>
<option value="es">Spain</option>
<option value="pt">Portugal</option>
<option value="us" selected>U.S.A.</option>
<option value="uk">United Kingdom</option>
</select>
</div>
<div id="map", class="col-lg-offset-2">
<div id="listing">
<table id="resultsTable">
<tbody id="results"></tbody>
</table>
</div>
<div style="display: none">
<div id="info-content">
<table>
<tr id="iw-url-row" class="iw_table_row">
<td id="iw-icon" class="iw_table_icon"></td>
<td id="iw-url"></td>
</tr>
<tr id="iw-address-row" class="iw_table_row">
<td class="iw_attribute_name">Address:</td>
<td id="iw-address"></td>
</tr>
<tr id="iw-phone-row" class="iw_table_row">
<td class="iw_attribute_name">Telephone:</td>
<td id="iw-phone"></td>
</tr>
<tr id="iw-rating-row" class="iw_table_row">
<td class="iw_attribute_name">Rating:</td>
<td id="iw-rating"></td>
</tr>
<tr id="iw-website-row" class="iw_table_row">
<td class="iw_attribute_name">Website:</td>
<td id="iw-website"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have tried multiple ways to get this to be responsive and work with bootstrap 3. I can get the map div to work, just not the controls at the top.
you can see what I have working at http://104.236.207.225/
I followed your link and I see that the controls and map are responsive, but the map is not lining up with the controls because of the offset. The offset sets a margin that pushes the map element to the right. Don't use the offset.
Fix this line:
<div id="map", class="col-lg-offset-2">
Check the error by pasting your entire html here: https://validator.w3.org/
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 have a table, and I want to put it inside a div so that the table is only shown until the div's height, and can be scrolled to view the rest of the table. Here is my code:
#listTimes {
margin-right: 0;
height: 100px;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table, td, th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<html>
<body>
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Right now, the table just appears the way it is. I want to set a height for both the form and the table together, and when I scroll to see the table, the form should follow me. I tried this using height attributes, overflow attributes, but none of them work.
Not sure what you mean by "the form should follow me" but I assume you mean it should stay fixed. In that case you need to add the height and the overflow to the #timesList element. If not, add it to the #listTimes element.
#listTimes {
margin-right: 0;
height: 100px;
}
#timesList {
height: 50px;
overflow: auto;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table, td, th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<html>
<body>
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Add the overflow-y property set height on #timesList
#timesList {
margin-right: 0;
height: 100px;
overflow-y: scroll;
}
.listTimes {
height: 100px;
overflow: hidden;
}
#timesList {
height: 100%;
overflow-y: scroll;
/* rough width of scrollbar */
padding-right: 20px;
margin-right: -20px;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table,
td,
th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
I am studying CSS and testing a simple drag and drop functionality which comes with HTML5.
The page I have prepared looks OK in Chrome and Opera but totally wrong in Firefox and IE 11. In IE 11 it is even not possible to drag elements from the rightmost table onto a caption Table A nor Table B.
Why is it so? How is the height for td element magically set to a high value in Firefox/IE and not in Chrome/Opera? Why does dropping not work in IE 11?
function drag(event) {
event.dataTransfer.setData("rowId", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var playerId = event.dataTransfer.getData("rowId");
var tableBody = event.target.parentNode.getElementsByTagName("tbody");
if (tableBody) {
tableBody[0].appendChild(document.getElementById(playerId));
}
}
.vbtn {
background: none repeat scroll 0 0 #fafaff;
border: 1px solid #ddd;
border-radius: 6px;
border-spacing: 0;
box-shadow: 1px 1px 1px #eee;
padding: 1px 8px;
text-shadow: 0 2px 5px rgba(120, 120, 120, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
a {
color: #175bb0;
text-decoration: none;
}
#wrapper {
width: 100%;
overflow: hidden;
}
#section-b {
position: relative;
margin-left: 10px;
width: 300px;
height: 400px;
float: left;
overflow: auto;
}
#section-a {
width: 235px;
float: left;
}
#selector {
margin-top: 10px;
margin-left: 10px;
float: left;
}
table {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
width: 100%;
border: 1px solid black;
}
th,
td {
width: 100%;
border: none;
}
thead {
background: lightgreen;
}
thead>tr {
position: relative;
}
tbody {
height: 400px;
background: none;
overflow: auto;
}
<!DOCTYPE html>
<head>
<title>Table scroll</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>Header...</p>
</div>
<div id="section-a">
<table id="table-a">
<caption ondrop="drop(event)" ondragover="allowDrop(event)">Table A</caption>
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="table-b">
<caption ondrop="drop(event)" ondragover="allowDrop(event)">Table B</caption>
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="selector">
<select>
<optgroup label="A">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</optgroup>
<optgroup label="B">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</optgroup>
</select>
</div>
<div id="section-b">
<table id="section-b-list">
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
<tr draggable="true" id="10" ondragstart="drag(event)">
<td>Value 1
</td>
<td>Value 2</td>
</tr>
<tr draggable="true" id="11" ondragstart="drag(event)">
<td>Value 3
</td>
<td>Value 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
This line should be removed:
tbody {
height: 400px;
}
The problem is
tbody {
height: 400px;
}
Try to remove it from your code and you'll see.
The problem with dragging and dropping in IE 11 was because the page was loaded from a local file! When I uploaded the file to a remote http server and accessed the file from there, the problem disappeared!
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'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/