I am trying to achieve the following using bootstrap button and custom css. I am not sure how to add a separation with a button and have two sets of labels within it. So far, I am able to create a button with label in it.
Working codeply demo
DEMO
You can do this with mark-up (html) only:
<button>
<h4>Titel</h4>
<hr/>
<span>More</span>
</button>
But this will look a bit weird so by adding some css make it look better.
button span {
font-size: 0.7em;
}
button hr {
margin: 2px;
}
Try this,
Demo
.productButton.selected {
background-color: rgb(0, 146, 143);
color: #FFF;
}
.productBtnText{
font-size:25px;
border-radius:0;
width:100%;
border-bottom:2px solid #000;
}
.productButton{
border:2px solid #000;
margin:0px;
padding:0;
height: 100px;
width: 200px;
font-size: 15px;
white-space: normal;
position: relative;
}
Related
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
I have a dynamically created tree view control in ASP.NET. I want to format that treeview control and want to apply some designing. I have found this on on stackoverflow but I don't know whether I can apply to my dynamically created Treeview control or not?
Here is the link that I found on stackoverflow for tree view
https://jsfiddle.net/jhfrench/GpdgF/
and here is my code
<asp:TreeView ID="TreeView1" runat="server" ShowLines="true">
</asp:TreeView>
Please let me know how to apply this styling to dynamically added treeview control.
Check This ! this will help You
.treeNode
{
transition: all .3s;
padding: 12px 5px;
text-align: center;
/*width: 100%;*/
margin: 0;
min-width: 250px !important;
border: 2px solid #8e44ad;
text-decoration:none !important;
color:black;
/*color:blue;
font:14px Arial, Sans-Serif;*/
}
.rootNode
{
font-size:18px;
/*width:100%;*/
border-bottom:Solid 1px black;
color:#337ab7;
}
.leafNode {
border: Dotted 2px black;
padding: 10px;
background-color: #eeeeee;
font-weight: bold;
}
.selectNode
{
background-color:Black;
border:Dotted 2px black;
font-weight:bold;
color:#fff;
}
<asp:TreeView ID="tvw_Category" runat="server" NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode" SelectedNodeStyle-CssClass="selectNode"
OnTreeNodeCheckChanged ="tvw_Category_TreeNodeCheckChanged" ExpandDepth="1" Font-Size="Small">
</asp:TreeView>
You can use the ASP:TreeView's CSSClass property to apply CSS to the TreeView Control
I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.
I have a mockup here
http://jsfiddle.net/Q77RZ/
Without bootstrap everything is OK. How can I override the bootstrap settings?
You just need to make it a little more specific:
table.table tbody td.red-background {
color: black;
background-color: red;
font-size: 30px;
}
Demo here.
just change the importance of that css rule so it doesn't get overwritten.
.red-background {
color: black;
background-color: red !important;
font-size: 30px;
}
Demo: http://jsfiddle.net/Q77RZ/4/
In the code below, $row['site'] is an URL. In Chrome and IE8, it displays fine. In Firefox 3.0.11, it only displays everything up until the second forward slash. So "en.wikipedia.org/wiki/Miami" is only displayed as "en.wikipedia.org/wiki".
I believe this is because of the CSS that I am using, but I can't quite figure out how to fix it. Any ideas?
Thanks in advance,
John
Here is the code:
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".''.$row['site'].''."</td>";
Here is the CSS:
table.navbar {
margin-left:44px;
margin-top:0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
}
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
}
table.navbar td a{
padding: 3px;
display: block;
}
.sitename { width: 535px;
overflow:hidden;
}
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
}
This is the "culprit":
.sitename {
width: 535px;
overflow:hidden;
}
You are setting any element with a class of .sitename to have a specific width and hiding any overflow.
In addition to that, this is also part of the reason:
a.links2:link {
...
width: 10px;
...
}
Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.
The code you pasted minus the above width declaration gives me what you want on Firefox.
This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:
print <<<EOT
<table class="navbar">
<tr>
<td class='sitename'>
{$row['site']}
</td>
EOT;
Much better, right?
to test this try
.sitename { width: 535px;
overflow:visible;
}
if you see scrollbars try changing the width to an "em" based number