Vertical Align Image inside Anchor - html

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" />

Related

Add text inside the DIV on top image

I am trying to add text "Post" in the center of Div on top of image , but it adds next to the image:
HTML:
<div id="Post">
<span class="Post">Post
<img src="images/ask_post.png" />
</span>
</div>
CSS:
#Post {
position:absolute;
background-image:url('../images/ask_post.png') no-repeat;
left:741px;
top:157px;
}
First remove the image from the div element, the text wont go on top of that image, only the background. Second, play around with the background properties until it looks like you want it to.
My guess is that you need to adjust the background-size or background-position.
<div id="Post">
<span class="Post">Post</span>
</span>
See if background-size:cover; is what you need. You'll probably also have to adjust the height and width of the div to get what you want.
It looks like you are calling the image twice. Once in the css and again in the div. Remove

Placing a Menu beside a image in html and css

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/

Align form text at baseline of image

I want to do something like the following, but I can't figure out how to align the logout link just above the navigation bar, without specifying an explicit padding or line-height which breaks the layout if the size of the image changes.
<img src="logo.png" />
<a> logout link </a>
<div> navigation bar </div>
I am using bootstrap, but I am also fine with a non-bootstrap solution.
As Thanix says, you can combine relative and absolute positioning to achieve this. Make a containing div for the image and the logout link so that the logout link can be set at the bottom of this.
<div class="header">
<img class="logo_image" src="logo.png" width="40" height="40" />
<a class="logout_link"> logout link </a>
<div class="clear"></div>
</div>
<div class="nav_bar">navigation bar</div>
Then make the containing div position:relative and the logo position:absolute. The trick here is that "an absolute position element is positioned relative to the first parent element that has a position other than static." (www.w3schools.com). This means you can use bottom:0px and right:0px to position it at the bottom right of the containing div.
.header {position:relative;}
.logout_link {
position:absolute;
bottom:0px;
right:0px;
}
.logo_image {
float:left;
}
.clear {clear:both;}
The class="clear" div at the end of the containing div is to make sure the containing div fills the space of its child components.
Place the logout <a> inside the navigation bar <div>.
Set navigation bar's position to relative.
Set logout's position to absolute, right to 0 and top to -1em;

My hyperlink goes across entire page instead of just the image

I have a logo that I want to link back to my home page. However, when I hyperlink the logo, I notice that the link spans across the entire page (i.e. across the whitespace to the left and right of the logo) instead of just being on the logo image.
My HTML:
<a href="#" id="splash-logo">
<img src="images/splash-logo.png" width="259" height="51">
</a>
My CSS:
#splash-logo {
clear: both;
width:100%;
display: inline-block;
text-align:center;
}
Thank you!
Get rid of the width:100%, since it is 100% width, of course it will span across (horizontal) the page
Your link's width is the width of the parent tag. Instead of doing 100%, just specify the width of the block.

relative position browser differences, absolute works but has no flow

I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.