Noe skrift til høyre og noe til venstre i en <div>

[aschj]

Topic burde beskrive det jeg vil gjøre. Jeg vil ha en text-align:right og en text-align:left i en og samme <div>-seksjon. Slik:

<div>
 <span style="text-align:left;">
   Hu hei vi går til venstre, ja
 </span>
 <span style="text-align:right;">
   Og vi går til høyre</span>
</div>

Denne koden viser alt til venstre både i IE og FF. Noen forslag?

[Marvil]

Uten å være helt sikker, men kan du ikke definere forskjellige <p>-klasser..?

 

<p class="venstre">hei</p>

<p class="hoyre">hopp</p>

 

med noen CSS-egenskaper til ? (float: noe; ? )

[PoleCat]

Eksempelet ditt funker ikke fordi span er inline. Gjør som Marvil sier.

Tekst rett i div er fyfy uansett, så p-elementet er på sin plass.

[enden]

<kverrulere>

uhm, span er jo en valid textcontainer det da

</kverrulere>

 

Men det semantiske rette er å jakke det to ulike avsnitt. Tekstbitene har jo ikke noe med hverandre å gjøre, så da bør de adskilles som ulike avsnitt

[aschj]

Dette er et felt som skal være på en linje, og da går det ikke å bruke <p>. Greiene som Marvil sa;

<div>
 <p style="text-align:left;">
   Kake
 </p>
 <p style="text-align:right">
   Elvis
 </p>
</div>

Resulterte i 5 linjer, hvorav teksten havnet på linje 2 og 4, hhv. til venstre og høyre. Hele poenget her er at alt skal være på en linje.

 

Jeg kan bruke span med float, men da må jeg sette en margin-bottom: -12px for at det skal stå jevnt med det andre, Men da blir det 1 piksel forskjell i høyden mellom IE og FF, så det er noe jeg anser som en 'last resort'.

Endret 5. oktober 2004 av aschj

[Simon Zimmermann]

CSS:

p {margin: 0; padding: 0;}
p.left {float: left;}
p.right {float: right;}

HTML:

<div>
<p class="left">
  Kake
</p>
<p class="right">
  Elvis
</p>
</div>

[Haraldson]

Avsnitt er blokkelementer, og fyller dermed som default 100% av parent element. Derfor må man vel gi p-ene width:50%; el.

[Simon Zimmermann]

Avsnitt er blokkelementer, og fyller dermed som default 100% av parent element. Derfor må man vel gi p-ene width:50%; el.

Glemte det, men det fungerte uten også.

[haugsand]

<kverrulere>

uhm, span er jo en valid textcontainer det da

</kverrulere>

 

Men det semantiske rette er å jakke det to ulike avsnitt. Tekstbitene har jo ikke noe med hverandre å gjøre, så da bør de adskilles som ulike avsnitt

Ikke prøv deg

 

Nesten alle elementer kan inneholde tekst, og følgende står om span:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. (...) but impose no other presentational idioms on the content.

 

Følgende står om p:

Authors traditionally divide their thoughts and arguments into sequences of paragraphs. The organization of information into paragraphs is not affected by how the paragraphs are presented: paragraphs that are double-justified contain the same thoughts as those that are left-justified. (...) The P element represents a paragraph

[haugsand]

Avsnitt er blokkelementer, og fyller dermed som default 100% av parent element. Derfor må man vel gi p-ene width:50%; el.

Enkelte ganger beregnes 50% + 50% til å være 100.1%, så dere er klar over det i tilfelle nettleserne bugger

[aschj]

CSS:

p {margin: 0; padding: 0;}
p.left {float: left;}
p.right {float: right;}

HTML:

<div>
<p class="left">
  Kake
</p>
<p class="right">
  Elvis
</p>
</div>

Strålende Mange takk.

[enden]

Følgende står om p:

Authors traditionally divide their thoughts and arguments into sequences of paragraphs. The organization of information into paragraphs is not affected by how the paragraphs are presented: paragraphs that are double-justified contain the same thoughts as those that are left-justified. (...) The P element represents a paragraph

Den tok jeg faktisk ikke

 

Skjønner jo engelsken, men tok ikke den praktiske betydningen...