Beiträge von koslowski

Moin,

wenn man fremde Musik auf seiner HP abspielt kann das u.U. durchaus abmahnfähig sein, abgesehen von fälligen GEMA-Gebühren oder so etwas.

Vielleicht solltest du dich vorher einmal erkundigen, damit es später keine "teuren" Pobleme für dich aufwirft.

koslowski

Hi,

Zitat von sejuma

Klar kannst du das machen.
Aber das Ergebnis ist bei unterschiedlichen Auflösungen nicht einheitlich:

Nimm nen div mit 50% Breite.
Bei ner 800er Auflösung ist er 400px breit.
Bei ner 1440er Auflösung ist er 720px breit.

Im zweiten Fall passt viel mehr Text rein, da der div breiter ist. Also ist die Höhe des Gesamttextes niedriger als im ersten Div.
Optimierst du nun für den ersten Fall mit Padding, wird der Paddingwert bezogen auf den zweiten Fall zu niedrig sein.

Habe die x jetzt nicht abgezählt, aber nur mal zur Verdeutlichung was ich damit meine:

xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx

Alles anzeigen

oh mann.

ja klar, du hast natürlich recht (Wer richtig nachdenken kann, ist immer im
Vorteil )

koslowski

Hi,

Zitat von sejuma

Das passt dann aber nur an dem Bildschirm wo die Seite entwickelt wird (und vergleichbaren anderen). Bei unterschiedlichen Auflösungen sind die prozentualen Div's unterschiedlich breit und damit unterschiedlich hoch.
Außer der #wrapper hätte eine feste Breite. Aber dann ist auch der Prozentwert immer konstant.

ähem...., könnte es sein das wir etwas aneinander vorbeireden?

height wird selbstverständlich nicht angegeben, weil die sich ja aus der Menge des Textes der Box und angegebenem vertikalen padding definiert.

Wenn eine Box width in Prozent hat kann man doch padding-bottom in Pixel oder em angeben (ist ja vertikal und nicht horizonzal!).

Das hätte ich vielleicht in meinem Posting näher erläutern sollen.
So kam es wohl mißverständlich rüber.

Imho ist das ein unschöner aber gangbarer Weg die Container gleichlang zu machen.

NyctalusNoctula Hast du in allen wichtigen Browsern geprüft ob richtig gecleart
wird?
Der IE schließt die Container nämlich normal ohne clear fälschlicherweise mit
ein.

koslowski

Hi,

Zitat

Mal ganz abgesehen davon, dass ich deinen Post recht unfreundlich finde, habe ich das System schon verstanden, nur leider lässt sich das Faux Coulums System nicht auf Spalten mit variabler Breite anwenden.
Ich bin außerdem kein Freund von Hintergrundgrafiken, da sie immer eine gewisse Größe (ich mein hier jetzt Dateigröße) haben. Ist inzwischen vermutlich egal, die Ablehnung kommt wohl noch aus meiner Modemzeit. Rolling Eyes

sorry wenn ich so unfreundlich rüberkomme. Bin manchmal etwas "krachert".
Ist aber nicht böse gemeint.

Eine etwas unschöne Lösung hätte ich anzubieten:

Gib dem kürzeren Container soviel padding-bottom das es paßt.
Das müßtest du dann aber evtl. für jede Unterseite anpassen je nachdem wieviel Text drin ist.

clear:all gibt es übrigens nicht, nur left, right, both oder none.

Bei prozentualen Breitenangaben für die Container hast du auch den Nachteil das dein Layout je nachdem in breiten oder normalen Viewports komisch ausschauen kann.

koslowski

Moin,

Zitat von JohnCena

Ne tuts ned

Tabellen sind für tabellarische Daten und in diesem Falle semantisch völlig falsch.

Der Rahmen für die Bilder wird ganz normal in der CSS-Datei per border definiert.

Man sollte allerdings vorher oben in der CSS-Datei erstmal den Rahmen um Bilder und für verweissensitive Bilder ausschalten, sonst kann es wegen der unterschiedlichen Default-Einstellungen der Browser zu Darstellungsproblemen kommen:

img  {
	border:none;
}
a img  {
    border:none;
}

koslowski

Moin,

Zitat von NyctalusNoctula

javascript muss nicht unbedingt sein

hm die Faux Colums sind auch nicht unbedingt das, was ich suche. ne Hintergrundgrafik muss ja auch nicht unbedingt sein.

Scheint wirklich schwieriger zu sein als ich dachte. Ich glaube ich werde jetzt einfach dem content nen Rahmen links verpassen und darauf achten, dass der Content immer die längere Spalte ist. Dann hab ich halt meine einrückung von oben des Trennstriches nicht mehr.

wenn eine kürzere Spalte genauso lang wie die längste sein soll ist "Faux Columns" die übliche verwendete Technik.

Deine Aussage das sei nicht unbedingt das was suchst läßt entweder auf eine gewisse Beratungsresistenz schließen, oder du verstehst die "Faux Column-Technik" nicht richtig anzuwenden.

Zitat

Ich weiß ja wie man ein normales dreispaltiges Layout macht. Das ist nicht das Problem.

Sorry aber weißt du offensichtlich nicht, oder warum hast du sonst so viele Fehler in deinem Dokument: W3C-Validatorergebnis

koslowski

Hi,

sorry, irgendwie ist der ungewollt zweimal rausgegangen.

Hi,

Zitat von FaFoo

Ist sicherlich kein Kokolores. Man kann halt nicht jede seite vollkomen flexibel gestalten, gerade wenn es optisch etwas aufwendiger sein soll. Die meisten Websites sind einer bestimmten Auflösung angepasst.

Die meisten Webseiten sind auch schlichtweg schlecht gecodet und/oder formatiert. Oder es ist ein Tabellendesign.
Da wunder ich mich über garnix mehr.

Bei solchen HP's steht dann auch oft irgendwo:
"Optimiert für 1024x768px" o.ä.

Wenn man HP's nach modernen Webstandards gestaltet, stellt sich die Frage nach einer Optimierung in Bezug auf eine Auflösung überhaupt nicht.

koslowski

Hi,

Zitat von FaFoo

Ist sicherlich kein Kokolores. Man kann halt nicht jede seite vollkomen flexibel gestalten, gerade wenn es optisch etwas aufwendiger sein soll. Die meisten Websites sind einer bestimmten Auflösung angepasst.

Die meisten Webseiten sind auch schlichtweg schlecht gecodet und/oder formatiert.
Da wunder ich mich über garnix mehr.

Bei solchen HP's steht dann auch oft irgendwo:
"Optimiert für 1024x768px" o.ä.

Wenn man HP's nach modernen Webstandards gestaltet, stellt sich die Frage nach einer Optimierung in Bezug auf eine Auflösung überhaupt nicht.

koslowski

Moin,

zum doctype:
Der Kopf deines Dokuments könnte so ausschauen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="DeinName" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <title></title>  
-  <link rel="shortcut icon" href="images/favicon.ico" />  
  <link type="text/css" rel="stylesheet" href="texte/bildschirm.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="texte/print.css" media="print" />
  <!--[if IE 6]>
  <style type="text/css">
    @import url(texte/ie6.css);
  </style>
<![endif]-->  
<!--[if IE 7]>
  <style type="text/css">
    @import url(texte/ie7.css);
  </style>
<![endif]-->  
</head>

-Die Art des Dokuments (doctype)
-die verwendete Sprache
-der verwendete Zeichensatz
-autor
-keywords (wird von google ignoriert, aber von machen Webkatalogen genutzt)
-description (145-155 Zeichen, wird von google als Text zum Link angezeigt)
-der Titel der Webseite
-die beiden CSS-Dateien in der die Formatierungen für Bildschirm und für den
Druck stehen
-Conditionell Comments für IE-Versionen (werden auch nur von diesen gelesen).

Zitat

Nur so nebenbei... für welche Auflösung soll das denn optimiert sein?

Eine Webseite für eine bestimmte Bildschirmauflösung zu optimieren ist Kokolores.
Dazu ist die Auflösung bei den Usern einfach zu unterschiedlich.

Vernünftigen Code schreiben und den ordentlich nach Webstandards formatieren ist alles was man in der Hinsicht tun muss.

koslowski[/code]

Hi,

Zitat von mattis_1

koslowski
also kann dir nicht sagen ob es einen bestimmten Grund für den Quirksmodus gibt.
Kann dir nur sagen das es ohnen diese erste Zeile nicht richtig funktioniert, sprich der div content wird zu breit dargestellt und der Scrollbalken ist nicht mehr sichtbar.

synaptic
Spricht nicht unbeding was gegen JavaScript, würd es nur gerne ohne realisieren wenn es möglich ist.

mattis

dann mach den content halt schmaler und so ein iframe ist ja auch nicht das Gelbe vom Ei.
Fakt ist jedenfalls das die erste Zeile im IE6 eigentlich nur Probleme verursacht.

Ich weiss auch nicht so genau was denn an einer CSS-Lösung für eine Bildergalerie so aufwändig sein soll.
Allzuviel CSS brauchts da sicher nicht und bei den ganzen Unterseiten für die großen Bilder muss man nur den Bildtitel, den Namen der Verweisdatei und width/height der img's austauschen.
Ansonsten copy/paste.

Hi,

Code von mattis_1:
      <?xml version="1.0"?>

äh..., gibt es einen bestimmten Grund warum du den IE6 mit dieser Zeile in den Quirksmodus schicken willst?

Wenn nicht solltest du sie besser weglassen.

koslowski

Hi,

Zitat von Greg10

Der FF erzwingt bei listen immer links und oben einen freiraum, kann man nix gegen machen
Musst mit absätzen und dem • zeichen arbeiten

*räusper*, ähem..., ich seh da nirgendwo eine Liste.

Der menü-div enthält eine Reihe von a's.

a ist ein inline-Element, da kannste vertikale margins knicken.
Die Höhe von Inline-Elementen kannste nur durch die Schriftgröße oder line-height verändern.

Ich glaube auch nicht das das so mit deinem grafischen Menü funktionieren wird.

Erstmal gehören die Links in eine Liste:

<ul id="navi">
   <li id="navi01">[url='wegvomlink.htm']Link 1[/url]
     ......................usw.
[/list]

Für alle Zustände des Links (normal, hover, etc.) macht man eine Grafik die alle Zustände enthält.
Die Buttons werden als Hintergrundgrafik eingebunden und je nach Zustand einfach mit Background-position verschoben, sodaß immer die gewünschte Grafik je nach Linkzustand eingeblendet wird.

a braucht position:absolute dafür und bekommt die HG-Grafik zugewiesen.
li braucht dann natürlich position:relative damit sich die absolut positionierte
Grafik daran orientieren kann.

Der Linktext sollte auch nicht in der Grafik stehen, weil dann die Sumas nicht weiterkommen (können nicht in Grafiken lesen!), Screenreader-user nicht weiterkommen und bei ausgeschalteten Grafiken auch nix mehr geht.

Einzige Möglichkeit das zu umgehen wäre
Image Replacement nach Gilder/Levin.

Grafische Menüs sind nicht ganz so einfach zu realisieren.

koslowski

Hi,

wenn ich das richtíg sehe soll es eine horizontale Navigation werden.

Da gibt es ja zwei Möglichkeiten:
#navi ul li bekommt display:inline;
oder
#navi li bekommt float:left;

Du vermischt das. Zuerst bittest du li ein inline-Element zu werden und dann durch float ein Blockelement.

Ich denke du musst dich für eins von beiden entscheiden.

display:inline für li ist einfacher zu realisieren, da reicht dann neben display:inline; für li text-align:center; für ul aus um die Navi zu zentrieren.

Die anklickbare Fläche wird vergrößert indem a z.B. padding bekommt.

Dem IE sollte man per CC noch Layout für #navi ul li a geben:
#navi ul li a { height:1px; }

Die Variante mit float ist etwas umständlicher aber da hast du mehr Möglichkeiten über die Darstellung, weil du es dann nur mit Blockelementen zu tun hast.

Ach ja, ich täte für #navi keine Höhe vergeben.
Es hat ja schon durch width Layout für den IE bekommen.

koslowski

Hi,

[auch mal reintröten]
Das Hardcover des Wissens
[/auch mal reintröten]

Tach auch,

wenn man jojos Codebeispiel und die entsprechende Formatierung zugrundelegt wird der Rahmen rot und nicht blau.

Es gibt nämlich noch so etwas wie "Spezifität" was da eine Rolle spielt.

Das ist so eine Art Punktesystem für Selektoren:
einfacher Typ-Selektor - p - 1 Punkt
Klasse - .blau - 10 Punkte
ID - #rot - 100 Punkte
Attribut style=""" - style="color:red;" - 1000 Punkte

Da eine ID 100 Punkte hat und eine Klasse nur 10 Punkte, gewinnt es und der Rahmen wird rot.

Probierts aus.

koslowski

Moin,

Zitat von sejuma

koslowski:
Deine erste Aussage ist korrekt.
Die zweite stimmt leider nicht: li ist auch ein Inline-Element:
http://de.selfhtml.org/html/referenz/elemente.htm#li

Ich habe es durch die Float-Angabe allerdings zum Blockelement umfunktioniert, damit es klappt

*räusper*, äh..., aus dem von dir geposteten Link geht eindeutig hervor das li
kein Inline-Element ist.
Die alphabetische Aufzählung enthalt auch Blockelemente.
Ganz oben auf der Seite sind Block,- und Inline-Elemente explizit zusammengefaßt aufgeführt. Da steht li nicht bei den Inline-Elementen.

Listenelemente erzeugen von Hause aus Block-Boxen und die stehen untereinander.
Gibt man li float stehen sie nebeneinander, weil jedes li float bekommt.
Wenn man mehreren <div<-Containern float gibt stehen sie ja auch nebeneinander.

D.h. wenn Elemente eh schon ein Blockelemente sind bewirkt floaten nur das die dann nebeneinander stehen.

Wenn du z.B. a, eine klassische Inline-Box floatest, erzeugst du eine Block-Box.
Aber wenn das Element (li) eh schon von Hause aus eine Block-Box ist, änderst du durch das floaten nur die Darstellung nicht aber die Box.

Alles klaro damit?

koslowski

Hi,

Zitat

Zitat von sejuma:
So sollte es hinkommen (wobei ich mir nicht erklären kann, weshalb margin-top nicht unmittelbar funktioniert):

weil a ein Inline-Element ist, da funktionieren vertikale margins nicht.

Deshalb sollte man eine navi immer in eine ul packen.
li ist nämlich kein Inlineelement, da geht dann was mit vertikalen Margins.

koslowski

Hi,

Zitat von Magnus

Hallo Community,

ich brauche etwas Starthilfe, ich bin als Anfänger von der Informationsflut leicht überfordert.
Ich möchte eine ganz einfache Seite mit Hintergrundmusik und einem Fotoalbum erstellen.
Gibt es einen Baukasten oder ein Tutorial mit der ich ähnlich wie auf dieser Seite meine Musik und Fotos präsentieren kann?

LG Magnus

eine kleine Anmerkung:
das mit der Musik solltest du dir gut überlegen, ich kenne niemanden der es gut findet wenn er ungefragt mit Musik beschallt wird.
Vielleicht solltest du eher die Möglichkeit anbieten entsprechende Musik ablaufen lassen zu können als dem User was aufs Ohr zu drücken was er vielleicht nicht mag.

koslowski

Hi,

Zitat von sudeki05

Und Elvis, darum geht es hier nicht, und ich kann nur auf mein anderen Beitrag bei eatofid verweisen.. Außerdem habe ich gesagt dass ist nun nur in Tabellenform, weils durchdacht für viele Anfänger einfacher ist, meiner Meinung nach und ein Sinn in deinem Beitrag zum eigentlichen Thema sehe ich ebendso nicht, da hier momentan im Forum nur noch darüber diskutiert wird ob table oder div, etc. vielleicht sollte mal wer ein Off-Topic Thread damit öffnen.

warum sollte man über so was altbackenes wie Tabellendesign überhaupt diskutieren.

Mit Tabellen macht man kein modernes Webdesign, weil Tabellen nur für Tabellen gut sind und für sonst nix.

Für Anfänger ist Tabellendesign auch nicht einfacher, es ist einfach anders.
Genauso könnte man sagen das man erst mal reiten lernen soll bevor man den Autoführerschein machen darf.

Einem Anfänger Tabellendesign nahezulegen empfinde ich als befremdend.
Warum sollte man ihr nicht direkt die richtigen Tips geben damit sie sich in modernes Webdesign einarbeiten kann.

koslowski