I'm trying to fit an image inside a div. I think that's a easy thing to do but i don't understand why the image is half out of the div.
That's my html:
<div class="bar">
<img src="images/bar.png" />
</div>
My css:
.bar {
height:10px;
width:100px;
border:1px solid black;
}
.bar img {
width:100%;
}
Here is a fiddle to show what i try to say
Add display:block; to the image.
Fiddle
You can change the default vertical alignment on the image:
.bar img {
width:100%;
vertical-align:top;
}
jsFiddle example
Related
Well, I have created a jsfiddle snippet as follow
link to jsfillde
here is the code
html
<div id="container">
<div class="media">
<img src="http://i.minus.com/i3qPeX4FjQRFt.jpg"/>
</div>
</div>
css
#container {
position:relative;
width:400px;
height:320px;
background-color:#efefef;
}
.media {
wight:100%;
padding:2px;
background-color:#a0a0a0;
position:absolute;
bottom:0;
}
.media > img {
width:100%;
height:auto;
}
The purpose of this is to show an image on the bottom of #container. But as you can see, the media class has an extra "4px" on its bottom and I have no idea why. It completely destroys the view .. Please help.
Add vertical-align:bottom to your image's CSS:
.media > img {
width:100%;
height:auto;
vertical-align:bottom;
}
jsFiddle example
I am trying to create a div that is a button by putting an anchor inside a div.
HTML
<div class="div1" style="width:300px;">
hello
</div>
CSS
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important;
}
JSFiddle: http://jsfiddle.net/BzFyS/
I think it is not working because osomething simple I am missing with positioning. Any tips?
Thanks
The simplest way: add this css:
.div1 a {
display: block;
}
That's it.
If you want the whole div be clickable (including the padding area):
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:0px; /* set to 0 */
border-radius:5px;
text-align:center;
background: #494949 !important;
}
.div1 a {
display: block;
padding:10px;
}
Demo: http://jsfiddle.net/BzFyS/2/
If you want the whole div to be clickable, you may do this :
HTML
<div id="div1" style="width:300px;">
hello
</div>
CSS
#div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important; /* do you really need that ? */
cursor: pointer;
}
JavaScript
document.getElementById('div1').onclick=function(){
// do something
}
But then you don't really need the a element.
Demonstration
Try to add to your CSS:
.div1 a {
display: block;
}
You have to put the tags around the div like this:
<a href="#"><div class="div1" style="width:300px;">
<p>hello</p>
</div></a>
This will work.
I am assuming you want this div to be a "button" yes?
The simple solution is to define the size of the <a> by using padding and display: block;
you can still define the colors, margins, and position of the <div>... but the clickable area is in the <a>
I'm trying to create a search bar where the middle stretches. I have three images: left.png, middle.png, and right.png
jsFiddle
I tried this code in the CSS:
.div1 {
background-image:url('../images/searchbar_a_corner-left.png');
background-repeat:no-repeat;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
.div2 {
background-image:url('../images/searchbar_a_corner-middle.png');
background-repeat:repeat-x;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
.div3 {
background-image:url('../images/searchbar_a_corner-right.png');
background-repeat:no-repeat;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
And this in the HTML (which I think is the incorrect part):
<div class="div1">
<img src="search-icon.svg" />
</div>
<div class="div2">
<input id="search" type="text" />
</div>
<div class="div3"></div>
All that shows up is right.png.
Try setting the width on .div2 to "auto", and set "float: right" on .div3
See if this helps
I think you're referencing your pictures incorrectly. Using all of your code, I just found some pictures to use as backgrounds for this fiddle, which works perfectly!
right.png is not the only picture to show up, but I think your intention is for middle.png to span the entire search box background. If this is the case, remove width:15px; from .div2, as seen here.
Remove the width:15px from .div2
.div2 {
background-image:url('../images/searchbar_a_corner-middle.png');
background-repeat:repeat-x;
height:100px;
float:left;
padding:0;
margin:0;
}
For illustration purpuses I added colors for the background of divs.
Here is the forked fiddle: JsFiddle
<div id='loadingScreen'> has a width of 0 because of the position:absolute and the positioning isn't working because of it. Adding a width of 100% to <div id='loadingScreen'> doesn't solve the problem.
CSS:
#loadingScreen{
position:relative;
}
.centered{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
HTML:
<div id="loadingScreen">
<div class="centered">
<!--stuff-->
</div>
</div>
.loadingScreen
{
display:table;
}
.centered
{
display:table-cell;
vertical-align:middle;
}
When you do position:absolute, you are effectively placing an object "manually" where you want it to be, meaning it shouldn't automatically align itself.
For normal vertical alignment - try line-height:(div-height); inside your css for .loadingScreen.
If your div is part of a table, try vertical-align:middle; instead.
You can do something like this:
.centered
{
height:200px;
border: 1px solid black;
vertical-align: middle;
display:table-cell;
}
Here's a Demo in JS Bin: http://jsbin.com/ireqoc/1/edit
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.