When I change the size of a font in CSS, how do I make it so no matter what size the font is (from 12px to 200px), that the "Cap Height" (pic) of the text will always 'visually' have 10px padding on top?
Otherwise what I'm doing is every time I change the font size, I have to go back and reposition the top/margin-top etc.
Here's what I have:
CSS:
#header .statement {
position: relative;
background: white;
padding-top: 10px;
display: inline;
float: left;
margin-left: 0;
margin-right: 0;
width: 960px;
}
#header .statement h3 {
position: relative;
font-size: 160px;
letter-spacing: -10px;
font-weight: bold;
color: #141414;
font-family: Helvetica, sans-serif;
text-align: center;
}
HTML sample:
<div id='header'>
<div class='intro'>
Stuff before the statement
</div>
<div class='statement'>
<h3>
<p>A Statement</p>
</h3>
<div class='large_spacer'></div>
</div>
<div class='clearfix'></div>
</div>
This is what it looks like with line-height: 0:
alt text http://ilove4d.com/ex/css-typography.png
This is with line-height: 1:
alt text http://ilove4d.com/ex/css-typography-2.png
If I change the font-size from 160px to 20px, the white space proportionally gets smaller... How do I get around that?
Note: it's adding like 20px extra whitespace, even if margin:0;padding:0;...
If you really mean "on top" of the cap height, and not somehow inside the cap height margin, then you can apply the CSS padding to either the font element or its parent container:
<span class="something">Web Typography</span>
span.something {padding-top: 10px;}
OR...
<div class="something"><span>Web Typography</span></div>
.something {padding-top: 10px;}
One of the approaches will be suitable depending on what other styles you are applying.
Try adding padding-top:10px to #header .statement h3 {}
edit:
did you reset the values for #header .statement h3 p {}?
Otherwise what I'm doing is every time
I change the font size, I have to go
back and reposition the top/margin-top
etc.
Why don't you set bottom and margin-bottom of the elements above and below that text instead? In this way, you won't have to modify the text styling, the gap will be there always.
Also why in the world, you can touch a font-size of more than 36px? In any case, you could also use the line-height style for that like line-height:30px; or whatever value.
Related
I'm working on a project where there is a row of controls, each of which is a button element. There is content inside of the buttons, and they are laid out in a row with flexbox. The button element centers its content vertically, and I can't figure out how to override it to vertically align it at the top of the button. The controls all need to be the same height and same width, and clicking anywhere in the borders must count as a click on the button.
This Codepen shows the problem clearly: http://codepen.io/anon/pen/RPpqdz
.wrapper {
display: flex;
flex-direction: row;
width: 80%;
}
button,
.object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
flex: 1;
border: 1px solid red;
text-align: left;
}
<h1>What it looks like</h1>
<div class="wrapper">
<button>I am Content</button>
<button>I am Much Longer Content That Goes Here and Here</button>
<button>I am Content</button>
</div>
<h1>What I want it to look like</h1>
<div class="wrapper">
<div class="object">I am Content</div>
<div class="object">I am Much Longer Content That Goes Here and Here</div>
<div class="object">I am Content</div>
</div>
I realize this issue could be solved by not using button elements, but I also feel like I SHOULD be able to override this behavior of button elements. I'd like to figure this out for my own sanity!
Firstly, having h2 and p inside button is not valid HTML.
Secondly, there is no simple way to control the position of elements in a button, especially vertically.
But if you really really must use this BROKEN HTML, and only the top alignment is important, you can force the elements to take up fixed heights so that the button will align them at the top, like so:
button > h2 {
height: 48px;
}
button > p {
height: 16px;
}
I must say this is still not exactly the same as using <div>, so I don't know if this is sufficient.
In any case, do seriously try to convince those in charge of the "larger context of the project" to use proper valid HTML.
Edit:
If only inline elements are used inside the button, the problem becomes more manageable. The only caveat is: you need to know beforehand the height of the button. You can then simulate top-bottom flow using paddings.
button {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5em; /* make sure bottom + top padding == height */
padding-left: 1em;
height: 6em;
}
Still probably not ideal - feels like a heavily plastered hack solution.
*I'm not sure what do you want and what do you mean by "how to override it to vertically align it at the top of the button?"? but I hope this code is what you want.(same height, width and even with spaces also buttons matching with div (.objects).
.wrapper {
display: inline-flex;
display: -moz-inline-box;
width: 90%;
}
button, .object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
border: 1px solid red;
text-align: left;
margin: 0em 0.3em 0em 0em;
}
Alright, so I'm trying to make a line of different text bits in html/css. This will be the precursor for a navbar. My HTML is:
<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>
and the CSS:
.navBartext{
text-align: center;
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
}
Now, when I take the "display: inline;" out of the code, the text aligns vertically instead of horizontally, and then I can use text align to position it, but I want them all in one line. When I use display-inline though it seems to completely circumvent the text-align function (as anything put in here will be ignored). Is there something I'm missing? Perhaps I just don't know enough about the display function.
If you want to align the words horizontally, you have to use display:inline-block; so that the elements will be treated as text. Always use inline-block for the child elements and text-align:center; for the parent.
p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
text-align:center;
}
VIEW DEMO
Try this, you can use <ul> element instead of div, div is better as a wrapper if u need wrap navBar:
[http://jsfiddle.net/WT7qv][1]
http://jsfiddle.net/WT7qv
I am new to css and need your guidance. I have a an image background and 2 test lines needs to be placed in that.The top distance between text and image top border should be 50 px. Below to this text there is another text. The distance between these 2 text is 10px. And the distance between the second text(lower text) and the lower end of the image should be 40 px.
I have come up with the below code. Do I need to hardcode height for the first class to be 100px? If I do that the two text becomes too congested. Please let me know if the below code is correct
HMTL
<div class="header1">
<div class="header2" >
The first text goes here
</div>
<div class ="header3">
The second small tesxt goes here
</div>
</div>
CSS
.header1{
display: block;
background-image: url("1.jpg");
background-repeat:no-repeat;
}
.header2{
font-family: Arial;
font-size:42px;
color:#FFFFFF;
height:50px;
margin-top:50px;
margin-left: 170px;
margin-bottom:10px;
}
.header3{
font-family: Arial;
font-size:16px;
color:#FFFFFF;
height:40px;
margin-left: 170px;
margin-top:10px;
margin-bottom:40px;
}
There shouldn't be any need to hardcode heights, or indeed use any heights here, if the content is more important than having the header exactly 100px tall.
Take a look at this fiddle, which uses the CSS below. I think this meets your requirements: http://jsfiddle.net/2LetS/4/
body { color: #ffffff; font-family: Arial; font-size: 16px; }
.header1 {
background: #ff0000; /* Replace this with your image. */
padding: 50px 0 40px 170px;
}
.header2 {
margin: 0 0 10px 0;
font-size: 42px;
}
50px between top of header and first text
10px between first and second text
40px between second text and bottom of header
Note in the example I'm using padding on the .header1 element to define the space around the text, and margins to separate the text elements themselves. You'll also notice there's a lot less CSS code to achieve the same thing.
For your personal development, I think getting an idea of the box model, and what effects margin, padding, widths and heights have on block and inline elements will improve your knowledge immensely for the future.
Hope that helps!
You code is good, you juste need to add this line :
.header1 {
overflow: hidden;
}
Note : .header3 { margin-top:10px; } isn't required, you already fixed this margin on .header2
JsFiddle
According to standards.... For Headings & Sub Headings use H1, H2, H3 Heading tags & define separate styles in css
<div class="header1">
<h1 class="header2" >
The first text goes here
</h1>
<h3 class ="header3">
The second small text goes here
</h3>
</div>
There is no need to define div with class header1 as block as div is already a block level element.
Use % and em as unit of measurements for responsive design.
Always use fallback fonts for font-family property
Try to use shorthand notation for padding, margin, background, border etc.
padding: top right bottom right;
margin: top right bottom right;
background: image_url color repeat-yes/no position;
I have the following code, and my table(the table contains the two text lines next to the image) just does not want to align vertically in the middle of the div. What to do?
Please note that I used a table for my two text lines(laminin beauty and perfectly put together), since they have different styles and I want them justified, so I put align= center on their td tags... (justify text property only works when text is in the same tag...) . My website: http://lamininbeauty.co.za/index2.html
HTML:
<div id="header">
<img class="massage" src="images/massage.png" border="none" alt="face massage" />
<div class="headerDiv">
<table margin="0" padding="0">
<tr><td align="center" class="headerText1">Laminin Beauty</td></tr>
<tr><td align="center" class="headerText2">"Perfectly put together"</td></tr>
</table>
</div>
</div>
CSS:
#header{
width: 100%;
height: 100px;
background: #000000;
}
#header img{
margin-left: 50px;
vertical-align: middle;
display: inline-block;
float: left;
}
#header div.headerDiv{
display: table-cell;
margin-left: 80px;
vertical-align: middle;
}
.headerText1{
color: #fff;
font-family: impact;
font-size: 32px;
text-decoration: underline;
}
.headerText2{
color: #ee00ee;
font-family: century gothic;
font-size: 24px;
}
Thank You!
Make the div containing the table have a fixed height of 100px, since that's the height of your Wrapper div. Then, make the height of the table 100%. Here's a screenshot of what it did for me, not entirely sure if this is what you want: http://screencast.com/t/cbwcBbAoM3cZ
If the main header div will always be 100px high, remove the display property from the headerDiv element and add margin-top: 12px;.
Also it should have display: inline-block added and possibly the left margin decreased to compensate. The display property alteration will make it push off the image, not the left side of the document, as it should.
Also, if you want the two pieces of text to be aligned on the left, add text-align: left to the table tag.
I was wondering if something was possible to do in CSS. Basically i want to recreate the text on the RHS of the image using html/css, but currently I'm getting the LHS of the image.
The HTML:
<div id="banner">
<div id="text">
<p>This is an example of what I have</p>
</div>
</div>
The CSS:
div#banner { background: green; width:300px; height:300px;}
div#text { margin: 20px auto; }
div#text p { background:#fff; padding: 5px; margin: 5px; font-size: 2em; }
Now I realise that this can be done already either by:
Using an image
Using separate p tags
(By Point 2 I mean:
<div id="banner">
<div id="text">
<p>This is an</p>
<p>example of</p>
<p>what I have</p>
</div>
</div>
)
But what I would really like to know is if it's actually possible to do what is on the RHS of the image, using only css and a single p tag?
alt text http://chris.carrotmedialtd.com/example.jpg
You can achieve your desired effect by using:
display: inline; to force the background styling on the p to apply to the text, rather than the block on the p, and
line-height: 2.2em (slightly more than your font size) to force lines between your text
like such:
div#text p {
display: inline;
background: #fff;
padding: 5px;
margin: 5px;
font-size: 2em;
line-height: 2.2em;
}
Because a paragraph tag is a block element, the background will be painted between lines. If you change it to an inline element, or wrap the text in an inline element, you should be able to get the effect you want.
<p><span>This is an example of what I have</span></p>
span {
background: #fff;
}