Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS To get the text inside the image

anuraa

Legendary Coder
Hello friends:

I was fascinated with the website www.amaliyaFoundation.com. When I looked at the source code, it refers .php files as well. I am trying with what I know. I have attached my code. Right now, I am struggling with having to show the text inside the images. I used the guidance of How To Position Text Over an Image. To position the three circles the way it was, it required position:absolute. To overcome this, I am using
transform: translate(155px, 150px); . Unless, I moved the cursor to the image, it doesn't show my text. I tried only with first image to the left. I am sure that you guys may know a way to force it to show. Thanks for all the inputs.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Document</title>
<style>
 body{font-family: 'Muli', sans-serif; color:#292a2b; font-size:13px; padding:0; margin:0 auto;}
 #main_cont{ width:100%; min-width:1024px;}

.clearit{ clear:both;}
.floatleft{ float:left;}
.floatright{ float:right;}
.centerit{ margin:0 auto;}

.home_shadow{ width:922px; height:42px;  background: no-repeat; position:absolute; bottom:25px; left:40px; }

.home_slider{ width:100%; min-width:1024px; height:545px; background: repeat-x;}
.home_slider_sec{ width:1000px; height:545px; position:relative;}

.home_circles1{ width:325px; height:auto; background: no-repeat; position:absolute; left:61px; top:138px;
 z-index:1;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:40px 8px 0 0px; text-align:right; line-height:22px;}
.home_circles1:hover{ opacity: .2; cursor: pointer;}

.home_circles2{width:325px; height:auto; background: repeat; position:absolute; left:340px; top:70px;
 z-index:2;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:12px 100px 0 0px; line-height:22px; text-align:right;}
.home_circles2 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles2:hover{ opacity: .3;}

.home_circles3{width:325px; height:auto; background: no-repeat; position:absolute; left:617px; top:138px;
z-index:1;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:40px 80px 0 0; text-align:right; line-height:22px;}
.home_circles3 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles3:hover{ opacity: .3;}


.home_circles6{ width:266px; height:65px;  background: no-repeat; position:absolute; left:370px; top:450px;z-index:3;font-family: 'Playball', cursive; font-size:22px; color:#fff; line-height:65px; text-align:center;}
.home_circles6 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles6:hover{ opacity: .3;}

.inside_header{ height:145px; width:100%; min-width:1024px; background:url(top.jpg) bottom repeat-x;}
.inside_header_line{ height:4px; width:100%; min-width:1024px; }
.inside_header_sec{ height:141px; width:100%; min-width:1024px;}
.inside_main_logo{ width:1000px; height:83px;}
.inside_logo{ width:228px; height:107px; position:relative; padding:5px 0 13px 0;}

.inside_navi{width: 615px;height: 42px;padding: 15px 0 0 385px;font-size: 11px; background-color: gray;}
.inside_navi a{  text-decoration:none !important;}
.inside_underline{ width:268px; height:13px; background:url(../images/underline.png) no-repeat; position:absolute; left:-33px; bottom:-6px; z-index:2;}
.selec_PG{ color:#fff; background:#f0a120; padding:7px 15px; text-decoration:none; cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; text-transform:uppercase; text-decoration:none;}
.selec_NPG{ color:#2f3030; text-decoration:none; cursor:pointer; padding:7px 15px; text-transform:uppercase; }
.selec_NPG:hover{ color:#fff; background:#f0a120; padding:7px 15px; text-decoration:none; cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
.selec_SEP{ width: 4px;
color: #2f3030; padding: 7px 0px 0 0px; }

.home_shadow{ width:922px; height:42px; background:url(shadow_home.png) no-repeat; position:absolute; bottom:25px; left:40px; }

.home_bott{ width:100%; min-width:1024px; background:url(../images/Nwtext_back2.jpg)  center top no-repeat;}
.home_bott_sec{width:1000px; padding:60px 0px 40px 0px; height:289px;}
.home_bott_header{ width:485px; height:30px; color:#292a2b; font-size:30px;margin-bottom:9px; padding-bottom:9px; text-align:center;font-family: 'Playball', cursive; margin:0 257px 0px 257px;}
.home_bott_cont{ width:485px; text-align:center; margin:15px 257px 9px 257px; line-height:20px;}
.home_bott_cont2{ width:750px; text-align:center; margin:15px 125px 0 125px; line-height:20px;} 

.home_footer{ width:100%; min-width:1024px;}
.home_footer_sec{ width:100%; min-width:1024px; background:#292929; height:35px;}
.home_footer_text{ color:white; text-align:center; text-align:center; font-size:11px; line-height:35px;}
.home_footer_text a{ color:#5b5c5d; text-decoration:none;}
.home_footer_line{ width:100%; min-width:1024px; background:#333333; height:10px;}

.container {
  position: relative;
  text-align: center;
  color: white;
}
.top-right {
  position: absolute;
  font-family: 'Playball', cursive; font-size:18px; color: black;
  transform: translate(155px, 150px);
} 
</style>
</head>
<body>
   <div id="main_cont" class="centerit">
        <div class="inside_header centerit">
            <div class="inside_header_line centerit"></div>
            <div class="inside_header_sec centerit">
                <div class="inside_main_logo centerit">
                  <div class="inside_logo floatleft"><a href="index.php"><img src="Nwlogo.png" border="0" title="Amaliya Logo"
                  alt="Amaliya Logo" /></a></div>
                </div>
              <div class="inside_navi centerit">
                <a href="index.php"><div class="selec_PG  floatleft">Home</div></a>           
                <div class="selec_SEP floatleft">.</div>     
                <a href="about.php"><div class="selec_NPG  floatleft">About</div></a>           
                <div class="selec_SEP floatleft">.</div>                     
                <a href="encore.php"><div class="selec_NPG  floatleft">Encore </div></a>           
                <div class="selec_SEP floatleft">.</div>                     
                <a href="enable.php"><div class="selec_NPG  floatleft"> Enable</div></a>           
                <div class="selec_SEP floatleft">.</div>                         
                <a href="empower.php"><div class="selec_NPG  floatleft">Empower</div></a>           
                <div class="selec_SEP floatleft">.</div>                       
                <a href="contact.php"><div class="selec_NPG  floatleft">Contact</div></a></div>
            </div>
        </div>       
        <div class="home_slider centerit">
            <div class="home_slider_sec centerit">
            <div class="container" ><img src="encore_circle.png" class="home_circles1 floatleft" >
                <div class="top-right">Top <br>Left<br>Mama</div>
            </div>
            <div><img src="hearing_circle.png" class="home_circles2 floatleft" ></div>
            <div><img src="youth_circle.png" class="home_circles3 floatleft"></div>
            <div><img src="upcomming-events.png" class="home_circles6 floatleft" ></div>
            <div class="home_shadow floatleft"></div>
        </div>
    </div>       
    <div class="home_bott centerit">
        <div class="home_bott_sec centerit">
        <div class="home_bott_header floatleft">Fulfilling the promise</div>
        <div class="home_bott_cont floatleft">The Amaliya Foundation works to advance two basic principles:<br /><br />
           <img src="bullet1.png" border="0" />All people deserve to live with dignity.<br />
           <img src="bullet1.png" border="0" />All people are able to contribute meaningfully to society
            and must be given the means and opportunity to do so.
        </div>
        <div class="home_bott_cont2 floatleft">
            We believe that education is the key to unlocking the full potential of each and every individual. It helps
            a person to make sense of the world and to find an active role in society, whether young, old or differently-abled. <br/><br/><br/>
            <span>The Amaliya Foundation has been established to develop and implement a series of innovative programmes
            centred around education. They target certain segments of the population – in particular the youth,
            the differently-abled and the elderly.  </span>
        </div>
        <div class="clearit"></div>
    </div>   
    <div class="home_footer centerit">
        <div class="home_footer_sec centerit">
            <div class="home_footer_text centerit">&copy; 2023 Amaliya Foundation. All Rights Reserved. </div>
        </div>   
        <div class="home_footer_line centerit"></div>
        <div class="clearit"></div>   
    </div>       
</body>   
</html>
 

Attachments

  • youth_circle.png
    youth_circle.png
    96.6 KB · Views: 1
  • hearing_circle.png
    hearing_circle.png
    83.8 KB · Views: 1
  • encore_circle.png
    encore_circle.png
    88.8 KB · Views: 0
  • upcomming-events.png
    upcomming-events.png
    5.5 KB · Views: 1
Last edited:

New Threads

Buy us a coffee!

Back
Top Bottom