CSS3의 사업부

Question

나는 다음과 같은 CSS3 코드와 함께 힘차게 투쟁하고 있습니다 :

* 
{ 
margin: 0px; 
padding: 0px; 
border: none; 
} 

body 
{ 
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), color-stop(.7,#FFFFFF)); 
padding: 0px 6%; 
} 

#nav { 
background: url(http://74.71.27.20/d499/content/images/nav_background.png); 

} 
ul#nav { 
float: left; 
} 
ul#nav li { 
display: inline; 
width: 100%; 
} 

ul#nav li a { 
    display: inline; 
    float: left; 
    margin-right: 25px; 
    margin-left: 10px; 
    font-size: 16px; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color: #777; 
} 

ul#nav li a:hover { 
    color: #fff; 
    } 

    ul#nav li.selected a { 
    color: #fff; 
    } 

    ul#nav li.subscribe a { 
    margin-left: 22px; 
    padding-left: 33px; 
    text-align: left; 
    background: url(http://74.71.27.20/d499/content/images/rss.png) left center no-repeat; 
    } 


#container 
{ 
float: left; 
background: #FFFFFF; 
overflow: hidden; 
padding: 0 0 15px 10px; 
} 

#header 
{ 
float: left; 
width: 100%; 
margin-bottom: 10px; 
} 

#header h1 
{ 
font-size: 18px; 
float: left; 
background: url(http://74.71.27.20/d499/content/Images/logo.png) no-repeat; 
padding: 45px 0px 5px 0px; 
} 

#promotion 
{ 
height: 300px; 
width: 700px; 
background: url(http://74.71.27.20/d499/content/Images/home-showcase.png) no-repeat; 
} 

ul li a 
{ 
font-size: 16px; 
} 

#main 
{ 
float: left; 
overflow: hidden; 
padding: 0 0 15px 10px; 
} 

ul 
{ 
list-style-type: square; 
margin-left: 25px; 
font-size: 14px; 
} 

ul#album-list 
{ 
list-style: none; 
margin-left: 0px; 
} 

ul#album-list li 
{ 
height: 130px; 
width: 100px; 
float: left; 
margin: 10px; 
text-align: center; 
} 

ul#album-list li a, ul#album-list li .button 
{ 
font-size: 13px; 
float: left; 
} 

ul#album-list li a span 
{ 
color: #9b9993; 
text-decoration: underline; 
} 

#cart 
{ 
float: right; 
} 

#update-message 
{ 
color: #F6855E; 
font-weight: bold; 
} 

.button, input[type=submit] 
{ 
clear: both; 
display: inline-block; 
padding: 5px; 
margin-top: 10px; 
border: 1px; 
background: #5e5b54; 
color: #fff; 
font-weight: bold; 
} 

.button a 
{ 
color: #fff !important; 
} 

footer { 
float: left; 
left: 0; 
width: 100%; 
background: #222; 
} 

footer div { 
    display: table; 
    margin: 0 auto; 
    padding: 44px 0; 
    width: 940px; 
    color: #777; 
} 


p 
{ 
margin-bottom: 15px; 
margin-top: 0px; 
} 

h2 
{ 
color: #5e5b54; 
} 

h2, h3 
{ 
margin-bottom: 10px; 
font-size: 16px; 
font-style: italic; 
font-weight: bold; 
} 

h3 
{ 
color: #9B9993; 
} 

#header h1 a, h3 em 
{ 
color: #5E5B54; 
} 

a:link, a:visited 
{ 
color: #F6855E; 
text-decoration: none; 
font-weight: bold; 
} 

a:hover 
{ 
color: #333333; 
text-decoration: none; 
font-weight: bold; 
} 

a:active 
{ 
color: #006633; 
text-decoration: none; 
font-weight: bold; 
} 

/***************************** sidebar navigation ****************************/ 

#categories 
{ 
float: left; 
margin: 22px 0 0 22px; 
padding: 11px 22px; 
background: url(http://74.71.27.20/d499/content/images/sidebar_section_background.png) repeat-x; 

/* Border-radius not implemented yet */ 
-moz-border-radius: 11px; 
-webkit-border-radius: 11px; 
} 

ul#categories 
{ 
    siaply: inlinel 
    margin: 0 0 0 22px; 
    list-style: none; 
} 

#categories a:link, #categories a:visited 
{ 
float: left; 
color: #9B9993; 
text-decoration: none; 
} 

#categories a:hover 
{ 
color: #F46739; 
} 

div#album-details p 
{ 
margin-bottom: 5px; 
color: #5e5b54; 
font-weight: bold; 
} 

p em 
{ 
color: #9b9993; 
} 

/* Form styles */ 
legend 
{ 
padding: 10px; 
font-weight: bold; 
} 

fieldset 
{ 
border: #9b9993 1px solid; 
padding: 0 10px; 
margin-bottom: 10px; 
clear: left; 
} 

div.editor-field 
{ 
margin-bottom: 10px; 
} 

input[type=text], input[type=password], select 
{ 
border: 1px solid #8A8575; 
width: 300px; 
} 

/* Begin: Tables */ 
table 
{ 
border: 1px solid #000; 
border-collapse: collapse; 
color: #666666; 
min-width: 500px; 
width: 100%; 
} 

tr 
{ 
border: 1px solid #000; 
line-height: 25px; 
} 

th 
{ 
background-color: #9b9993; 
color: #000; 
font-size: 13px; 
text-align: left; 
} 

th, td 
{ 
padding-left: 5px; 
} 

tr:hover 
{ 
background-color: #fff; 
} 

내가 현재 가지고 당신이 여기에 CSS로 사이트를 볼 수있는 웹 호스트로 내 PC : http://74.71.27.20/d499

도움이 될 것입니다.

내 마스터 페이지는 단순히 컨테이너를 호출 한 다음 머리글, 탐색 및 카테고리와 바닥 글을 호출합니다.

Answer 1

처음으로 div이 떠 다니는 것처럼 clear:both;을 추가하십시오.

Answer 2

div 문제가있는 경우 내가 줄 수있는 최선의 CSS 조언은 YUI를 살펴 보는 것인데 CSS이기 때문에 신기술이라고 생각하지 않지만 큰 도움이 될 수 있습니다.

시계 그것에 대해이 소개 동영상 : http://video.yahoo.com/watch/1373808/4732784

위의 영상은 조금 구식이지만 좋은 아이디어를 제공하고 웹 필요한 자원의 가득 차있다.