Apparently the text is positioned to the right and I do not know why. Earlier the header was working but now it does not.
.news-box {
background: black;
width: 500px;
height: 450px;
top: 50%;
left: 20%;
transform: translate(20%, 50%);
border-radius: 20px;
box-shadow: 2px 5px 8px 10px rgb(0,0,0,0.5);
}
.news-box > h2 {
color: white;
text-align: center;
padding-top: 10px;
text-transform: uppercase;
-webkit-text-stroke: 0.5px rgb(0,0,0,1);
text-shadow: 2px 2px 4px rgb(0,0,0,0.8);
}
Since i don't have the full code (including html), i can only suggest to put the text inside a <span>text</span> and use styling of float:left (for example).
Another option would be to put it inside a <span> or a <div> and set "text-align:left/right" (whatever works for you)
Related
I am not able to make a shadow gradient background for one image described in the following snippet. I have tried various solutions but couldn't make it to work. The image gets cut off from bottom.
.circle {
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
Please check out the below solution. I hope this helps.
.circle {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
Please let me know if this helps.
Here's my take on your problem, i'm not sure what you wanted it to look like but this solution doesn't make the "x2" appear outside.
You need to wrap your image in a div bigger than the image if you want a circle border to contain the whole image. Adding border-radius basically makes a square border smaller, therefore covering your image.
.circle-border {
text-align: center;
width: 450px;
height: 430px;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
</div>
.circle-border {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
I'm trying to increase the size of this textarea evenly. But when I change it from 100% width to higher than that, it increases only to the right. I tried margin auto and display block but doesnt work.
Here is my css:
textarea[form="chform"] {
width: 100%;
height: 230px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: grey;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
margin-top: 10px;
resize:none;
}
.profile__form{
padding: 15px;
margin: auto;
border-radius: 50%;
}
.profile_container {
width: 400px;
margin: 120px auto 120px;
/*background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), #f0f0f0, rgba(223,190,106,0.7));*/
padding: 0 20px 20px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.075);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
text-align: center;
}
jade:
extends layout
block content
body(style='background-color:black')
link(href='http://fonts.googleapis.com/css?family=Great+Vibes', rel='stylesheet', type='text/css')
div.right
if(user)
a Welcome #{user.name}
|  
a(href='/main') Home
|  
a(href='/profile') Profile
|  
a(href='/logout') Logout
else
a(href='/main') Home
|  
a(href='/register') Register
|  
a(href='/login') Login
div.profile_container
form.profile__form(role='form', action="/add-chapters",id="chform" method="post", style='max-width: 800px;')
.profile__form-heading Add Chapter
input.form-control(type='number', min="1" name="chapterNumber", id="inputChapterNumber" placeholder='Chapter Number')
br
input.form-control(type='text', name="chapterTitle", id="inputChapterTitle", placeholder='Title')
textarea(name='chapterStory', cols='30', rows='5', form="chform", placeholder="Enter Story")
br
button.chform(type='submit') Save
HERE IS IMAGE of what I see so far after increasing width. I just want a bigger textarea and centered:
https://i.stack.imgur.com/xSBdL.jpg
Edit: ok added parent css
IMAGE NOW FIXED:
https://i.stack.imgur.com/dbtiY.jpg
So I fixed it by increasing width of parent container the profile form and profile container. Then position relative, display block, and margin auto. Simple!
textarea[form="chform"] {
width: 70%;
height: 500px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: grey;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
resize:none;
position: relative;
display:block;
margin:auto;
margin-top: 10px;
}
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
This is what I have:
However, I want the shadow below the text to not appear on top of the border. I can get this effect when my 'position' of the heading is set to anything other than "absolute" or "fixed", but I lose flexiblity in animation... which is what I want to do later.
here is my code:
.feature {
height: 300px;
width: 100%;
background-image: url("http://conceptartworld.com/wp-content/uploads/2013/06/The_Last_of_Us_Concept_Art_Crows_JS-01.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
border-bottom: solid 5px #FFFFFF;
box-shadow: 0 2px 10px #333;
}
.feature h1 {
position: fixed;
font-size: 120px;
vertical-align: text-bottom;
color: #FFFFFF;
margin-left: 50px;
font-family: "oswald", sans-serif;
font-weight: 400;
text-transform: uppercase;
text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
transition: margin 0.5s;
}
#moral {
margin-top: 160px;
}
#studios {
margin-top: 160px;
margin-left: 400px;
}
also... my vertical align text-bottom isn't working...that is why I use the top margin.. can anyone tell me why?
Arman
I think you can't make this effect without making the border line a independent element.
Implement it as an <hr/> and set it z-index greater than the text.
I'm trying to get a border to surround the entire body of my page, but when I add the border property it only goes about halfway down the page, stopping about 20px under the content. The messenger isn't allowing me to post the html without adding extensive comments. This is the CSS. Thank you.
body {
border: green dotted 2px;
}
h2 {
font-size: 2em;
font-style: italic;
text-align: center;
border: 2px outset green;
border-radius: 25px 10px 25px 10px;
padding: 5px;
width: 350px;
margin: 0 auto;
margin-top: 50px;
}
p {
color: black;
text-align: center;
background-color:
}
img {
width: 95px;
}
#treelink {
width: 120px;
border: outset green 2px;
padding: 5px;
box-shadow: 5px 5px 4px green;
}
I just tested it out on jsfiddle, and I believe that you have to add this.
html, body {
width: 100%;
height: 100%;
}
I'm guessing it's because the body is dynamically sized depending on what's inside it, unless you specify in the css. Same with the html; you need to specify the hmtl as width: 100% and height: 100% so the html itself is as large as the entire page.