2010-04-27 3 views
0

Так что я хотел пообщаться с Сасс, поэтому я создал эту крошечную невероятно простую маленькую страницу. По причинам, неизвестным мне, когда я добавляю верхний край к #content, он вместо этого использует мою оболочку div. Любая информация о том, почему это происходит, будет весьма признательна. Благодаря!css проблемы с форматированием

Вот страница жить: http://cheapramen.com/omg/

HTML:

<!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> 
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" /> 



<title>YO</title> 

</head> 

<body> 

<div id="wrapper"> 

<div id="content"> 

<div class="dog"> 
Bury me with my money 
</div> 

</div> 






</div> 
</body> 
</html> 

Sass

html body 
    background-color: #000 
    padding: 0 
    margin: 0 
    height: 100% 

#wrapper 
    background-color: #fff 
    width: 900px 
    height: 700px 
    margin: 0 auto 

#content 
    width: 500px 
    margin: 150px 0 0 50px 

.dog 
    color: #FF3836 
    font-size: 25px 
    text-shadow: 2px 2px 2px #000 
    width: 500px 
    height: 500px 
    -moz-border-radius: 5px 
    -webkit-border-radius: 5px 
    border: 18px solid #FF3836 

Css, что Sass выплевывает

html body { background-color: #000; padding: 0; margin: 0; height: 100%; } 

#wrapper { background-color: #fff; width: 900px; height: 700px; margin: 0 auto; } 

#content { width: 500px; margin: 150px 0 0 50px; } 

.dog { color: #FF3836; font-size: 25px; text-shadow: 2px 2px 2px #000; width: 500px; height: 500px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 18px solid #FF3836; } 

ответ

0

Вы сделали это Колорадо rrectly. То, что вам не хватает, - float: left. Измените вашу строку следующим образом:

#content { width: 500px; margin: 150px 0 0 50px; float: left; } 
+0

@Davey Вы уже пробовали это? – orokusaki