ie下的自适应垂直居中

long time no see，前几天写页面ui时总结的小心得。把需要显示的内容进行自适应的垂直居中。希望对大家在写widget的时候有一丁点帮助。
众所周知，水平居中用margin:0 auto;width:xxxpx;的方法就可以轻松实现。垂直居中的方法又是怎样呢？
hata简单的post一下
css部分：

#wrapper{#position:relative;}
#mid{#overflow:visible;#position:absolute;#top:50%;}
#content{#position:relative;#top:-50%;}

花括号内#号是ie hack的方法，也就是上面几句对ff完全不起作用。

应对div的结构为

<div id="wrapper">
  <div id="mid">
    <div id="content">居中内容</div>
  </div>
</div>

阅读全文...

你不觉得navbar有很多优点吗？隐藏&去除blogspot的navbar的新旧方法

HATA最近把blogger上面的那条"横梁"给隐藏了。原因大家差不多，主要是觉得它把blog整体拉低了30px是件很不爽的事，其次是风格的问题，虽然css可以随意对navbar进行修改，不过横梁始终是横梁，整体感觉是不会变的。所以，要将其去除之。
下面一个是传统的硬方法：

#navbar-iframe {
height: 0px;visibility:hidden;//方法1
display:none;//方法2
}

不知道为什么这两个方法会在网上流传为合2为1的方法，HATA用其中一个已经可以见效了。可能是为了保险吧。。。出来的页面效果一样，navbar完完全全不见了，整体博客拉上30px。

但是，没有了横梁其实对于blog主来说是件很不方便的事情，虽然navbar为我们提供的只是紧紧的几个超链接，但是已经给我们的登录，post，修改布局带来了很多的捷便，还有"下一个博客"链接，HATA也是常常按的。navbar去除以后HATA就越来越怀念它了。
下面一个是普遍流传的隐藏方法，隐藏是firefox用户而说的，ie的话就同样是一去不复回：

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)}

通过控制alpha值，达到自动隐藏的效果，在firefox下把鼠标移动上去，narbar就会回来了。这个方法其实很好，就是那个30px的位置就浪费掉了。怀旧了这么久，终于要介绍HATA的方法了～ (/^0^)/
解决方法，下面HATA把自己的css也贴上：

#navbar{position:absolute;width:800px;}
//把navbar拉出来，然后修正宽度
#navbar-iframe{
opacity:0.0;filter:alpha(Opacity=0);
border-right-color:#000000; border-right-width:2px; border-right-style:solid;
//修饰轮廓
}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100);}
* html #navbar-iframe {display:none;}
//ie7以上把navbar除掉，blog主用ff的话加上

这个要解析一下，其实是上面方法的基础上加上3条语句，修正宽度是因为我在使用position:absolute;后navbar的宽度变短了而进行修正的；而修饰轮廓就是加上右边框而已，因为HATA用的navbar样式是黑色的那个，所以边框颜色是#000000，根据情况修改；最后一句，是只对ie使用，因为在ie上隐藏后鼠标移置该处无法再次显示，干脆就把它除掉。
怀旧信息很多，也有一点点个人的方法，希望对大家有帮助～

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

标签--一列改成两列

HATA今天换了新的模板啦，一直想写一个没有图片的模板，加上今天有换3列的冲动，今天HATA就忍不住手写了一个，第一次写的模板，暂时是一个好简单好简单的模板啊，简单得颜色也没有配，不过HATA还是比较受乐的，一定要发post庆祝一下!!
ai~扯远了，HATA在写模板之际，HATA顺便把那个一列式标签也改掉了，改成两列式，哈哈。
修改的方法好简单好简单，就是css区里加一个句：

.sidebar #Label1 li {
float:left;
width:95px;
}

因为放在sidebar里(class="sidebar")，所以加上了.sidebar，可要可不要。#Label1是标签的id。一般都是这个，拍个留念照：
有问题可以留言，HATA随时候命～

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

边学边改blog--把标题栏变成3列的格式

本打算昨天写的东西，一拖就拖到今天了。。。昨天在《边学边改blog--简单修改标题栏》一文里写了要把标题栏变成3列的格式。HATA就接着昨天的话题说吧。记得在简单修改标题栏的步骤1中
HATA找出了标题栏的代码

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

并修改为：

<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

HATA现在要继续在上面做修改。
1，首先，如果你在标题栏里挂上了除标题外其他的widget（标题栏的代码会多出其他的widget），先把它们安置到其他的位置，例如尾栏或者边栏上。以免在修改标题的时候把这些widget删掉了。

2，修改完毕后，查看一下标题栏的代码，是不是恢复到简单修改标题栏的步骤1中修改后的代码一样：

<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

现在HATA要再次修改这段代码增加一些内容：

<div id='header-wrapper'>
<div class='header' id='header'>
<b:section id='header1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='博客名称' type='Header'/>
</b:section>
<b:section id='header2' showaddelement='yes'/>
<b:section id='header3' showaddelement='yes'/>
</div>
</div>

看清楚大小写哦，这样就在header里面多加了两个section，然后还要在css区上添加一些代码才能正常显示，因为这3个section是同一列的关系，别急着保存，我们先下拉一下模板，看一看下一段是不是<div id='content-wrapper'>,要是不是content-wrapper的话，就把它的id名字记下来，一会要用上。现在可以保存了。
再看一看布局-》页面元素 里，是不是变成这样了：是的话就可以继续下一步。
3，记得在简单修改标题栏的步骤3中放的代码吗？HATA把自己加的代码都放在两个/* ---添加--- */的里面，现在在/* ---添加--- */里加上这段代码：

#header1 {width:220;float:left;}/* ---HATA之前没有加上宽度width，ie的排版立刻乱了，ff确没有乱，可见ff是多么的优秀>. <，这里网要感谢一下NS兄的帮助--- */
#header2 {width:220;float:left;}
#header3 {float:right;}/* ---以上3句就是把步骤2里的3个session变成横向关系的关键语句--- */
#content-wrapper {clear:both;}/* ---这个是消除浮动--- */
#header {height:60px;} /* ---70px是我标题栏背景的高度，不加这一句的话在某些浏览器里会排版出错（忘记是ie还是ff了）--- */

记得HATA在步骤中叫你记下的id吗？就是用在消除浮动上面。把你记下的id替换掉content-wrapper字样吧。不使用消除浮动，浏览器的位置排版就会出错。HATA现在基本上是完成任务了。HATA现在挂个插件上去看看效果：


HATA之前因为blog在ie下显示错位的问题发表了的疑问已经得以解决了，在这里要感谢NS兄的帮助，谢谢。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

边学边改blog--简单修改标题栏

记得HATA前几天曾经交待过在看css，今天HATA初试修改模板，目标是在原有的模板上修改标题栏的排版，使得标题栏可以横向并排3个widget，经过一番调试后终于成功了，暂时先说说在标题栏里加上一个简陋的导航菜单。
方法很简单：
1，进入布局-》修改HTML，把修改模板里面的代码备份一下，然后在修改模板里查找<div id="header-wrapper">
找到类似以下代码：

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

在这里，修改showaddelement值为"yes"，删除maxwidgets="1"字段。

2，回到布局-》页面元素看看效果，头部分是不是增加了"添加小工具"按钮，这就是HATA第一部分修改的目的了，然后我们点击“添加小工具”，添加一个名为"HTML/JavaScript"的widget，摆放到标题widget的下方（注意，不知道其他的官方模板结构和HATA用的一不一样，HATA这里有可能会把widget拉到crosscol-wrapper层里，就是整个标题栏的下方，再拉多一次调整一下吧，效果应该是在标题栏里面，刚好在标题的下方）
在widget里面输入

<ul id="headnav">
<li><a href="链接地址1" target="blank">名称1</a></li>
<li><a href="链接地址2" target="blank">名称2</a></li>
</ul>

li部分可以输入若干行，如果想加入图片的话可以把名称部分修改为：<img alt="叙述" src="图片地址"/>，到这里，我们就做好一个竖式的导航菜单了。
3，把竖式的导航菜单变成横式，方法很简单，我们先回到修改模块的版面，找到里面的css区（就是有放着类似#header，.post这些字样的地方），加入以下代码：

/* ---添加--- */
#headnav {margin:0px; padding:0px;}/* ---margin是修正高度位置--- */
#headnav img {border:0;}
#headnav li {display:inline;/* ---这个是把竖式变横式的关键--- */
margin-right:5px;/* ---这个是间距--- */
}
/* ---添加--- */

可以把margin写成 margin:0px 0px 0px 0px;分别代表上右下左的位移。这部分我是借用了NS兄的代码，用div写横向列表一般都是这样写的。
得出的效果图：

一些想法：
但是HATA这几天看过很多的blog，他们都喜欢把导航菜单放到标题栏的最右边，与标题字样对称。难道要使用属性margin把列表强行位移到最右面吗？
这也是其中一个方法，但是HATA觉得这个方法有点自欺欺人了，要是把头部分（标题栏的位置）改为可以挂放两列或者3列的widget，把导航菜单放到最后一列不就把问题解决了吗？HATA第一次去NS兄的blog时就对这个长草了，可惜一直不能把NS兄提供的模板导入成功，正好这两天把css的基础知识一口气看完了，瞎弄了半天终于搞出来了，方法同样不难。

HATA这里先休息下，忙其他的事情。稍后把方法写出来，大约2～3步就能搞定它。

写好了，边学边改blog--简单修改标题栏

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...