find the image attachment,
image will showing the my article markup,
how to build the html wire frame, same like image attachment,
want to show image in the top left corner and article should start in the mid of the image,
and length of the article should continue and show the below of the article, same like what i
attached, which way is the best and suitable for my requirement, DIV/Table,
i guess with table not able to complete, DIV is the suitable one, but really i dont have where to start this,
is there any sample markup, please refer that link,
Just add style="float: left;" or align="left" to your image. So your markup should look like this:
<img src="..." style="float: left;" />
<p>josh</p>
<p>It is a long es......</p>
Using style="float: left;" is considered better practice now because it uses CSS rather than DOM attributes. Make sure your image is above your text.
You need to understand some basic html and css first. Its not a very good practice to rely on tables for everything. Tables must be used only when they really make sense. And it advised to use divs in other scenarios. Take a look at this, this might be the kind of output you are expecting.
Related
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
I was wondering if anybody knew a way where you can have an image that also serves as a link and then be able to put text over this image using only HTML?
Essentially what I am using this for is to create "pretty" looking buttons for my client. Unfortunately, the program that I am REQUIRED to use will not allow me to insert any CSS code so this will have to be purely HTML.
And I know I could create the image in Photo Shop with the text over it already. However, I would like this to be a dynamic button as I have hundreds that I want to format to this style and if new ones appear I don't want to create a new image every time they want a new button.
Are there any solutions to an issue like this?
Even though I still can't for the life of me understand why you would want to do something like this. Or why someone would care about restricting css markup since it's not even really code. However you could take it back to the old school HTML4 days and do something like this if I understand your restrictions correctly. Which should still render fine in html5. Hope it helps.
CODEPEN TO PLAY
...PS, tell whoever decided to restrict CSS use that it's pretty counter intuitive to a contemporary...well, anything. Just my two cents. :D
Oh also, by the way, elements like <center> aren't supported in html5 even though it should render, so you'd be breaking some rules. If they mean for it to be an actual HTML5 solution, then you require CSS.
<table>
<tr>
<td></td>
<td rowspan=2><img src="http://res.freestockphotos.biz/pictures/15/15789-illustration-of-a-blank-glossy-rectangular-button-pv.png"
height="50" width="200">
</td>
</tr>
<tr>
<td colspan=2><center>overlay text</center></td>
</tr>
</table>
You could also just use like background= on a td or something if your images are all fixed size etc.
I have an image with a "Visit" button on it that is image mapped with HTML code, it has a roll over effect so that when you put your mouse over the "visit" link, it shows a glow version of the visit button.
But right now the code is not correct, the rollover effect replaces the original image with the glow version image, I simply want the glow version to overlay the original version at the same exact coordinates that are in the html code below: coords="52,63,145,100"
I don't want it replace the whole image. And I want the glow version to maintain its normal size. This is the code so far:
<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';" />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>
</div>
Here is a live demo.
You could achieve this what you're looking for by removing this code all together and creating the both the button and the glow-hover effect with CSS.
The issue with your current code is that that method of rollover effect, ie image replacement via mapping, is very cumbersome and out-of-fashion, so to speak.
The web is literally covered in resources in regards to CSS and even HTML, and I would suggest looking into them.
For your query in particular, check this out: http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
i am going to do my best here to convince you to rethink what you're doing. I know you want an answer to your question but the truth is, I dont think theres a way to do it. The problem is the original image is one thing and the rollover button is another thing. When this was the norm you had to create the original button and rollover button to be exactly the same size, and dpi in order for it to work and look right. If you wanted to have something in the middle of the image you had to slice out the part you wanted to change and use css and divs or (God Forbid) a table, to make it work.
In the year 2013, you can accomplish everything you're looking to do with CSS3 and NO images at all.
this site will make them for you and just give you the code when you're done.
http://css-tricks.com/examples/ButtonMaker/
this one used images incase you wanted something a little more special than what text can provide,
http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/
Good luck
EDIT: I am sleepy so when I was telling you what was wrong with your original stuff I dont think I did a good job. The original image is a huge thing with a border and a small button in the middle. The hover button is just the small button. You're thinking you can using a hover effect to replace just the small button in the middle with the overlay image. This might be possible with javascript but I am not really sure you can do this with a hover effect. If this is possible its not a good way to do it.
You're literally replacing the image in the tag, so you're not going ot be able to show two pictures simultaneously unless you load the base image into a separate element.
One option would be to change the : add background-image: url(http://www.image-maps.com/uploaded_files/3201304212133558_example78.png); to the style attribute. (and, for neatness, you could replace the base image in the tag with a transparent png).
This isn't the right approach though, for a number of reasons. Images harm SEO, they are slower to load, some browsers have problems with png transparency, google translate won't translate them, etc, etc, etc.
Besides, you can do all this in css:
http://jsfiddle.net/as2003/AbVTK/
If I have the choice to insert images directly into the html or in the css, say for example a link wrapped in an image I could do either...
<img src="#" alt="" width="" height="" />
Or I could do...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
Which is better and why? Both work as wanted but is there any difference to load times etc, or any considered better practice?
Using images in HTML is better when the image has any contextual meaning... if it is a decorative picture without any contextual meaning, then use CSS. CSS is for presentation, HTML is for content.
The best hint for you to determine whether to use HTML or CSS for a picture is:
If I remove the picture, will the web-page content still make sense?
An image in HTML is meant to provide a visual meaning in context, with a meaningful text fall-back. Using an A element without any content should be avoided since its content will have a relationship with the link, for browsers and web-crawlers (such a Google bot).
Use CSS images only for decorative purposes. Otherwise it can damage your search engine rankings. Always provide an alt attribute for images, determine what will it be imagining that an eventual visitor cannot see any images.
If the image has context, such as a logo, or a photo, I would suggest loading it as an <img> Make sure you are providing alt text for accessibility and SEO reasons as well.
If an image has no context in the scope of the page, then I think the correct place for it, is defined the in the CSS which controls the design.
The whole idea is to separate your presentation from your content as much as you can. An Image can be content, and if so, should be in it.
Generally, I try to put as many images in CSS as possible but Doozer and Mario have good points. If the image is important to the context, it can go in the HTML. I will also use <img> tags when text needs to float around and image.
One thing that CSS can do that <img> can't are CSS image sprites. This is the only real performance benefit that you'll get from one or the other. Performance-hungry websites like youtube.com will combine many images into one large composite image in order to cut down on the HTTP traffic (and therefore the page load times). For example, this is a sprite taken from youtube.com.
Follow principles of semantic HTML. If the image is content, ie a thumbnail, photo, or button, use an <img> element. If it is more a part of the page design, a background image may be more appropriate.
A more specific example: If you are using your image as an icon next to a text link, use a background-image:
<span class="printIcon" onclick="window.print()">Print</a>
.printIcon { background: url(...) no-repeat; padding-left: 20px }
If your image is the button itself, with no text aspect, use an <img> element with an appropriate alt attribute that would work to substitue for the image if it is unavailable.
<img src="printButton.png" alt="Print" onclick="window.print()" />
I've done quite a bit of googling on this, but I haven't been able to get a straight answer.
In terms of SEO, how bad is it to use images for your headers? The reason for doing this of course would be to be able to display non-standard fonts. I know it is bad to use images in place of headers, but I'm wondering if this sort of syntax would do anything to make it more search engine friendly:
<h1><img src="header.jpg" alt="Level 1 Header" /></h1>
Does it have the same effect as this?:
<h1>Level 1 Header</h1>
I suspect the answer to this is no. I think search engines probably wouldn't like this because you could put any text in the alt attribute without it actually being displayed on the page. So in that case, what is the best way to use images for headers without sacrificing SEO?
One old trick is to put the real text in the <h1> box, but then use CSS to make the text invisible and put your image in the background.
So you'd do something like:
h1 {
color: transparent;
background-image: url(your/cool/image.png);
width:400px; height: 300px;
}
Astute Stackoverflow member K Ivanov points out that it would probably be better to make the text invisible by positioning it way off the page with "text-indent: -5000px" or something.
It is a recognised practise (neither good nor bad) to use text-indent:-9999px; alongside overflow:hidden; for headings.
This offsets the text by a massive amount then uses the overflow to hide it.
That means you can have a nice big description/title in your <header> and have an image with the description/title the way you want it to appear, that way you get the best of both worlds.
A perfect example of this is: http://www.sohtanaka.com/web-design-blog/
The "LatestWord" section is an image, but if you look at the CSS for the section you will see this technique employed.
Another possible solution to the problem of non-standard fonts in headers would be to use the Google Fonts API, assuming that the fonts that they have available fulfill your needs.
You could also take a look at the stylesheets they generate and attempt generating them yourself (assuming that you need to).