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;
Related
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
This is my case:
http://jsfiddle.net/vZ4sB/
Is there a way that the H1 background color ocupies the whole width of the container MINUS the floated element width?
jsFiddle is temporarily down, but here's what I worked out:
HTML
<div class="container">
<h1>
<img src="my_img.jpg" />
<span>Here's my header!</span>
</h1>
</div>
CSS
.container {
border: 1px solid red;
height: 500px;
width: 500px;
}
h1 {
background: url(my_header_bg.jpg) top right no-repeat;
height: 30px;
}
h1 img {
float: left;
}
h1 span {
background: url(my_header_bg.jpg) top left no-repeat;
float: left;
line-height: 30px;
padding: 0 5px;
}
I'm shooting a little bit in the dark here, but I'm guessing you have a header with some text, a background image behind the text, and perhaps a logo to the left? Please let me know if I'm wrong.
This might need a little more tinkering, but what I did was float both the image and span (with text) in the H1 and set the height on the h1 to a static height. This way the span will always butt up against the image and the H1 will extend 100%. I set a left-aligned background image to the span. Then I set a right-aligned background image to the H1. If the background image is a seamless pattern of some sort, this will probably work. If it's an image with a static width, you can set the span to the width of the background image and fade it out to the H1.
If it's just blue, you can just keep the H1 background blue.
See if this fits what you're working with.
You could, if the width of the .floater element is static at 200px (plus 2px for borders) use an adjacent sibling selector to assign a margin-left to those h2 elements following a .floater:
.floater + h1 {
margin-left: 202px;
}
JS Fiddle.
Try with:
h1 {
background: blue;
overflow: hidden;
}
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp
I know to vertically align text to the middle of a block, you set the line-height to the same height of the block.
However, if I have a sentence with a word in the middle, that is 2em. If the entire sentence has a line-height the same as the containing block, then the larger text is vertically aligned but the smaller text is on the same baseline as the larger text.
How can I set it so both sizes of text are vertically aligned, so the larger text will be on a baseline lower than the smaller text?
Try vertical-align:middle; on inline containers?
EDIT : it works but all your text must be in an inline container, like this :
<div style="height:100px; line-height:100px; background:#EEE;">
<span style="vertical-align:middle;">test</span>
<span style="font-size:2em; vertical-align:middle;">test</span>
</div>
the two set of text must have the same fixed line-height and the vertical-align set
span{
vertical-align: bottom;
line-height: 50px;
}
The functionality you are seeing is correct because the default for "vertical-align" is baseline. It appears that you want vertical-align:top. There are other options.
See here at W3Schools.
Edit W3Schools has not cleaned up their act and still, appear, to be a shoddy (at best) source of information. I now use sitepoint. Scroll to the bottom of the sitepoint front page to access their reference sections.
Easy way - use flex:
<div>
abcde
<span>efghai</span>
</div>
<style>
div {
padding: 20px;
background-color: orange;
display: flex;
align-items: center; }
span {
font-size: 1.5em; }
</style>
You technically can't, however, if you have fixed text sizes you could use positioning (relative) to move the larger text down and set the line-height to the smaller text (I'm presuming this larger text is marked up as such so you can use that as a CSS selector)
You can use percentage sizes to reapply the parent's line-height
.big {
font-size: 200%;
line-height: 25%;
display: inline-block;
vertical-align: middle;
}
Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis
An option is to use a table there the different sized texts are in their own cells and use align:middle on each cell.
Its not pretty and does not work for all occasions, but it is simple and works with any text size.
This works
header > span {
margin: 0px 12px 0px 12px;
vertical-align:middle;
}
.responsive-title{
font-size: 12vmin;
line-height: 1em;
}
.responsive-subtitle{
font-size: 6vmin;
line-height: 2em;
}
<header>
<span class="responsive-title">Foo</span>
<span class="responsive-subtitle">Bar</span>
</header>
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.