Bir "a" haline "div" yanlıştır. Peki bunu nasıl yapabilirim? (HTML4, CSS2, crossbrowser)

bu koda sahibim:

HTML

<div class="temperatura">
    
        <div style="padding-left:12px;">
            Text1
        </div>
    

    
        <div style="padding-right:70px;">            
            Text2
        </div>
            
</div>

CSS

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
    font-size:14px;
    font-weight:bold;
}

.temperatura_localita
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-decoration:none;
}

.temperatura_dettagli
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-align:right;
    text-decoration:none;
}

Solda (ilk) ve sağda (ikincisi) iki adet bağlantı elemanına (her biri% 50) ihtiyacım var.

Bildiğim tek strateji, padding ile iç div ile iki a (floatted) yapmaktır.

Ama bu "yanlış". Peki bunu nasıl yapabilirim?

DÜZENLEME

The other solution is just change the internal div (the ones with padding) with span : http://jsfiddle.net/p8Mps/3/

Ama IE7'deki pencereyi büyütmeye/küçültmeye çalışın: başarısız olur ...

3
Bir öğeye% 50 dolgu ekleyemezsiniz: dolgu alanını da alır ve yeni bir satır oluşturur. Bunun açık olduğunu sanıyordum ...
katma yazar markzzz, kaynak
@markzzz Neden sadece bağlantı elemanlarının üzerindeki dolguyu tanımlamıyorsunuz?
katma yazar Šime Vidas, kaynak
HTML4 ve HTML5 arasındaki her sürümden bahsetmeyen farklılıklar hakkındaki konuşmaları izlemeye bayılıyorum.
katma yazar BoltClock, kaynak
Neden "yanlış"? Afaik, sadece satır içi elemanlar içerebilir, blok seviyesinde eleman içermez. Böylece div (konuşan css) "yanlış" dır (DTD başına)
katma yazar knittl, kaynak
@Sidnicious: belki HTML5'te (henüz nihai mi?). Aslında HTML4'ten bahsediyordum (yine de bahsetmedin)
katma yazar knittl, kaynak
@knittl: bir öğesi , bir Saydam içerik modeli , yani ana öğe içerebilecek tüm öğeleri içerebileceği anlamına gelir.
katma yazar s4y, kaynak

4 cevap

Ben 'a' etiketleri yapardım

display: block;

Bu size div etiketliymiş gibi stil verme ve soldaki dolguyu ve buna göre doldurma sağlamayı mümkün kılar.

2
katma
evet, bunları istediğim gibi de yapabilirim, çünkü float: left;
katma yazar markzzz, kaynak

(anchors) are inline elements.

<div> (divisions) are block level elements.

HTML 4.01 specifications state that elements may only contain inline elements. A <div> is a block level element, so it must not appear inside an .

Never put block level elements inside inline elements.

You would put inline elements inside block level elements instead...

<div class="temperatura">
    <div style="padding-left:12px;">
        
            Text1
       
    </div>
    <div style="padding-right:70px;">
              
            Text2
         
    </div>       
</div>

EDIT based on OP's comments...

http://jsfiddle.net/sparky672/p8Mps/9/

<div class="temperatura">
    <div class="temperatura_localita">
        
            Text1
       
    </div>
    <div class="temperatura_dettagli">
              
            Text2
         
    </div>       
</div>

EDIT 2 based on further comments...

http://jsfiddle.net/sparky672/p8Mps/13/

<div class="temperatura">
    
        Text1 

     
        Text2    
</div>
1
katma
Uhm: Aslında onlar farklı bir soru ... Her neyse, teşekkürler ...
katma yazar markzzz, kaynak
YOK HAYIR! :) IE7'de çalıştırmayı ve pencereyi artırmayı deneyin: Başarısız. Ayrıca bu sorun hakkında bir tartışma başlattım stackoverflow.com/questions/7918536/…
katma yazar markzzz, kaynak
Sparky672'yi aradığım şey değil: temperatura bağlanabilir olmalı ... tüm "kapsayıcı" :)
katma yazar markzzz, kaynak
Ah tamam. Şimdi anladım. Her neyse, son seçenek başka bir davranışa sahiptir: bütün konteyner (div) aslında benim örneğim olarak “bağlantılı” değildir.
katma yazar markzzz, kaynak
Ben embarassed: O Örneğin neden çalışıyor? Bu garip. Aslında, CSS stil sayfasındaki kenar boşluğu, jsfiddle.net/p8Mps/6 başarısız olur. Ne oluyor?
katma yazar markzzz, kaynak
Korkunç görünüyor = semantik ile yanlış (div içine a)
katma yazar markzzz, kaynak
?? Onlara inline ihtiyacım var. Her ikisine de% 50'ye ihtiyacım var: Bir href'e bir dolgu eklemek, iki satırlık bir elemanın içine konacaktır.
katma yazar markzzz, kaynak
@markzzz, neden dolgu yerine kenar boşluklarını kullanmıyorsunuz? Ardından, iç div 'i her biri % 50 ' de bırakın ve kenar boşluklarını etiketlerine koyun. Düzenlenmiş yanıtla & klonla bakın ... jsfiddle.net/sparky672/p8Mps/8
katma yazar Sparky, kaynak
@markzzz, lütfen yinelenen sorular göndermeyin. Biri muhtemelen kapanacak.
katma yazar Sparky, kaynak
@markzzz, İstediğiniz gibi çalışıyor ... jsfiddle.net/sparky672/p8Mps/13
katma yazar Sparky, kaynak
@markzzz, Güncellenen kemanıma bakın, kenar boşluğu stilini CSS'ye koyarak . Tipik olarak, tüm kapsayıcıları (blok düzeyi) bir bağlantı etiketi ile sarmalayarak tıklanabilir bağlantılar olarak görmüyorsunuz ... bir kapsayıcıya onclick olayını bağlamak için JavaScript kullanırdınız. Benzer bir şey gördüğünüz menü sistemlerinde, görüntünün bir satır olduğu için bir görüntü bir çapa ile sarılmıştır.
katma yazar Sparky, kaynak
@markzzz, başarısız oluyor çünkü artık marjı div 'a uygulanan sınıfa koyuyorsunuz. Örneğimde, kenar boşluğu 'ye uygulandı.
katma yazar Sparky, kaynak

Bir bağlantıya dolgu eklemek için bir kaba ihtiyacınız yoktur. Yani, kullan:

<div class="temperatura">
    
        Text1
    

                
        Text2
            
</div>

If you really need a container, change div to span, and add display:block to the span element. After this declaration, the element will "behave" similar to the <div> element.

1
katma
Sorudaki EDIT'imi kontrol et. Ekrana ihtiyacınız yok: dahili açıklık için blok, ancak kaydırma sırasında IE7'de başarısız ...
katma yazar markzzz, kaynak
Görüyorum ki sadece yerine div kullanıyorum: bu dolguyu alır. Ama IE7'de, yastıklı açıklıkta% 50 bazen berbat ...
katma yazar markzzz, kaynak
@markzzz Başka bir yöntem, özel görüntüleme özelliklerini kullanmaktır, bkz. jsfiddle.net/ p8Mps/7
katma yazar Rob W, kaynak

Knittl'in yorumunu dikkate al. 2 olası çözümü düşünebilirim:

1) Sadece div 'u kullanın ( a etiketleri olmadan) ve istediğiniz URL'ye yönlendirmek için onclick özelliğini kullanın.

2) a CSS 'e display: block ' ı ekleyin ve div 'i atlayın. Ardından etiketleri istediğiniz gibi biçimlendirin

1
katma
Hayır. Bir öğeye div koyamazsınız. Hata. Firefox belki bu hatayı düzeltebilir, ancak IE bunu yapmayacaktır. Ayrıca javascript’ten de kaçınacağım.
katma yazar markzzz, kaynak
Soluton 1, erişilebilirlik konusunda bir "F" alır (kullanıcılar klavye aracılığıyla nasıl gezinir, ekran okuyucu kullanıcıları bu bağlantılara daha az erişir?)
katma yazar steveax, kaynak
@steveax: Bu doğru, genellikle kötü bir uygulamadır. Sadece bahsetti ...
katma yazar CdB, kaynak
Ben de öyle dedim, a 'da a veya div , div kullanmayın. Her neyse, bence çok karmaşık değil, eğer onunla oynarsan, istediğini yap.
katma yazar CdB, kaynak