How to make to border-bottom line longer with CSS - javascript

I would like to extend the border-bottom line longer than ever as the image below:
If this is impossible and you have any suggestion to make a change into my code, that would be great.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td class="text_plant_address"> <span class="text_plant">Plant 1</span>
<br /> <span class="text_address">Street 2, Dong An Industrial Park</span>
</td>
</tr>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 10px;
width: auto;
border-collapse: collapse;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
table tr .text_plant_address {
background-color: #FFF;
width: 175px;
height: 175px;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 87.5px;
width: auto;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
}
table tr td .text_address {
font-size: 10px;
}
Here is my JSFIDDLE: http://jsfiddle.net/QTNr5/
2.Does anyone know the name of the font below?

Just add Padding
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding: 0 20px; /* or how longer you want */
}
Fiddle
For the font -
1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.
2) If its on some web page inspect it via firebug or any other code inspection tool.
3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.
4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.
I hope any of these will help you.

You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/
table tr td .text_plant {
}
table tr td .text_address {
font-size: 10px;
border-top: 1px solid #D0D0D0;
padding-top: 4px;
}
Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding:0 20px;
}

if you want your solution in any how..
then i will recommend this..
Use 3 before plant 1 and 3 after that..
like this
<td class="text_plant_address"> <span class="text_plant"> Plant 1 </span>
i know its not best answer but hope it will help and you can increase according to u

You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.
http://jsfiddle.net/mrNXW/
<td>
<div class="plant">Plant 1</div>
<div class="address">Street 2, Dong An Industrial Park</div>
</td>

The font you're looking for I believe is this:
http://www.dafont.com/ballpark-weiner.font

<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>
You can use pseudo element to draw the red part :
http://codepen.io/anon/pen/axvgl/
td {
text-align:center;
}
.text_plant {
font-size:2em;
border-bottom:solid white;
box-shadow:
0 1px 0 gray,
inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
content:'';
display:inline-block;
width:1.25em;
box-shadow:inherit;
border-bottom:solid red;
margin-bottom:-3px;/* size of border*/
vertical-align:bottom;
}
Or use gradient http://codepen.io/anon/pen/ftmDn/
td {
text-align:center;
}
.text_plant {
display:inline-block;
font-size:2em;
padding:0 1em;
box-shadow:
0 1px 0 gray;
background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
background-size:100% 3px, 100% 4px ;
}

Sure, try adding: padding: 10px 0 to the <span>.

Related

How to give a value to long code for repeating it on various occassions

I have a long code which I want to use on multiple random pages of my website. Copying and pasting it everywhere is a tough job for me. So, I want to assign a value to it using javascript. If I use that value, entire code should be executed. I tried to use document.getElementById and tried to insert the entire code in innerHTML which didn't work out. Here's the code which I want to assign the value for.
<style>
.container {
height: 40px;
border: 1px solid black;
width: 250px;
padding: 5px;
font-size: xx-small;
white-space: nowrap;
border-radius: 50px;
background: #e6e7ee;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #dddddd;
}
img {
margin-right: 5px;
border-radius: 50px;
box-shadow: 5px 5px 10px #a3a3a3, -5px -5px 10px #dddddd;
border: 1px solid silver;
}
</style>
<div class="container">
<img border="0" align="left" data-original-height="884" data-original-width="800" height="40px" src="https://1.bp.blogspot.com/-GbF0Uslf3Uo/XyEjbgr6hCI/AAAAAAAADFg/dziRURov-J0QMftcWgx5N_lEpIP7jjMGgCPcBGAYYCw/s320/Screenshot_2020-07-25-23-27-02-1.png" width="40px" />
- Becky Lynch<br />
- Wrestler<br />
- WWE
</div>
If I type <div id="becky"></div> on any page, The above code should be executed. Is there any option available?

How to create profession box shadow effect in div using css

I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application.
Refence UI
Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle
#personalInformation{
font-size: 1em;
border-bottom: 3px solid #98AFC7;
border-top: 3px solid #98AFC7;
border-left: 3px solid #98AFC7;
border-right: 3px solid #98AFC7;
box-shadow: 10px 10px 5px;
line-height: 0;
width: 45%;
}
My sample code
Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .
I've created exactly same box with background like that application. Hope it may help you.
html {
font-size: 10px;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.42857143;
background-color: #f4f4f4;
color: #404040;
}
.content {
float: left;
width: 870px;
}
.content::after {
content: "";
clear: both;
display: table;
}
.box {
padding: 5px 15px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
}
.box:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
.box h5 {
font-size: 1.4rem;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.box p {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px;
}
<div class="content">
<div id="your-id" class="box">
<div class="box-content">
<h5>Caption</h5>
<p id="your-id">Not Mentioned</p>
<h5>Skills/Competencies</h5>
<p id="your-id">Layout ,CSS ,JavaScript ,jQuery ,HTML5 ,WordPress ,Web Design ,Web Development ,HTML ,PHP ,AJAX ,Cross-browser Compatibility ,CSS3 ,UI/UX ,Expert Frontend Developer ,Responsive Web Design ,Website Development ,Web 2.0 ,Dreamweaver ,Web Applications ,Image Manipulation ,Drupal ,MySQL ,Web Application Design ,Web Interface Design ,SVG ,Front-end Development </p>
<h5>Resumes</h5>
<p id="your-id">not mentioned</p>
</div>
</div><!-- .box -->
</div>
I have provided an example here using HAML and SCSS. Please hit the compiled button to retrieve the rendered content. Its a very simple illusion. The background shadow is a soft black color. Let me know if you any more questions
HAML:
#my-box Hello World!
SCSS:
$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);
html, body { width: 100%; height: 100%; background: $background; }
#my-box {
float: none;
height: 50px;
width: 300px;
margin: 0 auto;
margin-top: 50px;
padding-top: 20px;
text-align: center;
background: white;
box-shadow: 0 2px 3px 1px $soft-black-shadow;
}
http://codepen.io/Stephn_R/pen/pJwdzB
And the edits applied to your JSFiddle

I want to add a border to my button on hover event without moving the button or anything [duplicate]

This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 7 years ago.
right now I want to implement a border on hover on a button.
That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.
I made a fiddle to demonstrate the problem: Click me
I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px;
to the hover classes, however, that "squeezes" the button, which is not what I want.
Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.
Any advice?
Thanks in advance
You could try using a box shadow instead, as this doesn't actually affect the positioning:
a {
transition: all 0.8s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: lightgray;
height: 50px;
width: 150px;
line-height:50px;
text-align: center;
color:black;
}
a:hover {
box-shadow: 0 -3px red;
}
HOVER MENOTICEHOWIDON'TMOVE?
I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/
Use margin to replace border-width when it's not visible.
button {
margin: 3px;
border: 1px solid red;
}
button:hover {
margin: 0px;
border: 4px solid red;
}
You can:
use the box-shadow fiddle demo
.functionButton:hover{
box-shadow: 0 -4px 0 0 #a3def1;
}
Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:
#functionButtonDiv button{
vertical-align: top;
}
Updated jsFiddle
Read up: vertical-align | MDN
Try to understand what is happening.
You want buttons not be squeezed, but a border on top to be added.
Initially your button height was 25px and border was 1px.
On hover your height remains same however the border increases by 3px, hence making your button to squeeze.
Solution:
Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).
If you do this only you will observe that the button starts shifting down.
To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.
Similarly add a margin of -3px in hover class as the height is already increased by 3px.
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px; //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}
.functionButton:hover{
border-top: 4px solid #A3DEF1;
height:28px; //increased height to accomodate the increased border
margin-top:-3px; //negative margin to avoid shifting of button down
}
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px;
}
.functionButton:hover{
width:60px;
height:28px;
border-top: 4px solid #A3DEF1;
margin-top:-3px;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
You probably don't need Javascript for this.
You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.functionButtonChat {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
outline: none;
background: #F2F5FD;
}
.functionButtonChat:hover {
border-left: 4px solid #A3DEF1;
border-top: 4px solid #A3DEF1;
}
.functionButton {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
border-left: none;
outline: none;
background: #F2F5FD;
}
.functionButton:hover {
border-top: 4px solid #A3DEF1;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButtonChat">Dummy1</button>
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
use following css i have made some changes in ur css and its working as per ur requirement try the following
.functionButtonChat{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButtonChat:hover{
border: 4px solid #A3DEF1;
}
.functionButton{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButton:hover{
border: 4px solid #A3DEF1;
}

Sliding div onclick left/right [duplicate]

This question already exists:
How to make this into a sliding left/right div
Closed 9 years ago.
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
HTML
<div id="left">
Edit Profile
Settings
Sign Out
</div>
CSS
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I'm assuming I'd need to add an id or class as either #open, #close and/or .open, .close.
You could use jQuery's animate function, should do the job easy enough.
Tutorial/Information on .animate:
http://viralpatel.net/blogs/understanding-jquery-animate-function/
There really isn't enough info here to know what you want, because the layout of the page is important. Without knowing if the menu should be absolute, fixed or relative.
You can use jQuery's animate() method to animate CSS numeric properties, and then use mouseenter and mouseleave to slide the menu.
http://jsfiddle.net/thinkingmedia/8a7GL/1/
It's only 2 lines of code.

after you have clicked or hovered can you change state?

trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});
You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
​
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.
This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)
Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/
What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)

Categories