I koden nedan innehåller första diven en text och en högerställd bild. Andra div:en lite text. <code> Är alltså det som står här inte sant? <b>För det första påbörjar du ett till block (p-taggen) innuti div-taggen (som också är ett block) vilket är förbjudet.</b> Hm... Nu är jag förvirrad... Av vad jag förstått av dels html-spec samt rickard d så ska block i block vara förbjudet... > <b>Av vad jag förstått av dels html-spec samt rickard d så ska block i block vara förbjudet...</b> Ah... Det visste jag inte ;) Kan förklara en del mystiska saker jag sett :) DTD:er är inte så svåra att läsa. Enklast att börja med är DTD:er för XML-dokument, t.ex. XHTML 1.0.Placering av div:ar
I explorer hamnar allt precis som jag vill, texten i andra div:en börjar nedanför bilden. I firefox däremot börjar texten i andra div:en tidigare och lägger sig bredvid bilden.
Hur får jag firefox att inte börja visa andra div:en förrän nedanför bilden?
<code><div style="display:block;width:100%;" id="div1">
<p>Hej
<img border="0" src="/cgi-bin/datasidor/bilder/red.jpg" width="100" height="222" align=right>
</div>
<div style="display:block;width:100%;" id="div2">
<p>Hej igen</p>
</div></code>Sv: Placering av div:ar
<div style="display:block;width:100%;" id="div1">
<p>Hej
<img border="0" src="/cgi-bin/datasidor/bilder/red.jpg" width="100" height="222" align=right>
</div>
</code>
Det där såg väldigt skumt ut...
För det första påbörjar du ett till block (p-taggen) innuti div-taggen (som också är ett block) vilket är förbjudet. Dessutom avslutar du inte p-taggen. Jag skulle föreslå att du plockar bort alla div-taggar
<code><p id="p1">Hej
<img border="0" src="/cgi-bin/datasidor/bilder/red.jpg" width="100" height="222" align=right>
</p>
<p id="p2">
Hej igen
</p></code>
Det där borde stämmaSv: Placering av div:ar
http://zoon.se/ref/html/block.html#div
Där står om div att den "Får innehålla: blockelement, inlineelement"
Hur som helst, att utesluta div som föreslås ger inte den effekt jag önskar. Vill att "Hej igen" skrivs ut nedanför bildens slut och inte direkt nedanför första "Hej".Sv: Placering av div:ar
Du vet inte vad du pratar om...
Ur specifikationen (DTD:n) för HTML 4.01 Strict:
<code>
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
<!ENTITY % flow "%block; | %inline;">
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
</code>
Inuti ett DIV-element får både block- och inlineelement förekomma. Till blockelement räknas bl.a. P och DIV.
Valiant: När man sätter <b>align=right</b> på en bild behandlas den som ett element med <b>float: right</b>, och då skall det inte ta upp plats (inte bidraga till höjden) i moderelementet. Firefox gör alltså helt korrekt, medan Internet Explorer gör fel.
Hur skall du då göra för att få det korrekt? Det behövs inte så mycket. Ange bara <b>clear: both</b> i stilmallen för den nedre DIVen:
<code>
<div id="div1">
<p>Hej
<img border="0" src="/cgi-bin/datasidor/bilder/red.jpg" width="100" height="222" align=right>
</div>
<div style="clear: both;" id="div2">
<p>Hej igen</p>
</div>
</code>Sv: Placering av div:ar
Sv: Placering av div:ar
Generellt sett så är det inte tillåtet med block i block som du säger. Tex får du inte ha ett stycke inuti ett stycke. Men DIV är ett undantag och tillåter andra blockelement som child.Sv: Placering av div:ar
Det är nästan så att man borde se till att skaffa en vettig html-bok som förklarar specen ;)Sv: Placering av div:ar
Viktigast är elementdeklarationer:
<code><!ELEMENT ul (li)+></code>
Här anges att elementet <b>ul</b> kan ha ett eller flera <b>li</b> som underelement.
<code><!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))></code>
Här anges att elementet <b>table</b> först kan (men inte måste) ha ett <b>caption</b>-element, därefter noll eller flera <b>col</b> eller noll eller flera <b>colgroup</b>, sedan eventuellt ett <b>thead</b>, eventuellt ett <b>tfoot</b> och slutligen ett eller flera <b>tbody</b> eller ett eller flera <b>tr</b>.
Ofta ser man att det står saker som <b>%Flow;</b>, t.ex.
<code><!ELEMENT th %Flow;>
<!ELEMENT td %Flow;></code>
Detta fungerar som konstanter och definieras i ENTITY-deklarationer:
<code><!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
</code>
<b>#PCDATA</b> står enkelt uttryckt för vanlig text mellan taggar.
I DTD:er definierar man även vilka attribut element kan ha:
<code><!ATTLIST body
%attrs;
onload %Script; #IMPLIED
onunload %Script; #IMPLIED
>
<!ATTLIST html
%i18n;
id ID #IMPLIED
xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml'
>
</code>
Även attribut kan som synes deklareras som entiteter:
<code><!ENTITY % coreattrs
"id ID #IMPLIED
class CDATA #IMPLIED
style %StyleSheet; #IMPLIED
title %Text; #IMPLIED"
></code>
Orden efter attributnamnet anger attributets typ samt om attributet måste finnas med, vilket defaultvärde det har m.m.
http://www.w3.org/TR/REC-xml/#elemdecls