Margin top issues - html

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>
What happens is that the image is displayed but the "Test span" message is printed on the right side of the image according to the margin-left:20px but the the margin-top doesn't do anything as the label shows towards the bottom of the image. I want it to show on the top like the image comes up but the label is showing at the bottom.
You can see it right here: http://jsfiddle.net/AMWjH/
Please help

You can change the vertical-align property to change how the elements display. I think that applying vertical-align: top to the image solves your problem:
Preview: http://jsfiddle.net/Wexcode/AMWjH/23/
Also, the reason why the margin-top and margin-bottom aren't affecting your span element is because span is an inline element. You can change it to inline-block or block to apply this margin (changing it to block will override vertical-align).

I'm not certain what you're asking for, but it sounds like you want the title to go to the right of the image, but aligned to the top. Am I understanding the question? Try this:
HTML:
<div class="titledImage">
<img src="/test.png" title="Hello" width="110" height="100" />
<p>The Title</p>
</div>
CSS:
.titledImage img {
float: left;
}

From what I gather, you want to wrap the text around the image. You just need to add an align attribute to you <img> tag:
<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>

Why are you structuring your code this particular way? Without fully knowing your limitations I'd strongly recommend doing something like this: (of course, take the inline styles out and put them in a stylesheet).
<div style="height: 140px; width: 150px;">
<p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>
<img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>
Let me know if this solves it for you. There is no reason to use margins & negative margins. In this particular case margin or padding would work on the image, though. As a rule, avoid negative margins if possible and only use them when absolutely necessary.
I hope this helps.

Related

Stack image and text left to right on same row

Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example

Applying padding-top to style with border-radius breaks border-radius functionality

<img src="Image source here" width="132" height="148" style="border-radius:3px;padding-top:50px"/>
Can anyone post some clarity to as why adding padding-top, seems to cause the browser ignore the border-radius property?
You can do a quick test by removing / adding the padding from the style attribute, notice how WITH padding, the border-radius is ignored.
Is this a bug, or is there good reason behind this?
Thank you for your time.
is because by adding padding top your border just go up (50px) so use margin-top.
like this (i add a background-color to see it better)
<img src="Image source here" width="132" height="148" style=" background-color: #3d3d3d; border-radius:3px; margin-top:50px; "/>
I hope it helps
look at it here codepen
Look at the box model mate, you should use margin-top here instead.
<img src="https://www.google.com/images/srpr/logo11w.png" width="132" height="148" style="border: 3px solid red; padding-top: 50px;"/>
UPDATE:
*Fiddle:* http://jsfiddle.net/Shashi0812/GJ8Bt/

L-shaped border using HTML and CSS

I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps

Image and text inside of <a> tag

This is the html asp.net generated (with some client-identifying details removed)
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.
In other browsers, it all works as expected.
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<div style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</div>
<div style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</div>
</a>
</div>
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
You don't need to use division to do this:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:
.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
A better way to do your code which is W3C compliant is the following:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>

How to make <a> wrap around a small image with out padding?

I have the following:
<a href="#" style="border:solid 1px gray; line-height: 5px;">
<img src="x.gif" style="border:solid 0px gray;">
</a>
Lets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.
Try something like this:
<a href="#" style="border:solid 1px gray; display: inline-block;">
<img src="x.gif" style="display: block;">
</a>
If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.
Try adding margin:0; padding:0; to your image.
This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.
To fix it, you could just remove any whitespace around it:
<img src="x.gif" style="border: 0;" width="5" height="5">
Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.
This worked for me across the latest browsers I tested on including IE9
<a href="#" style="font-size:0;text-decoration:none;">
<img src="x.png" style="border:1px red solid;">
</a>
However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).
<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
<img src="x.png" style="border:none">
</a>
Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.