ansaurus

Question

An image and text query and a css question

Answer 1

+1 A:

Tables are for tabular data (think Excel). If you have a grid of data to display use a table. When it comes to page lyouts, use CSS positioning.

Also, obsessive DIV use isn't the best way to use CSS. Getting into the habit of wrapping everything up in a DIV is a practice known as "div mania" and you can Google for reasons why it's not good.

TravisO 2008-12-02 14:30:39

What do you mean by div mania? Is it not useful to have a main div to be able to contain everything?

Joshxtothe4 2008-12-02 14:35:58

Answer 2

+1 A:

Well, first off, when setting a background image, it won't hide the text within the DIV, no matter how high you set the Z-Index. It just doesn't work. One solution could be to wrap the inner text in a span, and hide the span when you want the background image of the div to show. But, from your question, you didn't want to change your html structure that much, yet, you'll have to in order to get what you want, I believe.

Sample code:

<html>
    <head>
     <style type="text/css">
      .class1{color:#000;}
      .class2{color:#00f;}
      .class3{color:#0f0;}
      .class4{color:#f00; background-image:url('someimage.jpg');}
     </style>
    </head>
    <body>
     <script type="text/javascript">
      function sbox(divid, classname)
      {
       document.getElementById(divid).className=classname;
       if(document.getElementById(divid+"_text")!=null)
        document.getElementById(divid+"_text").style.display="none";
      }
     </script>
     <div>
      <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
      <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
      <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
     </div>
     <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

And I agree with TravisO, HTML tables should be used for tabular data, and not as a layout mechanism. There are also some CSS oddities with tables when you've got a large hierarchy of tables/rows/etc.

Carl 2008-12-02 14:42:21

Thanks for your response. Would I just change the class back to 1 to get the text back, and still rely on background images for the other classes to show them? I apologize if I an not understanding correctly. What would be a better way instead of having the image as a background?

Joshxtothe4 2008-12-02 15:08:29

Answer 3

+1 A:

(In response to Joshxtothe4's comment... I needed more space to respond)

Changing the class back to class1 will not show the text again, unfortunately. The code I gave will hide the text, always, if it's found in a span. You could do something like below, and add another CSS statement that will hide the span if class4 is used. Then you don't have to have that code in javascript. Probably a cleaner solution:

<html>
    <head>
        <style type="text/css">
                .class1{color:#000;}
                .class2{color:#00f;}
                .class3{color:#0f0;}
                .class4{color:#f00; background-image:url('someimage.jpg');}
     .class4 span { display: none;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
                function sbox(divid, classname)
                {
                        document.getElementById(divid).className=classname;
                 }
        </script>
        <div>
     <a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
                <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
                <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
                <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
        </div>
        <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

As far as having the image as a background, that's probably your best bet. The only problem was that setting background images doesn't hide foreground text. You'd always have to hide that text somehow

Carl 2008-12-02 15:28:44

Thankyou so much for your replies! I am still trying to understand it though. How would I add a statement to hide the text if class 4 is used, or indeed any class with a background image?

Joshxtothe4 2008-12-02 15:45:07

The CSS style .class4 span{display:none;} hides the inner text inside the span if class4 is used. Hiding the text if a background image is used, is a much more difficult solution, and I don't have an answer to that at this moment. But, I imagine it would be a javascript solution.

Carl 2008-12-02 15:56:49

In theory, could I just have many classes with a background image and a class4 without a background image, would that not work perfectly?

Joshxtothe4 2008-12-03 10:32:16

I guess I don't follow what you mean.

Carl 2008-12-03 14:52:25

ansaurus

tags:

views:

answers:

An image and text query and a css question

related questions