By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

Short paragraphs, tall images

P: n/a
I want to create a "table" using CSS to display book covers and short
reviews where the This is some test, yada, yada, yada +----------+
| |
| |
| img |
| |
| |
+----------+
--------------------- hr here ---------------------
This is a review of the next book. It +----------+
a bit longer but neither one is as | |
tall as the book covers. | |
| img |
| |
| |
+----------+
--------------------- hr here ---------------------

but the HR elements run through the covers, not under them. I've
tried putting a bottom border on the div that holds both and that
didn't help. I've got:
/* Add top and bottom border to separate books */
div.book {
border-bottom-width: medium;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-style: groove;
padding-top: 10px;
padding-left: 1cm;
padding-right: 1cm;
}

/* These are stacked, I want them side-by-side. */
..bookcover {
float: left;
clear: left;
position: relative;
}
..bookblurb {
vertical-align: top;
position: relative;
}

and

<div class='book'>
<img class='bookcover' src='images/b.jpg' />
<p class='bookblurb'>Talk talk talk</p>
</div>
<div class='book'>
<img class='bookcover' src='images/a.jpg' />
<p class='bookblurb'>Talk talk talk some more</p>
</div>

How can I get images to the side of text and lines between each book
div?

TIA.

Jan 31 '07 #1
Share this Question
Share on Google+
6 Replies


P: n/a
In article
<11*********************@h3g2000cwc.googlegroups.c om>,
"Chris Nelson" <cn*****@nycap.rr.comwrote:
I want to create a "table" using CSS to display book covers and short
reviews where the This is some test, yada, yada, yada +----------+
| |
| |
| img |
| |
| |
+----------+
--------------------- hr here ---------------------
This is a review of the next book. It +----------+
a bit longer but neither one is as | |
tall as the book covers. | |
| img |
| |
| |
+----------+
--------------------- hr here ---------------------

but the HR elements run through the covers, not under them.

Tried "clear" on the <hr>?

--
dorayme
Jan 31 '07 #2

P: n/a
In article
<11*********************@h3g2000cwc.googlegroups.c om>,
"Chris Nelson" <cn*****@nycap.rr.comwrote:
I want to create a "table" using CSS to display book covers and short
reviews where the This is some test, yada, yada, yada +----------+
| |
| |
| img |
| |


In fact, looking at your css and things,why not start from
something like:

....

<style type="text/css">
div img { float: right; }
hr {clear: both;}
</style>

</head>
<body>

<div>

<img src="one.jpg" width="246" height="300" alt="book cover of
....">

Like float, clear isn't simple to support. There is typically
basic support, but as things get more complicated, browser
behavior tends to break down. Thoroughly test pages using this
property.
</div>

<hr>

<div>

<img src="one.jpg" width="246" height="300" alt="book cover of
....">

Like float, clear isn't simple to support. There is typically
basic support, but as things get more complicated, browser
behavior tends to break down. Thoroughly test pages using this
property.
</div>

<hr>

etc

and style a little more but no need for complications with such a
basic need....

--
dorayme
Feb 1 '07 #3

P: n/a
On Jan 31, 6:51 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1170282456.749737.92...@h3g2000cwc.googlegroups.c om>,
"Chris Nelson" <cnel...@nycap.rr.comwrote:
I want to create a "table" using CSS to display book covers and short
reviews ...
Thanks. That seems to work.

I'd really like my images to alternate right and left floats. Right
now I've got a float:left in my bookcover class and I can create
bookcover-l and bookcover-r classes which have different floats but I
was wondering if there's a clever way to have them alternate. The
best I've come up with is to make them all bookcover and add a bit of
JavaScript that runs when the page loads, traverses the list of
elements with bookcover class and sets them alternately to bookcover-l
and bookcover-r (or bookcover-even and bookcover-odd) or adds an even
and odd class or something.
Feb 1 '07 #4

P: n/a
In article
<11**********************@s48g2000cws.googlegroups .com>,
"Chris Nelson" <cn*****@nycap.rr.comwrote:
On Jan 31, 6:51 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1170282456.749737.92...@h3g2000cwc.googlegroups.c om>,
"Chris Nelson" <cnel...@nycap.rr.comwrote:
I want to create a "table" using CSS to display book covers and short
reviews ...

Thanks. That seems to work.

I'd really like my images to alternate right and left floats. Right
now I've got a float:left in my bookcover class and I can create
bookcover-l and bookcover-r classes which have different floats but I
was wondering if there's a clever way to have them alternate. The
best I've come up with is to make them all bookcover and add a bit of
JavaScript that runs when the page loads, ...
I would do it by class and not rely on js which might be turned
off or not perfectly functioning in some machines...

--
dorayme
Feb 1 '07 #5

P: n/a
On Feb 1, 5:24 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
"Chris Nelson" <cnel...@nycap.rr.comwrote:
I'd really like my images to alternate right and left floats. Right
now I've got a float:left in my bookcover class and I can create
bookcover-l and bookcover-r classes which have different floats but I
was wondering if there's a clever way to have them alternate. The
best I've come up with is to make them all bookcover and add a bit of
JavaScript that runs when the page loads, ...

I would do it by class and not rely on js which might be turned
off or not perfectly functioning in some machines...
While I'm generally conservative and tend to agree with you, if I shy
away from JavaScript then I'm discounting any chance of doing anything
interesting and AJAX-y. My links look like:

<div class='book'>
<div class='bookcover'>
<a href='something really long'>
<img src='something.jpg' alt='The Title cover image' title='The
Title'/></a>
</div>
<div class='bookblurb'>
This is something about the book <a href='something really
long'>The Title</ayada yada yada; more text
</div>
</div>

and "something really long" tends to be 2-3 lines which have to be
maintained in two places and the repetition of the structure is a
pain, too; if I change it, I have to edit every book. I'd much rather
write a little JavaScript which manipulated the DOM so I could do:

<script language='JavaScript'>
book('something really long', 'something.jpg', 'The Title', 'The
blurb text and on and on')
...more books here...
</script>

so changing the book() function would change all my book div's. Can
you talk me out of that? Is JavaScript and the DOM really so
unreliable that I don't want to do that? If that's so, how does
anyone ever use AJAX?

Feb 8 '07 #6

P: n/a
In article
<11*********************@l53g2000cwa.googlegroups. com>,
"Chris Nelson" <cn*****@nycap.rr.comwrote:
On Feb 1, 5:24 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
"Chris Nelson" <cnel...@nycap.rr.comwrote:
I'd really like my images to alternate right and left floats. Right
now I've got a float:left in my bookcover class and I can create
bookcover-l and bookcover-r classes which have different floats but I
was wondering if there's a clever way to have them alternate. The
best I've come up with is to make them all bookcover and add a bit of
JavaScript that runs when the page loads, ...
I would do it by class and not rely on js which might be turned
off or not perfectly functioning in some machines...

While I'm generally conservative and tend to agree with you, if I shy
away from JavaScript then I'm discounting any chance of doing anything
interesting and AJAX-y. My links look like:

<div class='book'>
<div class='bookcover'>
<a href='something really long'>
<img src='something.jpg' alt='The Title cover image' title='The
Title'/></a>
</div>
<div class='bookblurb'>
This is something about the book <a href='something really
long'>The Title</ayada yada yada; more text
</div>
</div>

and "something really long" tends to be 2-3 lines which have to be
maintained in two places and the repetition of the structure is a
pain, too; if I change it, I have to edit every book. I'd much rather
write a little JavaScript which manipulated the DOM so I could do:

<script language='JavaScript'>
book('something really long', 'something.jpg', 'The Title', 'The
blurb text and on and on')
...more books here...
</script>

so changing the book() function would change all my book div's. Can
you talk me out of that? Is JavaScript and the DOM really so
unreliable that I don't want to do that? If that's so, how does
anyone ever use AJAX?
I would not talk you out of it, it depends entirely on how you
feel about the percentages of people with js off or things going
wrong with their engines. You may have to investigate the
percentages and especially look and attend to what happens when
someone does have js off, if it "degrades" gracefully, maybe no
problem.

I cannot see the problem quite, if you are adding books and
stuff, you just take car to alternate the classes. But perhaps i
have forgotten the full context of your project.

I think you can use server side things to do the sexy stuff you
want, like with php. In which case a php forum is your best bet.

--
dorayme
Feb 8 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.