I am trying to display a text on one line , with a small part of the text in different style.
Here is my code -
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family:Calibri;
display-block:inline;
}
</style>
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
The desired output is
Questions ? Contact us abc#xyz.com Thank you
But the output is shown below.
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
display-block: inline;
}
</style>
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
How can I get the text in one line with a part of the line being in different style
Change the inner div to span
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
display-block: inline;
}
</style>
<div id="footer">Questions? Contact us
<span id="email" style="color:blue; text-algin:center;">abc#xyz.com</span>
Thank you
</div>
Try adding display:inline-block to email.
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
/* display-block: inline; */
}
#email {
display: inline-block;
}
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
BTW, display-block: inline; is not valid CSS property.
Use "display: inline-block" instead of "display-block: inline"
Don't use divs if you want inline elements. Also display-block property doesn't exist in css. Try using <p> elements to wrap the whole text inside your footer and <span> to change the color like this:
<div id="footer">
<p>Black Text <span style="color: blue;"> Blue Text </span> Black Text</p>
</div>
Related
I have an HTML tag like below :
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
I must give style with CSS to this tags without any changing in the HTML tags to make an input like below picture. The id="Code_F" must be converted to an input tag. How can I do this only with CSS ?
The most important thing is that this job must be done without any adding element to the HTML tags or any direct changing in the HTML tags and all the changes must be done with CSS!
Any help will be appriciated!
No, you can use the css content property to generate / replace content like this.
p:after {
content: "lorem";
}
If you want to alter the html, you would have to use javascript.
There is not a way you could programmatically create/delete/replace DOM elements using using HTML/CSS. Such requires Javascript, or creating the elements manually, even the pseudo elementlike after can only do so much since there is no way you could add a working input inside the content property, here is a way you could use in javascript
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a basic input field</p>
<button onclick="myFunction()">create</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "this is a simple input");
document.body.appendChild(x);
}
</script>
</body>
</html>
#Code_G {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #d9d3d3;
text-align: center;
position: relative;
}
#Code_L {
position: absolute;
right: 15px;
top: 16px;
background: #fff;
padding: 0 10px;
color: #000;
}
#Code_F {
min-height: 46px;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 15px 15px 10px 15px;
font-size: 16px;
font-weight: 400;
color: #495057;
text-align: right;
margin-top: 8px;
}
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
You can use fieldset and legend for this purpose.
legend {
text-align:right
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
border:none;
width:100%;
outline:none;
}
fieldset {
border-radius:5px;
width:400px;
}
input::placeholder {
text-align:right
}
<div>
<fieldset>
<legend>editor-field</legend>
<input type="text" id="monster" name="monster" placeholder="editor-field">
</fieldset>
</div>
Currently working on a weather app using bootstrap, and within one row I have two columns: one side shows the temperature, which can be toggled between C and F, and the other shows other basic weather information (right now I just have a basic weather description). But when I toggle the temperature between C and F, the differences in width of those two letters appears to push the weather info slightly to the left or right.
I've tried applying position:absolute/relative and floats to both elements, but can't seem to fix the problem. Any help would be appreciated!
All my code is in Codepen: https://codepen.io/alissaw/pen/pppzwd but here is the element-specific code isolated (#weatherdata is the element that's shifting):
<body>
<div>
<h1 id = "location">
</h1>
</div>
<div class="loader"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="switch">
<input type="checkbox">
<div class="slider">
</div>
<div class="text"></div>
</label>
<p id="temp"></p>
</div>
<div class="col-md-6">
<h2 id="weatherData">
</h2>
</div>
</div>
</div>
--- CSS ---
body{
background-color: #4FCCFF;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
}
.container{
background-color: rgba(0,0,0,0.1);
width: 70%;
margin: auto;
overflow:hidden;
}
#location{
text-align: center;
font-size: 60px;
color: white;
font-family: Raleway;
font-weight: 200;
}
#temp{
font-size: 100px;
font-family: Raleway;
font-weight: 250;
float: left;
color: white;
}
#weatherData{
font-size: 40px;
color: white;
font-family: Raleway;
font-weight: 200;
margin-top: 5%;
display: inline-block;
position: absolute;
}
So in your codepen I noticed that you used bootstrap classes but did not add in the bootstrap CSS file. I added the CSS file in and it seemed to work just fine without the shifting.
From the settings try adding in the bootstrap file:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css
I have a link with main title and description, and I would like to wrap the description line according to the width of the first line. Can I achieve that by using only CSS?
I have following code:
<a href="http://google.com">
<span class="ht">Oficiální stránky</span>
<span class="hb">Podívejte se na oficiální web festivalu</span>
</a>
https://jsfiddle.net/kybernaut/9uh24zns
Desired output:
Note: there will be more links in the line with different width of the first bold title.
Here's sneaky way of achieving this effect.
.limit {
border: 1px solid red;
display: table;
width: 1%;
}
.ht {
color: black;
font-size: 24px;
font-weight: bold;
white-space: nowrap; /* stop text wrapping */
}
.hb {
color: #555;
font-size: 18px;
display: block;
}
<a href="http://google.com" class="limit">
<span class="ht">Oficiální stránky</span>
<span class="hb">Podívejte se na oficiální web festivalu</span>
</a>
You could try the CSS table + table-caption solution.
.container {
display: table;
}
.hb {
display: table-caption;
caption-side: bottom;
}
<a class="container" href="#">
<span class="ht">FIRST LINE</span>
<span class="hb">second line some example content here</span>
</a>
jsFiddle
You may use
word-wrap property but None of the major browsers support the text-wrap property.
.ht {
color: black;
font-size: 24px;
font-weight: bold;
display: block;
}
.hb {
color: #555;
font-size: 18px
}
#wrapDiv{
width: 190px;
word-wrap: normal
}
<div id="wrapDiv">
<a href="http://google.com">
<span class="ht">Oficiální stránky</span>
<span class="hb" >Podívejte se na oficiální web festivalu</span>
</a>
</div>
You can also refer, it's same as How to word wrap text in HTML?
Actual webpage
I'm trying to display code snippets on my webpage. I'm a CSS novice and having trouble creating a dark background on which to display my code snippets.
When I create a class called "test" (which should override all other background specifications, right?) and assign it a color property of blue and a background property of black, the color blue shows up within pre tags but the background remains the default color.
When I switch to span tags and assign the class there instead, both properties work as I command. But I don't want to use span because my instructors say non-semantic tags are bad practice. Something tells me that there's some inherent property of pre tags that I need to override somehow.
Any ideas? I can post the code here if that's proper/necessary.
Edit: I posted an abbreviated version of the code here. I tested it, and got the same issue here. Hopefully with less code it will be easier to pinpoint the problem.
Here's the HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
Now the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
The more specific the rule, the more likely it will be to override a parent class or id. Give this one a shot...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
have you tried with background-color property of pre tag?
Please check my codepen link. http://codepen.io/anon/pen/gaydao
HTML:
<body>
<p>
<pre>test</pre>
</p>
</body>
CSS:
.test {
color: red;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
border: 1px solid #000;
height: 50px;
background-color:#DDFFDD;
padding: 10px 0 0 10px;
}
you have to use !important on your class because it's already defined the color property in another class...
.code{
background-color: #000 !important;
}
.box{
width: 250px;
height: 20xp;
background-color: red;
display: inline-block;
margin: 5px;
}
.code{
background-color: #000 !important;
}
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box no_code"> </div>
HTML example:
<span>line1</span>
<div id="div1" class="no-underline">
<div id="div2" class="no-underline">subline1</div>
<div>subline2</div>
</div>
body {
font-family: Arial;
font-size: 8px;
color: rgb(255, 0, 85);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
#div1 {
color: black !important;
}
#div2 {
color: green;
}
.no-underline {
text-decoration:none !important;
}
The result is :
line1: red and underlined
subline1: green and underlined
subline2: black and underlined
Demo here
I want subline1 and subline2 not underlined. But body's style should stay at my case.
How is this possible?
First I would recommend to avoid using inline Css and !important, that's a bad practice and will make your code very hard to modify later.
one solution would be to put your text decoration on the span:
<span style ="text-decoration: underline;">
line1
</span>
You can get rid of text-decoration set on an ancestor using
display: inline-block;
Since in your case your elements are blocks, you may also want
width: 100%;
to make them more block-like.
Demo
Here you go! http://jsfiddle.net/41ragvd2/
<body style="font-family: Arial; font-size: 8px; color: rgb(255, 0, 85); font-weight: bold; font-style: italic;" >
<span style="text-decoration: underline;">
line1
</span>
<div style="color:black; !important;">
<div style="color:green; !important;">
subline1
</div>
<div>
subline2
</div
</div>
</body>