Greetings. I'm developing a Scouting website, and am in the process of
converting the table-based layout to CSS.
Have a look at my development site,
http://scoutsite.net
and notice the top header (Troop 1234, Anytown, USA). That is
currently a table-based layout (and it's the only table-based layout
remaining on my mainpage - everything else has already been converted
to CSS).
You can see (only) the table-based header at
http://scoutsite.net/perl/skin.cgi?frame=header
I've made a stab at converting that header to CSS. You can view the
results of my efforts at
http://scoutsite.net/perl/skin.cgi?frame=header_new
(ignore the thin black and gold borders, which are there to help me
visualize the blocks and will be removed when it's done). The
stylesheet can be viewed at
http://scoutsite.net/styles/ScoutSite.Troop.frame.css
(and the stuff at the very bottom under #FrameTopRow applies to this matter).
It's ALMOST correct. The left-hand part is fine (well, it needs
tweaking, but the positioning is OK). The right-hand part is giving me
trouble. I want to replicate in CSS what I did with tables - two links
(stacked, vertically-centered), right-justified against a
vertically-centered image, and everything right-justified on the page.
It ought to be simple, but I've tried many iterations and nothing works correctly.
The header is 50px high. The CSS, BTW, validates at W3C.org, so at
least it doesn't contain any overt syntax problems (but logic
problems, obviously).
I appreciate any assistance.
/********************************************************************
For posterity (ie, Google Answers Archives), the relevant CSS and HTML
are replicated here:
#FrameToprow {
border: 1px gold solid;
height: 50px;
padding: 0;
margin: 0;
color: $menu_text_color{$type};
background-color: $background_dark{$type};
color: $menu_text_color{$type};
}
#FrameToprow div.row span.left {
border: 1px black solid;
line-height: 50px;
height: 50px;
margin: 0;
float: left;
text-align: left;
font-weight: bold;
vertical-align: middle;
}
#FrameToprow div.row span.right {
border: 1px black solid;
line-height: 50px;
height: 50px;
margin: 0;
float: right;
text-align: right;
font-weight: normal;
vertical-align: middle;
}
#FrameToprow span.unit {
font-size: 30px;
}
#FrameToprow span.locale {
margin-left: 1em;
font-size: 18px;
}
#FrameToprow div.links {
text-align: right;
margin: 0;
line-height: 50px;
vertical-align: middle;
}
#FrameToprow p {
margin: 0;
padding: 2px;
}
#FrameToprow span.logo_small img {
border-style: none;
height: 33px;
width: 30px;
padding: 9px 10px 8px 10px;
margin: 0;
}
/******** And the HTML **********/
<body>
<div id="FrameToprow">
<div class="row">
<span class="left">
<span class="unit">
Troop 1234
<span class="locale">
Anytown, USA
</span>
</span>
</span>
<span class="right">
<div class="links">
testing,testing
<span class="logo_small">
<a alt="Boy Scouts of America" target="_BLANK"
href="http://www.scouting.org/">
<img alt="Boy Scouts of America"
src="/images/skin/logo.bsa.gold.small.png" /></a>
</span>
</div>
</span>
</div>
</div>
<br />
</body>
*******************************************************************/ |
