SORU
29 Ocak 2010, Cuma


"Acı duyuyorum;divitis"? (CSS especialist gerekli)

Divs aşırı kullanımını kınıyoruz yazılar çok okudum. Aşağıdaki mark bunu yapmamın bir his var:

HTML:

<div id="header">
    <div class="container">
        <div id="banner">
            <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
            <ul id="lang">
                <li><a href="index.php">English</a></li>
                <li><a href="es/index.php">Español</a></li>
                <li><a href="tw/index.php">中文(繁體)</a></li>
                <li><a href="cn/index.php">中文(简体)</a></li>
            </ul>
        </div>
        <div id="intro">
            <div id="tagline">
                <h2>Nulla vitae tortor mauris</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
            <div id="about">
                <h2>right</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
        </div><!-- #intro -->
    </div><!-- .container -->
</div><!-- #header -->

CSS:

.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

/* header */
#header {
    background: #EEE;
}
#header h1 {
    float: left;
}
#header h2, #header a, #header p {
    color: #999;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    height: 30px;
    text-indent: -9999px;
    width: 500px;
}
#banner {
    border-bottom: 1px solid #DDD;
    padding: 0 0 15px 0;
    margin: 30px 0 30px 0;
    overflow: hidden;
    width: 960px;
}
#lang {
    float: right;
    padding: 9px 0 0 0;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a {
    font-size: 10px;
}

/* intro */
#intro {
    overflow: hidden;
    padding: 0 0 30px 0;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h2 {
    font-size: 24px;
}
#about {
    float: right;
    width: 380px;
}

Bu kullanım açıklama divs:

başlık:Arka pencere (div .container dışında yalan) sonuna kadar genişler hangi renk tanımlar.

konteyner:merkezleri içeriği (ama arka plan değil).

başlık:arka plan tanımlamak için veya ul#lang h1 etrafında renkli kenarlık.

intro:yukarıdaki ile aynı ama #tagline #about (aksi halde ve hakkında ayrı ayrı slogan söyle doldurma ve kenar boşluğu tanımlamak için var).

Divs fazla kullanmak mıyım?

Bu basitleştirilmiş olabilir?

CEVAP
29 Ocak 2010, Cuma


Mükemmel görünüyor. Bu bir örnek olarak alınmalı!

Bir belirti "divitis" <div>'s bir listesini görmek için <ul> kullanmak yerine.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • After Effects Tutorials w/ Mikey

    After Effect

    24 HAZİRAN 2009
  • stokelycalm

    stokelycalm

    28 Aralık 2010
  • Vladimir Jenko

    Vladimir Jen

    1 Mart 2010

İLGİLİ SORU / CEVAPLAR