Movable Type Community Forum > If no content to the left, right column expands

Full Version: If no content to the left, right column expands

Movable Type Community Forum > Using Movable Type > Templates and Tags

tobistar

Jun 30 2003, 11:08 AM

PLS state your MT-Version for the record: "hi i'm tobi and i'm using mt 2.64"

Hi there.

I created a "master-archive" with a link to every month. Since I'm quite new to blogging, there are only 2 months until now. So there is almost no content on the left side.

the left (navigation) part of my blog is very excited about this fact, because it thought: "Cool! there's enough space for me to expand!"

so after the months end on the left side, the right content expands over the whole page, which doesn't look very cool.

so if you know how to solve this problem, please please please tell me. thank you very much!

here's the link: tobistar.ch/archiv.html

here's the template code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" width="750" align="center">
<tr><td>
<div id="banner">
<a href="<$MTBlogURL$>" accesskey="1"><img border="0" src="http://tobistar.ch/archiv/images/topbanner.gif" width="450" height="60"></a>
</div>

<div id="content">

<div class="blog">
<p style="border-bottom:1px dotted #999;font-family:georgia, verdana, arial, sans-serif;font-size:12px"><b>Weblog.</b> <font style="color:#808080">Interessantes aus der Welt. Blablabla für Interessierte.</font></p><br>

<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a>
</MTArchiveList>

</div>

</div>

<div id="links">

<div class="sidetitle">
Auch im Angebot
</div>

<div class="side">
<$MTInclude module="Angebot"$>
</div>

<div class="sidetitle">
Archiv
</div>

<div class="side">
<$MTInclude module="Archiv"$>
</div>

<div class="sidetitle">
Die letzten 10 Einträge
</div>

<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<div class="sidetitle">
Suche
</div>

<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">In diesem Weblog suchen:</label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="Suchen" style="color: #FFFFFF; background-color: #575757; font-family: Arial,Helvetica,sans-serif; font-size: 10px"/>
</form>
</div>
<br>

<div class="syndicate">
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div>

<MTBlogIfCCLicense>
<div class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" border="0" src="<$MTBlogCCLicenseImage$>" /></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />
</div>

</div>

<br clear="all" />
</td></tr></table>
</body>
</html>

...and if you want to continue reading, i have two more problems:

1. at the top of the page of my blog, i have a banner. if i use netscape, everything is fine - but with internet explorer, there are about 2 pixels below the banner which doesn't look great! how can i fix it?

my blog's url: tobistar.ch

this is the html- and css-code:

CODE

<div id="banner">
<a href="<$MTBlogURL$>" accesskey="1"><img border="0" src="http://tobistar.ch/archiv/images/topbanner.gif" width="450" height="60"></a>
</div>

CODE

    #banner {
font-family:georgia, verdana, arial, sans-serif;
color:#000;
font-size:10px;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
background:#FFCC00;
padding:0px;
}

    #banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:georgia, verdana, arial, sans-serif;
font-size: 16px;
color: #FFF;
text-decoration: none;
}

2. at the right, there is this "navigation-column" with the entries "powered by MT" and "syndicate...". they have another background color than the rest of the page, but only to the right border they have "space" (i beg you pardon, i'm Swiss and sometimes i don't know the right words to express what i actually mean...

).

here's the code:

CODE

<div class="syndicate">
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div>

<MTBlogIfCCLicense>
<div class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" border="0" src="<$MTBlogCCLicenseImage$>" /></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

CODE

.syndicate {
font-family:verdana, arial, sans-serif;
font-size:10px;
font-weight:bold;
line-height:140%;
padding:2px;
margin-top:10px;
margin-left:15px;
text-align:center;
background:#EBEBEB;
     }

    .powered {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:10px;
font-weight:bold;
border:1px dotted #CCC;
line-height:140%;
text-transform:uppercase;
padding:2px;
margin-top:10px;
text-align:center;
letter-spacing: .2em;
background:#FFF;
}

again thank you very much,
tobi

Lela

Jul 1 2003, 05:57 AM

Ok. For the initial question: it depends on what you want to achieve.

If you simply want to fill up the left column so that the right column doesn't expand, you can put a lot of (br) tags after the (/MTArchiveList) tag. Try it and see if you like it.

If you don't like the large amount of white space and would rather have a short left column with a really long right column, you may want to consider the foolproof html table formatting.

It would probably look something like this:::

CODE

<body>
<table border="0" cellspacing="0" cellpadding="0" width="750" align="center">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan="2" bgcolor="****gold banner color***">
<div id="banner">
<a href="http://www.tobistar.ch/" accesskey="1"><img border="0" src="http://tobistar.ch/archiv/images/topbanner.gif" height="60" align="left"></a>
</div>
</th>
</tr>

<tr>
<td width="60%" valign="top">
<div class="blog">
<p style="border-bottom:1px dotted #999;font-family:georgia, verdana, arial, sans-serif;font-size:12px">

<!--ALL THE LEFT COLUMN STUFF GOES HERE--!>

</td>

<td width="40%" valign="top">

<div id="links">
<div class="sidetitle">
Auch im Angebot
</div>

<!--ALL THE RIGHT COLUMN STUFF GOES HERE--!>

<br clear="all" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

To answer the question about the space above the right column, I don't think it has anything to do with the banner. However, you may want to look at the .sidetitle attributes in your css file. You could try changing the top margin to 0 px.

For the last question, you could also try changing the margins or padding under .powered and .syndicate. Although I think it's probably the .sidetitle attributes that are giving it that extra space.

I'm actually pretty new at this stuff myself, so I don't know if all this is the best way to go about it. Other MT veterans probably have more helpful and ingenius tips. Nevertheless, hope this helps a little! Viel Gleuck!

tobistar

Jul 1 2003, 01:27 PM

Hi Lela, thank you for your help - and especially for your "viel gleuck" :-) actually it would be "glueck (>glück)", but hey, not every american knows that there are other languages than english! so i really appreciated that!

back to the template stuff:

unfortunately i'm very busy at the moment with university exams, so I didn't have enough time to try all of your suggestions.

What I tried to fix was the problem with the extra-pixels below the banner at the top but it didn't work... :-(

so if anyone knows how to make them pixels leave, please tell me!

my blog: tobistar.ch

the problem: in internet explorer, there are about 2 pixels below the top-banner which shouldn't be there!

template code:

CODE

<div id="banner">
<a href="<$MTBlogURL$>" accesskey="1"><img border="0" src="http://tobistar.ch/archiv/images/topbanner.gif" width="450" height="60"></a>
</div>

css code:

CODE

#banner {
font-family:georgia, verdana, arial, sans-serif;
color:#000;
font-size:10px;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
background:#FFCC00;
padding:0px;
}

#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:georgia, verdana, arial, sans-serif;
font-size: 10px;
color: #FFF;
text-decoration: none;
}

"please, make them leave!" (cole in 6th sense...)

thanks again,
tobi

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