Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: text on image

  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text on image

    Hey guys,

    I´m new to the forum and also pretty new to html/css... now i was creating a website for my custom map in starcraft 2 and stumbled uppon a problem..
    So below i have pasted the code and an image of what is wrong, here's the problem:

    I was trying to create like sort of a background image for a div that stretches to the max size of the div which in my case is the image for the "messageboard". Now after that i tried to put some text on the image but whenever i try to (have tried a lot of stuff..) the div in which i put the text always seems to push away the messageboard image... i tried stuff like floating but its really wearing me out. if anyone could have a look id be grateful.

    Code:
    	#right_content
    	{
    	float:right;
    	margin-right:100px;
    	width:900px;
    	height:800px;
    
    	}
    		.messageboard img 
    		{
    
    		width:100%;
    		height:100%;
    		}
    
    			}
    			.content {
    			float:left;
    			width:900px;
    			height:800px;
    			display:inline;
    			}
    				.content h1
    				{
    				text-align:left;
    				color:#FFFFFF;
    				}
    
    <div id="right_content">
            <div class="messageboard">
                	<img src="../../../../Desktop/website/desert%20strike%20website/contentborder.png" alt="logo" />  
                          <div class="content">  
                          <h1>I want to be on top of the messageboard image :(</h1>
                          </div>      
            </div>	
    </div>
    thnx,

    Rice
    Attached Thumbnails Attached Thumbnails text on image-htmlcsshelp.jpg  

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Try position absolute. Also, as you're specifying that the element be inline, you can't declare a size to it.

    Code:
    .content {
                            position:absolute;
                            top: 0;
                            left: 0; 
    			display:inline;
    			}

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Why don't you use a background image instead.

    Code:
    .messageboard {background-image:url(../../../../Desktop/website/desert%20strike%20website/contentborder.png);}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    i tried adjusting the .content css but this doesn't seem to work, i also tried putting the image as a background for .message board but then my whole idea of the image stretching to the size of the div goes away cause when i resize the div it just cuts off the background and doesnt fit it to the div.

    to be more clear on why im not using it as background, lets say: i have different pages which contain the right_content div with the messageboard but with a different size, if i would use the same image as the background, it wouldn't show up right. But if the images fits to the div, i can always use the same image.
    Last edited by Rice87; 05-17-2012 at 11:22 PM.

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Though the replies weren't very helpful thanks for your time anyway.

    I fixed it by giving the content div position:absolute; and then i had to give a lower z-index to the messageboard than the content that i want to display on it.

    yaaaaay
    Last edited by Rice87; 05-18-2012 at 12:54 AM.

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Quote Originally Posted by Rice87 View Post
    Though the replies weren't very helpful thanks for your time anyway.

    I fixed it by giving the content div position:absolute; and then i had to give a lower z-index to the messageboard than the content that i want to display on it.

    yaaaaay
    I did say to give it absolute positioning, so you can't say we were that unhelpful.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •