Movable Type Community Forum > wacky coding question

Help - Search - Members - Calendar

Full Version: wacky coding question

Movable Type Community Forum > Additional Resources > Tips and Tricks

kadyellebee

Jun 2 2002, 10:20 AM

Are you using the default-stylesheet on your webpage?

Add this to the stylesheet class for your date header:

CODE

text-align: left;

Add this to the stylesheet class for your title

CODE

text-align:right; display:block;

(the display:block is if you are using default templates and styles - the title is in a SPAN instead of DIV, and so it won't align it properly wihout making it a block that can be aligned)

Hope this helps,
Kristine

kadyellebee

Jun 2 2002, 05:43 PM

Oh, you wanted them on the same line? Yes, that's definitely more of a challenge with just CSS. Tables have much better ways of dealing with this.

My solution for this may not be the best, crossbrowserwise. I tend to do little things like this for my own personal pages when I know for sure they won't screw other things up, but don't usually recommend them to others because they aren't as cross-browser-friendly with a negative margin to move the below category to the above bar. But here ya go...

CODE

<div class="title">
<div class="titledate">Date</div>
<div class="titletitle">Title</div></div>

CODE

.title {
font-family: tahoma, verdana, arial, sans-serif;
font-size: 11px;
color: #cccccc;
font-weight:bold;}
.titletitle {
text-align:left;
margin-top:-18px;
padding-left: 5px;}
.titledate {
text-align:right;
background-color: #54658A;
padding: 5px;
border:1px solid #999;}

I stripped out the extra codes that weren't as necessary, and just broke it down to bare essentials. The margin-top: -18px was gotten by trial and error, and then I added some right padding to make it stay on top of the bar a bit better.

I didn't test this in anything but IE, so if you use it, you'll want to do that

Hope this helps!

Kristine

igeekus

Jun 2 2002, 09:34 AM

Okay... this may not be totally MT related per se, but I'm looking to do a trick on my blog without using tables if possible. This is for the individual entry page, BTW.

Okay, for the header, I want the entry date left justified on the line and the entry title right justified. Any way to do this without evil tables? Thanks :D

igeekus

Jun 2 2002, 12:27 PM

Hey Kristine

So very close... okay... let me try to 'splain...

here is the code that is causing all the trouble (sheesh... I'm supposed to be geeky enough to figure this out... yikes):

CODE

and here is the specific styles for the types...

CODE

    body { font-size: 11px;
   font-family: tahoma, geneva;
   background-color: #203457;
   background-image: url("horizontal.jpg");
   background-repeat: repeat-x;
   SCROLLBAR-FACE-COLOR:#4C6EB6;
   SCROLLBAR-HIGHLIGHT-COLOR:#6C86B9;
   SCROLLBAR-SHADOW-COLOR:#47536E;
   SCROLLBAR-3DLIGHT-COLOR:#6C86B9;
   SCROLLBAR-ARROW-COLOR:#6C86B9;
   SCROLLBAR-TRACK-COLOR:#4C6EB6;
   SCROLLBAR-DARKSHADOW-COLOR:#47536E;
   SCROLLBAR-BASE-COLOR:#6C86B9;
   }

    .title { font-family: tahoma, verdana, arial, sans-serif;
   font-size: 11px;
   background-color: #54658A;
   color: #cccccc;
   padding:5px;
   font-weight:bold;
   margin-top:10px;
   display:block
   }

    .titledate { text-align: left;
display: block;
}

     .comments { font-family: tahoma, verdana, arial, sans-serif;
font-size: 11px;
border:1px solid #999;
text-align: justify;
margin-top:10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom; 10px;
}

(NOTE: The .titledate used to be .title .date I thought I'd be nifty and try that... didn't work)

It's very close, they just aren't on the same line. Need any more info? Am I close? Thanks for your help!

-matt@igeekus.com
I, Geekus

smuggler

Jun 4 2002, 12:07 PM

You might want to take a look at my site and the underlying CSS for an example as to how to do a half-way decent looking layout without relying on tables (plus there's some nifty MT/XML/XSL stuff going on too).

www.badassgeek.com
badassgeek.com CSS

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.