I've following html:
<div class="container">
<div class="header">
<h1>
a very long long long, really very very long headline ...
</h1>
</div>
</div>
and following css:
.container{
width:200px;
}
.header h1{
background-color: #e0e0e0;
display: inline;
padding: 2px 8px;
color: black;
font-size: 16px;
font-weight: normal;
line-height: 30px;
}
The problem is, that the browser adds a linebreak because of the long header and small width of the wrapping container. Thats fine. But the padding-left will not be added to the broken second and further lines. I can do this with an negative text-indent and positive padding-left to .header. but the background-color will not be moved to left so it seems as would be there still a zero padding.
How can I change this? Any trick available?
Great greetings, Falk
Try changing display: inline; to display: inline-block;.
As I understand it, left and right padding on inline elements will be applied to the beginning and end of the element, regardless of whether there's any line break in between. On a block (or inline-block) element, the padding is applied to the left and right of the entire element.
See https://developer.mozilla.org/en-US/docs/Web/CSS/display for a lot more information!
Along with your existing display-inline:
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
Note that it is currently not supported by IE/Edge and considered experimental - but it works on other browsers. Might be an option!
This is a fairly new CSS3 tag that might not have been available at the time of the other answers.
Related
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;
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
Right now this is my css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
<div class="logo"><div>my link</div></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>
This usually works for me
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});
*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>
Just thought I should put this out there :)
Works only when the link container is display: flex
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>
I've got a simple floated horizontal list that is looking good in IE and Opera, but Firefox has extra padding or margin at the top that I don't know how to fix.. It looked fine until I had to add a display:inline to an image link next to it because of another issue, so I think it's something to do with the display attribute.. any ideas? I've been trying to figure this out for the past eight hours.
#header {
background: url(../Images/header_bkg.png) repeat-x;
width: 800px;
height: 125px;
position: relative;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#header li {
float: left;
padding: 0 6px 0 0;
margin: 0;
}
#header a, #header a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .7em;
color: #333333;
text-decoration: none;
padding: 2px;
display: block;
}
#header a:hover {
font-size: .7em;
color: #FFFFFF;
background: #DCAD33;
text-decoration: none;
display: block;
}
<div id="header">
<img src="../Images/right_header_bar.png" style="float:right" />
<img src="../Images/Scofield_logo.png" style="float:left; padding: 0 0 0 20px" />
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>RARITIES</li>
<li>CUSTOM</li>
<li>TRADE</li>
<li>COMPANY</li>
<li>PRESS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
I fixed this problem by clearing floats and adding a non-breaking space...
first, in CSS file, I created <br /> using:
#clear_floats {clear:both;}
Then, in my code, just before my new floated elements:
<div id="clear_floats"> </div>
Worked for me. Hope this helps.
I don't see it, given the code above. More complete test case?
In general, when you are mixing floated content and inline flow content, you have to put the right-floated content before the flow content or it tends to jump down to the next text line below the one you're currently writing on. This affects IE worse than it does Firefox though.
Solved the problem I was having, it may fix yours. My right float had the extra space at the top even though both side by side divs had the same h1 tag. To solve it I simply added zero top padding and zero top margin to the h1 that was in the float, thus making it equally flushed at top with the h1 on the left non floated.
Perhaps adding some zero padding and margin to your UL or LI's will solve yours.
I had to make two changes to get all those browsers to look equal:
body
{
margin: 8px;
}
This made the browsers margin to align, each browser has its own default margin that you preemptively should reset before starting your coding, since I dont have the rest of your code this could be the issue.
Also, instead of the display: inline
<a href="../index.html" style="background: none; float: left">
I dont think that is what he has encountered. Found this post with a similar issue.
if you take a float:right for example and place it above the next div in theory they should be side by side. Now add a h1 tag or something to both of those divs and you will see that in firefox the float:right div will have double padding or extra padding above it. This exists even if you place margins and paddings at zero.
e.g.
< div style="float:right:margin:0;padding:0;width:280px;">
< h1>Head Right< / h1>
< /div>
< div style="margin:0;padding:0;width:300;">
< h1>Head Left< /h1>
< /div>
what odd is that you can add a border around the div thats not floated (left my example) and set it to 1px solid white so its not visually visable and it will negate that extra space.... I cant figure out why its there. I even tried adding a width to the left non floated div and still got the space.
I want to align some text to the top of a div. It seems that vertical-align: text-top; should do the trick, but it doesn't work. The other things that I have done, such as putting the divs into columns and displaying a dashed border (so I can see where the top of the div is) all work fine.
#header_p {
font-family: Arial;
font-size: 32px;
font-weight: bold;
}
#header_selecttxt {
font-family: Arial;
font-size: 12px;
font-weight: bold;
vertical-align: text-top;
}
#header_div_left {
float: left;
width: 50%;
border: dashed;
vertical-align: top;
}
#header_div_right {
margin-left: 50%;
width: 50%;
border: dashed;
}
The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div. Also text-top only moves the text to the top of the current font size. If you would like to vertically align an inline element to the top just use this.
vertical-align: top;
The paragraph tag is not outdated. Also, the vertical-align attribute applied to a span element may not display as intended in some mozilla browsers.
vertical-align is only supposed to work on elements that are rendered as inline. <span> is rendered as inline by default, but not all elements are. The paragraph block element, <p>, is rendered as a block by default. Table render types (e.g. table-cell) will allow you to use vertical-align as well.
Some browsers may allow you to use the vertical-align CSS property on items such as the paragraph block, but they are not supposed to. Text denoted as a paragraph should be filled with written-language content or the mark-up is incorrect and should be using one of a number of other options instead.
I hope this helps!
something like
position:relative;
top:-5px;
just on the inline element itself works for me.
Have to play with the top to get it centered vertically...
You could apply position: relative; to the div and then position: absolute; top: 0; to a paragraph or span inside of it containing the text.
You can use contextual selectors and move the vertical-align there. This would work with the p tag, then. Take this snippet below as an example. Any p tags within your class will respect the vertical-align control:
#header_selecttxt {
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
#header_selecttxt p {
vertical-align: text-top;
}
You could also keep the vertical-align in both sections so that other, inline elements would use this.
The all above not work for me, I have just checked this and its work :
vertical-align: super;
<div id="lbk_mng_rdooption" style="float: left;">
<span class="bold" style="vertical-align: super;">View:</span>
</div>
I know by padding or margin will work, but that is last choise I prefer.
PS.: I'm not a ux or frontend engineer
.make-it-valign-on-top {
vertical-align: super;
vertical-align: text-top;
vertical-align: top;
}
<span class="make-it-valign-on-top">my text</span>
You can use margin-top: -50% to move the text all the way to the top of the div.
margin-top: -50%;
position:absolute;
top:0px;
margin:5px;
Solved my problem.
The problem I had can't be made out from the info I have provided:
I had the text enclosed in old school <p> tags.
I changed the <p> to <span> and it works fine.