.bComment, .bCommentB {
font:11px georgia, verdana, arial, sans-serif;
color: #00f;// Leave a comment ������ɫ
line-height: 18px;
text-align: justify;
padding:8px;
margin:8px 20px;
border: 1px dotted #000000;//Comment ���߿�
}


caption.bCalendarCaption {
border:solid #ccc;
border:width:1px 1px 0 1px;
margin:0 0 0 auto;
}
table.bCalendarTable {
margin:0 0 0 auto;
font-size: 120%;
border:solid 1px #ccc;
background: #fff;
}

¥

Thank you so much! Now I almost solve the problems, but what im considering about the calender is let it works likes a float picture. Beause it pruduces too much useless space on header. I want it make use of the free space from the right hand side corner. Is that possible?

/* styles for the archive calendar */
caption.bCalendarCaption { 
border:solid #ccc; 
border:width:1px 1px 0 1px; 
} 
table.bCalendarTable { 
font-size: 120%; 
border:solid 1px #ccc; 
background: #fff;
float:right;
}

¥

Iv tried it as well. but its not works as expected. Anyway, thanks a lot.

Ok, I'm not sure if this accomplishes what you want, but

div.pageHeader {
height: 160px;
padding: 1ex;
text-align: center;
background: url(img/nescafe.gif) no-repeat #ffffff;//ҳ�涥�����������ϲ���
background-position:right;
float:left;
}

¥

I did as you said, and its almost done cause it reduce the useless space on header. But the problem is the blog list becomes 'align left' and covers my logo. If it can be moved to center, everything fine.
Screenshot:
http://www.toustar.com/photonline/align_1.gif

Actually the simple way i trying to make is moving the calender up directly, but im so new to php that it seems never works for me :( .
Screenshot:
http://www.toustar.com/photonline/align_2.gif

Im so sorry to take up your time!

Try this. Change

caption.bCalendarCaption { 
border:solid #ccc; 
border:width:1px 1px 0 1px; 
margin:0 0 0 auto; 
} 
table.bCalendarTable { 
margin:0 0 0 auto; 
font-size: 120%; 
border:solid 1px #ccc; 
background: #fff;
}

to this

caption.bCalendarCaption { 
border:solid #ccc; 
border:width:1px 1px 0 1px; 
} 
table.bCalendarTable { 
font-size: 120%; 
border:solid 1px #ccc; 
background: #fff;
float: right;
}

and it becomes:

http://www.toustar.com/photonline/align_3.gif

Its the same as putting it into the sidebar.

Have you looked at your blog at any lower resolutions, like 1024?

Do u mean the screen resolutions? I only look at it at 1280X800 mode. Is that matter?
BTW, now i have switch it back and put it into the sidebar. Thanks a lot for your concern.

When I look at your blog, the Home and Star Global boxes overlap with the site logo in the upper left. If you want your site to look decent for most or all of your readers, then you have to test it in several browsers at several screen resolutions.

Another thing you can consider, not that I have the answer handy, is to use a negative padding on the first component of your sidebar. You have to make sure the header and sidebar don't overlap all the way down to 800 pixels wide, but it's a slick way to push the sidebar up a wee bit to create the illusion that you don't have a boring plain-jane layout. I'm doing it [url=http://wonderwinds.com/flightblog.php]here[/url], and please don't take this wrong, but I just don't feel like digging out the css for it. Check out http://www.w3.org/TR/REC-CSS2/propidx.html for supergroovy dope on how to git down with style sheets. The end result is that you can put your calendar in your sidebar and shove it up to fill some (otherwise) dead space.

By the way, this stuff is *easy* to read in 800 pixels wide. My tired old eyes are telling me to stay here...

personman wrote:

When I look at your blog, the Home and Star Global boxes overlap with the site logo in the upper left. If you want your site to look decent for most or all of your readers, then you have to test it in several browsers at several screen resolutions.

Yes, I found it overlap with my site logo when i use Firefox. But currently im lack of time to deal with it. It seems set the logo as background is not a good choice. I actually even dont know how to get a better choice when keeping the current layout.

EdB wrote:

Check out http://www.w3.org/TR/REC-CSS2/propidx.html for supergroovy dope on how to git down with style sheets.

That helps! I think i need the parameter instructure more than single answers, and it was exacted what i was looking for for long.

Well, thanks to all you guys!

<div id="bloglist">
** bloglist **
</div>

and then add this to your style sheet

#bloglist{
padding:0 0 0 200px;
}

¥

I got your point! But now iv droped the idea of setting the logo image as background. I replace it with a float image and got another interesting problem: only the current activated blog list button follows the float img.
You can [url=http://blog.toustar.com]test[/url] it by yourself. I'll keep it for a moment.

code in _main.php:

<div id="wrapper">

<div class="pageHeader">
    <div class="logo" align="left"><a href="http://blog.toustar.com" title="StarBlog Home"><IMG src="img/nescafe.gif" alt="StarBlog Home">
<?php require( dirname(__FILE__).'/_bloglist.php'); // BLOG LIST INCLUDED HERE ?>
    </div>
<br /><br /><div align="center" valign="top"><a href="http://bbs.toustar.com" title=" StarForum Home ">StarForum</a> | <a href="http://photo.toustar.com" title=" StarGallery Home ">StarGallery</a> | <a href="http://blog.toustar.com" title=" StarBlog Home ">StarBlog</a> | <a href="http://www.toustar.com" title=" TouStar Home ">TouStar</a></div>
	<h1 id="pageTitle"><?php $Blog->disp( 'name', 'htmlbody' ) ?></h1>
	<div class="nescafe"></div>
	<div class="pageSubTitle">
		<?php $Blog->disp( 'tagline', 'htmlbody' ) ?>
		</div>

</div>

some code in nescafe.css:

div#wrapper {
width: 100%;
margin: 0;
padding: 0;
}

div.pageHeader {
height: 160px;
padding: 1ex;
text-align: right;
background: url(img/nescafe.gif) no-repeat #ffffff;
background-position:right;
}

h1#pageTitle {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 270%;
font-weight: bold;
margin-top: 20px;
text-align: center;
}
a.BlogButton {
text-decoration: none;
border: 1px solid #000000;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
white-space: nowrap;
margin-right: 3px;
margin-top: 3px;
background: #f8f3b7;?
}
a.BlogButtonCurr {
text-decoration: none;
border: 1px solid #000000;
text-align: left;
vertical-align: top;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
white-space: nowrap;
margin-top: 3px;
margin-right: 3px;
background: #f9e711;
}
a.BlogButton:link, a.BlogButton:visited, a.BlogButton:active, a.BlogButtonCurr:link, a.BlogButtonCurr:visited, a.BlogButtonCurr:active {
color: #000000;
}
a.BlogButton:hover {
color: #FFFFFF;
background: #ccc;
}
a.BlogButtonCurr:hover {
background-color:#ffffff;
}

.pageSubTitle {
color: #000000;
letter-spacing: 3px;
text-align: center;
vertical-align: middle;
border: 0px;
padding-right: 6px;
padding-top: 6px;
padding-bottom: 0px;
padding-left: 6px;
font: 109% Arial, Helvetica, sans-serif;
}

Lol, tell you what, you let me know when you've decided on a final layout and I'll sort your problems out :p

¥

8| i just try to make a best layout, but not mean to switch time and time. Please help! :oops:
it will be my final finall layout if the problem solved :( .

Lol,sorry, that might have sounded a tad harsher than I meant.

Try telling/showing us what you want your template to look like, and we can start working on making that happen.

¥

ok, i explain it with an image again:

image:
http://www.toustar.com/photonline/list.gif

The blog-list currently displayed in my blog header is so funny as u can see from [url=http://blog.toustar.com/index.php/global]my blog[/url]. I want it displays as a normal list following by the logo image. Simplely say is moving the "list line" up. Thats all. Thank you!

Adding "vertical-align: top;" to your BlogButton css class gets the other buttons to line up along the top. The problem, though, is that if the screen doesn't fit all those buttons they wrap down to the next line.

Perhaps you should wrap your buttons in another div and then you could float it right or something (might not be necessary to float it) so it won't be inline with the graphic.

Nate wrote:

Adding "vertical-align: top;" to your BlogButton css class gets the other buttons to line up along the top. The problem, though, is that if the screen doesn't fit all those buttons they wrap down to the next line.

:D Yes I got it!! Small tricky parameter took me so long time..

I just miss a line likes "vertical-align: top;" in the code of the css file:

a.BlogButton {
text-decoration: none;
border: 1px solid #000000;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
white-space: nowrap;
margin-right: 3px;
margin-top: 3px;

background: #f8f3b7;

Thank you for reminding me!! n many thanks to ¥åßßå!!