Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simple CSS question

Reply
Thread Tools

Simple CSS question

 
 
Mike Silva
Guest
Posts: n/a
 
      03-25-2009
I have what I assume is a simple CSS question, to something that is
done all the time. I'm trying to lay out a column of vertical object
blocks each consisting of a graphic in the upper left of the block, a
title to the right of the graphic, and some text below the title. If
the text flows below the bottom of the graphic, I want the next object
block to begin below the text, otherwise to begin below the graphic.
Also, if the text flows below the bottom of the graphic, I don't care
if it remains to the right of the graphic or flows underneath the
graphic.

I know this should be easy, but I'm not seeing how to do it. Below is
a framework I've made, as a starting point. In the .graphic, .title
and .desc classes I've tried both absolute positioning inside the
(relative) obj box, and also floating the graphic to the left, but I
can't get something that works in both circumstances (text flows below
graphic, or text stays above graphic). When I say "works" I mean that
the next object block starts in the correct location below the
previous object block and all the way to the left. So what am I
getting wrong?

The essentials of my framework:

..obj {
margin: 20px 20px;
width: 30em;
}

.. obj .graphic {
}

.. obj .title {
}

.. obj .desc {
}

.....

<div class="obj">

<div class="graphic">
<img src="myimage.jpg" width="100" height="100" alt="image" />
</div>

<div class="title">
This is a Title
</div>

<div class="desc">
This is some descriptive text. In fact, it is a whole bunch of
descriptive text. In fact, I will keep typing until something breaks,
and then I will try and figure out how to fix it. In this case, I
want the enclosing item box to grow vertically to encompass all of the
descriptive text no matter how much it may be.
</div>
</div>

<div class="obj">

<div class="graphic">
<img src="myimage.jpg" width="100" height="100" alt="image" />
</div>

<div class="title">
This is another Title
</div>

<div class="desc">
This is some descriptive text.
</div>
</div>
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-25-2009
In article
<(E-Mail Removed)>,
Mike Silva <(E-Mail Removed)> wrote:

> I have what I assume is a simple CSS question, to something that is
> done all the time. I'm trying to lay out a column of vertical object
> blocks each consisting of a graphic in the upper left of the block, a
> title to the right of the graphic, and some text below the title. If
> the text flows below the bottom of the graphic, I want the next object
> block to begin below the text, otherwise to begin below the graphic.
> Also, if the text flows below the bottom of the graphic, I don't care
> if it remains to the right of the graphic or flows underneath the
> graphic.


Why does this:

<div><img src="pics/crimson.png" alt=""> text... </div>

<p>Text</p>

<p>Text</p>


not do what you want?

The elements I use here are simply examples of block elements, the best
semantic element to choose depends on your purpose.

If you want the text that goes with the graphic to not flow under the
graphic, you can do this:

<http://dorayme.netweaver.com.au/silva.html>

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: correction: A question about css (was: A question about css) richard HTML 12 03-09-2010 08:52 PM
CSS: a simple layout won't work in CSS liketofindoutwhy@gmail.com HTML 29 03-21-2008 03:46 PM
Is this the newsgroup for CSS help? CSS Question Included AF HTML 17 08-09-2006 06:57 PM
CSS question - can I make CSS Cascade sideways? Bill_W_Stephens@yahoo.com HTML 6 03-18-2006 06:02 PM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments