CSS pozisyonu ile yerleşim problemleri

hey guys starbucks.com'da bulabileceğinize benzer bir navigasyon sistemi oluşturmaya çalışıyorum. İşte benim örneğimin bağlantısı: http://dl.dropbox.com/ u/73992/js_tests/test.htm Alttaki gezinme örneğiyle efekti gerçekleştiriyorum ancak konumlandırma problemleri olduğunu görebiliyorum. CSS'yi kaynak kodunda bulabilirsiniz. Bunu test etmenin en iyi yolu olduğunu düşündüm. Bunu alabileceğim herhangi bir yardım için şimdiden teşekkür ederim.

öneri olarak burada css

*
{
    margin:0;
    padding:0;
}

#nav
{
    position:relative;
    margin-top:3em;
    margin-left:3em;
}   

#nav ul
{
    list-style-type:none;
}

#nav ul li
{
    position:relative;
    margin-top:10px;
}    

#nav ul li ul li
{
    margin-top:0px;
}

#nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    border-bottom:none;
    z-index:20;
}

.content
{
    position:relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
}

.content form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}   

.gallery
{
    margin:10px 10px 10px 10px;
    background-color:#ffffff;
    border:solid 1px black;
} 

.gallery img
{
    display:inline-block;
    margin:10px 5px 10px 0px;
    float:left;
} 

/*
This next section is identical but represents what happens w/ the absolute positioning.
*/

.content2
{
    position:absolute;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    top:30px;
    z-index:-5;
} 

.content2 form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content2 p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}

.clear
{
    clear:both;
}

Eğer bu yardımcı olursa, yapmaya çalıştığım şey budur

this is an example of the off hover(on) and then active when the section is clicked if i could get the <a href=CSS working the functionality would be easy... just can't seem to get these accomplished.">

 0
katma düzenlendi
Görünümler: 8
kaynak
ro ru fr es pt de hi bn ar uk
Bir test vakası yapmaktan ve sorudaki kodu/işaretlemeyi yayınlamaktan her zaman daha iyisiniz.
katma yazar Jared Farrish, kaynak

3 cevap

Bunu dene. Konumu mutlakdan göreceli olarak değiştirin ve 30 piksel üst kenar boşluğunu kaldırın. Yukarıdaki 3 örnekle aynı etkiyi elde edebilmelisiniz.

.content2
{
    position: relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    z-index:-5;
}

[DÜZENLE]

İlk önce, "sınır-alt: yok;" bu nedenle h1'iniz bu sekmeli efekt için alt kenarlara sahip olacaktır.

#nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    z-index:20;
}

Senin h1 bir sınıf ver, diyelim ki "sekmeli"

  • Ex. 1

    Ve muhtemelen CSS'niz için bazı negatifleri kullanın.

    h1.tabbed {
    position:absolute;
    top:-28px;   
}

    Bunu bir dene.

    • 2
    katma
    kaynak
    Cevabımı biraz değiştirdim. Bir şans ver.
    katma yazar Mike Sanchez, kaynak
    Göndermiş olduğunuz örneği gördüm. "Border-bottom: none;" öğesini kaldırmaya gerek yok Eğer durum buysa. @Brodie
    katma yazar Mike Sanchez, kaynak
    @Brodie CSS'nize "#nav ul li ul li" nizi uygun bir marj alt seviyesinde verin. :)
    katma yazar Mike Sanchez, kaynak
    Bununla ilgili problem, en üstteki sekmenin alt kısmı ile mükemmel bir şekilde hizalanmasıdır. Sekmeli bir şeyin yanılsamasını yaratmak için içerik div'unu birazcık kapatmak için h1'e ihtiyacım var.
    katma yazar Brodie, kaynak
    Bu işe yarıyor ama yeni bir sorun yaratıyor dl.dropbox.com/u/73992/ js_tests/test.htm
    katma yazar Brodie, kaynak

    float : left can solve your positioning problem. You have to add just two lines in your css

    #nav ul li {
    float: left;
    margin: 0 15px;
    position: relative;
}
    0
    katma
    kaynak

    Put display:inline; on li

    And float:left; on ul

    Bence senin problemin iyi anlaşılmış olsaydı, senin büyük problemin.

    0
    katma
    kaynak
    Bu onları sıraya diziyor, h1'in içerik div'ları ile etkileşimde olan bir problemden daha çok yaşıyorum. Bir sekmenin yanılsamasını yaratmak için içerik piksellerini birkaç pikselle çakışacak h1'e ihtiyacım var.
    katma yazar Brodie, kaynak