3 Replies - 841 Views - Last Post: 12 June 2013 - 04:01 PM

#1 doshyy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-June 13

Putting an image in the very corner of page and putting text on top.

Posted 12 June 2013 - 01:45 PM

Ok hi.

Basically i'm a big big noob at this stuff so please bare with me...
I'm trying to make a navigation bar type thing for my website i'm ever making.

I've been trying/looking for a solution to what I want but i can't seem to find anything.

I did manage to make it look what I want on Microsoft FrontPage 2003's preview mode but when I opened it on my website it looked completely wrong.

So yeah heres my code
<html>
<head>
<style  type="text/css">
body {background-color:white}
h1 
{
	font-family:Verdana;
	color:darkblue;
	size:25px
}
h2 
{
	font-family:Verdana;
	color:lightblue;
	size:17px
}
#image
{    
    position:fixed;
    left:0;
    top:0;
}
#toolbartext
{
    z-index:100;
    position:fixed;    
    color:black;
    font-size:10px;
    font-weight:bold;
    left:0;
    top:0;
    font-family:Verdana;
    text-decoration:underline;   
}
</style>
<title>temp</title>
</head>

<!-- WEBSITE STARTS HERE -->

<body>

    
    <img id="image" src="Formatting/toolbar.png" width="700" height="15">
    <p id="toolbartext">Home</p>
    
        
<br><br>   
<img border="0" src="POKEMON/BASE/AbraBaseSet43.jpg" width="350" height="495">
<img border="0" src="POKEMON/BASE/AlakazamBaseSet1.jpg" width="350" height="495">





</html>



You can also see what this looks like on my website here; http://jproudfoot.no-ip.org

After looking at that you can clearly see what i want:

The grey board to be in the corner, not slightly down and left, completely in the corner.
I also want to be able to write over this image, using it as a background for the text links I will write on top of them.

If you need anything else please let me know.

Also, forgive me for my bad coding. Started learning HTML/CSS only 2 days ago.

Is This A Good Question/Topic? 0
  • +

Replies To: Putting an image in the very corner of page and putting text on top.

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3615
  • View blog
  • Posts: 12,438
  • Joined: 12-December 12

Re: Putting an image in the very corner of page and putting text on top.

Posted 12 June 2013 - 03:01 PM

What tutorial are you following?
Was This Post Helpful? 0
  • +
  • -

#3 doshyy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-June 13

Re: Putting an image in the very corner of page and putting text on top.

Posted 12 June 2013 - 03:43 PM

View Postandrewsw, on 12 June 2013 - 03:01 PM, said:

What tutorial are you following?


Using a bit from w3schools.com and my college teacher.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3615
  • View blog
  • Posts: 12,438
  • Joined: 12-December 12

Re: Putting an image in the very corner of page and putting text on top.

Posted 12 June 2013 - 04:01 PM

I ask because there are numerous errors in your code. A few:

Quote

You have no DOCTYPE declaration;
It is font-size, not size;
IDs must be unique on the page;
top:; is wrong;
You should not be using absolute positioning to attempt to layout a page.


Your original question relates (in part) to the default margins and padding of elements, which needs to be accounted for, but I would consider the above errors (and more) to be more significant. I suggest you take a full tutorial; learn the basics before attempting to build a page.

This post has been edited by andrewsw: 12 June 2013 - 04:02 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1