I have an image that i have displaying at top of the webpage.Now i want to show one menu button id beside to the image but i am not able to do it.Menu button is coming down in next line..
Here is the HTML..
<img src="images/hotelAwadh.png" alt="logo" width="150" height="50">
<div id="result_data"></div>
How to display <div id="result_data"></div> beside to img .
Please help me ..
Use:
float:left;
On both your image and div
div is a block element and it takes 100% width by default. img is an inline element by default and it occupies its very specific width/height. what you have to do is overwrite their default behaviours with display:inlineand display:block
img {float:left;display:block}
div#result_data {float:left;display:inline;}
http://jsfiddle.net/v2N7v/
Related
I have a banner which I want to add to my simple website , here is what I have so far
HTML
<div class="col-lg-12 main-banner">
<a href="https://www.google.com">
<img src="images/Test_09-17.png"></a>
</div>
CSS
img{
width: 100%;
object-fit:contain;
}
I want the image to fit with the div, unfortunately right now i have little space left and right side.
Check the image:
Question
What is wrong with my code?
It looks like there is padding on your image. (Based on the green to the right and left of your image.). Did you check the computed padding on the image element in your browser?
Without being able to see the HTML and CSS for the page I cannot be certain though.
Solution:
There was default padding either from the browser or other code. Setting the padding to 0 resolved the issue.
I'm trying to add in an image into ion-content, essentially as a top banner, but there's some pesky padding that's automatically added below it that I just can't seem to remove. The code is:
<ion-view>
<ion-content>
<img src="http://impact.byu.edu/style/wide_banner6.gif" style="width:100%; padding:0px">
<div class="list">
<div class="item item-divider">
Settings
</div>
</div>
</ion-content>
</ion-view>
This codepen demonstrates what I'm talking about https://codepen.io/anon/pen/LkvObV. I want to remove the spacing between the bottom of the image and the "Settings" item-divider. Anyone know how? I've tried using padding/margin properties in css to no success.
Apply display: block; to the img tag and see the Magic!
Explanation:
By default, an image is rendered inline, like text. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block
I have an HTML Document and a CSS Document and I'm trying to remove a large margin in between the image I've placed and the text below it. When I adjust the pixel margin on the top of the image it adjusts, but I've tried a few things on the bottom of the image and just can't seem to get it to work right. There is a huge gap and I just want it to look "normal". That is, having a smaller margin between the img and the text below it.
<div id="header" class="container">
<!--Home Logo -->
<a href="#">
<img src="http://www.satckoverflow.com/wp-content/uploads/2015/02/Stack-Overflow-Logo.png" style="position: relative; top: -150px;" alt="Platinum Imprints">
</a>
<p>Welcome! Here at Platinum Imprints we specialize in Custom Screen Printing. Use anywhere from one to many colors on a simple shirt.</p>
This is what I have for HTML.
You have inline styles on the img element that are setting relative positioning. Removing this will fix your problem.
Remove the inline style position: relative; top: -150px; in the img tag to remove the spacing.
So i have one div and inside i have img tag. SO what i would like to do is put that div background on top of img, i know i could use another div with absolute position to do that but maybe it's possible to do it with only 1 div?
This is my code:
<div id="container">
<img src="image.jpg" />
</div>
EDIT Sorry for explaining it all wrong, but i want to background over the image, and from what i can see right now it's not possible without extra div.
Simply put, you can't with that code.
The best you could do is use some positioning and z-index properties within a single div.
<div id="container">
<div id="cover"></div>
<img src="image.jpg" />
</div>
Then use CSS to move the cover div above the image.
You can use css to attach the background for div like
background: url(images/myimage.png) no-repeat center top;
I have a <ul> with two columns
Code:
<li class="clearfix">
<div class="product-copy">
Product Content Here
</div>
<a href="">
"PRODUCT IMAGE HERE"
</a>
</li>
The .product-copy expands to content in height, width is fixed.
I want to be able to vertically align the image within the anchor to center. So no matter how large in height the .product-copy is, the image in the right column will always be centered.
Please note that I am still a new user so couldn't type the proper image html within the anchor but there is a html image within the anchor.
Any ideas?
Thanks
You can try some CSS like
.product_img { position:absolute; top:0; bottom:0; }
This is from memory, you may need to remove the position:absolute; from the class.
Simply add the class to the img tag and this will vertically align your image to the middle of the div.
<img srv="my_image.png" class="product_image" />