nlseeger wrote:
> Hi Stephanie,
>
> Thank you for the tutorial links. I'll will certainly check those out.
>
> On the List Apart, since the client wants these "sidebars" I had hoped to use a small
> horizontal image to display that easily, so "liquid" anything is out. If there is a way to put
> those sidebars in as TWO background images (one on the left, one on the right?)
Yes, google for "sliding doors css". I think there is an article on the
ALA site that explains it anyway. But, you can create your three column
float display with all fixed widths as well.
What *I* would do is create the left/right column divs that float
(actually it works best if all the columns float), and then create
another class for your left/right little boxes that you put *inside*
your column divs.
see http://keynes.econ.iastate.edu/~sbridges/holistic-divs.jpg for what
I mean. The divs are rather sloppily drawn colored boxes over a screen
shot from firefox.
What you'd have is (I hope these all match up):
------------
<div id="container">
<div id="header"> header content</div>
<div id="wrapper" class="clearfix">
<div id="leftcol"> <img />
<div class="cutebox">like your mission statement, as many as you
want</div>
</div>
<div id="main">main column</div>
<div id="rightcol"><div class="cutebox">right column boxes</div></div>
</div><!-- wrapper -->
<div id="footer">footer stuff here</div>
</div>
----------------
What you'd have is an outer wrapper (id container here) which you can
use to control overall width. The header and footer divs sit inside the
outer wrapper. Then in the middle, you put another "inner wrapper"
(id=wrapper) div to hold your three (all floated) columns. You should
set all of these to have zero margin and padding, then you can make your
math work out correctly. If you put a "liner" div (it isn't in here) in
the middle column with margins/padding, you can keep things away from
the left/right columns. This *should* keep most of the IE troubles at
bay. You could set margin/padding on your cutebox divs to make those
behave. Cutebox doesn't need to float or be positioned in any way.
Nothing needs to be absolutely positioned, and things work best when
*everything* is floated within the inner wrapper container. To get the
borders that you have, you may need to add some additional divs within
your maincol div, but those should not be floated.
The class=clearfix on the wrapper div is so that it expands to contain
all the floated elements within. You can find that code and an
explanation at http://www.positioniseverything.net/easyclearing.html
or just stick this in your css file:
----------
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
---------------------
>
> Thanks for the heads up on the background lines going past the box on the background
> for the side rectangles. That did not show up on browsershots.org for IE7, I think they use
> XP. It doesn't seem to appear in Firefox or Safari.
Here's what I see (I'm on XP)
http://keynes.econ.iastate.edu/~sbridges/holistic-ss.jpg
--
Stephanie Bridges
Department of Economics
Iowa State University
sbridges@iastate.edu
"A positive attitude may not solve all your problems, but it will
annoy enough people to make it worth the effort." --Herm Albright
================= Posting Guidelines ==================
http://preview.tinyurl.com/37zx2b
=======================================================
Come and join us on Facebook
http://www.facebook.com/group.php?gid=2699020125
=======================================================
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/adobe-dreamweaver/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/adobe-dreamweaver/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:adobe-dreamweaver-digest@yahoogroups.com
mailto:adobe-dreamweaver-fullfeatured@yahoogroups.com
<*> To unsubscribe from this group, send an email to:
adobe-dreamweaver-unsubscribe@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
0 yorum:
Yorum Gönder