I was doing a challenge on frontendmentor.io and I'm currently stuck on one thing: the styling on a line-break isn't being applied.
I've made a pen on codepen for ease : codepen link
Html code:
<main>
<div class="card">
<img class="card-img" src="./images/image-equilibrium.jpg" alt="blueish-red equilibrium cube">
<div class="card-content">
<h2 class="card-title">Equilibrium #3429</h2>
<p>Our Equilibrium collection promotes balance and calm.</p>
<div class="row card-icons">
<div class="eth row"><img class="eth-icon" alt="ethereum value to purchase item" src="./images/icon-ethereum.svg"><h3 class="icon-text">0.041eth</h3></div>
<div class="days-left row"><img class="clock-icon" alt="days-remaining icon" src="./images/icon-clock.svg"><h3 class="icon-text"> 3 days left</h3></div>
</div>
<hr class="line-break">
<div class="creator row">
<img class="creator-pfp" src="./images/image-avatar.png" alt="Creator profile picture">
<p>Creation of <strong>Jules Wyvern</strong></p>
</div>
</div>
</div>
</main>
css :
/* typography and styling */
h2 {
color: var(--title-color);
font-family: var(--title-font);
font-size: 1.75rem;
}
p {
color: var(--text-color);
font-family: var(--body-font);
font-weight: 300;
font-size: 1.125rem;
line-height: 1.5;
}
.eth .icon-text {
color: var(--text-color-eth);
font-family: var(--body-font);
text-transform: uppercase;
font-weight: 600;
}
.days-left .icon-text {
color: var(--text-color);
font-family: var(--body-font);
font-weight: 300;
}
hr.line-break {
border-top: 1px solid #aaaaea);
}
This is your code:
hr.line-break {
border-top: 1px solid #aaaaea;
}
Delete the )
You can add the styles for line break.
I Noticed that you have added ")" at the end. you have to remove it.
check this image
I don't think hr take in any style.
You can use an empty
<div class='line-break'></div>
instead
Like this
.line-break{
width:100vw;
hight:1px;
border-top: 1px solid #aaaaea;
}
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>
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
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 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>
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>