[CSS] Hoe items naast elkaar floaten?

[Verwijderd]

Ik heb een open source forum gedownload dat ik nu wil aanpassen aan onze eigen huisstijl. Omdat de CSS een puinhoop is (3.000 regels, zelden shorthand en meerdere definities van 1 class) ben ik maar opnieuw begonnen. Hiervoor wil ik het volgende voor elkaar krijgen:

code:

[] Mededelingen       2 topics   2 posts   2008-11-02 16:20:16
   over het forum                          by Reveller

Ik ben al redelijk onderweg, maar ik krijg de listitems niet netjes op 1 rij met .item-subject (titel + beschrijving). Ik heb alles relative gezet en gefloat, maar toch lukt het niet. Wat doe ik verkeerd?

HTML:

<style>
.main-content {
  border: 1px solid #CCDCDD;
}

.main-content .main-item {
  border-top: 1px solid #CCDCDD;
  position: relative;
  overflow: hidden;
}

.main-content .main-item .icon {
  border: 0.5833em solid;
  border-color: #EDF1F5 #DDE0E4 #C6CBD3 #BABFC6;
  float: left;
}

.main-content .main-item .item-subject {
  overflow: hidden;
  float: left;
  border-left: 1px solid #CCDCDD;
  width: 100%;
}

.main-content .main-item ul {
  float: right;
  position: relative;
}
</style>

<div class="main-content">
  <div class="main-item" id="forum1">
    <span class="icon"></span>
    <div class="item-subject">
      <h3 class="hn"><a href=""><span>Mededelingen</span></a></h3>
      <p>over het forum</p>
    </div>
    <ul class="item-info">
      <li class="info-topics">
        <strong>1</strong> <span class="label">topic</span>
      </li>
      <li class="info-posts">
        <strong>1</strong> <span class="label">post</span>
      </li>
      <li class="info-lastpost">
        <span class="label">Last post:</span>
        <strong><a href="">2008-11-02 16:20:16</a></strong>
        <cite>by Reveller</cite>
      </li>
    </ul>
  </div>        
</div>

[BtM909]

Ik mis een klein beetje wat je zelf hebt geprobeerd? Gebruik je Firebug (add-on voor Firefox) aangezien die veel meer inzicht geeft tijdens het debuggen en testen?

[CH4OS]

Maak de indenting van je HTML even goed.
Sommige dingen staan nog niet helemaal goed.
En zoals je in je huidige code blok kunt zien, heb je ergens een foutje, want <cite> word anders weergegeven dan zou moeten.

Die info van de postings, zou ik dan weer doen in dezelfde div waar je ook de categorie namen van je (sub)fora neer zet. Dan hou je het voor jezelf overzichtelijk.

En aangezien je er toch classes aan hangt, maakt het ook niet uit of je het niet in die div zet of wel.
Overigens kan je dan volgens mij wel relatief gaan positioneren, wat nu geloof ik niet zo kan.

[ Voor 46% gewijzigd door CH4OS op 03-12-2008 23:05 ]

[curry684]

Semi-offtopic: je gebruikt het <cite> element verkeerd, die is bedoeld voor citaten, niet voor bronvermeldingen.

[Verwijderd]

BtM909 schreef op woensdag 03 december 2008 @ 22:54:
Ik mis een klein beetje wat je zelf hebt geprobeerd?

Ik heb de floats allemaal op left gezet, position: relative bij .item-subject gezet en verwijderd. Verder heb ik geen ideeen.

Gebruik je Firebug (add-on voor Firefox) aangezien die veel meer inzicht geeft tijdens het debuggen en testen?

Ja, maar daar haal ik niets uit. Geweldig dat je met gekleurde vlakken je elementen te zien krijgt, en welke css aan welke klassen hangen, maar ik kan er niet uit opmaken waarom ik het niet naast elkaar krijg.

GJtje schreef op woensdag 03 december 2008 @ 23:03:
Maak de indenting van je HTML even goed.

Gedaan Sommige dingen staan nog niet helemaal goed.

En zoals je in je huidige code blok kunt zien, heb je ergens een foutje, want <cite> word anders weergegeven dan zou moeten.

Ik durf het bijna niet te zeggen, maar misschien een foutje in de parser? Ik zie er echt geen fout in.

Die info van de postings, zou ik dan weer doen in dezelfde div waar je ook de categorie namen van je (sub)fora neer zet. Dan hou je het voor jezelf overzichtelijk.

En aangezien je er toch classes aan hangt, maakt het ook niet uit of je het niet in die div zet of wel.
Overigens kan je dan volgens mij wel relatief gaan positioneren, wat nu geloof ik niet zo kan.

Dat kan dus niet: het is open source software (FluxBB) en als ik de logic ga aanpassen, heb ik een probleem als er een upgrade van de makers komt. Je kunt namelijk niet een eigen set templates definieren (wel alle CSS aanpassen dus). De HTML uit de startpost is zoals die door FluxBB wordt gemaakt; daar wil ik in principe niets aan veranderen.

[Zillion01]

Verwijderd schreef op woensdag 03 december 2008 @ 22:49:
dat ik nu wil aanpassen aan onze eigen huisstijl. Omdat de CSS een puinhoop is...

zo te zien gaat het nog een grotere puinhoop worden

Misschien moet je eens een cursus XHTML en CSS proberen op te snorren, dat zal je mogelijk veel problemen gaan besparen.

Anyways om je vraag te beantwoorden tav .item-subject waarom die niet op 1 regel komt met de unordered list : je geeft hem een width van 100% dus wordt dat divje pagina breed. Om list items naast elkaar ipv onder elkaar weer te geven kun je display:inline gebruiken.

Dus weghalen width:100% en toevoegen li {display:inline;}

[Kiphaas7]

Is dit open source forum toevallig phpbb3? Hoewel sommige keuzes van hen wbt css en html af en toe vreemd zijn, is hun css net wel geordend. het defineren van meerdere dezelfde classes heeft daar alles met het scheiden van kleur, positie etc te maken. Wat het onderhouden, zodra je eenmaal weet welke secties er zijn, wel makkelijker maakt.

[Verwijderd]

Ik durf het bijna niet te zeggen, maar misschien een foutje in de parser? Ik zie er echt geen fout in.

LOL, de fout in de paginaopmaak bij de parser neerleggen. Roep dit soort dingen alleen als je een beetje thuis bent in CSS en HTML. Aan je reacties te lezen is het een goed idee om jezelf daar wat beter in te verdiepen. In dit geval zou ik er voor kiezen de template (in elk geval de CSS) opnieuw op te bouwen om te voorkomen dat je moet voortborduren op de onoverzichtelijke brij van iemand anders.

[tonyisgaaf]

Verwijderd schreef op vrijdag 05 december 2008 @ 08:16:
[...]
LOL, de fout in de paginaopmaak bij de parser neerleggen.

Lezen is ook een kunst. Het gaat hier over de code highlighting op dit forum, niet over de parser in de webbrowser.

Wat niet wegneemt dat de TS zich inderdaad wel wat beter mag verdiepen in HTML en CSS.

Even een tip voor de TS na een "quick glance": hoe weet een element dat float zijn breedte? Oftewel, hoe weet een volgend floatend element of er ruimte is?
Een block element, zoals een DIV, Hx of P, neemt standaard de breedte in beslag die beschikbaar is...

[Verwijderd]

(Nog steeds min of meer offtopic.)

curry684 schreef op woensdag 03 december 2008 @ 23:05:
Semi-offtopic: je gebruikt het <cite> element verkeerd, die is bedoeld voor citaten, niet voor bronvermeldingen.

Volgens http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1 is het cite-element wel bedoeld voor bronvermeldingen. Zoals in het volgende voorbeeld:

HTML:

As <CITE>Harry S. Truman</CITE> said,
<Q lang="en-us">The buck stops here.</Q>

[ Voor 3% gewijzigd door Verwijderd op 06-12-2008 02:23 ]

[curry684]

Hmm heb net 10 bronnen op internet doorgelezen en die spreken elkaar allemaal tegen over <cite>

W3 snapte er zelf ook niet veel meer van, en heeft het in HTML 5.0 draft al stukken verboser uitgelegd: klik.

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.

Oftewel zowel jij als hij gebruiken het alsnog verkeerd, maar ik heb ook weer even wat geleerd hier

[Pkunk]

Misschien niet de meest constructieve oplossing door het voor te kauwen, maar ik had er ff zin in

Volgens mij wil je zoiets:

Cascading Stylesheet:

*   {
        margin: 0;
        padding: 0;
    }
    .main-content
    {
        border: 1px solid #CCDCDD;
    }
    .main-content .main-item
    {
        border-top: 1px solid #CCDCDD;
        position: relative;
        overflow: hidden;
    }
    .main-content .main-item .icon
    {
        border: 0.5833em solid;
        border-color: #EDF1F5 #DDE0E4 #C6CBD3 #BABFC6;
        float: left;
    }
    .main-content .main-item .item-subject
    {
        overflow: hidden;
        float: left;
        border-left: 1px solid #CCDCDD;
        width: 150px;
    }
    .main-content .main-item ul
    {
        float: left;
        position: relative;
    }
    .item-info
    {
        list-style-type: none;
    }
    .item-info li
    {
        float: left;
        margin-left: 25px;
    }

en als je dan een <br/> voor je cite zet klopt het wel aardig.

[ Voor 8% gewijzigd door Pkunk op 06-12-2008 17:59 ]

[Verwijderd]

curry684 schreef op zaterdag 06 december 2008 @ 17:53:
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.

Hmmm. Ik vind de uitleg in de HTML4-specs (daar kwam ook het voorbeeld met Truman vandaan) veel consequenter. Waarom wordt dit gewijzigd? Voor het verwijzen naar boeken e.d. gebruik je toch het cite-attribuut van het q-element, zou ik zeggen? Het cite-element is volgens mij bedoeld om de relatie van een citaat met een in dezelfde tekst genoemde "bron" aan te geven; "bron" in de breedste zin van het woord, dus ook een naam. Waarom niet?

Nou ja, zolang HTML5 er nog niet is, kan TS het cite-element blijven gebruiken zoals hij nu doet, – al zou ik denk ik toch vast een beetje vooruit kijken naar HTML5 en dat hele cite niet meer gebruiken. Thanks, curry684.

maar ik heb ook weer even wat geleerd hier

Ik was er eigenlijk verbaasd over dat ik dit wist Allemaal dank zij http://dev.opera.com/arti...-known-semantic-elements/