Nolan's Blog

a PHP JS UI APP developer

css

Height equals width with pure css

I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements. But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well.


<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 
</div>

Css Link this:
We use :before to set the height


.box{
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

But IE7 and below not work again..

继续阅读》

, ,

Design 关于web设计及前端的命名

作为一个高效的开发队伍, 我们应从网页的设计开始就引入标准化的定义名.
利用约定俗成的命名规范, 让设计/前端/开发之间达成共识.
正如我见过无数的前端的Class命名都是这样 body-left-nav-ul-1
(*゜ロ゜)ノ我根本想象不出它可能会在哪里, 所以就要不停的开debug模式, 在浏览器里搜索…
标准的情况:

design

name_html

继续阅读》

, ,

CSS 解决常规布局clear:both的作用溢出问题

今天晚上同事发来段html5的布局,用的是老方法的左float右block的组合.简单如下


< !DOCTYPE html>
<html>
<head>
	<title>Demo</title>
</head>
<body>
	<nav style="float:left; width:200px;">Nav</nav>
	<div style="margin-left:210px;">Content</div>
</body>

嘛..到这里基本还没啥问题…
然后问题就来了, 当他在div里增加内容后(包含了float样式的), 然后尝试用clear在内部清除float.
悲剧发生了… 清除后的效果是这样…

clear_both_1

内部 Content 的 clear:both 属性将外面的 nav 的 float 一起清除了…
咦…闻所未闻啊…做过无数的站点都没出现过这种情况呀?!
嘛,之前wp的后台也是这种布局的说…
难道是 html5 的问题?

继续阅读》

, , , , , ,

Powered by WordPress.org.