Basically I want the headers to float aligned to the text but for some reason it's not working??
http://gyazo.com/670047956db62243c980124917102de7
My css
h1 {
font-size: 35px;
padding: 35px;
margin-top: 60px;
text-align: left;
}
Thanks!
First I'd try to remove the padding: 35px; and see how it looks (since it applies to all directions). To skip the left direction simply do padding: 35px 0px or padding: 35px 35px 35px 0px.
Secondly, the indent might come from a different style. To investigate further simply use the Inspect element option that comes built in on every modern browser. (You can access it by right clicking the element, or by pressing Ctrl+Shift+I).
Related
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.
Take a look at this image:
The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.
HTML:
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS:
input, div {
font-family: cursive;
font-size: 2em;
padding: 15px 20px;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
}
div {
background-color: white;
}
Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx
What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.
It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!
input {
font-family: cursive;
font-size: 2em;
padding: 15px 20px 15px 0;
font-style:italic;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
text-indent: 20px;
}
https://jsfiddle.net/will0220/pxrs321f/3/
An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.
A workaround would be to add text-indent and decrease padding-left:
text-indent: 5px;
padding-left: 15px; /* Originally 20px */
You can see it in a fiddle over here.
You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.
Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size.
I'm thinking of having a horizontal form with labels and textboxs and submit button having a text size of 72px.
Is there anywhere I can get more information on how to scale everything accordingly or can anyone give me some tips?
What I was trying is:
input.real-large-input {
font-size: 24px;
padding: 14px 24px;
width:270px;
line-height:46px;
}
label.real-large-label {
font-size: 24px;
line-height:46px;
font-weight:bold;
}
.real-large-btn {
font-size: 24px;
padding: 14px 24px;
}
But the line-height and padding are really just kind of made up, I don't know what values to use to keep it all to scale with the original. Actually quite confused by the original bootstrap CSS as it has something like 14px font-size, padding of 4px for top and bottom, but a line-height of 20px, doesn't add up.
The above works sort of fine at these values, but the issue is I want to scale much larger than this but it all gets really messy as I don't know what values I should be putting for padding and line-height when font-size is 72px.
Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large:
http://jsfiddle.net/fpC4r/3/show/
.form-large{
font-size: 60px;
}
.form-large .control-label{
padding-top: 20px;
padding-bottom: 20px;
line-height: normal;
}
.form-large input, .form-large button{
font-size: 60px;
padding: 20px;
height: auto;
line-height: normal;
}
I'm trying to create a styled button that has a single character centred inside it.
I'm using "border-image" and "border-width" to create a button that I could stretch to larger content (that ability has been lost in this simplified scenario...).
My problem is this: when the button is small (specifically, when the button is little more than 2*border-width), the content is not centred. I've tried 'conventional' techniques like margin: 0 auto; but don't seem to be having any joy. Using a dumb-button class without these border properties I can get what I want (see below)
This neatly demonstrates the problem. I would like the characters centred in the styled buttons:
http://jsfiddle.net/rjmLy/
(works in Chrome/Safari, and this is targeting Webkit only)
(example of the themed button from http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo)
My CSS is as follows:
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 28px;
}
.centerme {
position:relative;
margin:0 auto;
}
.dumb-button {
font-size: 16px;
height: 37px;
line-height: 37px;
text-align: center;
width: 28px;
background-color: red;
margin: 0 auto;
}
The HTML looks like this. The centerme class was an attempt to try centring a new div on top of the old shape. It doesn't work for me. The dumb-button versions look correct (but dull...)
<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>
<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>
Any help would be greatly appreciated.
You're building the button with a CSS3 Sprite and a border-image attribute where the start of the left side of the button is 14px wide and the start of the right side of the button is 14px wide.
In your CSS you set the width of the button to 28px: The problem is that this leaves no room for any text that you put in the middle of the button and therefore the letter is overlapping onto part of the border-image.
In order to fix this you could simply increase the width of the button to about 42px or larger.
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 42px;
}
Here's a working fiddle: http://jsfiddle.net/QYrzS/
But, if you really want to keep the images that small - things are a little more difficult. One option is wrapping the content of each button (the single letter) in a <div> and then manually setting the margin for each. For example:
HTML
<div class="fancy-button"><div class="centerme">W</div></div>
CSS
.centerme {
margin-left:-7px;
}
This is kind of hacky and will need to be manually adjusted (since each letter is a different width).
Here's a working demo: http://jsfiddle.net/rjmLy/
Notice that the letter i is not centered. You would need to specify the correct margin for the individual <div> that holds that letter in order to fix that.