Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree2Likes
  • 1 Post By breno
  • 1 Post By mlseim

Thread: Placing text on top on a div

  1. #1
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times

    Placing text on top on a div

    So I have a div called .info that displays text for each image in my slideshow. However I have the background color of the div appear but not the text, the text is staying to the right of each image and I want it to be on the bottom left under each image.

    Here's the code I'm referring to:

    .info { /* Image Titles */ /* .info is children of the slider */
    width: 690px;
    height: 80px;
    display: block;
    bottom: -375px;
    position:relative;
    background: rgba(49,90,137,.3);
    z-index:999;
    }

    .info h2 {
    font-family: sans-serif;
    font-size: 20px;
    padding: 15px 0 0 0;

    }

    http://mast.salemstate.edu/itc18244/Portfolio/ (view my portfolio page)

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Personal opinion here:
    It's not worth the effort of placing that text. The whole site breaks when the screen size is made smaller. You have way bigger issues here than your text placement. Have you looked at your site using an iPad? Also, the footer is covered too ... so many issues.


  4. #3
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times
    Yes that would be correct because I haven't gotten that far yet, I'm not thinking about media queries yet and making the site responsive. Eventually I'll get there, but for now just trying to build everything in place.
    Last edited by mkymn8828; Mar 25th, 2015 at 09:49 AM.

  5. #4
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by mkymn8828 View Post
    Yes that would be correct because I haven't gotten that far yet, I'm not thinking about media queries yet and making the site responsive. Eventually I'll get there, but for now just trying to build everything in place.
    I know what your trying to do but its not worth it. You really do need to plan responsive from the beginning. I've done it that way, it's a downright headache when you say ill make it responsive later, you create x4 more work for yourself and frustration. But if you don't want to go responsive then you'll just cut off any mobile users to your site which isn't a good thing either. Plan responsive, mobile first, content is king.
    mkymn8828 likes this.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    I do want to add that I'm not just taking the "lazy route" and saying you should trash it and start over. Just for the process of learning new things, it would be good to dig-in and solve it. Keep trying things and google for ideas. You'll learn a lot that way. But for the time and frustration factor, I would not even spend the time on it. As Breno added, start with a responsive template from the beginning.
    mkymn8828 likes this.


  7. #6
    Junior Member
    Join Date
    Jan 2015
    Posts
    24
    Member #
    41395
    Liked
    2 times
    Thanks guys appreciate it, atleast I have a it all designed out in illustrator so I have something to work off of I think it would be a good learning curve though to work with what I got and figure it from there. Worst comes to worse yes I could just start again.
    Last edited by mkymn8828; Mar 26th, 2015 at 09:47 AM.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Make sure the style for <h2> is "float:left;"

    You might want to try this .. add a div to clear ...

    <div style="clear:both;"></div>
    <div class="info">
    <h2>Halloween Bats</h2>
    </div><!--End Info-->



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com