Can anyone point out to me why there's a line (of background color, red in this case) below the image and above the navigation bar? Both Firefox and Chrome display the red line, so I assume it is rendered as intended. But I can't seem to find the issue through the developer tools. The borders, paddings and margins are all 0, which is puzzling. Here's the stripped down version of the code, or jsfiddle.net/bvss4/9:
<body>
<div id="main-wrapper">
<header id="main-header">
<img id="title-image" src="http://i.imgur.com/JaYSY.jpg" />
<div id="main-navbar">
STUFF
</div>
</header>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main-wrapper {
width: 90%;
margin: 0 auto;
border: 3px solid #888;
margin-top: 20px;
background: red;
}
#title-image {
width: 100%;
}
#main-navbar {
width: 100%;
background: #333333;
}
Adding a display:block to your #title-image will fix it
#title-image {
width: 100%;
display:block;
}
JSFiddle here
Set vertical-align: bottom on the image's CSS.
The reason it happens is because images are displayed inline with text. This means that they have to allow a small space below the line in case of letters like y, g etc that drop below the baseline and cause the space.
By setting the vertical-align to bottom, you move the image so that it's aligned with the bottom of the text, avoiding this problem.
There is one exception you should be aware of: If the image has less height than a single line of text, it will leave a gap above it to make room for that text, unless you set the containing element to have a line-height that works.
I just tried it at http://jsfiddle.net/nUacj/ - I set vertical-align: middle instead of baseline and it solved the issue. Would this be a viable solution to you or do you need it to be baseline?
Related
I though I knew how inline elements worked. A nice answer explaining it can be found here: CSS display: inline vs inline-block.
What it says about inline elements:
respect left & right margins and padding, but not top & bottom
Inline elements only support right and left padding and ignores any padding given for top and bottom. But doing some tests I just found a really odd behaviour. When given a padding to an inline element, it applies it to the left and right of the element but also to the bottom but not to the top.
Is there any explanation for this behaviour?
<html>
<head>
<style>
* {
box-sizing: border-box;
padding:0;
margin:0;
}
.parent{
display:inline;
background-color: red;
padding: 10rem;
color:white;
}
</style>
</head>
<body>
<div class="parent">Whatever</div>
</body>
</html>
Use the browser tools to inspect the element and you'll see that there is also a padding-top of 10em, which is not visible in your snippet.
The reason: Although there is a padding for inline elements, it does not affect the distance above and below it - the line (i.e. baseline for the text) is at the same vertical position where it would be (or better: is) without the padding. The padding here just creates an overflowing area which you only see if there is a background defined.
See my snippet, where I added a wrapper with a 12em padding-top and some text before and after the inline div, and also before and after the wrapper div which demonstrates what happens.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrap1 {
padding-top: 12em;
background: green;
/* display: block; is the default here */
}
.parent {
display: inline;
background-color: red;
padding: 10rem;
color: white;
}
.y {
background: rgba(255, 255, 0, 0.4);
border-radius: 50%;
padding: 0.6em 0.15em 0.6em 0.1em;
}
<body>
<div>This is in a separate div which preceds the inline div and its wrapper.</div>
<div class="wrap1">
this is on the same the line
<div class="parent">Whatever</div> yes it is
</div>
<div>And this is in a separate div following the inline div and its wrapper.</div>
<p>And here is another line with one (inline) <span class="y">word</span> that has a padding in a way that <em>might</em> be considered useful.</p>
</body>
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
Why does this white border always appear around the box? How can I get it to fit the whole page (horizontally) without using 'position:absolute' ?
http://jsfiddle.net/yag79aLt/
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
<div class="footer-block">
Add the following to your CSS:
body {
margin: 0;
}
This will set the page's margin to zero, thus removing the white border around your JSFiddle.
Often there is a small margin around the body by default. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers add padding too.
I start by adding this in all of my projects to override that:
body {
margin: 0;
padding:0;
}
If you have a large project you could consider using normalize.css. It resets a lot of default values to be consistent across browsers.
http://necolas.github.io/normalize.css/
You should always make margin and padding 0 of body before design.It will make your design perfect..good luck...:)
CSS CODE:
body {
margin: 0;
padding: 0;
}
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)
I have the following simple code:
HTML:
<div>
<img src='http://i51.tinypic.com/4kz4g5.jpg' />
</div>
CSS:
div {
width: 260px;
height: 195px;
overflow: auto;
background: #333;
}
The dimensions of the image are width=260px, height=195px, which is exactly like the dimensions of the div.
My question is why the scroll bars appears in this situation ? (I expect them to appear only if image dimensions are greater of div's dimensions)
It's due to the fact that img is an inline tag, so it leaves space for text ascenders and descenders. Set the img to display: block and it'll work correctly.
It's because an empty text node is being inserted in your <div> and adding just enough space to require scrollbars. You can fix it with the following CSS:
div {
width: 260px;
height: 195px;
overflow: auto;
background: #333;
font-size: 0;
line-height: 0;
}
In action here.
Add display: block to the img.
See it.
Divs by default have padding values, you should set them to 0.
padding: 0px;