Short paragraphs, tall images

Chris Nelson

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

Subscribe Post Reply

2061

dorayme

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

dorayme

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

Chris Nelson

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

dorayme

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

Chris Nelson

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

dorayme

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

Similar topics

Splitting paragraphs in a text.

by: Sandman | last post by:

I am splitting a text block into paragraphs, to be able to add images and stuff like that to a specific paragraph in a content management system. Well, right now I'm splittin on two or more...

PHP

Floated images and implied paragraphs

by: Graham J | last post by:

I submitted a variation on this on the Opera forum but I thought I'd bring it up here too as a more general HTML query. Consider this code (I've shown it the old fashioned presentational way but...

HTML / CSS

What's acceptable for paragraphs?

by: | last post by:

Could someone cite some offical rule or documentation with regard to the <P> tag? I've seen folks put it in between paragraphs... and others wrap it around a paragraph. I'd think to use it...

HTML / CSS

How to lay out side-by-side paragraphs without tables?

by: needhelp | last post by:

This one ought to be simple, but I have dug myself deeper and deeper, and gone farther and farther from what I wanted and I'm giving up. And my html that I've written is so bolloxed up now that...

HTML / CSS

Using paragraphs within CSS box -- why not?

by: Joe | last post by:

Hello, The code below is an entire HTML page that has a problem when using a <p> tag inside a CSS box (when running IE6). I was being a good boy and I replaced my single-cell <table> elements...

HTML / CSS

Possibility to divide a tall subform to two short subforms?

by: Paul T. RONG | last post by:

Is it possible to divide a tall subform with 80 records to two subforms each with 40 records? Dear All, What I have: Tables: tblProduct, tblOrder, tblOrderDetail

Microsoft Access / VBA

Automating Word (tables and paragraphs)

by: Josema | last post by:

Hi to all, Im trying to identify separately the tables and the paragraphs of a word document.. When i use the Word.Paragraphs interface to get all the paragraphs of a document i see that...

C# / C Sharp

A robust approach to "literary paragraphs"?

by: Jukka K. Korpela | last post by:

After noticing that IE 7 beta supports selectors like p+p, I started wondering how to achieve a simple rendering of paragraphs so that 1) there is no vertical spacing between paragraphs (i.e. the...

HTML / CSS

Hi i have problem with counting the number of paragraphs in a text file

by: keoo | last post by:

Im putting the part of the code which is relevant to my question......The program is opening the texfile which i already have created..Im not quite managing to make the program count the number of...

C / C++

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server