 | |
Short paragraphs, tall images
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Short paragraphs, tall images -
01-31-2007
, 05:27 PM
|
| | img | | | +----------+ |
This is a review of the next book. It +----------+
a bit longer but neither one is as | |
tall as the book covers. | |
Quote:
|
img | | | +----------+ |
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.
#2
| |||
| |||
|
|
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
#3
| |||
| |||
|
|
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
#4
| |||
| |||
|
|
In article 1170282456.749737.92... (AT) h3g2000cwc (DOT) googlegroups.com>, "Chris Nelson" <cnel... (AT) nycap (DOT) rr.com> wrote: I want to create a "table" using CSS to display book covers and short reviews ... |
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.
#5
| |||
| |||
|
|
On Jan 31, 6:51 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article 1170282456.749737.92... (AT) h3g2000cwc (DOT) googlegroups.com>, "Chris Nelson" <cnel... (AT) nycap (DOT) rr.com> wrote: 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, ... |
off or not perfectly functioning in some machines...
--
dorayme
#6
| |||
| |||
|
|
"Chris Nelson" <cnel... (AT) nycap (DOT) rr.com> wrote: 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... |
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</a> yada 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?
#7
| |||
| |||
|
|
On Feb 1, 5:24 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: "Chris Nelson" <cnel... (AT) nycap (DOT) rr.com> wrote: 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</a> yada 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? |
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
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.