I created a simple CSS layout (code and example below) for
bloggin/writing but ran into five issues that I need help with:
1. How do I get rid of the right-margin red line on the last three
right-boxes in Internet Explorer?
2. How can I put a 4px margin BETWEEN the right-boxes, "border-top:
4px" didn't do it and if I put in a "margin-top: 4px;" it shows the red
underneath instead of the brown background graphic.
3. How can put a 10px margin on the BOTTOM of the main area so that it
isn't flush with the bottom of the browser so it looks more like a
piece of paper lying on a desk? "margin-bottom: 10px;" in #main doesn't
do it.
4. I always read to "use em for fonts" but when I change the font to em
in this main DIV, then the em fonts in my right-boxes change
accordingly, which is undesirable since I should be able to change the
size of one part of the page without having to go change all my other
font sizes. So I don't use em font sizes but pt sizes so I can easily
determine what sizes the fonts are (especially if you have graphics
which don't change sizes) and in Firefox you can increase the size of
the pt fonts anyway and I'm sure its possible in Explorer too if you
search around enough.
5. How can I get my menu items that are two lines to group together
closely to so that they are easier to read?
View Example:
http://www.tanguay.info/web/examples/layoutRightBoxes
Download complete code:
http://www.tanguay.info/web/download...RightBoxes.zip
Thanks,
Edward Tanguay
All my projects:
http://www.tanguay.info
=====================================
<html>
<head>
<style type="text/css">
body {
background: url(images/brownMatting.jpg);
font-family: verdana, arial;
}
#logo {
position: absolute;
top: -45px;
left: -10px;
}
#title {
position: absolute;
top: 20px;
left: 150px;
font-family: verdana, arial;
font-size: 32px;
}
#subtitle {
position: absolute;
top: 55px;
left: 150px;
font-family: verdana, arial;
font-size: 18px;
font-style: none;
color: #333333;
}
#main
{
position: absolute;
background: url(images/paper.gif);
width: 536px;
border-right: 4px;
float: left;
margin-top: 90px;
font-size: .8em;
}
#rightBox1
{
position: absolute;
background-color:#CC0000;
color: ivory;
top: 0px;
left: 540.5px; /*the .5 a fix to force Firefox to render the
"border-right" above*/
width: 220px;
}
..menu {
list-style-type: none;
margin: 10px;
padding: 0;
width: 170px;
/* border: 1px solid #eeeeee; */
border-bottom-width: 0;
}
#rightBox1 a:link,a:visited, a:active {
color:ivory;
font-size: 8pt;
font-family: verdana, arial;
font-style: italic;
}
#rightBox2 {
background-color:salmon;
font-size: 10pt;
}
#rightBox3 {
background-color:gold;
}
#rightBox4 {
background-color:lightgreen;
* html #content p {height: 1%;}
}
#rightBox5 {
background-color:burlywood;
}
p, h3 {
padding: 10px;
margin: 0;
}
ul {
padding-right: 10px;
}
..quote {
font-style: italic;
}
</style>
</head>
<body>
<div id="title">Main Area Plus Right Boxes</div>
<div id="subtitle">A Layout for Blogging, Writing, and Articles</div>
<img id="logo" alt="" src="images/logo.gif"/>
<div id="main">
<p><b>This is an example of a layout with main content area and "right
boxes". You can have as many as you like. However, if you want the
color of the bottom box to extend all the way down to the bottom of the
content box, you have to use a graphic hack.</b></p>
<h3>Questions:</h3>
<ul>
<li>How do I get <b>rid of the right-margin red line</bon the last
three right-boxes in Internet Explorer?</li>
<li>How can I <b>put a 4px margin BETWEEN the right-boxes</b>,
"border-top: 4px" didn't do it and if I put in a "margin-top: 4px;" it
shows the red underneath instead of the brown background graphic.</li>
<li>How can <b>put a 10px margin on the BOTTOM of the main area</bso
that it isn't flush with the bottom of the browser so it looks more
like a piece of paper lying on a desk? "margin-bottom: 10px;" in #main
doesn't do it.</li>
<li>I always read to "use em for fonts" but when I change the font to
em in this main DIV, then the em fonts in my right-boxes change
accordingly, which is undesirable since I should be able to change the
size of one part of the page without having to go change all my other
font sizes. <b>So I don't use em font sizes but pt sizes</bso I can
easily determine what sizes the fonts are (especially if you have
graphics which don't change sizes) and in Firefox you can increase the
size of the pt fonts anyway and I'm sure its possible in Explorer too
if you search around enough.</li>
<li>How can I get my <b>menu items that are two lines to group
together closely</bto so that they are easier to read?</li>
</ul>
<p>Lorem ipsum...</p>
<div id="rightBox1">
<ul class="menu">
<li><a href="#">This is the title of the first
article</a></li>
<li><a href="#">This is the title of the second article which
is quite long</a></li>
<li><a href="#">This is the title of the third
article</a></li>
<li><a href="#">This is the title of the fourth
article</a></li>
</ul>
<div id="rightBox2"><p class="quote">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Curabitur sapien mi, eleifend et,
tincidunt non, pharetra sed, sem. Nullam interdum dolor vitae dolor. Ut
sed ligula. Curabitur feugiat, justo ac gravida euismod, quam neque
ultricies odio, eget mattis turpis orci ut sem. Suspendisse
potenti.</p>
</div>
<div id="rightBox3"><p>This is the third one.</p></div>
<div id="rightBox4"><p>This is the fourth one.</p></div>
<div id="rightBox5"><p>This is the fifth one.</p></div>
</div>
</div>
</body>
</html>
Unwanted red line, margins, bottom page margin, em sizes bad, menu item grouping
