I am designing a custom table for a website. In dreamweaver, Design tab shows exactly what I want but in Live tab no border and stuff is visible. I have tried to find solution, I might have overlooked something but I couldn't find solution yet. I am posting code here:
CSS
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom:thin;
border-bottom-color:#09F;
}
table{
width:600px;
border: 1px solid #666;
}
li{
list-style:none;
height:22px;
border-bottom:1px;
border-bottom-color:#09F;
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
float:left;
padding-right:500px;
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
}
HTML
<tr>
<td id="tableData">
<ul>
<li>Android</li>
<li>abced </li>
<li>xyz</li>
</ul>
</td>
</tr>
In Design View:
In Live View (Browser):
What am I doing wrong? How can I solve it?
Regards
replace
border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;
by
border-left:thick solid #09F;
border-right:thick solid #09F;
Change the CSS for :-
#tableData{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#09F;
padding-bottom:25px;
padding-top:10px;
border-bottom-style:solid;/*Updated*/
border-bottom-color:#09F;/*Updated*/
}
#tableHeading{
font-family:Arial;
font-size:32px;
color:#666;
padding:10px;
/*float:left;*/
padding-right:500px;
border-left: 5px solid #09F;
border-right: 5px solid #09F;
}
You need to mention complete "border-bottom-style" and "border-bottom-color"
or use this instead "border-bottom:1px solid #09F;"
Please refer this Fiddle: http://jsfiddle.net/aasthatuteja/gDkn6/
Hope this should help!
The dotted border you see in Dreamweaver design view is generated to show you there is an element there, this is indeed not part of your page.
A border in CSS is made up of 3 main components: width, color and style.
The style property is the one you miss.
Change the border styles to:
border-bottom-width: thin;
border-bottom-color: #09F;
border-bottom-style: solid;
You can also use the shorthand for border bottom:
border-bottom: solid thin #09F;
Furthermore I'd advise you to use numerical values for width, like: 1px so you know exactly what you get.
Related
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
The following html/css works correctly on the first and last "she loves him a lot." lines, why doesn't it draw the rounded rectangle around the entire sentence for the 3, 4, 5 iterations.
http://jsfiddle.net/xa3apsdc/16/
attention to this code:
span[class]:before {
width:100%;
text-align:center;
float:right;
font:bold 10px arial;
color:#00f;
content: attr(class) "";
}
Try like this: Demo
CSS:
span{
text-align:center;
display:inline-block;
border:1px solid black;
border-radius:15px;
padding:2px;
}
You have given rounded corner only for first and last child. thats why it was not working
that's because you are not using, Add this jsFiddle
span{
border:1px solid black;
border-radius:15px;
padding:2px;
}
I try to do a little forum to train a little on web design. How can I change that table design to have a 3 dimensions (3D) table ? Or if there is any solution to improve its design, that will be maybe better !
Otherwise, any criticism is welcome!
/* Tableaux -------------------------------------------------------------------------------------*/
table {
border-collapse: collapse;
}
pair {
background-color: #efefef;
}
tr.impair {
background-color: #fff;
}
th {
color: #D89845;
border: 1px solid #D89845;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
td {
border: 1px solid #ddd;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
PS: I will keep the best suggestion as validation of the subject.
Thanks in advance.
You can use box-shadow is the best solution to give any object a 3d look & feel.
box-shadow use browser specipic prefixes like -webkit, -o, -moz etc . Here I just gave the link where you can find out more about it & can study how it works. I also many times just created such type of objects that have just 3d feel.
Link to box-shadow.
Maybe you can do anything with this,
CSS:
.gridtable {
border:1px solid #000000;
height:149px;
width:342px;
overflow-x: scroll;
}
.fixedcell {
height:30px;
padding:0 2 0 2px;
background-color:#C2BFA5;
border-left:1px solid #E1E0D2;
border-top:1px solid #E1E0D2;
border-right:1px solid #8D8961;
border-bottom:1px solid #8D8961;
}
.gridcell {
height:30px;
background-color:#ffffff;
padding:0 2 0 2px;
border-right:1px solid #C0C0C0;
border-bottom:1px solid #C0C0C0;
}
Edit
Link to 3d effects : http://www.w3schools.com/cssref/pr_border-style.asp
im trying to learn how to use css instead of tables. i'm starting at the basics with a block of text with same height and width
margin-right: 60%;
margin-left:10px;
margin-top: 10px;
margin-bottom:0;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
margin-left: 60%;
margin-right:10px;
margin-top: 10px;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
however, the results are not good. there's no border. how can i fix this?
I recommend the shorthand border property:
border:solid 1px black;
Try cutting the other border properties and just using that and see if that does the job.
More info: http://www.w3schools.com/css/css_border.asp
Tables are like structure groups of layers while divisions are simple layers.
Think that every division is a . The problem is how to structure your divisions. This is where stylesheets come to your rescue.
ex.:
<div class="table">
<div class="right-td"> </div>
<div class="left-td"> </div>
</divd
And in your stylesheet
div.table { width:100%; float:none; margin:0px auto;}
div.right-td { border:1px solid #000;float:rightt; width:45%; padding:6px;}
div.left-td { border:1px solid #000;float:left; width:45%; padding:6px;}
This is just an example
Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.