I am working on a web page which has a table with several columns as follows
In the above picture each td has blue border but I am trying increase thickness for left border of Ask1 using the following markup and CSS
HTML
<td class="clientOffer1">Ask1</td>
CSS
clientOffer1 {
border-left: 3px solid #0088cc;
}
but above CSS is replaced by the original css of td which is used for remaining columns which is as follows
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
How do use both CSS without conflicting one another?
Classes are selected with a leading period in CSS:
.clientOffer1 { ... }
DEMO
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientOffer1 {
border-left: 3px solid #0088cc;
}
If you are still having troubles, it would be because some level of specificity is taking hold. Try the following:
.client {
border-left: 3px solid #0088cc !important;
}
Here's some reading material:
Specificity
Related
I created class border for a link and put the link into that border. Then when I see by responsive device link is over length form that border while I try to keep sentence into border it has no problem.
How can I resolve it?
My CSS:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
You probably used an element with display: block as a host of your .border class:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<div class="border">
Google
</div>
<div>'s default display value is block, hence full width.
What you need is using an element with display: inline:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<span class="border">
Google
</span>
Or, simply add display: inline to your .border styles:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
display: inline; /* <---- */
}
<div class="border">
Google
</div>
This is my failed attempt:
https://jsfiddle.net/j75hxxa2/1/
I want the block on the right side and the extra gray part gone.
Adding
float: right;
To the parent makes its children very small and tiny. If I try to widen the children by adding
width: 50%;
They break the line.
Is there a simple fix?
(Also I think
margin-top: 1px;
Isn't working?)
Thanks in advance
A better way is to use a table:
HTML:
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>
CSS:
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
}
Add float left to .cell as below, I have changed background color, change it back to your previously assigned or as you wish.
.cell {
width: 24.8%;
float:left;
}
#table {
margin-right: 1px;
margin-top: 1px;
background-color: #f22;
width:100%;
height:37px;
}
First: I dont use bootstrap, I want to build this, without bootstrap.
I want to create this
,but I dont know how to handle the span on the right side of the input field. Here is my try.
.input_register{
padding: 5px;
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
padding: 5px;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
Why is the span higher as the inputfield?
display: inline-block;
inline-block displays similar characteristics as an inline element while being able to alter the sizing like a block element.
Setting line-height: 1em sets the height of the containing block equal to the size of the font. In this case I've used line-height: 1.5em to give it some extra space.
Also, vertical padding on these elements yields unexpected results, using line-height instead gives a more consistent appearance.
.input_register,
.register_span {
display: inline-block;
font-size: 12pt;
line-height: 1.5em;
padding: 0px 5px;
}
.input_register{
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
I want to code the below design in html and css
The result I got:
I want to center other content in the td elements, so it will be aligned with the product image. I tried to use display: list-item with the product image and it works in Chrome, like the below image:
CSS code:
table {
width: 100%;
thead {
border-bottom: 1px solid #eeeeee;
}
th {
text-align: left;
text-transform: uppercase;
color: #909090;
padding-bottom: 1em;
}
.thumb {
width: 100px;
height: 100px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
display: list-item;
}
tr:nth-child(even) {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
td,
tr {
padding: 1em 0;
span {
display: block;
}
}
}
Please check this fiddle
Thanks,
In that third image you have shown, that does not look “centered” (on the vertical axis), but aligned to the top instead. If that is what you want – then simply specify vertical-align for the table cells accordingly:
.cart table td {
vertical-align:top;
}
http://jsfiddle.net/ahpegfvj/3/
I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following:
What I'm not able to do is make this little Triangle shaped trim on Top
is it possible in CSS, if it is, how?
Live Example: http://jsbin.com/owafod/1/
I used CSS triangle generator to create the triangle.
#Nav {
width: 300px;
height: 200px;
background: #333;
}
#Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ffffff transparent transparent transparent;
margin: 0 auto;
}
Here's a solution with borders :
Result :
HTML :
<div id=a></div><div id=b></div>
<div id=c></div>
CSS :
#a {
border-right: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#b {
border-left: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#c {
background: black; height:20px;width:210px
}
Tests
And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :
(the code to make it)