asked on

How do you fix a logo image to the right side of the screen in css?

No matter what the screen size is it possible to always align logo to the right, what is the best method of achieving this please.

s8web

There are a few different ways to achieve this, however the method that will work depends on how your page is laid out. Can you post a link or a snippet?

adypips

ASKER

Here is my code snippet, would like Logo.jpeg to always be on the right hand side.. if poss I have tried absolute positioning but this alters depending on browser size so looks a little odd. Help!!

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MySite</title></head>
 
<body>
 
<div id="container">
        <div id="header">
          
        <img alt="Plums" src="images/pic1.jpg" 
                style="width: 173px; margin-top: 8px"/>&nbsp; 
        <img alt="Tomato " src="images/tomato.jpeg"/><img alt="Skipping rope" src="images/srope.jpeg" /><img alt="NHS Logo" 
                src="images/logo.jpg" 
                style="top: 23px; right: 134px; position: absolute" /><img alt="Green Apple" src="images/apple.jpeg" /><img alt="Crackers" src="images/crackers.jpeg" /><img 
                alt="Strawberries" src="images/strawberries.jpeg" 
                style="width: 130px; height: 80px; "/><img alt="Toothbrush" src="images/toothbrush.jpeg"/>&nbsp;
            <br />
        <br />
 
<h1>Welcome to Adys Site</h1>
 
<p>Welcome to my site</p>
<p>more text</p>
 
 
 
</body>
</html>

Open in new window

toymachiner62

You should really use CSS instead of styling your html inside the tags. But you'll need to change this:

<img alt="NHS Logo"
src="images/logo.jpg"
style="top: 23px; right: 134px; position: absolute" />

to this:

<img alt="NHS Logo"
src="images/logo.jpg"
style="top: 23px; right: 134px; float:right" />

s8web

Actually, what you have should work if you close your tags (see snippet) and id=container and id=header don't contain declarations that clash with your inline styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MySite</title></head>
<body>
<div id="container">
	<div id="header">
        <img alt="Plums" src="images/pic1.jpg" style="width: 173px; margin-top: 8px"/>  
        <img alt="Tomato " src="images/tomato.jpeg"/>
        <img alt="Skipping rope" src="images/srope.jpeg" />
        <img alt="NHS Logo" src="images/logo.jpg" style="top: 23px; right: 134px; position: absolute" />
        <img alt="Green Apple" src="images/apple.jpeg" />
        <img alt="Crackers" src="images/crackers.jpeg" />
        <img alt="Strawberries" src="images/strawberries.jpeg" style="width: 130px; height: 80px; "/>
        <img alt="Toothbrush" src="images/toothbrush.jpeg"/> 
	<h1>Welcome to Adys Site</h1>
        <p>Welcome to my site</p>
        <p>more text</p>
	</div>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

toymachiner62

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adypips

ASKER

This has sorted out this.

Many thanks,
AdyPips