Have Geek Brain

Image in div doesn't display anything

I am trying to insert an image into a div container using css and html, but it doesn't display images.

html code:

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"></span>
</div>
</div>

CSS

#quoteContainer {
    color: #898989;
    background:#F9F9F9;
    border: solid 1px #ddd; 
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    margin:65px auto;
    padding:15px;
    width:500px;

}

    .start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
    }

other than img doesn't even show borders. I tried using a tag <img>

in html to insert an image inside a div, which doesn't work either. is there something wrong with the code?

+2


source to share


5 answers


A span element that is an inline element cannot accept width or height.

Have you tried the following?



<div id="wrapper">
<div id="quoteContainer">
 <img src="image/img1.png" />
</div>
</div>
+3


source


This is because it span

is inline by nature and does not accept arbitrary values width

and height

. You will have to either make it an element block

/ inline-block

(did you have a question about this yesterday?) Or fill it with content.

This will certainly work on the element img

if you set the property src

.



And as said yesterday, if you want your empty elements to display correctly in all browsers, make sure you fill them with at least &nbsp;

+9


source


You need to change the range from inline:

.start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
     display:inline-block;
    }

And put something in between.

<span class="start_img">&nbsp;</span>
+2


source


if you have big content and they float give divs and span float /

When the element cant take its width, you should try adding;

display:block;

for your class /

and for your divs;

display:block;
width:204px;
height:24px;

but as Pekka said,

<img src="#" class="blabla" alt="img" />

works fine//

+1


source


Perhaps you don't have the uploaded image correctly? Double check this and all your syntax because it all seems like a sane and reasonable explanation. You could just do:

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"><img src="http://www.whereYouStoreimage.com/link/to/image/imag.png"/></span>
</div>
</div>
0


source






More articles:


All Articles