...

View Full Version : seeking simpler css rule



bazz
08-20-2005, 05:42 PM
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.

mark87
08-20-2005, 06:08 PM
Why don't you want to use classes? :confused:

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; }

Bill Posters
08-20-2005, 06:40 PM
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.

harbingerOTV
08-21-2005, 02:59 AM
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 ;)



<!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>

bazz
08-21-2005, 02:13 PM
harbingerOTV, thank you for taking the time.

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

:thumbsup:

Bazz

harbingerOTV
08-21-2005, 06:25 PM
FIXED! :D

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.



<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum