Сокращение высоты строки / неправильно отображается в CSS с фреймворком 960 - PullRequest
Новая
       31

Сокращение высоты строки / неправильно отображается в CSS с фреймворком 960

0 голосов
/ 23 февраля 2012

Я нахожусь в процессе создания веб-сайта. В настоящее время я работаю над страницей блога, которая состоит из области контента и боковой панели. Я использую сетку 960.gs с 12 колонками и я также применил reset.css и text.css. Это в боковой панели моя проблема. Мои заголовки продолжают сворачиваться, когда я пытаюсь указать высоту строки 1em. Причина, по которой я это делаю, заключается в том, чтобы верхний заголовок соответствовал левому краю, который я установил для боковой панели. Как мне обойти это? Когда я оставляю пустую высоту строки, я думаю, что она равна 38px, но самый верхний заголовок (h3) не выравнивается по левому краю.

HTML: 

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/960_12_col.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <title>NiON | Blog</title>
</head>
<body>

<div class="container_12">
    <header>
    <h1 class="grid_12"><a href="#">NiON</a></h1>
        <nav class="grid_12">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="blog.html" class="selected">BLOG</a></li>
                <li><a href="#">SHOP</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>



    <div class="main grid_12 clearfix">
        <div class="blogContent grid_7 alpha">
            <div class="blogPost">
                <h2 class="postTitle">Return of the ANGRIEST man in the</h2>
                <div class="postMeta">
                    <p><span>by</span> nion <span>on</span> february 20, 2012 <span>in</span> lorem ipsum, naked girls, swag</p>
                </div>
                <p class="postText">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin</p>
            </div>
        </div> <!-- blogContent end -->

        <div class="sidebar grid_3 clearfix">
            <div class="searchBlog">
                <h3>search blog</h3>
            </div>
            <div class="socializeUs">
                <h3>socialize us</h3>
                <div id="facebookSidebar">
                    <h4><a href="#">NiON Facebook</a></h4>
                </div>
                <div id="twitterSidebar">
                    <h4><a href="#">NiON Twitter</a></h4>
                </div>
            </div>
            <div class="categories">
                <h3>categories</h3>
                <ul>
                    <li>Lorem Ipsum</li>
                    <li>Naked Girls</li>
                    <li>Swag</li>
                    <li>Snow</li>
                    <li>Skate</li>
                </ul>
            </div>
            <div class="archives">
                <h3>archives</h3>
                <h4>2012</h4>
                <ul>
                    <li>January</li>
                    <li>February</li>
                    <li>March</li>
                </ul>
        </div>
    </div> <!-- sidebar end -->


    </div> <!-- main end -->
    <footer class="grid_12">
            <div class="footerLeft grid_6 alpha">
                <ul>
                    <li class="socialFooterFacebook"><a href="#">Facebook</a></li>
                    <li class="socialFooterTwitter"><a href="#">Twitter</a></li>
                    <li class="socialFooterVimeo"><a href="#">Vimeo</a></li>
                </ul>
            </div>

            <div class="footerRight grid_6 omega">
                <p>
                    Copyright &#169; 2011 Nion
                </p>
            </div>

    </footer>
</div> <!-- container end -->

</body>
</html>

CSS: 

    /*
**********************************************
* =global styles
**********************************************
*/
html {
    background-color: #ebebeb;
}

.container_12 {
    background-color: #fff;
}

/*
**********************************************
* =header
**********************************************
*/

header {
    margin-top: 25px;
    margin-bottom: 25px;
}

header h1 {
    text-indent: -9999px;
}

header h1 a {
    background: url(../img/logo.png) no-repeat;
    width: 340px;
    height: 129px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
**********************************************
* =navigation
**********************************************
*/
nav {
    height: 50px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-bottom: 50px;
    line-height: 50px;
    text-align: center;
}
nav li {
    display: inline;
    font-size: 18px;
    margin: 0 59px;
}

nav a {
    text-transform: uppercase;
}

/*
**********************************************
* =main
**********************************************
*/


/*
**********************************************
* =banner
**********************************************
*/

.banner {
    position: relative;
    padding: 0;
    margin: 0;
}

.bannerLeft {
    background: black;
    height: 260px;
}

.bannerRight {
    background: url(../img/statement.png) no-repeat;
    height: 260px;
    z-index: 500;
}


.shopNow {
    z-index: 501;
    text-indent: -9999px;
    margin: 0;
}

.shopNow a {
    background: url(../img/shopnow.png) no-repeat;
    width: 197px;
    height: 48px;
    position: absolute;
    bottom: 0;
    right: 0;
}


/*
**********************************************
* =socialbuttons
**********************************************
*/

.socialButtons {
    margin-top: 120px;
    margin-left: 0;
    margin-right: 0;
}

#facebook h3 {
    text-indent: -9999px;
}

#facebook h3 a {
    background: url(../img/social-facebook.png) no-repeat;
    width: 220px;
    height: 190px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#twitter h3 {
    text-indent: -9999px;
}

#twitter h3 a { 
    background: url(../img/social-twitter.png) no-repeat;
    width: 220px;
    height: 190px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
**********************************************
* =blog
**********************************************
*/

.blogPost {
    margin-left: 70px;
}

.sidebar {
    float: right;
    border-left: 1px solid #d1d1d1;
    padding-left: 10px;
}

.searchBlog, .socializeUs, .categories {
    border-bottom: 1px solid #d1d1d1;
}

.searchBlog, .socializeUs, .categories, .archives h3 {
    line-height: 1em;
}


/*
.socializeUs, .categories, .archives. searchBlog {
}
*/

/*
.searchBlog {
}
*/


/*
**********************************************
* =footer
**********************************************
*/
footer {
    clear: both;
    height: 60px;
    border-top: 1px solid black;
    padding-top: 25px;
    margin-top: 95px;
}

.footerLeft ul {
    list-style-type: none;
    margin-left: 80px;
}

.footerLeft li {
    float: left;
    margin-left: 0;
    margin-right: 7px;
}

.socialFooterFacebook {
    text-indent: -9999px;
}

.socialFooterFacebook a {
    background: url("../img/socialfooter-facebook.png") no-repeat;
    width: 24px;
    height: 24px;
    display: block;
}

.socialFooterTwitter {
    text-indent: -9999px;
}

.socialFooterTwitter a {
    background: url("../img/socialfooter-twitter.png") no-repeat;
    width: 24px;
    height: 24px;
    display: block;
}

.socialFooterVimeo {
    text-indent: -9999px;
}

.socialFooterVimeo a {
    background: url("../img/socialfooter-vimeo.png") no-repeat;
    width: 24px;
    height: 24px;
    display: block;
}

.footerRight p {
    text-align: right;
    font-size: 12px;
    margin-right: 80px;
    Color: #686868;
}

/*
**********************************************
* =miscellaneous
**********************************************
*/

p {
    font-family: 'Droid Sans', Verdana, sans-serif;
    font-size: 15px;
    line-height: 22.5px;
    color: #333333;
}

h1, nav {
    font-family: 'Droid Serif', Georgia, serif;
}

h1 {
    font-size: 32px;
    color: #000;
    letter-spacing: -1px;
}

h2, h3 {
    font-family: 'Droid Sans', Verdana, sans-serif;
}

h2 {
    font-size: 32px;
    color: #000;
    font-weight: normal;
}

h3 {
    font-size: 32px;
    color: #686868;
    text-transform: uppercase;
}

a {
    color: #686868;
    text-decoration: none;

}

a:hover, .selected  {
    color: #000;
}
...