General HTML/Web Design Programming Q`s/Image help

Advertisement


Question
QUESTION: I did it some what.

I got my Text to go to the Right of my Image. And then go right down the Right side of the image.

And my Image shows up ok.

Mut my Text starts at the Top Right side of the image but not at the very Top side of the Image why?

It would say it starts 2 lines down and Ends 2 lines down from the Image?

But it still is on the Right side of the Image

This is my Code
<img src="Robert.jpg" align="Left" height="25%">I type here.

Is there any way to get my Code to work?

I did it before thanks?

ANSWER: Try display:block for your image
try display: inline-block
Try text-align: right;

Try usigng position: position: absolute;
         right: 0px;
         width: 300px;
         border: 3px solid #73AD21;
         padding: 10px;
This will get your text to be at 0px from the right side of your page or div. Play with positionning and see if it solves your problem.

Try using float for your text:
         float: right;
         width: 300px;
         padding: 10px;
Try using float left on your image instead of align.

Good luck

---------- FOLLOW-UP ----------

QUESTION: What did you meen by
display:block for your image?

What is this and how do I use it?

Answer
Hi,
The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Block-level elements:
   <div>
   <h1> - <h6>
   <p>
   <form>
   <header>
   <footer>
   <section>

An inline element does not start on a new line and only takes up as much width as necessary

Inline elements:
   <span>
   <a>
   <img>

Every element has a default display value. However, you can override this.

e.g.
   li {
   display: inline;
   }
or
   a {
   display: block;
   }

Also, for your information:
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there: h1 {
         display: none;
         }
visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:  

General HTML/Web Design Programming Q`s

All Answers


Answers by Expert:


Ask Experts

Volunteer


Gaston Michel Côté

Expertise

Anything related to web design, gamification, color psychology, and ELearning. Codes: HTML5, CSS3.

Experience

Three years as a web consultant and designer

Organizations
Self-employed

Education/Credentials
College Education Certificate in Multimedia Productions

©2016 About.com. All rights reserved.