Text over image, text margin

Text needs to be displayed over an image with a margin for text

Page 1 of 1

4 Replies - 3209 Views - Last Post: 15 November 2009 - 06:25 PM

#1 WBBinaryBoy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 21-February 09

Text over image, text margin

Posted 12 November 2009 - 03:50 AM

I'm coding a web site that needs to have a frame as a sub-background, a background that's on a background but not killing the other one, it is made from three images, named top frame, middle frame and bottom frame

Problem: these frames need content, mainly text to be displayed on the image named middle frame in the empty section (middle)

I'v got this CSS:
#topframe{
	margin-left:auto; 
	margin-right:auto; 
	width:100%;}
#wholeframe{
	margin-left: 0px;
	margin-right: 0px;
				width:100%;
}
#bottomframe{
	margin-left: auto;
	margin-right: auto;
	width:100%}


And this HTML: (specified to section)
<img src="resources/top frame.png" id="topframe" >
<img src="resources/middle frame.png" id="wholeframe">
<!--content needs to go here-->
<img src="resources/bottom frame.png" id="bottomframe">



Is This A Good Question/Topic? 0
  • +

Replies To: Text over image, text margin

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Text over image, text margin

Posted 12 November 2009 - 07:12 AM

Rather than using images like you are, you should make your html elements divs, which can then contain your text. The images can be added as backgrounds in your css.
#wholeframe{
	margin-left: 0px;
	margin-right: 0px;
	width:100%;
	background:url(resources/middle frame.png) 0 0 no-repeat;
}


Was This Post Helpful? 0
  • +
  • -

#3 WBBinaryBoy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 21-February 09

Re: Text over image, text margin

Posted 12 November 2009 - 12:34 PM

View Postthehat, on 12 Nov, 2009 - 06:12 AM, said:

Rather than using images like you are, you should make your html elements divs, which can then contain your text. The images can be added as backgrounds in your css.
#wholeframe{
	margin-left: 0px;
	margin-right: 0px;
	width:100%;
	background:url(resources/middle frame.png) 0 0 no-repeat;
}



Will that cause conflict with the other background i've already got as code?
Was This Post Helpful? 0
  • +
  • -

#4 markhazlett9   User is offline

  • Coding is a lifestyle
  • member icon

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

Re: Text over image, text margin

Posted 13 November 2009 - 11:36 AM

Instead of using margin's maybe try and use absolute positioning instead. So create 2 div's and put the second div to absolute positioning 0,0 over the first div.

Cheers
Was This Post Helpful? 0
  • +
  • -

#5 macosxnerd101   User is offline

  • Games, Graphs, and Auctions
  • member icon




Reputation: 12324
  • View blog
  • Posts: 45,424
  • Joined: 27-December 08

Re: Text over image, text margin

Posted 15 November 2009 - 06:25 PM

You can also use negative margins to create overlap amongst elements.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1