"div" in een "a" is verkeerd. Dus, hoe kan ik dit doen? (HTML4, CSS2, crossbrowser)

Ik heb deze code:

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;
}

Ik heb twee koppelbare elementen nodig (50% elk) met een opvulling links (eerste) en rechts (de tweede).

De enige strategie die ik ken is om twee a (floatted) te maken met interne divs met padding.

Maar het is "incorrect". Dus hoe kan ik dit doen?

Bewerken

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

Maar probeer het venster op IE7 te vergroten/verkleinen: het zal mislukken ...

3
Je kunt geen opvulling toevoegen aan de elementen 50%: het neemt ook de opvulruimte in beslag en er wordt een nieuwe regel gemaakt. Ik veronderstelde dat dit duidelijk was ...
toegevoegd de auteur markzzz, de bron
@markzzz Waarom definieer je niet alleen de opvulling op de ankerelementen zelf?
toegevoegd de auteur Šime Vidas, de bron
Houd van het kijken naar gesprekken over de verschillen tussen HTML4 en HTML5 die geen melding maken van elke versie.
toegevoegd de auteur BoltClock, de bron
Waarom is het "incorrect"? Afaik, kan alleen inline-elementen bevatten, geen blokniveau-elementen. Dus, een div (sprekende CSS) is "incorrect" (per DTD)
toegevoegd de auteur knittl, de bron
@Sidnicious: misschien in HTML5 (is het al definitief?). Ik had het eigenlijk over HTML4 (heb het nog niet genoemd)
toegevoegd de auteur knittl, de bron
@knittl: de een element heeft een transparant inhoudsmodel , wat betekent dat het alles kan bevatten wat de ouder kan bevatten, inclusief blokniveau-elementen.
toegevoegd de auteur s4y, de bron
@Sidnicious: HTML 4.01-specificaties vermelden dat elementen mogen alleen inline elementen bevatten. Een <div> is een element op blokniveau, dus het mag niet in een voorkomen.
toegevoegd de auteur Sparky, de bron

4 antwoord

Ik zou de 'a'-tags maken

display: block;

Dat geeft je de mogelijkheid om ze te stylen alsof het div-tags zijn en je kunt de opvulling links en dienovereenkomstig toevoegen.

2
toegevoegd
ja, ik kan deze ook stylen zoals ik wil, omdat ze float: left; zijn
toegevoegd de auteur markzzz, de bron

(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
toegevoegd
Uhm: in feite zijn ze een andere vraag ... Dank je toch ...
toegevoegd de auteur markzzz, de bron
NEE! :) Probeer het uit te voeren op IE7 en vergroot het venster: het faalt. Ik heb ook een discussie geopend over dit probleem stackoverflow.com/questions/7918536/…
toegevoegd de auteur markzzz, de bron
Is dit niet wat ik zoek Sparky672: temperatura moet koppelbaar zijn ... de hele "container" :)
toegevoegd de auteur markzzz, de bron
Oh oke. Nu snap ik het. Hoe dan ook, de laatste optie heeft een ander gedrag: de hele container (div) is in feite niet "gekoppeld" als mijn voorbeeld.
toegevoegd de auteur markzzz, de bron
Ik ben beschaamd: O Waarom werkt jouw voorbeeld? Het is raar. In feite mislukt het plaatsen van een marge op css-stylesheet jsfiddle.net/p8Mps/6 . Wat is er gaande?
toegevoegd de auteur markzzz, de bron
Het ziet er vreselijk uit = het is verkeerd met de semantiek (div in a)
toegevoegd de auteur markzzz, de bron
?? Ik heb ze inline nodig. Ik heb beide 50% nodig: het toevoegen van een opvulling aan de a href zal in twee regels de a-elementen plaatsen.
toegevoegd de auteur markzzz, de bron
@markzzz, waarom geen marges gebruiken in plaats van opvullen? Laat dan de binnenste div 's elk op 50% en plaats de marges op de tags. Zie bewerkt antwoord & fiddle ... jsfiddle.net/sparky672/p8Mps/8
toegevoegd de auteur Sparky, de bron
@markzzz, plaats geen dubbele vragen. Eén zal waarschijnlijk gesloten zijn.
toegevoegd de auteur Sparky, de bron
@markzzz, dit lijkt te werken zoals u wenst ... jsfiddle.net/sparky672/p8Mps/13
toegevoegd de auteur Sparky, de bron
@markzzz, bekijk mijn bijgewerkte viool, de margestijl in de CSS plaatsen . Normaal gezien ziet u geen volledige containers (blokniveau) als klikbare koppelingen door ze in te pakken met een ankertag ... u zou JavaScript gebruiken om een ​​ ongedaan maken -gebeurtenis aan de hele container te koppelen. In menusystemen waar je iets soortgelijks ziet, komt dat omdat een afbeelding is omwikkeld met een anker, wat goed is omdat een afbeelding inline is.
toegevoegd de auteur Sparky, de bron
@markzzz, het faalt omdat je nu de marge op de klasse zet die is toegepast op de div . In mijn voorbeeld is de marge toegepast op de .
toegevoegd de auteur Sparky, de bron

U hebt geen container nodig om opvulling aan een anker toe te voegen. Dus gebruik:

<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
toegevoegd
Controleer mijn EDIT op de vraag. U heeft geen weergave nodig: blokkeer voor interne spanne, maar faal IE7 bij scrollen ...
toegevoegd de auteur markzzz, de bron
Ik zie dat ik in plaats van div gebruik: het krijgt de opvulling. Maar op IE7 zuigt 50% van de gevoerde spanwijdte soms ...
toegevoegd de auteur markzzz, de bron
@markzzz Een andere methode is om specifieke weergave eigenschappen te gebruiken, zie jsfiddle.net/ p8Mps/7
toegevoegd de auteur Rob W, de bron

Neem de opmerking van knittl in overweging. Ik kan twee mogelijke oplossingen bedenken:

1) Gebruik alleen de div 's (zonder de a -tags) en gebruik het attribuut onclick om naar de gewenste URL te verwijzen.

2) Voeg display: block toe aan de a CSS en laat de div 's weg. Vorm dan een tag naar wens

1
toegevoegd
Nee. Je kunt div niet in een a element stoppen. Is fout. Firefox kan deze fout mogelijk corrigeren, maar IE doet het niet. Ik zal ook JavaScript vermijden ...
toegevoegd de auteur markzzz, de bron
Soluton 1 krijgt een "F" in toegankelijkheid (hoe zouden gebruikers navigeren via het toetsenbord, en veel minder gebruikers van schermlezers hebben toegang tot die links?)
toegevoegd de auteur steveax, de bron
@steveax: dat klopt, het is meestal een slechte gewoonte. Ik noemde het net ...
toegevoegd de auteur CdB, de bron
Dat is wat ik zei, gebruik a of div , niet div in a . Hoe dan ook, ik denk dat het niet te ingewikkeld is, als je er mee speelt zul je erin slagen om te doen wat je wilt;)
toegevoegd de auteur CdB, de bron