<table> und <div>

[Sire]

Hallo zusammen, ich bin neu hier und ich habe auch direkt mal eine Frage und hoffe das die alle verstehen können.^^ Also wenn ich mir Adobe Photoshop ein Design mache und es dann Slice wird eine index.html erstellt wo alles mit gemacht worden ist. Ich habe aber gehört das nicht mehr benutzt wird sondern <div>. So und meine Frage ist wie kann ich eine neue Index.html machen mit <div> und dabei wissen wie groß die Abstände der einzelnen Bilder sind? Würde mich sehr freuen wenn mir da jemand Helfen könnte! Mit freundlichen Grüßen Sire

 

[Tar]

Es gibt afaik kein Programm, dass dir ein Bild in divs erstellt, du musst dazu einfach die einzelnen Bilder slices (ohne die html Datei) und die html-Datei dann selbst schreiben. Wenn du weißt, wie groß die einzelnen Buttons sind, ist das ja kein Problem.

 

[Sire]

Es gibt afaik kein Programm, dass dir ein Bild in divs erstellt, du musst dazu einfach die einzelnen Bilder slices (ohne die html Datei) und die html-Datei dann selbst schreiben. Wenn du weißt, wie groß die einzelnen Buttons sind, ist das ja kein Problem.

Danke das du mir hilfst!! Ich meine aber nicht die Größe der Button oder so sondern sagen wir ich habe ein Button und der soll in die Mitte des Designs. Woher soll ich dann wissen wie Weit der Button von der Seite und von Oben entfernt ist? Also die höhe und die Breite wo der Button dann positioniert wird. Mit freundlichen Grüßen Sire

 

[csstester]

Erstmal ist ja interessant zu wissen inwieweit du vorhattest grafiken zu verwenden, denn in den meisten fällen die ich erlebt habe wurden viel zu viele unnötige grafiken erstellt.

Denn wenn dein Design eine "Hauptfarbe" hat wär das ja schon unnötiger "Ballast" wenn du auch dies als Grafik im Hintergrund hättest.

Also nur Spezielle Rahmen oder Ecken und Verläufe solltest du als Hintergrundgrafik nehmen, oder auch Schriftzüge die "Unvermeidbar" sind.

gruß
csstester

PS die mitte ist immer margin:0 auto;

oder z.B. 60% grafikbreite und margin-left:20% margin-right:20%

 

[Tar]

Wie csstester schon sagte, das lässt sich alles ganz leicht über Stylesheets (css) lösen. Ist an sich gar nicht so schwer, wenn man heute valide Projekte erstellen will kommt man um css überhaupt nicht mehr drum rum (und das ist auch gut so!)

Gruß

Tar

 

[Sire]

Danke für eure Hilfe.. Ich werde es mal versuchen!! Mit freundlichen Grüßen Sire

 

[Efchen]

... wird eine index.html erstellt wo alles mit <table> gemacht worden ist. Ich habe aber gehört das nicht mehr benutzt wird sondern <div>.

Nein, das ist so nicht richtig. Das ist ein richtiger Ansatz, aber erklärt die aktuelle Vorgehensweise leider völlig falsch.

1. Tabellen sind nicht out. Tabellen sind weiterhin ein unverzichtbares Element in HTML, und zwar zum Auszeichnen von tabellarischen Daten. Tabellen zu Layoutzwecken zu missbrauchen, ist seit nahezu einem Jahrzehnt nicht mehr nötig, für Layout verwendet man CSS.

2. HTML ist dazu da, um den Inhalt semantisch auszuzeichnen, Du gibst Deinem Inhalt eine Bedeutung. Du gibst an, was Überschriften sind, wo Fließtext ist, Du zeichnest Adressen und Zitate aus. Jeder Inhalt bekommt so eine Bedeutung. Tabellarische Daten wie z.B. die Tabelle der Fußball-Bundesliga, werden natürlich mit <table> ausgezeichnet. Ein <div> ist lediglich ein allgemeines Block-Element ohne weitere Bedeutung. Es wird benutzt, um mehrere Element zwecks gemeinsamer Formatierung zu gruppieren. Nur da wird es benötigt. Wer seinen Inhalt komplett mit <div>s auszeichnet, also wie Du sagst <table> durch <div> ersetzt, macht aus Sicht HTML Unsinn. Deswegen ist der Satz so nicht richtig.

Heute nutzt man HTML zur Auszeichnung des Inhalts und CSS für Layout und Design. Das kann man strikt voneinander trennen. Damit werden die Websites für die Besucher besser, schneller zu laden, von Clients, die nichts visualisieren können diese Seiten auch verstanden werden, sie sind barrierefrei. Außerdem wird auch das Arbeiten für den Webmaster leichter und Redesigns sind auch bei 1000 Seiten in 10 Minuten gemacht.

Weitere detaillierte Fragen beantworte ich gerne.

Gruß,
-Efchen