I need help. I'm trying to achieve this effect with the headings of a site.
I tried by using background color and padding, but when the text grows in two or more lines it makes a big rectangle. I'm trying to figure out a way to break lines automatically into spans using javascript.
can anyone help me, please?
thanks a lot!
Try this:
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background-color: #c0c;
color: #fff;
display: inline;
padding: 0.45rem;
line-height: 60px;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1 class="padded-multiline">
<span>How do I add padding to subsequent lines of an inline text element?</span>
</h1>
You can achieve it by adding line-height css property.
Here is the sample to achieve
.hero-banner {
background: url("https://www.tributemedia.com/hs-fs/hubfs/Images/Blog%20Images/shutterstock_252081805.jpg?width=2480&name=shutterstock_252081805.jpg");
background-size: cover;
width: 100%;
height: 200px;
padding: 20px;
}
.hero-banner span {
background: #e7415e;
color: #fff;
font-size: 55px;
line-height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="hero-banner">
<span>Join our 2020 Welcome change tour</span>
</div>
</body>
</html>
If you want to achive this with CSS only then you need to set this element display attribute to inline like this:
display: inline;
You can also use the line-height CSS attribute together with the font-size to style the height of this p element (if you're using p for this text).
Make sure that line-height value is significantly bigger than the font-size.
Related
so I do not know why adding padding or even margin is not creating extra space after the text.
Output:
I want space after the Stay Tuned text and I tried adding padding and margin but it still did not work. What seems to be the issue? Any suggestions?
Code of that text:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
background: transparent;
}
.title123 {
font-family: "Montserrat";
text-align: center;
color: #FFF;
letter-spacing: 1px;
}
h23 {
background-image: url(https://media.tenor.com/images/ad3dbde6dd7863faeb8151178df7bc71/tenor.gif);
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 35px;
}
/* styling my button */
<link rel="stylesheet" href="assets/css/text.css">
<div class="title123">
<h23>Stay Tuned!</h23>
</div>
Paddings and margins applies to block elements. You need to make your h23 element a block element - as it is not known HTML element it is rendered as inline by default.
You shouldn't use it at all ...but you can if you really want - just if you need padding or margin make it block or inline-block adding to your CSS a rule like this:
h23 {
display: inline-block;
}
h23 is not a HTML element. The heading tags are h1-h6. If you change it to <h2> it will work. Then you can add a class and target that.
<h2 class="h23">Stay tuned!<h2>
Then in your css file
.h23 {
margin-bottom: 1rem;
}
I'm trying to remove the white space between the iframe and div as I can. Initially there are a huge white space, but after adding in margin: 0px; to my iframe, div, and h1 for my div as well, the white space still remain but become smaller. Anyone know how to remove the strange white space?
iframe {
margin: 0px;
padding: 0px;
}
.footer {
margin: 0px;
padding: 0px;
line-height: 160px;
width: 100%;
color: white;
background-color: black;
}
.footer h1 {
margin: 0px;
padding: 0px;
}
Without seeing any actual code from you I can give my best guess but no promises.
First make sure that the margins on the children are 0. Then set the font size to 0 on the parent, and reset the font size to whatever you want (default = 16px) in the children. This will make the white space have no size.
HTML:
<div id="parent">
<iframe>
<p>Hello World</p>
</div>
CSS:
#parent {
font-size: 0;
}
#parent > * {
margin: 0;
font-size: 16px;
}
But please update the question to include some example code so we can provide a more complete answer.
Use Margin, Padding 0. ex:
margin: 0;
padding: 0;
in CSS. for both div and iframe
I used the following
<body topmargin="0" leftmargin="0" rightmargin="0">
which works only on IE6. I want it to work with firefox and opera.
I attempted the following:
<style type="text/css">
.header {
width: 100%;
background-color: #3B5998;
height: 35px;
margin-top:0;
}
.style1 {
margin-right: 38px;
}
.style2 {
width: 100%;
background-color: #3B5998;
height: 35px;
}
</style>
<div dir="rtl" class="style2" style="width: 100%">
<p align="center"style="width: 92px; height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #EFF1F6;" class="style1"></p>
</div>
</body>
For start you can use:
<body style="margin:0;padding:0">
Once you study a bit about css, you can change it to:
body {margin:0;padding:0}
in your stylesheet.
Html for content, CSS for style
<body style='margin-top:0;margin-left:0;margin-right:0;'>
Yeah a CSS primer will not hurt here so you can do two things:
1 - within the tags of your html you can open a style tag like this:
<style type="text/css">
body {
margin: 0px;
}
/*
* this is the same as writing
* body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
* I'm adding px here for clarity sake but the unit is not really needed if you have 0
* look into em, pt and % for other unit types
* the rules are always clockwise: top, right, bottom, left
*/
</style>
2- the above though will only work on the page you have this code embeded, so if if you wanted to reuse this in 10 files, then you will have to copy it over on all 10 files, and if you wanted to make a change let's say have a margin of 5px instead, you would have to open all those files and make the edit. That's why using an external style sheet is a golden rule in front end coding.
So save the body declaration in a separate file named style.css for example and from your add this to your html instead:
<link rel="stylesheet" type="text/css" href="style.css"/>
Now you can put this in the of all pages that will benefit from these styles and whenever needed to change them you will only need to do so in one place. Hope it helps. Cheers
I hope this will be helpful.. If I understood the problem
html{
background-color:green;
}
body {
position:relative;
left:200px;
background-color:red;
}
div{
position:relative;
left:100px;
width:100px;
height:100px;
background-color:blue;
}
http://jsfiddle.net/6M6ZQ/
<body topmargin="0" leftmargin="0" rightmargin="0">
I'm not sure where you read this, but this is the accepted way of setting CSS styles inline is:
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">
And with a stylesheet:
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
You need to use css. It's how modern web design gets things done.
This is a basic css walk through.
Your html file would be like:
(really simple html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
</body>
<html>
Your css file (mystyle.css) would look like:
body
{
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
Try using CSS.
body {
margin: 0 0 auto 0;
}
The order is clockwise from the top, so top right bottom left.
I would say: (simple zero will work, 0px is a zero ;))
<body style="margin: 0;">
but maybe something overwrites your css. (assigns different style after you ;))
If you use Firefox - check out firebug plugin.
And in Chrome - just right-click on the page and chose "inspect element" in the menu. Find BODY in elements tree and check its properties.
the body element have below styles by default
body {
display: block;
margin: 8px;
}
body: focus {
outline: none;
}
we can override this using
1. inline styles
<body style="margin: 0;">
2. internal styling
<style>
body {
margin: 0;
}
</style>
I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>
Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");