align text at bottom of image?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • lawgal
    New Member
    • Nov 2008
    • 7
    #1

    align text at bottom of image?

    without css my page looks like this:
    The Official Website of The Angels: My Boyfriend's Back!

    using css, so far i have gotten it to this point:
    The Official Website of The Angels: My Boyfriend's Back!

    how do i get it so that:
    (1) the image has no space at the top of the window
    (2) text aligns at bottom of image
    (3) the image isn't cut off at the bottom


    the substantive part of the css code is:
    Code:
    <style type="text/css">
body	{font-family: Trebuchet MS, helvetica, verdana, arial, sans-serif;
	}

a:hover{
color:yellow;
}

</style>
</HEAD>

<body style="background-color: #000000;">

<DIV style="width:100%;height:100%;background: url(http://www.theangelsonline.com/stage.gif) no-repeat top center;"> 

<div style="font-size:medium;color:white;padding:30px;text-align:center;">
<a href="cd.html">NEW CD!</a>  || <a href="news.html">NEWS</a> || <a href="history.html">HISTORY</a> <BR>
<a href="orders.html" target="_blank">MERCHANDISE</a> || <a href="disc.html">DISCOGRAPHY</a> || <a href="photos.html">PHOTOS</a>
<BR>
<a href="media.html">MUSIC & VIDEO</a> || <a href="press.html">PRESS</a> || <a href="links.html">LINKS</a>  || <a href="http://users.smartgb.com/g/g.php?a=s&i=g18-09728-e1">GUESTBOOK</a> </b>

</div>
</DIV> 

<center>
<font size="-1" color="white" face="Helvetica,Arial">
Logo graphics licensed &copy; 2008, Holly Golightly.

    any and all help is much appreciated as I am just learning css...
    -diane-
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      First, you have to get your html in order. You have no doctype. Without one, browsers go into quirks mode, where you never want to be, and IE in particular won't make its feeble attempt at performing like the modern browsers.

      On your very first line add this:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

      Then, validate your html and your css for those lists of any errors.

        Comment

        • lawgal
          New Member
          • Nov 2008
          • 7
          #3
          Wow. Well when I added that it wiped out most of the viewable page in firefox...!
          ???

          Instead can I first get some substantive answers to the formatting questions, then I'll worry about compliance.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Why we won't help you

                Comment

                • lawgal
                  New Member
                  • Nov 2008
                  • 7
                  #5
                  I validated and the html errors were minimal and do not effect the problems I am currently having.
                  The only substantive error is the omission of the doc type, which when added in, doesn't change the substantive errors I am still having.
                  Most of the errors have to do with the coding of a third party guestbook script and the values they pass, which the verifier should have no say in.

                  My css is approved as perfect, so that is not the issue.

                  Again, if someone could speak to the css coding that aligns text at the BOTTOM of a graphic, it would be most helpful and is INDEPENDENT of my coding compliance. Likewise for why my entire image is not showing.

                  Thank you.

                    Comment

                    • eWish
                      Recognized Expert Contributor
                      • Jul 2007
                      • 973
                      #6
                      The problem is that you are using the image as a background. If you want to continue using it as the background then you would need to define the height and width of the <div> container. Otherwise, you could simply use an <img> tag.


                      Welcome to Bytes.com!!

                      --Kevin

                        Comment

                        • lawgal
                          New Member
                          • Nov 2008
                          • 7
                          #7
                          First I want to thank you for actually addressing the substance of my issue rather than wasting time espousing blanket compliance b.s. which is of no help and honestly is just an arrogant answer.

                          I am trying to understand how I would define the size in the div, or alternatively how using the image tag I can specifically place the text at the bottom of the img.

                          Thanks again, people like you make this a learning experience.
                          Regards,
                          Diane

                            Comment

                            • eWish
                              Recognized Expert Contributor
                              • Jul 2007
                              • 973
                              #8
                              Here is a sample of how you could do it and still be valid XHTML & CSS. It is important to understand the standards as Doc as pointed out. Also, if you would like to know more about XHTML and CSS you might find these links helpful.

                              XHTML
                              CSS

                              If you have any further questions please don't hesitate to ask. We do want you to have a pleasant learning experience.

                              --Kevin
                              Attached Files

                                Comment

                                • lawgal
                                  New Member
                                  • Nov 2008
                                  • 7
                                  #9
                                  Thanks but here again, the navigation links appear below the stage instead of on the stage front.

                                  My issue is getting the text over the bottom portion of the image.
                                  Oh well.
                                  Thanks anyway!

                                    Comment

                                    • eWish
                                      Recognized Expert Contributor
                                      • Jul 2007
                                      • 973
                                      #10
                                      I only looked at the link with the CSS. Sorry, let me revisit it and see what I can do.

                                      --Kevin

                                        Comment

                                        • eWish
                                          Recognized Expert Contributor
                                          • Jul 2007
                                          • 973
                                          #11
                                          Okay, Sorry about that. I have redone the page doing as you wanted. One issue I can see is that the stage image has more space on the left than the right. Therefore, the text does not appear to be centered even though it is. I tested it after removing the space on the left and it looked like it should.

                                          I have not tested this but in a couple of browsers. So, there maybe other things to work around. However, it is a nice start.

                                          --Kevin
                                          Attached Files

                                            Comment

                                            • lawgal
                                              New Member
                                              • Nov 2008
                                              • 7
                                              #12
                                              I am amazed at the amount of time and effort you put into figuring this out for me and truly appreciate it.

                                              I will go back and re-examine the image and remove any excess spacing around it.

                                              Then I will study your code to try and learn what you did !! <grin>

                                              Thanks again for all your help & a truly heroic effort!!
                                              Diane

                                              p.s. would you like some credit on the website?

                                                Comment

                                                • eWish
                                                  Recognized Expert Contributor
                                                  • Jul 2007
                                                  • 973
                                                  #13
                                                  You are welcome. That is why we are here, to assist and help others. There isn't any need for credit. Hopefully, it will help you learn. Any more questions just let us know.

                                                  --Kevin

                                                    Comment

                                                    • drhowarddrfine
                                                      Recognized Expert Expert
                                                      • Sep 2006
                                                      • 7434
                                                      #14
                                                      So now, let's review from post #2.
                                                      posted by lawgal
                                                      wasting time espousing blanket compliance b.s. which is of no help and honestly is just an arrogant answer.
                                                      I validated and the html errors were minimal and do not effect the problems I am currently having.
                                                      1) Use a proper doctype! eWish gave you markup with a proper doctype.
                                                      2) Validate your html. eWish gave you markup that validates.

                                                      iow, what you said I arrogantly threw in your face, you are now thanking eWish for. If you did as I said over 7 hours ago, you could have saved yourself time and eWish some effort. Not to mention the second thoughts I will have about your future questions.

                                                        Comment

                                                        Previous template Next
                                                        Working...