Moving text over an image?

Page 1 of 1

7 Replies - 8091 Views - Last Post: 16 October 2009 - 06:26 PM

#1 Cyrusthebeast   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 11-October 09

Moving text over an image?

Posted 16 October 2009 - 03:04 PM

Ok, I made a website for my Runescape clan and it looked good, but then I realized the index page didn't look good for the about us page, so I played around and got this:

http://thelavadragon...om/aboutus.html

I didn't know if I should post the HTML and CSS, because that would be enormous so I figure if you go there you can see it and look at the source code. I want to move the text to start at the orange line below the menu, but I can't figure out how to do it without messing up.

Is This A Good Question/Topic? 0
  • +

Replies To: Moving text over an image?

#2 bammurdo   User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 03-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 03:11 PM

Post your code like this :

:code:

Also, im unsure to what your problem is :)

bam :D

Edit 1 (deleted text) :
Edit 2 : Ooh, you meen you want to move the text up to the orange line?
so it's OVER the image of a dragon?

:)
bam

This post has been edited by bammurdo: 16 October 2009 - 03:13 PM

Was This Post Helpful? 0
  • +
  • -

#3 Cyrusthebeast   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 11-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 03:17 PM

View Postbammurdo, on 16 Oct, 2009 - 02:11 PM, said:

Post your code like this :

:code:

Also, im unsure to what your problem is :)

bam :D

Edit 1 (deleted text) :
Edit 2 : Ooh, you meen you want to move the text up to the orange line?
so it's OVER the image of a dragon?

:)
bam


The code for the page or the CSS file?

Also, yes :P
Was This Post Helpful? 0
  • +
  • -

#4 bammurdo   User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 03-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 03:19 PM

Both would help :)

bam :)
Was This Post Helpful? 0
  • +
  • -

#5 Cyrusthebeast   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 11-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 03:25 PM 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="generator" content="dreamweaver" />
<title>About Us</title>
<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="common.css"></link>

</head>
<body>
<div id="background">
<div id="layer73"></div>
<div id="layer18"></div>
<div id="layer4"></div>
<div id="layer1"></div>
<div id="layer14"></div>
<div id="layer76"></div>
<div id="layer15"></div>
<div id="loginbutton"><a  href="http://z11.invisionfree.com/Lavadragons/index.php?act=Login&amp;CODE=00"  title="Login" target="_blank"></a></div>
<div id="registerbutton"><a  href="http://z11.invisionfree.com/Lavadragons/index.php?act=Reg&amp;CODE=00"  title="Register" target="_blank"></a></div>
<div id="layer17"></div>
<div id="layer8"></div>
<div id="layer16"></div>
<div id="lavadragonsg"></div>
<div id="layer22"></div>
<div id="strengthhonourg"></div>
<div id="layer3copy"></div>
<div id="layer3copy2"></div>
<div id="layer11"></div>
<div id="layer10"></div>
<div id="layer9"></div>
<div id="layer12"></div>
<div id="layer53copy"></div>
<div id="layer13copy2"></div>
<div id="layer13"></div>
<div id="aboutusbutton"><a  href="aboutus.html"  title="About Us">About Us</a></div>
<div id="mlbutton"><a  href="http://runehead.com/clans/ml.php?clan=leetld"  title="ML" target="_blank">Member List</a></div>
<div id="homebutton"><a  href="index.html"  title="Home">Home</a></div>
<div id="forumsbutton"><a  href="http://z11.invisionfree.com/Lavadragons/index.php?act=idx"  title="Forums" target="_blank">Forums</a></div>
<div id="eventsbutton"><a  href="http://z11.invisionfree.com/Lavadragons/index.php?act=calendar"  title="Events" target="_blank">Events</a></div>
<div id="layer62copy"></div>
<div id="layer36"></div>
<div id="layer35"></div>
<div id="layer10copy"></div>
<div id="layer24"></div>
<div id="layer8copy"></div>
<div id="layer8copy2"></div>
<div id="layer21"></div>
<div id="id162aboutus">
  <p>One person can type a description of a clan, but that doesn't make much sense, seeing as clans are only powerful in unity, members should all have a chance to say what this clan means to them and how they feel about it. Here's what some of our members have to say. <br />
 <br />
 </p><p>&nbsp;</p>
 <p><strong><em>&quot;We got a nice clan here with LD, there's a  friendly environment and I've gotten way better while here. I hate  Runecrafting and Thieving, but with a bunch of people there with you,  it makes it tolerable. LD is a great clan made up of great people and I  hope it continues to be for years and years ^^/></em></strong>&quot; </p>
 <p>-Cyrus (Saragodbro - Clan Member)</p>
 <p>&nbsp;</p>
 <p>&quot;<strong><em>Even though I haven't been in LD for a long time,  I have come to realise that LD by way is the best clan I have ever been  in. With a great close friendly community, Active members and many  different events happening, this clan can meet everybody's needs
	   <!--emo&:)-->
	   <img src="http://209.85.48.12/html/emoticons/smile.gif" alt="smile.gif" border="0" />
	   <!--endemo-->
~ Angel Krosa </em></strong>&quot;</p>
 <p>~Clan Member</p>
 <p>&nbsp;</p>
 <p>&quot;<strong><em>The Lavadragons are like a family community. We enjoy  a wide range of activities that allow a person to enjoy the clan no  matter what they like to do in runescape. When I joined the Lavadragons  three years ago, I was not sure whether or not I would like it. As I  went on I liked it more and more and now three years later I am still  hanging around. The members of LD form a web of support that will help  you reach even your toughest goals in the game and even in real life.</em></strong>&quot;</p>
 <p>~Djbarbe (Senator)</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
</div>
<div id="layer71"></div>
</div>
</body>
</html>



a  {
   text-decoration: none;
   color: #000000;
}

a ins  {
   text-decoration: none;
}

#id152thenamefebruarycomesfromthefebruealeatherstraptext p,
#id162loremipsumdolorsitametconsecteturadipiscingelittext p,
#id173loremipsumdolorsitametconsecteturadipiscingelittext p  {
   font: 11px/13px Tahoma;
   margin: 0px;
   text-align: center;
   color: #FFFFFF;
}
#homebutton a:hover,

#mlbutton a:hover,
#eventsbutton a:hover,
#forumsbutton a:hover,
#aboutusbutton a:hover  {
   font-weight: bold;
   color: #fd9306;

   text-indent: -1px;;
}
#mlbutton a,
#aboutusbutton a,
#forumsbutton a,
#homebutton a,
#eventsbutton a  {
   font-weight: Normal;
   display: block;
   width: 100%;
   text-decoration: none;
   color: #FFFFFF;
}

#layer79copy2,
#layer69copy2,
#layer79copy,
#layer74,
#layer79,
#layer69copy9  {
	visibility: visible;
	position: absolute;
	top: 241px;
	width: 231px;
	height: 256px;
	background-repeat: no-repeat;
}

#annoucementstext p,
#latestnewstext p,
#aboutlavadragonstext p  {
   font: 12px/14px Tahoma;
   margin: 0px;
   color: #EDBB77;
   text-align: center;
}

#annoucementstext,
#latestnewstext,
#aboutlavadragonstext  {
   visibility: visible;
   position: absolute;
   top: 427px;
   z-index: 36;
   width: 231px;
}

#id162loremipsumdolorsitametconsecteturadipiscingelittext  {
	visibility: visible;
	position: absolute;
	left: 102px;
	top: 244px;
	z-index: 34;
	width: 798px;
	height: 342px;
}

#id173loremipsumdolorsitametconsecteturadipiscingelittext  {
   visibility: visible;
   position: absolute;
   left: 678px;
   top: 465px;
   z-index: 36;
   width: 212px;
}

#id152thenamefebruarycomesfromthefebruealeatherstraptext  {
   visibility: visible;
   position: absolute;
   left: 109px;
   top: 467px;
   z-index: 36;
   width: 212px;
}

#layer69copy3,
#layer69copy6,
#layer75,
#layer69copy4  {
	visibility: visible;
	position: absolute;
	left: 383px;
	top: 241px;
	width: 231px;
	height: 256px;
	background-repeat: no-repeat;
}

#layer73,
#layer12,
#layer9,
#layer53copy,
#layer10  {
   visibility: visible;
   position: absolute;
   left: 100px;
   top: 150px;
   width: 800px;
   height: 71px;
   background-repeat: no-repeat;
}

#registerbutton a:hover,
#loginbutton a:hover  {
   background-position: -93px 0%;
}

#layer69copy,
#layer69copy5,
#layer69copy8  {
   visibility: visible;
   position: absolute;
   top: 422px;
   z-index: 34;
   width: 231px;
   height: 24px;
   background-repeat: no-repeat;
}

#layer70,
#layer70copy2,
#layer70copy  {
   visibility: visible;
   position: absolute;
   top: 422px;
   z-index: 35;
   width: 231px;
   height: 53px;
   background-repeat: no-repeat;
}

#loginbutton a,
#registerbutton a  {
   background-repeat: no-repeat;
   display: block;
   height: 31px;
   width: 93px;
   background-position: 0% 0px;
   font-size: 31px;
   line-height: 31px;
}

#registerbutton,
#loginbutton  {
   visibility: visible;
   position: absolute;
   top: 4px;
   z-index: 18;
   width: 93px;
   height: 31px;
}

#layer69copy7,
#layer77  {
   visibility: visible;
   position: absolute;
   left: 668px;
   top: 422px;
   width: 231px;
   height: 256px;
   background-repeat: no-repeat;
}

#aboutlavadragonstext  {
   left: 668px;
}

#strengthhonourtext p  {
   font: 30px/36px KingsCross;
   margin: 0px;
   color: #FD9306;
   text-align: left;
}

#strengthhonourtext  {
   visibility: visible;
   position: absolute;
   left: 207px;
   top: 343px;
   z-index: 30;
   width: 405px;
}

#registerbutton a  {
   background-image: url(ldmodifiedmedia/registerbutton.gif);
}

#annoucementstext  {
   left: 99px;
}

#strengthhonourg  {
   background: url(ldmodifiedmedia/strengthhonourg.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 133px;
   top: 118px;
   z-index: 18;
   width: 184px;
   height: 23px;
}

#registerbutton  {
   left: 808px;
}

#latestnewstext  {
   left: 383px;
}

#loginbutton a  {
   background-image: url(ldmodifiedmedia/loginbutton.gif);
}

#aboutusbutton  {
   font: 11px/23px Tahoma;
   text-align: left;
   visibility: visible;
   position: absolute;
   left: 594px;
   top: 155px;
   z-index: 21;
   width: 94px;
   height: 23px;
}

#layer79copy2  {
   background-image: url(ldmodifiedmedia/layer79copy2.gif);
   z-index: 30;
   left: 99px;
}

#layer70copy2  {
   background-image: url(ldmodifiedmedia/layer70copy2.gif);
   left: 668px;
}

#jointodayimg  {
   visibility: visible;
   position: absolute;
   left: 126px;
   top: 266px;
   z-index: 30;
   width: 256px;
   height: 60px;
}

#layer69copy7  {
   background-image: url(ldmodifiedmedia/layer69copy7.gif);
   z-index: 33;
}

#layer69copy6  {
   background-image: url(ldmodifiedmedia/layer69copy6.gif);
   z-index: 31;
   left: 668px;
}

#layer69copy5  {
   background-image: url(ldmodifiedmedia/layer69copy5.gif);
   left: 383px;
}

#lavadragonsg  {
   background: url(ldmodifiedmedia/lavadragonsg.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 122px;
   top: 76px;
   z-index: 18;
   width: 207px;
   height: 43px;
}

#layer69copy4  {
   background-image: url(ldmodifiedmedia/layer69copy4.gif);
   z-index: 33;
}

#eventsbutton  {
   font: 11px/24px Tahoma;
   text-align: left;
   visibility: visible;
   position: absolute;
   left: 711px;
   top: 155px;
   z-index: 18;
   width: 71px;
   height: 24px;
}

#layer69copy2  {
   background-image: url(ldmodifiedmedia/layer69copy2.gif);
   z-index: 33;
   left: 99px;
}

#forumsbutton  {
   font: 11px/14px Tahoma;
   text-align: left;
   visibility: visible;
   position: absolute;
   left: 488px;
   top: 160px;
   z-index: 21;
   width: 65px;
   height: 14px;
}

#layer13copy2  {
   background: url(ldmodifiedmedia/layer13copy2.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 101px;
   top: 150px;
   z-index: 9;
   width: 799px;
   height: 38px;
}

#layer69copy9  {
   background-image: url(ldmodifiedmedia/layer69copy9.gif);
   z-index: 31;
   left: 99px;
}

#layer69copy8  {
   background-image: url(ldmodifiedmedia/layer69copy8.gif);
   left: 668px;
}

#layer69copy3  {
   background-image: url(ldmodifiedmedia/layer69copy3.gif);
   z-index: 31;
}

#layer53copy  {
   background-image: url(ldmodifiedmedia/layer53copy.gif);
   z-index: 15;
}

#layer8copy2  {
   background: url(ldmodifiedmedia/layer8copy2.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 100px;
   top: 236px;
   z-index: 24;
   width: 800px;
   height: 59px;
}

#layer79copy  {
   background-image: url(ldmodifiedmedia/layer79copy.gif);
   z-index: 30;
   left: 383px;
}

#loginbutton  {
   left: 709px;
}

#layer69copy  {
   background-image: url(ldmodifiedmedia/layer69copy.gif);
   left: 99px;
}

#layer3copy2  {
   background: url(ldmodifiedmedia/layer3copy2.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 98px;
   top: 149px;
   z-index: 11;
   width: 802px;
   height: 73px;
}

#layer62copy  {
   background: url(ldmodifiedmedia/layer62copy.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 246px;
   top: 206px;
   z-index: 29;
   width: 420px;
   height: 502px;
}

#layer70copy  {
   background-image: url(ldmodifiedmedia/layer70copy.gif);
   left: 383px;
}

#layer10copy  {
   background: url(ldmodifiedmedia/layer10copy.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 99px;
   top: 236px;
   z-index: 25;
   width: 800px;
   height: 51px;
}

#layer3copy  {
   background: url(ldmodifiedmedia/layer3copy.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 100px;
   top: 150px;
   z-index: 13;
   width: 800px;
   height: 46px;
}

#background  {
   margin: 0px auto 0px auto;
   background: url(ldmodifiedmedia/background.gif) no-repeat;
   visibility: visible;
   height: 1000px;
   width: 1000px;
   position: relative;
}

#layer8copy  {
   background: url(ldmodifiedmedia/layer8copy.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 98px;
   top: 235px;
   z-index: 23;
   width: 802px;
   height: 120px;
}

#homebutton  {
   font: 11px/20px Tahoma;
   text-align: left;
   visibility: visible;
   position: absolute;
   left: 393px;
   top: 157px;
   z-index: 21;
   width: 39px;
   height: 20px;
}

#mlbutton  {
   font: 11px/28px Tahoma;
   text-align: left;
   visibility: visible;
   position: absolute;
   left: 828px;
   top: 153px;
   z-index: 19;
   width: 85px;
   height: 28px;
}

#layer21  {
   background: url(ldmodifiedmedia/layer21.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 100px;
   top: 236px;
   z-index: 21;
   width: 800px;
   height: 169px;
}

#layer14  {
   background: url(ldmodifiedmedia/layer14.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 17;
   width: 482px;
   height: 278px;
}

#layer13  {
   background: url(ldmodifiedmedia/layer13.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 101px;
   top: 151px;
   z-index: 16;
   width: 798px;
   height: 51px;
}

#layer71  {
	background: url(ldmodifiedmedia/layer71.gif) no-repeat;
	visibility: visible;
	position: absolute;
	left: 418px;
	top: 284px;
	z-index: 35;
	width: 165px;
	height: 1px;
}

#layer73  {
   background-image: url(ldmodifiedmedia/layer73.gif);
   z-index: 5;
}

#layer35  {
   background: url(ldmodifiedmedia/layer35.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 425px;
   top: 212px;
   z-index: 27;
   width: 514px;
   height: 202px;
}

#layer12  {
   background-image: url(ldmodifiedmedia/layer12.gif);
   z-index: 14;
}

#layer11  {
   background: url(ldmodifiedmedia/layer11.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 98px;
   top: 149px;
   z-index: 12;
   width: 802px;
   height: 72px;
}

#layer10  {
   background-image: url(ldmodifiedmedia/layer10.gif);
   z-index: 10;
}

#layer15  {
   background: url(ldmodifiedmedia/layer15.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 543px;
   top: 1px;
   z-index: 17;
   width: 379px;
   height: 265px;
}

#layer16  {
   background: url(ldmodifiedmedia/layer16.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 846px;
   top: 78px;
   z-index: 18;
   width: 154px;
   height: 164px;
}

#layer17  {
   background: url(ldmodifiedmedia/layer17.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 307px;
   top: 59px;
   z-index: 19;
   width: 222px;
   height: 196px;
}

#layer27  {
   background: url(ldmodifiedmedia/layer27.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 101px;
   top: 236px;
   z-index: 26;
   width: 798px;
   height: 18px;
}

#layer77  {
   background-image: url(ldmodifiedmedia/layer77.gif);
   z-index: 32;
}

#layer37  {
   background: url(ldmodifiedmedia/layer37.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 130px;
   top: 270px;
   z-index: 31;
   width: 247px;
   height: 52px;
}

#layer76  {
   background: url(ldmodifiedmedia/layer76.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 3;
   width: 1000px;
   height: 110px;
}

#layer18  {
   background: url(ldmodifiedmedia/layer18.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 428px;
   top: 9px;
   z-index: 20;
   width: 214px;
   height: 306px;
}

#layer24  {
   background: url(ldmodifiedmedia/layer24.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 98px;
   top: 235px;
   z-index: 22;
   width: 802px;
   height: 171px;
}

#layer70  {
   background-image: url(ldmodifiedmedia/layer70.gif);
   left: 99px;
}

#layer22  {
   background: url(ldmodifiedmedia/layer22.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 117px;
   z-index: 4;
   width: 1000px;
   height: 683px;
}

#layer36  {
   background: url(ldmodifiedmedia/layer36.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 96px;
   top: 209px;
   z-index: 28;
   width: 715px;
   height: 562px;
}

#layer75  {
   background-image: url(ldmodifiedmedia/layer75.gif);
   z-index: 32;
}

#layer74  {
	background-image: url(ldmodifiedmedia/layer74.gif);
	z-index: 32;
	left: 150px;
}

#layer79  {
   background-image: url(ldmodifiedmedia/layer79.gif);
   z-index: 30;
   left: 668px;
}

#layer8  {
   background: url(ldmodifiedmedia/layer8.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 369px;
   top: 84px;
   z-index: 7;
   width: 565px;
   height: 100px;
}

#layer4  {
   background: url(ldmodifiedmedia/layer4.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 34px;
   top: 0px;
   z-index: 6;
   width: 630px;
   height: 522px;
}

#layer9  {
   background-image: url(ldmodifiedmedia/layer9.gif);
   z-index: 8;
}

#layer1  {
   background: url(ldmodifiedmedia/layer1.gif) no-repeat;
   visibility: visible;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 2;
   width: 1000px;
   height: 1000px;
}

html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #121212;
}

Was This Post Helpful? 0
  • +
  • -

#6 bammurdo   User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 03-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 03:33 PM

Wow those are some confussing names ...

Name layer's what they are ... like :
Header
Footer
Content_base
Link1

ect ... not

LayerOne
LayerTwo
LayerTwoCopy

...

It'll be realy difficult to edit when you go back to it ...

Ok, let me find the right layer :).

...
Ok, in your Css file ... look for this : 
#id162aboutus  {
   visibility: visible;
   position: absolute;
   top: 400px;
   left: 200px;
   font: 11px/13px Tahoma;
   text-align: center;
   color: #FFFFFF;
   z-index: 34;
   width: 60%;
}

And change it to :
#id162aboutus  {
   visibility: visible;
   position: absolute;
   top: 240px;
   left: 200px;
   font: 11px/13px Tahoma;
   text-align: center;
   color: #FFFFFF;
   z-index: 34;
   width: 60%;
}


If that's too high ... keep adding 10's to this part : 

top: 240px;


Your welcome :)
:rolleyes: thanks gladly accepted :P
Was This Post Helpful? 1
  • +
  • -

#7 Cyrusthebeast   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 11-October 09

Re: Moving text over an image?

Posted 16 October 2009 - 05:00 PM

Tysvm! I clicked this post was helpful and left a comment, then I clicked again to try to thank you and it wouldn't let me :(
Was This Post Helpful? 0
  • +
  • -

#8 markhazlett9   User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Re: Moving text over an image?

Posted 16 October 2009 - 06:26 PM

View PostCyrusthebeast, on 16 Oct, 2009 - 04:00 PM, said:

Tysvm! I clicked this post was helpful and left a comment, then I clicked again to try to thank you and it wouldn't let me :(



Try posting your issue in the site questions/support forum found here http://www.dreaminco...howforum106.htm

The mods will help you out.

Cheers
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1