This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
For this fiddle, why is there a space at the bottom of div#imageDiv?
JSFiddle
<div>
<div>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>
html {
line-height: 1.5em;
}
#text {
background-color: grey;
margin-top:-7px;
}
Set your image to img { display: block; }. And please next time add your code here on SO to prevent link rot and lets us easily review your code here.
Give your image a bottom vertical alignment and the space goes away.
jsFiddle example
img {
vertical-align:bottom;
}
you could also margin-top property to achieve that
http://jsfiddle.net/meetravi/7Knyx/14/
P.S Its always great to avoid negative values in css if you are planning to support relatively old browsers
Related
This question already has answers here:
How to adjust the width of a horizontal rule element
(7 answers)
Closed 2 years ago.
How do you change length of an hr tag?
<hr>
Takes the full length of the browser. I tried setting padding and margin but no effect. Any solution for this using plain css or using Bootstrap 5?
You need to set margin for the hr tag. The following would work
hr {
margin: auto 220px
}
/* just for demo*/
.div {
text-align: center;
margin: 20px;
}
<div class='div'> div - 1</div>
<hr>
<div class='div'> div - 2</div>
You can write the following style tag on your html.
<style> hr{margin: auto 220px;}</style>
<hr>
Get more information here.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I have the following code:
<h1>4 Channel DVR - High Res 960H WD1, (500GB HDD)</h1>
<div class="col-50 product-wrapper left">
<img class="product-image" src="http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/4-channel-dvr.jpg" alt="4-channel-dvr" width="522" height="283" class="alignnone size-full wp-image-398" />
</div>
<div class="col-50-end left"
Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
</div>
<div class="clear"></div>
CSS:
.col-50 {
width: 49%;
margin-right: 2%;
}
.col-50-end {
width: 49%;
}
.product-wrapper {
/*empty*/
}
.product-image {
/*empty*/
}
What I am wanting to do is vertically align the image in the middle of the col-50 div. The descriptions will all be different lengths so the height will change each time and so the alignment would have to be centered vertically according.
Is there a cross-browser way I can achieve this?
To display the columns side by side and center the image, you can use display: table-row on a container and display: table-cell on each column. Then you can change the widths to 50%and remove the 2% margin. Then to center the image, use vertical-align: middle on the containing column. Also, add width:100%; height:auto; to the image to make it fit the column.
DEMO
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make a whole 'div' clickable in html and css without javascript?
I've set up a 100% width/height div to stay on the background of the website, like so:
.background {
background-color:rgba(50,50,50,0.4);
width:100%;
height:100%;
position:absolute;
z-index:-1;
}
I'd like to have a link that would cover the WHOLE div, but if I code something like this, I'll have the link to appear only on the last part of the div (remember that this div has to stay in the background, with some divs above it), after the other divs, that stay above it.
<a href='/home'>
<div class='background'></div>
</a>
Are there any HTML/CSS solutions?
You cannot nest <div> tags inside <a> tags. However, you can make the <a> behave like a <div> by utilizing the CSS display:block property.
CSS
*, html, body {
width: 100%;
height: 100%;
}
.background {
display: block;
}
HTML
JS Fiddle
Hopefully the good people at Stackoverflow can help me today - I basically drank far too much beer last night watching the football and my brain has stopped working.
I'm doing a responsive theme, 3 column layout with H2 tags at the top of each. I need to have a background image filling up the remaining space within the column. I've mocked up an image below to demonstrate what I'm on about;
If the background was a block colour I'd probably display the H2 inline and apply the background-colour to that as well, blocking out the image behind it on the containing div.
As you can see though, the mottled background means that technique doesn't work very well, notice the obvious line above the text;
I've been trying all sorts - there must be some clever way of doing this and I hope you can help me!
Thanks for reading!
Robbie.
EDIT Ok, in the end I used a combination of the two answers below, but accepted the answer splitting the header tag into two divs and floating the first left (as I wouldn't have thought of that). It didn't work on it's own, but by giving the left floated div a background the same height as the double lines and tiling it on the x-axis (rather than giving the whole element the background), I was able to cover up the lines under the text without it jarring with the background.
Image:
HTML:
<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines"> </div>
</h2>
And CSS;
.h2-text {
padding-right: 5px;
background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
float: left;
}
.h2-lines{
background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}
Thanks very much!!
Overshot the Ballmer Peak, I see.
Anyway, one possible solution is to use floating elements:
<h2>
<div style="float: left;">My Header Tag</div>
<div style="background: whatever;"> </div>
</h2>
A simple solution would be done using the following structure:
<h1><div><span>The text</span></div></h1>
Add this style
h1 {
background: url('the-noise-background');
}
h1 div {
background-image: url('the-double-lined-background');
}
h1 div span {
padding-right: 20px;
display: inline-block;
background: url('the-noise-background') -20px -10px /* Fine tune those pixels so it matches the original position */;
/* use required line-height and other stuff to full cover the lines */
}
This question already has answers here:
How can I reorder my divs using only CSS?
(27 answers)
Closed 6 years ago.
Given that the HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
content 1
content 2
content 3
My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1
content 3
content 2
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
This works for me:
http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
As stated there, this should work in most browsers. Check link for more info.
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
I was messing around in Firefox 3 with Firebug, and came up with the following:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
Hope it helps, nd
I got it to work by doing this:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
with jquery you can simply do:
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.