I want to create a table of contents in three columns with dots connecting them:
song.title......... author........... page
I tried to follow the example given by catchmyfame in
Create leading dots in CSS
but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.
Here's the URL of the page on my website:
http://conchord.org/xeno/ix.fsm.html
Here's my CSS:
<style type="text/css">
<!--
#maintable div {
background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
padding-right: 0;
}
#maintable td+td+td div {
text-align: right;
background-color: #fff;
}
#maintable .nodots div,
background: solid #fff;
text-align: right;
}
#maintable div span {
background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>
And the start of my section:
<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>
<table id="maintable">
<tr>
<td>
<div><span>Ballad of Rhysling, The</span></div>
</td>
<td>
<div><span>Roger Scime</span></div>
</td>
<td>
<div><span class="nodots">92 </span></div>
</td>
</tr>
Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
Related
I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
Tried two approaches to achieve vertical align text next to responsive image each in a separate .col-md-*
on the child element
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
and a parent child using table-cell method
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
but as image on left is responsive how do I get to work without a fixed height.
fiddle : https://jsfiddle.net/silko/jr3b8kL5/13/
just add line-height: 400px; to your .child class it will make the text vertically centered.
Note: you can use calc and vw and vh to make it flexible, e.g. line-height: calc(30vw + 30vh);
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
p{
display: table-cell;
height: 400px;
vertical-align: middle;
}
<div class="col-sm-6">
<picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="ccm-custom-style-main49 child">
<p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p>
</div>
</div>
</div>
</div>
Update: if your text contains multiple lines then you should set the text container's display property to table-cell and then you can set vertical-align: middle.
Rendering a table, with boarders, to PDF using phantomjs leaves each individual cell bordered but with a gap between each cell. The table is displayed correctly, without such gaps, on a web page.
in my CSS I've tried setting:
border-collapse: collapse;
border-spacing: 0px 0px;
to no avail, I need to get rid of those gaps between cells in my PDF.
Any ideas would be gratefully received.
Yours Allan
Be sure to add the border-spacing and border-collapse rules to the <table> and not the <td>. This is my phantomjs-specific rules:
.table {
border: 1px solid black;
border-spacing: 0px 0px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 5px;
border: 1px solid black;
margin: 0;
}
Note that this is a bit different than 'normal' (not phantomjs-pdf) css where your border-collapse can be located on the <td> element.
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.
How do I set CSS to show borders inside td rather than outside on hover. Normally when I hover a cell and I have set border in hover style, the table rows moves by width of hover border. I want it to show inside thus no moving. (For example cell is 10px width and I add 2px border I still want it be 10 pixel width but with 2px border on each side, thus 6px left for consent.)
jsfiddle: http://jsfiddle.net/reg4f/
Here's my HTML:
<table>
<tr>
<td>
<a>po</a>
</td>
<td>
<a>út</a>
</td>
</tr>
<table>
and CSS
table {
width: 250px;
height: 250px;
table-layout: fixed;
border: solid black 1px;
border-collapse: collapse;
}
table td, table tr {
text-align: right;
vertical-align:middle;
}
td:hover{
background-color: #E5F3FB;
border: solid 4px #70C0E7;
border-style: inset;
}
td a {
display:block;width:100%;height:100%;margin:0
}
You can try to add a white or transparent border to the cell, when it's not :hover and override this white border by your colored one when it's :hover. So you have no moving.
td {
border: solid 4px rgba(0,0,0,0);
}
Here is an example:
http://jsfiddle.net/G6w9P/
I'd suggest adding padding to not hover of the same width as the border on hover. On hover remove the padding and add the border.
Something like:
td{
padding:2,2,2,2;
border:none;
}
td:hover{
padding:0,0,0,0;
border:solid 2px red;
}
Cheers
-L