I'm a beginner at CSS and HTML and can't figure this out. I've tried using max-height, line height and line-clamp Nothing works.
HTML code:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet home.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="height: 500px">
<p>Welcome to the FIFA tournament creator</p>
Get Started
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
div
{
}
#div1
{
background-image: url(../Images/div1.png);
min-height: 440px;
font-size: 35px;
font-family: molengo, sans-serif;
font-weight: 600;
font-variant: normal;
font-style: normal;
color: #FFFFFF;
}
.btn {
background: #CCC;
color: #FFF;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
font-family: Arial, sans-serif;
padding: 0 3em;
text-decoration: none;
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
height: 50px;
width: 50px;
-webkit-line-clamp: 1;
line-height: 1;
text-align: left;
}
.blue.btn {
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
}
.btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
.btn:active {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(0,0,0,0.3);
}
Your problem is that you are getting the majority of your width from padding. Padding is exactly what it sounds like - internal empty space that is used to frame the element.
This is not to be confused with margin which is empty space around the element.
To fix your problem, you need to get usable width, as defined by the width element. This is currently set to 50px, which is not big enough for your text. In fact, the only reason you even see the entire word "started" is because you don't have the overflow property set.
Simply remove the width:50px from your button or set it to auto and it will work. I also changed your button's padding to maintain the original size. You can also remove the height value and replace it with vertical padding to center your text:
padding: 10px 1em;
height: 50px;
width: 50px;
JSFiddle
Remove width: 50px to make it works. Your button's width is to short.
Demo http://jsfiddle.net/MgvPB/
Related
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;
}
I am trying to center an h1 tag, but it doesn't work when I set it's width. When I don't set a specific width it works, but I would like to keep the width at 400. My code is below.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul {
margin: 0;
color: white;
background-color: black;
overflow: hidden;
-webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}
a {
color: white;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background-color: black;
transition: 1s;
border: solid 1px transparent;
}
li:hover, li:hover a {
background-color: #3f3f3f;
}
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<strong><li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li></strong>
</ul>
</div>
<strong><h1 class="header-text">DARK</h1></strong>
</body>
</html>
I don't think the other elements are the problem, but hey, it's a possibility.
The h1-element is a block-element. This means that the width is 100% by default. By using text-align: center you only center the text inside the element, not the h1 itself.
When you set the width to 400px the text is still centered inside the block, but the element itself no longer has a full-width.
The solution would be to center the element as a whole. This can be done by setting the horizontal margin to auto.
This should work for you:
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
margin: 0 auto;
}
<h1 class="header-text">DARK</h1>
For more information about centering with CSS, check out this guide: https://css-tricks.com/centering-css-complete-guide/
If you're trying to center the entire element, you can use the auto value for the left and right margin on the header:
.header-text {
margin: 0 auto;
}
Note: This question is similar to this question; however, it is different and thus is being asked as a separate question to the one just linked.
I am trying to create a flat long shadow in CSS for the text in a logo. The original way I found to do it is based on Matt Lambert's tutorial. The way Matt proposes to do it would require a lot of CSS (although, kudos to him, it does work and goodness knows I didn't figure that out). So thus that led me to ask for a way to do that with less CSS. #vals figured out how to do that with this.
Now I'm attempting to make a flat-long-shadow (does anyone have a shorter abbreviation for this? how about the acronym: "FLS?") for the text of a logo (i.e. this); however, it isn't going so well...
As you can see from this fiddle I made, I sort of combine the two techniques... but, while it's not atrocious, it doesn't work perfectly...
Here is the same fiddle in a snippet:
/* shadow color: #2d5986 */
html, body {
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
div {
min-height: 128px;
min-width: 128px;
background-color: #369;
color: white;
font-size: 4em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
span {
/* background-color: #47a; */
position: relative;
text-align: center;
text-shadow: #2d5986 1px 1px,
#2d5986 2px 2px,
#2d5986 3px 3px,
#2d5986 4px 4px,
#2d5986 5px 5px,
#2d5986 6px 6px,
#2d5986 7px 7px,
#2d5986 8px 8px,
#2d5986 9px 9px,
#2d5986 10px 10px,
#2d5986 11px 11px,
#2d5986 12px 12px,
#2d5986 13px 13px,
#2d5986 14px 14px;
}
.shadow:before, .shadow:after {
content: "";
position: absolute;
right: 0px;
bottom: 15px;
z-index: 1;
transform-origin: bottom right;
}
.shadow:before {
height: 40px; /* increased height */
width: 100%;
left: 0px;
transform: skewX(45deg);
box-shadow: 1px 40px 0px 0px #2d5986; /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
width: 10px; increased width
height: 100%;
top: 25px;
transform: skewY(45deg);
box-shadow: 10px 0px #2d5986;
} */
<div>
<span class="shadow">
A
</span>
</div>
<div>
<span class="shadow">
a
</span>
<span class="shadow">
b
</span>
</div>
<div>
<span class="shadow">
A B
</span>
</div>
<div>
<span class="shadow">
A B C
</span>
</div>
The main problem is the fact that we are now working with text-shadow instead of box-shadow, and as such the :before and :after pseudo classes don't work (although I attempted to make them work by attaching them to the <span>... and then made the width: 100%).
If there was a way to set the width and height of the text-shadow itself (which is achieved on a box-shadow by using the :before and :after pseudo classes), I feel this would be a piece of cake; however, all my research has not found how to do this for a text-shadow.
Does anyone know a way to make a flat long shadow for text with minimal CSS - potentially by somehow changing the width and height of the text-shadow?
Thank you.
Though this is no css-only answer, you might give it a try.
Basically, you create the according css in the browser via a short javascript snippet. The upside is, that it makes you very flexible - changing only two parameters instead of several tens of lines of css.
function addDropShadow(element,width,color){
let css = "";
for (var i = 1;i<width;i++){
css += `${color} ${i}px ${i}px,`;
}
css += `${color} ${width}px ${width}px`;
element && (element.style.textShadow = css);
}
let element = document.querySelector(".icon");
let color = "rgb(18, 128, 106)";
addDropShadow(element,15,color);
.container { padding: 50px; background: rgb(34,45,58); } .icon { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px;width: 150px; font-size: 75px;line-height: 150px; text-align: center; display: block; overflow: hidden; }
<div class="container"><div class="icon">YO</div></div>
I don't think there is a good CSS only approach.
The only posibility that I can think of is creating pseudos with the same text as the base, and use to reduce the amount of shadows to one third:
Notice that the pseudo itself counts as a shadow because it has the color changed to the color of the shadow
.sample {
font-size: 70px;
position: relative;
text-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red,
6px 6px red, 7px 7px red, 8px 8px red, 9px 9px red;
}
.sample:after, .sample:before {
content: attr(data-text);
z-index: -1;
color: red;
position: absolute;
}
.sample:after {
left: 10px;
top: 10px;
}
.sample:before {
left: 20px;
top: 20px;
}
<div class="sample" data-text="Sample">Sample</div>
I have a very basic web page using the below code.
The title block is allowing scrolling which I do not want.
I'm certain it will be my poor HTML code. Could anyone point out what is wrong causing the scroll?
The code is actually being used inside tasker for android inside a scene web elemen .
<!--full page style--!>
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
</body>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
<h1 class="otto">Enter fuel fill up date</h1>
</head>
</html>
Caution : If you use height: 100%; or width: 100%; (and you should définitely avoid using this one, blocks are automatically taking all the horizontal space they can), don't use padding.
Padding and borders aren't part of specified width and height, so your h1 is actually 100% + 20px height.
Example with width : http://codepen.io/Manumanu/pen/ryhaC
This is why you get the scroll : You use height + padding + margin (h1 has automatic margins), so it's definitely taller than the view.
You should also apply your background to body, it has no sense on h1.
So, your code should be like this :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
}
.otto {
text-align: center;
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
But now this point is set, what were you trying to do ? Viewing your initial code, didn't you try to vertically align your h1 in the view ?
If so, this is how you go for it :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
background: #03a9f4;
text-align: center;
}
.otto {
font: bold 20px Roboto;
margin: 0;
line-height: 1.5em;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.strut, .otto {
display: inline-block;
vertical-align: middle;
}
.strut {
height: 100%;
}
</style>
</head>
<body>
<div class="strut"></div><!--
--><h1 class="otto">Enter fuell fill up date</h1>
</body>
</html>
Tell me if explanations are needed about this.
I just tidied it up! try this: everything is fine.
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)
}
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
There are some errors in the HTML that you would want to fix first. The browser will do its best to try to show the page anyway, but it was most likely causing the browser to work in quirks mode, which is basically to try to be compatible with the oldest browser imaginable.
You have a comment with the wrong ending delimiter --!> instead of -->
You have the body element inside the head element
If you fix that you end up with this code:
<html>
<head>
<style type="text/css">
.otto {
text-align: center;
font: bold 20px Roboto;
padding: 10px 0;
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
</style>
</head>
<!--full page style-->
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
<h1 class="otto">Enter fuel fill up date</h1>
</body>
</html>
You might want to put the style for the body tag in the style sheet also, but that is just to make the code nicer to work with.
I have submit buttons or normal buttons of varying width depending upon their values wrapped inside fixed divs. Now the buttons won't center inside the div even after having margin: 0 auto; and display:block; because of the missing width property. How to have them centered without explicitly setting the width for each button ?
input[type="submit"], .button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
cursor: pointer;
margin: 0 auto !important;
clear: both;
padding: 5px 7px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
Set the input[type="submit"], .button {}
to display: inline-block;. Then set the parent div to text-align: center;.
Buttons are inline elements. Is the display:block necessary for other reasons or does anything speak against generally centering all text/inline-elements within the div?
If not, you could assign text-align:center to the div instead and remove display:block from the button.
As a side note, your current style centers the button in FF12. What browser are you using? Edit: Also works in IE9 (jsfiddle).
http://jsfiddle.net/gSaBj/1/
check out this url....