2 Div Container nebeneinander in einer Liste *need Help*

[dage]

Folgendes Problem: Ich habe eine Liste und in jedem Listenpunkt soll erst ein wenig Text kommen und dann eine Grafik (bzw ein Formular von dem nur eine Grafik zu sehen ist). Je nach Browser habe ich nu unterschiedliche Fehler. Aber kein Browser zeigt das an was ich sehen will. Hier mal die Seite http://www.dage.bplaced.de/Hausaufgaben%20(Test-Area)/test_alt.html

Im Firefox geht das noch einigermaßen, da ist nur die zweite Umrandung falsche und der grüne Kasten ist weiter links als der Rote bzw der Rahmen um den grünen Kasten ist kürzer als der Rahmen um die Grün/Blau Kombination Aber in anderen Browsern wird auch mal gerne die Nummerierung verschlugt oder "2." ist nach oben verschoben. Ich hoffe mal ich hab irgendwas einfaches Übersehen hab und es sind nicht zig verschiedene Bugs in so ziemlich allem Browsern ^^ Validiert ist der HTML Quellcode übrigens.

 

[neuroleptika]

ol css

Ich habe es versucht.
Entweder habe ich ein Brett vorm Kopp oder es ist wirklich so kompliziert:
(x)html

<div id="geordnete_liste">
<ol>
<li>
<p>
<span class="rot">Hello World</span>
<span class="bild"><img src="delete.png" width="16" height="16"  alt="Löschen"/></span>
</p>
</li>
<li>
<p>
<span class="gruen">Hello World again</span>
<span class="blau">Das hier ist mal kein Bild wie weiter oben.</span>
</p>
</li>
</ol>
</div>

css:

* {
    margin: 0;
    padding: 0;
  }

body {
    font-size: 16px;
  }

#geordnete_liste {
    border : black solid 5px;
    padding: 20px 0px 20px 20px;
  }

#geordnete_liste ol {
margin-left: 20px;
margin-right: 20px;
  }

#geordnete_liste ol li {
padding-bottom: 4px; /* Wert ergibt sich aus border-top + border-bottom von #inhalt1 */
margin-top: 10px;
  }


#geordnete_liste p {
    border: 2px solid black;

  }

#geordnete_liste p span {
padding-left: 3px;
  }

/*clear moderne Browser:*/
#geordnete_liste p:after {
    display: block;
    content: "floatende";
    clear: both;
    height: 0;
    visibility: hidden;
  }

/*autoclear IE6:*/
* html #geordnete_liste p {
   height: 1%;
  }

/*autoclear IE7:*/
* +html #geordnete_liste p {
   height: 1%;
   color: #AFDA22;
  }

/*autoclear IE8:
{
versteht vermutlich :after;
}
*/

/*farben und Breiten:*/
#geordnete_liste p span {
    display: block;
    float: left;
    width: 12em;
  }


#geordnete_liste p .rot {
   background-color: red;
  }

#geordnete_liste p .gruen {
   background-color: green;
  }

#geordnete_liste p .blau {
   width: 26em;
   background-color: blue;
   color: white;
  }

#geordnete_liste li .bild {
   width: 26em;
  }

#geordnete_liste li .bild img {
   display: block;
  }

Ich bekomme die Listennummerierung für Opera9 und Safarie 3.1 (win) nicht einheitlich hin. In Konqueror 3 habe ich es mir erst gar nicht angesehen (es könnte fürchterlich aussehen). In Firefox 2.0 ud IE7 sieht es recht stabil aus.
Im IE6 tanzen die Items ein wenig aus der Reihe.

Ich würde an dieser Stelle aufgeben und eine <ul> verwenden und für die Nummerierung ein anderes Tag verwenden.

Vielleicht macht eine Definitionsliste (<dl>) auch mehr Sinn. Da es nur zwei "Spalten" sind, würde sich das zumindest gestalterisch anbieten.

Wenn das ganze nur dazu dient ein Formular zu gestalten würde ich gar keine Liste verwenden sondern <label> und <input> gemeinsam in <p> einfügen.

Je nach Zweck, würde vielleicht auch <table> in Frage kommen.

Manche Gestalter lassen die Nummerierungen von <ol> für die Bildschirmausgabe einfach weg:

ol {
list-style: none;
}

 

[Efchen]

Auch mein erster Gedanke (noch vor "Warum hat er da das überflüssige <div> in den Listenpunkt gepackt) war, dass sich das deutlich nach einer Anwendung für eine <dl> anhört. Aber der Inhalt fehlt ja auf der Testseite, also kann man da nur raten. Wenn nummeriert werden soll, ist natürlich die <ol> die beste Wahl, auch wenn zu dem Text nur ein Icon (delete.png) angezeigt werden soll. Vielleicht böte sich aber auch an, das Icon als Hintergrundgrafik einzubauen, wenn der Link über das komplette Listenelement geht, kein Problem.

Dass bei Punkt 2 in FF der Rahmen vermeintlich nicht stimmt, ist ja klar, das liegt am float.

Was ich auch nicht verstehe ist, warum jemand ein <p> floatet, damit das nachfolgende <img> neben dem Text steht. Man setzt doch ein <p> und schließt das <img> darin ein. Schon liegt es neben dem Text. Sogar ohne float und der Rahmen umschließt den Content auch komplett.

Ich finde, bei dem Problem wäre erstmal der Content wichtiger, damit man weiß, wie der ausgezeichnet wird, bevor man sich ans Stylesheet macht.

Gruß,
-Efchen

 

[dage]

Erstmal danke euch allen :)

Ich hab's mal mit Tabellen versucht und das klappt auch recht gut. Hier mal der momentane Stand mitsamt dem Kontext in dem die Seite später benutzt wird: http://www.dage.bplaced.de/Hausaufgaben_Test-Area/test.html

Ich denke das man da Tabellen benutzt geht gerade noch so ohne sie nur zum formatieren zu missbrauchen. Und die ganzen Bug-fixes für die Internet Explorer Versionen kommen später ;ugl

Ist zwar schade das ich den Kampf gegen die Aufzählungen aufgegeben habe aber irgendwann will man auch mal weiterkommen und wenn andere auch "an dieser Stelle aufgeben" würden dann kann ich als Anfänger getrost was anderes probieren^^

Dass bei Punkt 2 in FF der Rahmen vermeintlich nicht stimmt, ist ja klar, das liegt am float.

Das würde ich aber gerne noch verstehen. Wenn man ein div-element um gefloatete Elemente packt dann funktioniert ein Rahmen nicht?

Und noch eine kleine Frage: Die Schriftart in der Tabelle sieht fett aus .. und mit font-weight:normal in <table> bekomme ich sie nicht dünner. Nur wie bekomme ich sie normal?

Ich sehe gerade das Beachtliche Erbebniss "Failed validation, 174 Errors"... aber es sieht schön aus^^ Gibst irgendeine bessere Methode um Formulare zu erstellen die nur als ein Bild sichtbar sind?

 

[Efchen]

Das würde ich aber gerne noch verstehen. Wenn man ein div-element um gefloatete Elemente packt dann funktioniert ein Rahmen nicht?

Nein, wieso? Der Rahmen funktioniert doch.
Wenn Du ein Element floatest, nimmst Du es "aus dem Fluss". Es belegt dann keinen Platz mehr in der Anordnung der Elemente.
Normalerweise werden Elemente ja nacheinander angeordnet. Wenn Du ein Element floatest, wird an der Stelle, wo das gefloatete Element steht, mit dem nächsten Element weitergemacht.
Effektiv heißt das, dass Dein <div> keinen Inhalt hat, also height:0. Deswegen sieht es so aus, als wäre etwas mit dem Rahmen nicht okay.
Wenn Du willst, dass das Element außen rum die gefloateten Elemente wieder umschließt, musst Du nach dem letzten gefloateten Element noch ein "clear" einbauen. dann geht der Rahmen auch außen um die gefloateten Elemente.

Und noch eine kleine Frage: Die Schriftart in der Tabelle sieht fett aus .. und mit font-weight:normal in <table> bekomme ich sie nicht dünner. Nur wie bekomme ich sie normal?

<table> enthält keinen Text. Der ist nur in <th> oder <td>.
Installer Dir Firebug für Firefox, damit kann man solche Sachen ganz gut prüfen.

Ich sehe gerade das Beachtliche Erbebniss "Failed validation, 174 Errors"... aber es sieht schön aus

Das Aussehen nutzt Dir nur nicht immer was. Ohne eine valide Basis ist alles nur Glücksache.

Gruß,
-Efchen

 

[dage]

ahh ok das klingt doch mal verständlich. Kein Inhalt = keine Höhe^^

Aber auch wenn <table> keine Text enthält müsste die Eigenschaft doch vererbt werden oder? So wie es Firebug auch anzeigt wenn man auf ein <th> element geht.

Und Validierungsfehler sind bei validome.org nur noch blödsinnige (</html> nicht gefunden? das findet ja sogar mein texteditor^^) und auf validator.w3.org sind nur noch 3 Fehler die ich nicht verstehe bzw nicht weiß wie ich sie umgehen kann. Wenn jemand Zeit hat kann er ja mal kurz drüber schauen (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dage.bplaced.de%2FHausaufgaben_Test-Area%2Ftest.html&charset=(detect+automatically)&doctype=Inline&group=0).

 

[Maxi]

Was du machen solltest ist folgendes:
Leerzeichen und Sonderzeichen aus Datei- und Verzeichnisnamen rausstreichen.

 

[dage]

ein "_" bzw ein "-" zählen nicht als Sonderzeichen oder?

 

[Maxi]

ein "_" bzw ein "-" zählen nicht als Sonderzeichen oder?

die fallen unter die "erlaubten Sonderzeichen".

 

[neuroleptika]

Ich habe da wohl was falsch verstanden.
Auf dem Entwurf waren die Listenpunkte außerhalb der Rahmen.
Ich dachte das sei wichtig.
Den <span> habe ich display: block gegeben damit die farbigen Bereiche eine feste Breite durch width bekommen können.

Die Listenpunkte von <ol> lassen sich kaum einheitlich stylen.

 

[Efchen]

auf validator.w3.org sind nur noch 3 Fehler die ich nicht verstehe

1. Du hast Text im <form>-Tag, nämlich "Username". Der darf da so alleine nicht stehen. Pack den in ein sinnvolles Tag, informiere Dich z.B. mal über <label>, das ist extrem sinnvoll und steigerd die Benutzerfreundlichkeit immens!

2./3. Weiß ich jetzt auf Anhieb nicht, ohne den Code zu nehmen und selbst zu verändern. Könnte durch den ersten Fehler verursacht sein, könnte auch was damit zu tun haben, dass Du beim Attribut "type" des Submit-Buttons kein Leerzeichen vor dem Attribut hast, oder er will vielleicht ein <fieldset>.

Gruß,
-Efchen