Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    seeking simpler css rule

    Hi,

    In my paragraph, I wish to add two, or more, images of different sizes. The html so far is like this.

    <p>loads of text here
    <img src="image.gif" />
    more text along here
    <img src="image2.gif" />
    more text here.
    </p>

    The aim is to have a body of text which wraps around the images within.
    The style set applies to both, however, I want the first image to float right, the second image left the third right and, so on.

    How can I do this without using classes?

    Bazz.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why don't you want to use classes?

    You could do something like this -

    img[src="image.gif"] { clear: both; float: right; }
    img[src="image2.gif"] { clear: both; float: left; }
    img[src="image3.gif"] { clear: both; float: right; }

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by mark87
    You could do something like this -

    img[src="image.gif"] { clear: both; float: right; }
    img[src="image2.gif"] { clear: both; float: left; }
    img[src="image3.gif"] { clear: both; float: right; }
    Not if you want it to work in IE you can't.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay I tried this Opera * , Moz and IE6. IE6 doesn't like it. I don't know javascript so I'm not sure whats going on with IE.

    You do have to give an ID for the P but you don't have to use classes for all the images.

    Might not be what your looking for but let's just say it was an intresting exercise for me anyway

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Zebra Floats</title>
    <style type="text/css">
    p {
    width: 400px;
    border: 1px solid #000;
    padding: 8px;
    }
    p img {
    margin: 8px;
    clear: both;
    border: 2px solid #f6c;
    width: 50px;
    height: 50px;
    }
    </style>
    <!--taken and moded from http://www.renegadezen.com/blog/article/53/javascript-zebra-lists-->
    
    <script type="text/javascript">
      // this function is need to work around 
      // a bug in IE related to element attributes
      function hasClass(obj) {
         var result = false;
         if (obj.getAttributeNode("class") != null) {
             result = obj.getAttributeNode("class").value;
         }
         return result;
      }   
    
     function fly(id) {
    
        // the flag we'll use to keep track of 
        // whether the current list item is odd or even
        var even = false;
        // the colours for the odd and even rows of the list
      
        var evenColor = arguments[1] ? arguments[1] : "left";
        var oddColor = arguments[2] ? arguments[2] : "right";
        // obtain a reference to the desired list
        // if no such list exists, abort
        var p = document.getElementById(id);
        if (! p) { return; }
        // by definition, lists  can have more than one li
        // element, so we'll have to get the list of child
        // &lt;li&gt;s 
        var lis = p.getElementsByTagName("img");
    
      // and iterate through them...
        for (var h = 0; h < lis.length; h++) {
          var img = lis[h];  
        img.style.cssFloat = even ? evenColor : oddColor;
    
            // flip from odd to even, or vice-versa
            even =  ! even; 
        }
      }
    </script>
    </head>
    <body onload="fly('floated_images');"> 
    <p id="floated_images">
    <img src="">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tristique fermentum velit. Duis ultricies, enim et aliquet 
    
    aliquam, tellus leo consequat nisl, non dictum magna lectus non mauris. Curabitur diam justo, pharetra eget, rhoncus at, dignissim 
    
    ut, enim. Sed venenatis, orci eu mollis pellentesque, orci urna nonummy tellus, a fringilla libero nulla ut tortor.
    <img src="">
    Aliquam mauris eros, semper sed, lacinia eu, auctor vel, metus. Phasellus lectus. Morbi et sem ac enim aliquet imperdiet. 
    
    Phasellus risus massa, posuere in, egestas vel, imperdiet vel, massa. Vivamus sit amet purus quis urna lacinia interdum. In et 
    
    wisi. Vestibulum mi erat, pellentesque a, faucibus vel, congue tincidunt, augue.
    <img src="">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tristique fermentum velit. Duis ultricies, enim et aliquet 
    
    aliquam, tellus leo consequat nisl, non dictum magna lectus non mauris. Curabitur diam justo, pharetra eget, rhoncus at, dignissim 
    
    ut, enim. Sed venenatis, orci eu mollis pellentesque, orci urna nonummy tellus, a fringilla libero nulla ut tortor.
    <img src="">
    Aliquam mauris eros, semper sed, lacinia eu, auctor vel, metus. Phasellus lectus. Morbi et sem ac enim aliquet imperdiet. 
    
    Phasellus risus massa, posuere in, egestas vel, imperdiet vel, massa. Vivamus sit amet purus quis urna lacinia interdum. In et 
    
    wisi. Vestibulum mi erat, pellentesque a, faucibus vel, congue tincidunt, augue.
    </p>
    </body>
    </html>
    Last edited by harbingerOTV; 08-21-2005 at 03:02 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    harbingerOTV, thank you for taking the time.

    In appearance, that is close. I shall try and work with it a bit.



    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    FIXED!

    problem was in IE not liking cssFloat. It prefers styleFloat. I played around and got a browser detect to work to change that variable depending on if IE or not.

    Now works in Opera8, Moz and IE6.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Zebra Floats</title>
    <!--original script taken and maliciously manhandled from http://www.renegadezen.com/blog/article/53/javascript-zebra-lists-->
    
    <script type="text/javascript">
    
     function fly(id) {
    
        // the flag we'll use to keep track of 
        // whether the current list item is odd or even
        var even = false;
        // the colours for the odd and even rows of the list
      
        var evenColor = arguments[1] ? arguments[1] : "left";
        var oddColor = arguments[2] ? arguments[2] : "right";
        // obtain a reference to the desired list
        // if no such list exists, abort
        var p = document.getElementById(id);
        if (! p) { return; }
        // by definition, lists  can have more than one li
        // element, so we'll have to get the list of child
        // &lt;li&gt;s 
        var lis = p.getElementsByTagName("img");
    
      // and iterate through them...
            for (var h = 0; h < lis.length; h++) {
          var img = lis[h];  
     if(navigator.appName == "Microsoft Internet Explorer") {
    img.style.styleFloat = even ? evenColor : oddColor;
    }
    else {
    img.style.cssFloat = even ? evenColor : oddColor;
    }
            // flip from odd to even, or vice-versa
            even =  ! even; 
        }
    }
    </script>
    <style type="text/css">
    p {
    width: 400px;
    border: 1px solid #000;
    padding: 8px;
    }
    p img {
    margin: 30px 8px 8px 8px;
    clear: both;
    border: 2px solid #f6c;
    width: 50px;
    height: 50px;
    }
    </style>
    </head>
    <body onload="fly('floated_images');"> 
    <p id="floated_images">
    <img src="">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tristique fermentum velit. Duis 
    
    ultricies, enim et aliquet aliquam, tellus leo consequat nisl, non dictum magna lectus non 
    
    mauris. Curabitur diam justo, pharetra eget, rhoncus at, dignissim ut, enim. Sed venenatis, orci 
    
    eu mollis pellentesque, orci urna nonummy tellus, a fringilla libero nulla ut tortor.
    <img src="">
    Aliquam mauris eros, semper sed, lacinia eu, auctor vel, metus. Phasellus lectus. Morbi et sem 
    
    ac enim aliquet imperdiet. Phasellus risus massa, posuere in, egestas vel, imperdiet vel, massa. 
    
    Vivamus sit amet purus quis urna lacinia interdum. In et wisi. Vestibulum mi erat, pellentesque 
    
    a, faucibus vel, congue tincidunt, augue.
    <img src="">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tristique fermentum velit. Duis 
    
    ultricies, enim et aliquet aliquam, tellus leo consequat nisl, non dictum magna lectus non 
    
    mauris. Curabitur diam justo, pharetra eget, rhoncus at, dignissim ut, enim. Sed venenatis, orci 
    
    eu mollis pellentesque, orci urna nonummy tellus, a fringilla libero nulla ut tortor.
    <img src="">
    Aliquam mauris eros, semper sed, lacinia eu, auctor vel, metus. Phasellus lectus. Morbi et sem 
    
    ac enim aliquet imperdiet. Phasellus risus massa, posuere in, egestas vel, imperdiet vel, massa. 
    
    Vivamus sit amet purus quis urna lacinia interdum. In et wisi. Vestibulum mi erat, pellentesque 
    
    a, faucibus vel, congue tincidunt, augue.
    </p>
    </body>
    </html>
    hope that does something useful for you.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •