Skip navigation
summerskin
Currently Being Moderated

Basic HTML help

Mar 17, 2013 9:58 PM

This should be fairly easy I would assume, though honestly I am still learning a lot about HTML and CSS

 

can someone explain to me why my text font goes away in this line of code whenever I replace the image

 

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="css\set-photography.css">

 

 

<div class="accordian">

          <ul>

                    <li>

                              <div class="image_title">

                                        <a href="#">KungFu Panda</a>

                              </div>

                              <a href="#">

                                        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>

                              </a>

                    </li>

             <li>

                              <div class="image_title">

                                        <a href="#">Toy Story 2</a>

                              </div>

                       <a href="#">

                                 <img src="images/146.jpg"/>

 


I replaced the image for Toy Story 2 with my own image
yet the text for Toy Story 2 is gone

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 17, 2013 11:05 PM   in reply to summerskin

    I dont quite get what you mean. Do you mean the text goes missing within DW or on your actual webpage? Can you share screenshots of what you mean so we can understand it better?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 17, 2013 11:17 PM   in reply to summerskin

    Did you try closing </a> and </li> in your code? Right now your <li> is still open.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 18, 2013 12:20 AM   in reply to summerskin

    There is no <head> tag in your document. There is no start of <body> tag. There's a redundant closure to </script> tag while it is not required.

     

    Change your code to this:

     

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="css\set-photography.css">

    </head>

    <body>

    <div class="accordian">

      <ul>

        <li>

          <div class="image_title"> <a href="#">Ordained</a> </div>

          <a href="#"> <img src="images/146.jpg" width="1400" height="933" longdesc="images/146.jpg"/> </a> </li>

        <li>

          <div class="image_title"> <a href="#">FDFDSFDFSDFS</a> </div>

          <a href="#"> <img src="images/img_3145.jpg"/> </a> </li>

        <li>

          <div class="image_title"> <a href="#">Ordained</a> </div>

          <a href="#"> <img src="images/259.jpg" width="1400" height="933"> </a> </li>

        <li>

          <div class="image_title"> <a href="#">U</a> </div>

          <a href="#"> <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> </a> </li>

        <li>

          <div class="image_title"> <a href="#">Cars 2</a> </div>

          <a href="#"> <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> </a> </li>

      </ul>

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 5:34 AM   in reply to Sudarshan Thiagarajan

    The first stop for layout problems should always be the validator - http://validator.w3.org - which would have illuminated these issues in about 1 second. It makes no sense to try to debug a layout that is based on invalid HTML.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 2:47 PM   in reply to summerskin

    I wouldn't put much faith in that code.  The type of errors it throws are very suspicous.  I sure as heck wouldn't use it.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthecodeplayer .com%2Fwalkthrough%2Fmake-an-accordian-style-slider-in-css3

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 19, 2013 11:52 AM   in reply to summerskin

    Use Code View. My guess is that when you delete the image in Design View, you're also deleting the <div class="image_title"> tag which is a necessary hook for your text styles.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points