I can't seem to get my margin-top:0; property to work in my style sheet. I'm not sure why, but when I clear my browser's cache, the property will work temporarily, and then go right back to leaving a space at the top of my page (take a look: www.sunporchhomes.com). I'm using Wordpress to build. Here's the top half of my code, any help would be greatly appreciated.
CSS
body
{
margin:0;
padding:0;
background-image:url("http://www.sunporchhomes.com/sphbg5.png");
}
a:link {color:#ffffff;} /* unvisited link */
a:visited {color:#ffffff;} /* visited link */
a:hover {color:#808080;} /* mouse over link */
a:active {color:#ffffff;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
#logo {
margin: 0;
width: 1000px;
z-index: 26;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#header {
width: 1000px;
height: 175;
position: absolute;
top: 0;
left: 0;
padding-left:70px;
}
#banner {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 419px;
z-index: -1;
}
#navigationtable {
position:absolute;
padding-left:730px;
z-index: 10;
padding-top:20px;
}
HTML
<body>
<div id="wrapper" class="hfeed">
<img id="banner" src="http://sunporchhomes.com/spmain1.png" alt="Banner Image"/>
<div id="navigationtable">
<table class="tg" width="400">
<tr>
<th class="tg-lhfu">HOME</th>
<th class="tg-031e"></th>
<th class="tg-031e">WARRANTY</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu">FEATURES</th>
<th class="tg-031e"></th>
<th class="tg-031e">ROWHOME FAQ</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu"><a href="http://sunporchhomes.com/floor-plan-2.html">FLOORPLAN</th>
<th class="tg-031e"></th>
<th class="tg-031e">ABOUT US</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu">NEIGHBOURHOOD</th>
<th class="tg-031e"></th>
<th class="tg-031e">CONTACT</th>
<th class="tg-031e"></th>
</tr>
</table>
</div>
<div id="boxplus">
<img src="http://sunporchhomes.com/boxplus.png" />
</div>
<div id="logo">
<img src="http://sunporchhomes.com/splogo13.png" />
</div>
</div>
The issue you are experiencing is not your css, but rather is your WordPress admin bar.
When you are logged into WordPress, it attempts to "forcefully" draw an admin bar across the top 32 pixels of your browser window.
When your css conflicts with how WP tries to do this (which your css I believe does, due to your heavy use of position: absolute), you can be left with a blank space at the top rather than the admin bar.
You can disable the admin bar by editing your user profile, and unchecking "Show Toolbar when viewing site"
I've tested in Firefox, Chrome, and Internet Explorer - they all render your site properly, without the space you described.
Related
I am using table (angular-4-data-table) which displays the rows. I wanted to have a vertical scrollbar with header fixed. I tried to add style= position: fixed; to the
<thead> section. I can see the fixed header, but when I scroll through, the table data section was moving on top of the header.
<table class="table table-condensed table-bordered data-table">
<thead style= position: fixed;>
</thead>
<tbody>
</tbody>
</table>
Is there any style that I can apply on tbody so that when scroll happens, it hides beneath the header.
tbody tag is relative so it will just operate as every other element in the page.
You should work only on the "special" element (thead) in order to let the browser works with the highest number of common element possible.
Have you tried giving z-index:999; as thead style?
Ok, now I remember how to do that.
Inside each <th> insert a <div> with the content of the column header, than using CSS you must set the div position absolute over the table and the th with 0 height.
Plus, you must give to a <div> containing the table a top-padding to leave the space for the fake <th>
It's not a nice code, but it works without JS.
<style>
.container { padding-top: 50px; }
.inner { height: 100px; overflow-y: auto; }
.t { width: 100%; table-layout: fixed; }
.t thead th { height: 0 !important; }
.t thead th > div {
position: absolute;
height: 50px;
line-height: 50px;
top: 0;
}
</style>
<div class="container">
<div class="inner">
<table class="t">
<thead><tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
</tr></thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to create a table with the following two functionalities:
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
I need these functionalities to appear whenever the user hover over the rows of the table. I tried using Bootstrap 4's table-hover class's functionality but couldn't achieve any of the two functionalities.
For the first functionality, I have an idea of adding a class with shadow to the <tr> being hovered. Don't know however, if this is the best approach. Is there some already defined class that could achieve such behavior?
And for the second functionality, I have no idea. Any suggestions?
Here's my code:
<div class="container">
<div class="table-wrapper">
<table class="table">
<thead id="thead_st" class="thead">
<tr>
<th class="thead-row" scope="col"></th>
<th class="thead-row" scope="col">1</th>
<th class="thead-row" scope="col">2</th>
<th class="thead-row" scope="col">3</th>
<th class="thead-row" scope="col">4</th>
<th class="thead-row" scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="trow">
<th scope="row"></th>
<td class="score">4.7</td>
<td>Bla bla</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
.table-wrapper {
border-radius: 8px;
overflow: hidden;
}
.container {
margin-top: 50px;
margin-bottom: 50px;
background: white;
border-radius: 8px;
padding: 0px;
}
body {
background: #ECEEF1;
font-family: 'Roboto', sans-serif;
color: #2C3A56;
}
tr {
font-size: 16.5px;
line-height: 50px;
padding: 0px;
font-weight: 100;
}
td, th {
display: table-cell;
text-align: center;
}
#thead_st {
background-color: #F6CE52;
border: 3px solid #F6CE52;
color: white;
}
.thead-row {
line-height: 20px;
font-weight: 100;
}
.trow:hover {
cursor:pointer; //set the cursor to pointer (hand)
background-color: blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888;
}
Please Check Below Fiddle. Your two requirement completed.
Some kind of 'bring-to-front with shadow' or '3d effect' that I see in some websites and find very pleasant.
Mouse cursor should have the 'hand' icon indicating the row is clickable.
Fiddle
.trow
{
transition: transform .2s;
}
.trow:hover {
cursor:pointer;
transform: scale(1.03);
background:#ccc;
color:#fff;
}
In css, assuming your <tr> has .row class :
.row:hover{
cursor:pointer; //set the cursor to pointer (hand)
background-color:blue; //sets hovered row's background color to blue
box-shadow: 5px 10px #888888; //this is a box shadowing effect that you can tweak at your choice.
}
If further more you just want to make that "3D" effect you can play with width and height properties of the <tr> element to make it bigger over the others on hover event.
When I used to play with 3D effects I usually implemented 2D Transforms to adjust positioning with translation properties.
The table on this page has a caption with display: table-caption set.
http://www.petersen-stainless.co.uk/lifting/CE-swage-sockets/stainless-steel-threaded-sockets.html
The HTML is:
<table class="product-data">
<caption>
Rated for lifting in accordance with EN 13411-8. WLLs stated based on 90% of wire MBL at a 6:1 factor of safety. All terminals permanently etched with CE mark and batch identification number.
</caption>
<tbody>
<tr>
<td data-th="Product Code">SCM6X3R-EN</td>
<td data-th="Wire (mm)">3</td>
<td data-th="Thread">M6</td>
<td data-th="D (mm)">6.3</td>
<td data-th="L (mm)">97.0</td>
<td data-th="CT (mm)">47.0</td>
<td data-th="WLL 7x19 / 6x19-IWRC">70kg</td>
<td data-th="WLL 6x36-IWRC">N/A</td>
</tr>
</tbody>
</table>`
And the css I used:
.content .product-data {
float: left;
margin-right: 20px;
width: 70%
}
.product-data caption {
display: table-caption;
width: 100%;
margin-bottom: 2em;
border: 1px solid #ccc;
box-sizing: border-box;
border-top: none;
}
It displays at 100% width of the table in webkit browsers but in firefox it is 100% width of the page. How can i get this caption to fit properly in firefox? Is it a bug? It seems like it shouldnt be behaving this way. If so are there any work arounds?
Please try to add
.content .product-data { display: inline-block; }
The issue will get fixed in firefox
I have some markup like so:
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<tr>
</thead>
<tbody>
<tr class="main">
<td>some content</td>
<td>some content2</td>
<tr>
<tr class="more">
<td colspan="2">
<div class="more-link"><a tabindex="0" href="#">Show more info</a></div>
<div class="more-info">
more info goes here
</div>
</td>
<tr>
</tbody>
</table>
And some CSS:
td, th{
border: 1px solid red;
}
.main td{
height: 50px;
width: 300px;
vertical-align: top;
}
.main td{
border-bottom: 0;
}
.more td{
border-top: 0;
height: 0;
}
.more-link{
position: relative;
top: -30px;
}
.more-link:focus + div, .more-link:active + div{
height: auto;
}
What I want to do is that when the "show more info" link is clicked, the table row called "more" expands.
The problems:
There is no effect if I set the td inside more to have a height of 0;
If I set height of the more-info div to 0, or display:none, the table row still takes up space.
I would like to do this with just CSS, javascript can be used to make it better, but the basics should just work without javascript.
How can I get my more row to expand when the show more info link is clicked?
And a fiddle: http://jsfiddle.net/QJr2e/
Got it!
Instead of using position:relative to move the "show more info" link, I gave it a float:left. This allowed me to move it anywhere I want using margin, while reorganizing the flow.
Instead of using height, I just set more-info to display:none, and then when the "show more info" link is clicked:
.more-link:active + div, .more-link:focus + div{
display: block;
}
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.