The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

how to add writing and images in top of pictures

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

how to add writing and images in top of pictures Empty how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 7:14 pm

I made a html page here I found a code on here to add a picture ontop of a picture.
Well i have done this but was wondering how to add more?
I have a few nav links/buttons and writing which needs to go onto of the pink box in the middle this is my code so far

Code:
<HTML>
<HEAD>
<center><FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Welcome To Mummys World<br></FONT></center>
<TITLE>Mummys World</TITLE>
<style type="text/css">
body {background-color:ffccff;
background-repeat:repeat;
background-position:top
left;background-attachment:fixed;}
h1{font-family:Cursive;color:000000;}
p {font-family:Cursive;font-size:14px;
font-style:normal;
font-weight:normal;
color:000000;
}

#additional_image {
position:absolute;
margin:0;
top:15%;
left:45%;
width:100%;
height:100%;
overflow:hidden;
}
</style>

</HEAD>
<BODY>

<center>
<IMG SRC="http://i35.servimg.com/u/f35/11/95/56/38/image411.jpg" BORDER="1" ALT="Mummys World">
</center>

<div id="Additional_image"<a href="http://s291.photobucket.com/albums/ll302/mummysworld/?action=view¤t=mummmm.jpg" target="_blank"><img src="http://i291.photobucket.com/albums/ll302/mummysworld/mummmm.jpg" border="1" alt="Photobucket"></a></FONT></right></a></div>

Thank you also how do i make it so you dont need to scroll down or across so it fits the screen perfectly?
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 7:25 pm

lol

I have just posted an answer to Cherry_Blossoms thread which should benefit you aswell

Please refer to this and see it it assists you Very Happy

=> html-image-on-top-of-an-image

regards








Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 7:26 pm

ok thanks
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 7:32 pm

right think i may have done it a bit wrong Sad
i have added the image but its at the bottom of the page not on the actual center image
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 7:35 pm

If you could post the updated code i will have a look and see what we can do Smile

regards









Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 7:35 pm

Code:
<HTML>
<HEAD>
<center><FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Welcome To Mummys World<br></FONT></center>
<TITLE>Mummys World</TITLE>
<style type="text/css">
body {background-color:ffccff;
background-repeat:repeat;
background-position:top
left;background-attachment:fixed;}
h1{font-family:Cursive;color:000000;}
p {font-family:Cursive;font-size:14px;
font-style:normal;
font-weight:normal;
color:000000;
}

#additional_image {
position:absolute;
margin:0;
top:15%;
left:45%;
width:100%;
height:100%;
overflow:hidden;
}
</style>

</HEAD>
<BODY>

<center>
<IMG SRC="http://i35.servimg.com/u/f35/11/95/56/38/image411.jpg" BORDER="1" ALT="Mummys World">
</center>

<div id="Additional_image"<a href="http://s291.photobucket.com/albums/ll302/mummysworld/?action=view¤t=mummmm.jpg" target="_blank"><img src="http://i291.photobucket.com/albums/ll302/mummysworld/mummmm.jpg" border="1" alt="Photobucket"></a></FONT></right></a></div>


<div id="#linked_test">
<a href="<a href="http://s291.photobucket.com/albums/ll302/mummysworld/?action=view¤t=usefullinks.jpg" target="_blank"><img src="http://i291.photobucket.com/albums/ll302/mummysworld/usefullinks.jpg" border="0" alt="Photobucket"></a>
</div>

Thank you
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 9:23 pm

Template:

Code:
<HTML>
<HEAD>
<TITLE>Placehold - Template</TITLE>
<style type="text/css">

html { font-size: 76%; }
body {
   background: #ffccff;
   font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 1.1em;
   line-height: 1.5em;
   color: #333;
   text-align: center;
   margin: 0;
   padding: 0;
   }

/* headers */
h2, h3, h4, h5, h6 {
   color: #099;
   margin: 0;
   font-weight: normal;
   font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px;
   }
h2 { font-size: 1.8em; margin: 25px 0 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; }
h3 { font-size: 1.6em; margin: 25px 0 15px; }
h4 { font-size: 1.4em; margin: 20px 0 10px; }
h5 { font-size: 1.2em; margin: 20px 0 5px; }   
h6 { font-size: 1em; margin: 20px 0 0; }

#body { 
background: #ffffff url(Text Background URL Goes Here) no-repeat;
        background-position:top center;
        background-attachment:absolute;
}

#content { background-color: transparent; }
#content div { background-color: transparent; repeat-x; padding: 1px 20px 15px; min-height: 195px; }
* html #content div { height: 195px; }
#content div:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#content div div { background-image: none; padding: 0; min-height: 0; }
* html #content div div { height: 1%; }

#content #sub { padding: 0 0 0 20px; }
#content #main { padding: 0 20px 0 0; }

#content #sub { width: 164px; float: center; }

#home #content #sub {
   padding: 0 20px 0 0;
   width: 340px;
   float: left;
   background-color: transparent; ;
   }
#home #content #main {
   padding: 0 0 0 48em;
   float: centre;
   width: 290px;
   background-image: none;
   }
   
#content #sub h2 { font-size: 1.6em; padding-bottom: 10px; margin-bottom: 10px; }

</style>

</HEAD>
<body id="home">
 <ul class="hide">
<div id="container">
   <div id="header">
       <h1><a href="url here">Test - Placehold - Template</span></a></h1>      
   </div>

   <div id="body">

      <div id="content"><div>
         <div id="main">
            <h2>Test - Placehold - Template</h2>
            <p>Test - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - Template</p>
<p>Test - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - Template</p>
<p>Test - Placehold - TemplateTest - Placehold - TemplateTest - Placehold - Template</p>
            
            <ul>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
               <li><span>Test - Placehold - Template</span></li>
            </ul>
            <h2>Test - Placehold - Template</h2>


         </div>
      </div></div>   
   </div>
</div>

</BODY>
</BODY>
</HTML>

You will need to adjust to suit yourself Smile

Regards








Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 9:30 pm

Thank you
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 9:35 pm

To add different header sizes etc just use something like

<h2>Text</h2>
<h3>Text</h3> and so on

Regards







Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Christos September 16th 2008, 9:38 pm

Hey,

This is actually interesting! I tried to do that in an HTML page but I didnt know how to add the text in the place I want..Razz

<CENTER> yes, but it went after my first image. So I should add it as background or you cant write on it?

Regards,






Christos
Christos
Christos
Active Poster

Male Posts : 1238
Reputation : 37
Language : English,French,Greek,Luxembourgish
Location : Luxembourg

http://misery.in-goo.com

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 10:00 pm

sorry must be annoying you now lol
right iv figured out how to edit it what to edit but i dont know how to moved some of the images/writing accross i want the nav links to say where the writing is showing now but a few things like the little picture to go in the middle of the pink box iupdated the page so you can see heres page
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 10:09 pm

After you have added the image links

<img src="">

Add <br/>
This should bring it down a line and two will bring it down two lines Smile

So

<img src=""><br/>

The code auto centres Smile

Regards







Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Cherry Blossom September 16th 2008, 10:31 pm

Cherry Blossom
Cherry Blossom
Forumember

Female Posts : 996
Reputation : 23
Language : English

http://cherrydesigns.forumotion.net/

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 10:36 pm

Ok done it on one picture but it isnt centering
Code:

            <h2> <img src="http://i291.photobucket.com/albums/ll302/mummysworld/bannnn10-1.jpg"><br/></h2>
thats
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 10:45 pm

change that line to

<p> <img src="https://2img.net/h/i291.photobucket.com/albums/ll302/mummysworld/bannnn10-1.jpg"></p><br/>

Regards








Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 10:49 pm

ok i officaly give up i edited it to that and still not centered

Code:
<p><img src="http://i291.photobucket.com/albums/ll302/mummysworld/bannnn10-1.jpg"></p><br/>
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by Guest September 16th 2008, 11:09 pm

hmmmmmmmmmmm

try the good old fashioned center tag

<p>
<center><img src="https://2img.net/h/i291.photobucket.com/albums/ll302/mummysworld/bannnn10-1.jpg"></center></p>
<br/>

Regards







Craig
avatar
Guest
Guest


Back to top Go down

how to add writing and images in top of pictures Empty Re: how to add writing and images in top of pictures

Post by kylesmummy06 September 16th 2008, 11:13 pm

yeah lol thankyou i have no idea why i didnt think of that lol
kylesmummy06
kylesmummy06
Forumember

Female Posts : 782
Reputation : 9
Language : english
Location : Leeds

http://mummysworld.8forum.net

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum