Why cant I wrap image around text (put image behind text)?
Css code:
.wrap5{
background-image: url ('https://upload.wikimedia.org/wikipedia/commons/e/e3/Alto%27s_Adventure_animation_-_01_Chasm.gif');
}
Html code:
<div class = "wrap5">
<br><br>
<center><h1 style = "color: blue; font-family: monsterrat; letter-spacing: 1px; font-weight: 900;">Are you willing to go on the best journey?</h1></center>
<br><br><br><br>
<center>
<button class = "but" style = "float: center" onclick = "document.getElementById('modal-wrapper2').style.display='block'">Get Started</button>
</center>
<br><br>
<hr>
</div>
Remove the white-space between url and the opening bracket:
.wrap5{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/e3/Alto%27s_Adventure_animation_-_01_Chasm.gif');
}
Related
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
I need to target the content of the span but not nested h1 content
Does anyone has an idea of how is that possible?
-down is a simple example:
Thanks
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
If you want to select with CSS, use h1 span {} like this:
h1 span {
color: blue;
font-size: 20px;
}
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
With javascript, I guess you have to add an ID to your span tag. I don't know any other way of doing it. Here is the code to show:
document.getElementById("h1span").style.color = "blue";
document.getElementById("h1span").style.fontSize = "20px";
<html>
<div>
<h1>MainTitle <span id="h1span">SubTitle </span> </h1>
</div>
</html>
I have a jumbotron, which has a placeholder on top to handle errors on the page. The error has a <p> tag with its own class, and I want to modify the size of the element. However, the in-built paragraph styles of the jumbotron (Bootstrap) seem to override whatever I've set. I don't want to change the global <p> size, just of this particular element.
HTML:
<div class='jumbotron'>
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span>
<p class = "error-message"> Sign-Up Error </p>
</div>
CSS:
#landing-page-error {
width: 100%;
position: absolute;
top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
height: 10%;
}
.error-message {
font-size: 10px;
}
It's a Rails app, and here's a screenshot of the CSS inside the browser -
Please help me set the size of the <p> tag specifically for the error element. Thank you in advance.
.jumbotron .error-message {
font-size: 14px;
}
if this doesn't work, then try this:
.jumbotron p.error-message {
font-size: 14px;
}
it will effect all the error-messages inside jumbotron without affecting other <p> tags inside your page.
Nothing Problem just close the Div class before P tag
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span> </div>
<p class = "error-message"> Sign-Up Error </p>
How can I add a hover effect to the img after mouse is over link Text using CSS?
<div class="myTextContainer">
<p>
<a href="#">
<img height="128" width="128" title="icon1" alt="icon1" src="icon1.png" ">
</a>
</p>
<h2>
Text
</h2>
</div>
Try adding some JavaScript. In my case i added html attribute onmouseover and onmouseleave to call a javascript function. fun1 on hover and fun 2 onleave. I added id hover on my image and i said on each function to get the element of the id hover which is my image and change the backgroundColor='blue'. On hover i set it to blue and onleave i set it to red. You can change other elements like the src by doing style.src='here/put/the/image/source/img.png' and add different src on hover or leave. If you need more info leave a comment. Did this help?
function fun1(){
document.getElementById("hover").style.backgroundColor='blue';
}
function fun2(){
document.getElementById("hover").style.backgroundColor='red';
}
#hover{
background-color:red;
}
<div class="myTextContainer">
<a href="#">
<img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
</a>
<h2>
Text
</h2>
</div>
-------- Or by doing this without script tag or file --------
#hover{
background-color:red;
}
<div class="myTextContainer">
<p>
<a href="#">
<img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
</a>
</p>
<h2>
Text
</h2>
</div>
Change your HTML markup and put both, icon and text into one link.
<h2>
<a>
<img ...>
TEXT
</a>
</h2>
Than you can use simply
a:hover {color: red;} /* red text 'TEXT' */
a:hover img {border: 1px solid green}
Since h2 and p are siblings but you want to add hover on h2 img which is before p, you cannot do it with CSS. You need javascript:
document.querySelectorAll('a')[1].addEventListener('mouseover', fn, false);
document.querySelectorAll('a')[1].addEventListener('mouseout', fn2, false);
function fn(e) {
if(e.target.innerHTML == 'Text') {
document.querySelector('img[src="icon1.png"]').className = 'hover';
}
}
function fn2(e) {
if(e.target.innerHTML == 'Text') {
document.querySelector('img[src="icon.png"]').className = '';
}
}
you could declare:
.myTextContainer a:hover img {
// your CSS
}
Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector,
#trends .profileLinks a:link
will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:
#trends a.profileLinks:link
Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.