[HTML/CSS] Twee items op 1 regel krijgen - Softwareontwikkeling

donderdag 9 februari 2006 12:54

Acties:

Java Apprentice

Topicstarter

Het is een wat vage titel die ik heb gebruikt, maar het voldoet (gedeeltelijk).

Het probleem is het volgende:

Ik wil graag een h2 en een h3 element op 1 regel krijgen waarbij de h2 links is uitgelijnd, en de h3 rechts.
Klinkt simpel zou je zeggen, maar tot nog toe is het mij nog niet gelukt.
Ik ben helaas niet al te ervaren met CSS, vandaar waarschijnlijk ook mijn vraag.

In FF1.5 loopt alles soepeltjes en werkt het naar behoren, maar in IE6 beginnen de problemen.

De structuur is als volgt:

HTML:

<div>
  <ul>
    <li>
      <h2>tekst</h2>
      <h3>tekst</h3>
      <p>meer tekst</p>
    </li>
    <li> .... etc ... </li>
  </ul>
</div>

Op dit moment werk ik met een negative margin op h3 om deze omhoog te krijgen waarbij de volgende css van toepassing is:

Cascading Stylesheet:

ul {
    list-style-type: none;  
}
h2, h3 {
    font-family: verdana, arial, sans-serif, georgia;
    position: relative;
}
h2 {
    text-align: left;
}
h3 {
    text-align: right;
    margin-top: -3em;
}
p {
    border-top: 1px dashed #000000;
}

Iemand een lumineus idee om het volgende voor elkaar te krijgen?

<h2>tekst</h2>                                             <h3>tekst</h3>
--------------------------------------------------------------------------
<p>meer tekst</p>

Alvast bedankt!

Ontdek mij!
Proud NGS member
Stats-mod & forum-dude

donderdag 9 februari 2006 12:57

Acties:

Guillome

test

display:inline misschien?

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

donderdag 9 februari 2006 13:13

Acties:

Pixeldude

In je html de <h3> voor de <h2> zetten en <h3> een float:right mee geven

donderdag 9 februari 2006 13:20

Acties:

Sappie

De Parasitaire Capaciteit!

Liever niet de h3 voor de h2 zetten.. daarmee verneuk je de structuur in de markup

doe het bijv zo

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <style type="text/css">
          * { font-size: 12px; }

          ul { list-style: none; margin: 0; padding: 0; }
          h2 { float: left; margin: 0; }
          h3 { text-align: right; margin: 0; }
          ul li p { border-top: 1px solid black; }

        </style>
</head>
<body>
<div>
  <ul>
    <li>
      <h2>heading2</h2>
      <h3>heading3</h3>
      <p>meer tekst</p>
    </li>
    <li>
      <h2>heading2</h2>
      <h3>heading3</h3>
      <p>meer tekst</p>
    </li>
    <li>
      <h2>heading2</h2>
      <h3>heading3</h3>
      <p>meer tekst</p>
    </li>
  </ul>
</div>
</body>
</html>

edit: ff simpeler gemaakt

[ Voor 50% gewijzigd door Sappie op 09-02-2006 13:23 ]

Specs | Audioscrobbler

donderdag 9 februari 2006 13:20

Acties:

Swaptor

Java Apprentice

Topicstarter

@XLerator: nee, dan komen ze inderdaad beiden op 1 regel, maar dan staan ze direct achter elkaar.

@Skyline GTR: Helaas niet, dan staat de h3 nog altijd hoger dan de h2. Niet op 1 regel. Ook wanneer ik met een positieve dan wel negatieve margin voor de top/bottom werk.

@Sappie: ik ga het direct proberen, het ziet er veelbelovend uit!

[ Voor 12% gewijzigd door Swaptor op 09-02-2006 13:22 . Reden: Sappie crosspost ]

Ontdek mij!
Proud NGS member
Stats-mod & forum-dude

donderdag 9 februari 2006 13:25

Acties:

Sappie

De Parasitaire Capaciteit!

Kep em net ff geedit nog Swaptor.. wellicht had je dat over het hoofd gezien

Specs | Audioscrobbler

donderdag 9 februari 2006 13:33

Acties:

Swaptor

Java Apprentice

Topicstarter

Sappie: u is mijn held!

Het clearen van de andere children van de li was uiteindelijk de oplossing (evenals het opruimen van een overerfde top-margin van 0.1em)
Mijn dank is groot! $_/-\o_$

De re-edit is zo mogelijk beter, *knutselt*

Nice

[ Voor 14% gewijzigd door Swaptor op 09-02-2006 13:37 . Reden: Sappie re-edit ]

Ontdek mij!
Proud NGS member
Stats-mod & forum-dude