I want to represent a text like below image, how can i do this using CSS and HTML?
Custom Text Representation Image
Note: This is not text input field. I just want to display the text.
please try the below code.
<style>
.text-content{
position: relative;
border: 5px solid;
border-radius: 20px;
padding: 20px 0;
}
.text-content span{
position: absolute;
background: #fff;
left: 25px;
top: -18px;
padding: 0 10px;
font-size: 22px;
}
</style>
<h1 class="text-content">
<span>TV NAME</span>
ANDRIOD TV ROOM 1
</h1>
Try this one also. I think it's perfect for you.
fieldset {
width: 500px;
border-radius: 15px;
border: 5px solid #000000;
}
legend {
font-size: 18px;
font-weight: bold;
color: #000000;
}
span {
display: block;
text-align: center;
padding: 20px;
font-size: 22px;
font-weight: bold;
color: #000000;
}
<fieldset>
<legend>TV NAME</legend>
<span>ANDRIOD TV ROOM 1</span>
</fieldset>
You can use The HTML fieldset element:
<fieldset>
<legend>TV NAME</legend>
ANDRIOD TV ROOM 1
</fieldset>
Related
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;
I have been tasked with creating this.
I can create the box, font-awesome icon and the non-linking text using a pseudo element content, but I am unable to create the Learn More link (with a span class to include the >).
If I add text directly into the html, it will not fill the box (and spills out below it). I would also be forced to use inline styles to keep it top-aligned with the !.
We want to keep this in the CSS if at all possible. I realize that the real answer is that you can't do it, but I'm looking for a workaround to make it work.
This is the CSS I can use to place the non-linking message:
&:after {
color: #7b7b7b;
margin-top: -43px;
padding-left: 19%;
line-height: 18px;
display: flex;
font-weight: normal;
content: "You are no longer on FPC, you will now be back to your regular contract.";
#media #{$small} {
padding-left: 15%;
margin-top:-37px;
}
}
&:before {
color: #7b7b7b;
margin-left: 10px;
}
And this is the line of HTML:
<i class="fa fa-exclamation-circle"></i>; Learn more <span class="arrow-right"></span>
Does anyone have a solution to help me make this work?
Thanks
Here is a different structure & CSS if you end up going in that direction.
.message {
border: 2px solid #7b7b7b;
border-radius: 2px;
position: relative;
width: 220px;
font-size: 13px;
font-family: Arial;
background: #f7fcff;
padding: 7px 8px 5px 42px;
}
.message>.message-icon {
position: absolute;
color: #7b7b7b;
font-size: 26px;
left: 10px;
}
p {
color: #7b7b7b;
margin: 0 0 3px 0;
}
a {
color: #1464ae;
font-size: 12px;
text-decoration: none;
}
a .action-icon {
margin-left: 3px;
font-size: 10px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="message">
<span class="message-icon"><i class="fa fa-exclamation-circle"></i></span>
<p>You are no longer on FPC, you will now be back to your regular contract.</p>
<a href="">Learn More
<span class="action-icon"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
My text does not seem to want to go underneath this portion of text!
http://prntscr.com/1x2zju
No matter how hard we try to get it to go under it, it doesn't go below it.
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
float: left;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
float: auto;
}
HTML:
<div id='post'>
<img class='avatar' src='http://cppsgang.com/images/person.png'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
Thanks!
http://jsfiddle.net/QUFx5/
EDIT WITH WORKING
JSFIDDLE
HTML
<div id='post'>
<img class='avatar' src='http://lorempixel.com/output/people-q-c-35-35-9.jpg'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
CSS
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin: 0;
padding-left: 45px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 5px;
padding-left:45px;
margin:0;
}
I have tried with your jsfiddle.net.
This thing worked for me:
.avatar {
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
}
I have removed float from name and text class. Also, increased the width & height of avatar to 50px each.
The new code I tried which works according to your requirement:
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-top:-15px;
}