Tutorial HTML, CSS u. PHP - Forum

[Helmuff]

Hallo alle zusammen...

Ich habe ein kleines Problem, ich arbeite gerade die CD Vom Html Video Kurs durch und habe ein Problem bei der Fennek Seite.
Mir werden beim Explorer, Firefox und Chrome die Navigationen also die UL um 40px eingerückt hierzu habe ich aber keine Angabe gemacht, im Firebug finde ich auch nichts was damit zu tun hat.

Hat jemand von euch auch das Problem gehabt...
Bitte um Hilfe

MFG

[drPHIP132]

das ist browserseitig so vordefiniert.
ebenso ist <li> auch ein abstand vordefiniert

gruß
phip s.

[Helmuff]

Hallo...

ich habe in meiner CSS Datei aber mit dem Universal Selektor alles ausgeschalten.

Code: Alles auswählen

* { margin: 0 auto; padding: 0 auto}


Ist ja soweit auch alles ok bis auf die Aufzählungen...

MFG

[drPHIP132]

Code: Alles auswählen

* { }

ist "böse" und sollte man nicht verwenden.

lieber an anfang deines css-codes deine im HTML-code verwendeten Elemente definieren

Code: Alles auswählen

p, body, ul, li
{
    padding: 0;
    margin: 0;
}


[Helmuff]

Kannst du mir das kurz mal erklären was daran jetzt "böse" ist...?

MFG

[drPHIP132]

Dieser CSS-"Universal-Selektor" verlangsamt dir deine ganze Seite.

Um es dir anschaulich darzustellen:
Wenn du diesen Selektor verwendest, wäre das wie, wenn dir dein Lehrer sagt, dass ihr einen Vokabeltest schreiben werdet, aber euch nicht sagt, welche Wörter dran kommen.
Folge --> Du musst alles lernen, was sehr zeitraubend ist.
Sagt er dir, was dran kommt bist du viel schneller fertig. Die entspräche dann dem, das du im CSS Code deine verwendeten Elemente mit dem Abstand definiert statt den Universalselektor zu nehmen.
Hoffe ich konnte dir helfen.


Gruß
Phip s.

[Helmuff]

Hallo...

es klingt zu mindest plausibel, ich denke mal wie man es in der Praxis dann anwendet muss jeder selber wissen.

Bei mir lag der Fehler darin das ich noch "auto" hinzugefügt hatte die "0" allein hätte es sein müssen...

Ich danke dir für deine Hilfe... schönes Restwochenende...

MFG Helmuff

[Yamram]

Hey
ist ja sehr interessant, dass so etwas schwierig ist. Ich spreche nicht vom aktuellen Thema, aber etwas, das hierhin passt:

Unbenannt.PNG (11.34 KiB) 136-mal betrachtet

Wie bekomme ich da das Bild und den Text auf gleiche Höhe? Es ist nicht so leicht, wie ich gedacht habe. Der aktuelle Code dazu:

Code: Alles auswählen

li.pdf {
   list-style: url(../images/files/file_extension_pdf.png);
   font-family: Arial;
   font-size: 14px;
   vertical-align: top;
   padding: 0px;
   margin: 0px;
}
li.doc {
   list-style: url(../images/files/file_extension_doc.png);
   font-family: Arial;
   font-size: 14px;
   vertical-align: top;
}
li.jpg {
   list-style: url(../images/files/file_extension_jpg.png);
   font-family: Arial;
   font-size: 14px;
   vertical-align: top;
}
span.metadata {
   color: #3e3e3e;
   font-size: 10px;
   display: block;
}


Und hier der HTML Code:

Code: Alles auswählen

<ul class="data">
   <li class="pdf">
      <span class="metadata">30 KB | 22.04.2010 | PDF-Dokument</span>
      <span class="dataname">presentation.pdf</span>
   </li>
   <li class="doc">
      <span class="metadata">48 KB | 06.01.2012 | Word-Dokument</span>
      <span class="dataname">notizen.doc</span>
   </li>
   <li class="jpg">
      <span class="metadata">345 KB | 01.01.2011 | JPG-Bild</span>
      <span class="dataname">schema.jpg</span>
   </li>
</ul>


Da bin ich ja mal gespannt DD

[SilverLion]

schon mal mit der Möglichkeit float versucht?

Damit umrundet der Text das Bild. Wäre zumindest mein erster Ansatz

[drPHIP132]

schreibe mal lieber keine px angabe hin sondern

Code: Alles auswählen

margin: 0;
padding: 0;


Keine ahnung ob es was ausmacht, aber bei mir geht es so zumindest immer

[Yamram]

@SilverLion: Ne, das funktioniert gar nicht. Oder ich verstehe es falsch. Wie meinst du das denn genau?

@drPHIP132: Wo liegt denn der Unterschied zwischen 0px und 0. Bei mir ändert sich da nicht >.<

[webmaster3000]

Es gibt auch keinen Unterschied zwischen 0 und 0px außer die Dateigröße.

Wie sieht es denn aus, wenn du float anwendest?
Vielleicht auch mal mit clear rumprobieren...
Ansonsten musst du eine Tabelle nehmen.

Hoffe, ich konnte helfen,
webmaster300

[lauras]

Probier doch einfach mal mit den verschiedenen Arten von float (right, left, none) und clear (right, left, both, none) jeweils in Verbindung rum und schau was bei rauskommt.
Dazu brauchst du natürlich auch vorher irgendwas zum resetten, damit das mit den Abständen nicht merkwürdig aussieht.

Eine andere Möglichkeit wäre natürlich auch einfach mit inline-Elementen zu arbeiten..

Grüße

[SilverLion]

@SilverLion: Ne, das funktioniert gar nicht. Oder ich verstehe es falsch. Wie meinst du das denn genau?

...

@ Yamram: versuch's mal hiermit: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

[Yamram]

@webmaster3000: Mit float und clear habe ich schon rumprobriert. Aber das funktioniert leider auch nicht

@lauras: Das funktioniert auch nicht.

@SilverLion: Sorry, könntest du mal den Inhalt hier posten? Ich habe leider kein freies Internet.