Webdesign mit CSS - leere Spalten vorhanden

Beitrag von **bolle1980** » 09.02.2009, 16:26

Hallo,

leider komme ich einfach nicht weiter und hoffe auf Hilfe und nützlich Tipps.
Ich habe ein Design, welches mit Photoshop erstellt wurde und in Tabellen war. Im Zuge der Optimierung wurde mir geraten, dass ich dies ändere und das Design mit CSS erstelle.
Die exportiere PS Version habe ich geändert, da diese mit festen Positionen gearbeitet hat.

Grundsätzlich baut sich mein Design auf 3 Ebenen auf:
1. der Head
2. der Content
3. der Footer

zu 1.
im Head sind insgesamt 3 Zeilen, welche zentriert sind. In jeder Zeile befinden sich Bilder, welche in deren Zeile nahtlos aneinander sein sollen. in der 2. Zeile sind dann noch Buttons, welche durch Mouseover ein anderes Bild mit identischen Abmessungen zeigen sollen und beim Klicken einen Link ausführen sollen.

zu 2.
Dies ist mit Abstand der kleinste Teil. Er besteht aus 5 Bildern in einer Zeile. Alle Bilder sollen auch wieder zentriert sein und nahtlos sein. Besonderheit ist hier, dass die Breite fest sein soll und die 5 Bilder als Hintergrund sein sollen. In diesem Bereich soll dann der Inhalt rein kommen und das Design dadurch mitwachsen

zu 3.
Hier ist es ähnlich wie im Head. Es sind 3 Zeilen, wobei in der 2. Zeile wieder Mouseoverlinks sein sollen.

Ich habe in den letzten Tagen und vor allem Nächten sehr viel probiert und leider keine Lösung gefunden, dass die Bilder einer Zeile nahlos aneinander sind.
Da es alles ganz schön durcheinander gekommen ist, durch die vielen Tests, habe ich auf eine Basis zurück gegriffen, in der folgende Punkte als Versuch nicht mehr sind:
* Mouseover
* Links
* die Contentbilder als background zum wachsen

Probiert habe ich allerhand, da ich absoluter CSS Neuling bin kann ich gar nicht mehr sagen, was alles dabei war

Float war das letzte und macht die Bilder aneinander, aber dann ist es eben links oder rechts am Rand, nicht zentriert

Ein mittiges float gibt es nicht und die Altnativen liefen auch nicht...

Ganz seltsam finde ich dabei, wenn ich die ganzen <img.../img> Zeilen, welche jetzt übersichtlich untereinander sind, alle hintereinander schreibe, gehts

Das ist aber kein Lösung für mich

Vermutlich ist es "nur" eine kleine Änderung, aber ich schon voll overload, Haare zerzaust, Nerven blank, ich versteh es einfach nicht

:(:(

Diese seltsame Ergebnis findet ihr hier:
https://www.it-bo-sys.de/seo/test.php

Die Footer und Top hier:
https://www.it-bo-sys.de/seo/templates/footer.php
https://www.it-bo-sys.de/seo/templates/top.php

Meine CSS:
https://www.it-bo-sys.de/seo/design.css

Vielen Dank schon mal jetzt für eure Antowrten

von **Anzeige von ABAKUS** »

Beitrag von **Cajuul** » 09.02.2009, 16:39

Tabellen haben nix mit Seo zu tun, sondern nur mit Semantik. Und mit Semantik hat Deine Webseite nicht viel am Hut. Also einfach bei Tabellen bleiben. Google und Deinen Besuchern isses egal.

Beitrag von **jackwiesel** » 09.02.2009, 16:45

//OT

Die Domain ist meiner Ansicht nach rechtlich bedenklich - guck mal bei Denic unter it-bo.de und denk nochmal drüber nach.

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Cajuul** » 09.02.2009, 16:52

Am einfachsten wäre es, wenn Du Dir irgendwo ein kostenloses Css-Template aussuchst und verwendest. Oder Wordpress nimmst und ein passendes Theme suchst. Oder oder oder.

Beitrag von **bolle1980** » 09.02.2009, 16:57

Hallo ihr beiden!

zu Cajuul:
Das ist eben mein Problem: ich möchte es in CSS machen und es ist auch in CSS definiert, aber es sind eben diese leeren Spalten. Die müssen nur weg, der Content flexibel in Bezug auf die Höhe werden und Hyperlinks mit Mouseover ran. Wobei dieses >>nur<< für mich ein entscheidendes Hindernis ist...
Zur Not kann ich wieder auf Tabellen gehen, aber der Rat und auch das Internet sagen: Weg von Tabellen... Da aber nunmal nicht jedes Design auf 1 Pixel Bilder als background basiert und mit Farbzellen und aufgelegten Schriften basiert stecke is ja in meiner Situation...

zu jackwiesel:
danke für den Hinweis! Ich habe die Domain it-bo gekannt, aber mich nicht daran orientiert. Es handelt sich bei mir um ein regionales Nebengwerbe, welches generell auf meinen Namen läuft und ich einen Namen nutzen kann, in meinem Fall it-bo-sys --> da ich nunmal it mache und mich viele nur oder vorrangig unter meinem NICK bolle kennen lag es nunmal auf der Hand. Ich habe mit der Firma nichts am Hut und ich hatte bei einer Rechtsanwältin gefragt, ob das so ok ist. Generell ist es ok, da ich nunmal nicht den gleichen Name habe und auch nicht deren Ruhm nutze.
Hmmm, aber du hast jetzt wieder GRÜBELN bei mir verursacht...

Beitrag von **bolle1980** » 09.02.2009, 17:03

Cajuul hat geschrieben:Am einfachsten wäre es, wenn Du Dir irgendwo ein kostenloses Css-Template aussuchst und verwendest. Oder Wordpress nimmst und ein passendes Theme suchst. Oder oder oder.

Hmmm, ich möchte gerne individuelle Designs verwenden, darum mag ich Templates nicht unbedingt. Ich war in der Hoffnung, dass sich aus meinen Quältexten und der css Datei ein Ansatz ergibt, welche nur die Spalten weg macht. Denn das Design steht ja. Es sind ja "nur" (schon wieder dieses nur

) diese Spalten. Sind die weg, dann ist es auch machbar Mouseovers mit Links und Bildertausch zu erstellen.

Meine Art Seiten aufzubauen ist genau mit Beginn der SEO Optimierung geplatzt und seit dem bin ich daran komplett neue Gerüste kennenzulernen, zu erstellen, zu optimieren und mit CSS zu kämpfen.

Quasi bin ich zurück aus Los geschickt und enteignet worden

Beitrag von **ins0** » 09.02.2009, 17:34

Cajuul hat geschrieben:Tabellen haben nix mit Seo zu tun, sondern nur mit Semantik. Und mit Semantik hat Deine Webseite nicht viel am Hut. Also einfach bei Tabellen bleiben. Google und Deinen Besuchern isses egal.

Tabellen sind für eine Tabellarische Auflistung von Werten. *räusper*

Beitrag von **Cajuul** » 09.02.2009, 19:11

Wenn Du es unbedingt mit Css machen willst, dann darfste ersteinmal alle Bilder aus Deinem Html-Code rausnehmen, weil die da nichts verloren haben und ins Css gehören. Was Du da gemacht hast, ist ein Tabellenlayout, mit oder ohne Tabellen.

Also folgendes:

1. Webdesign beginnt nicht in Photoshop, sondern in einem Texteditor. Dort schreibst Du Deine Webseite so runter, als würden Browser nur Textdateien lesen können. Also Deine Texte als .txt-Datei speichern. Diese .txt-Datein kannste Dann auch im Browser anschauen.

2. Jetzt machst Du aus Deiner Textdatei ein Htmldokument. Am besten gleich mit Html5, dann brauchste in paar Monaten nicht wieder umlernen. Also in die ersten Zeilen fügst Du das hier ein:

<!DOCTYPE html>

<html lang="de">
<meta charset="utf-8">
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">

Den anderen Meta-Kram wie Description=, Keywords= und was Du sonst noch brauchst natürlich auch..

Dann machste Dich ans Markup. Wenn Du englisch kannst findest Du hier alle Tags: https://www.w3schools.com/tags/html5.asp

Also bei ner Überschrift verwendest Du den Tag, welcher Überschriften definiert. Zb <h1>Überschrift</h1>. Etc. Aber wirklich nur Tags verwenden, die Sinn machen. Wenn ein Wort oder ein Satz nur groß sein soll ohne eine Überschrift zu sein, könntest Du zb <strong>Wichtig</strong> verwenden.

Nicht vergessen jetzt die Textdatei als index.html zu speichern.

3. Erst jetzt gehts ans Css. Also die Datei style.css erstellen und damit anfangen die Elemente zu formatieren. Zb die Schriftgrößen, Schriftarten, Farben, Abstände, etc. Und Dekorieren darfste hier auch soviel Du willst. Allerdings wirste sehr viel Erfahrung brauchen, um dahin zu kommen wohin Du angeblich willst.

4. Solltest Du soweit kommen, dann kannste jetzt auch Photoshop rausholen und Grafiken erstellen, welche Du als Hintergründe per Css einbaust.

Ich kanns nur nochmal betonen. Webdesign beginnt nicht in Photoshop. In Photoshop entstehen nur Sachen, die Du nicht umsetzen kannst oder solltest. Also machs ordentlich und halt die oben genannte Reihenfolge ein.

Aber wie gesagt, ich denke Du würdest besser damit fahren Dir ein ordentliches Template zu suchen. Individualität wird überbewertet. Lieber ne ordentliche und schöne Seite, als den Scheiss den Du fabrizieren wirst. Selbst wenn Du Dir die Zeit nehmen willst das alles selbst zu lernen, wirst Du von Templates lernen können. Und keine Sorge, es wäre schon ein verdammt großer Zufall, wenn einer Deiner Besucher das Template als solches erkennen würde, weil er es schonmal wo anders gesehen hat.

Beitrag von **bolle1980** » 09.02.2009, 21:51

Hmmm, also entweder steht nen Wolkenkratzer auf meinem Schlauch oder man versteht mich nicht

Erstmal danke für deine lange Antwort. Ok, ganz kann ich nicht mitgehen, aber ich bin offen für neue Dinge und Vorschläge

Ich bin der Meinung, dass ich bereits eine korrekte Basis habe:
Es gibt eine test.php, in welche dann, wegen der SEO Optimierung, die top.php und die footer.php inkludiert wird. Somit ist für mich der Großteil deiner Liste abgearbeitet. In der css wird, wenn das Design paßt, alle Schriften eingetragen.

Mein Problem ist, dass ich auch das Design schon habe, nur eben sind Spalten. Die sollen doch nur weg. Ich habe mir schon Designs in CSS angesehen, daran liegt es doch nicht.

Nur ist meine Idee nunmal nicht, dass ich 1 Pixel Bilder als Hintergrund nehme, Texte darüber lege und so, sondern ich möchte ein Design, also meins, dafür nutzen. Somit bin ich doch genau an dem Punkt, dass ich bereits Bilder erstellt habe und das nur noch korrekt in CSS oder im Quelltext eintragen muss.

Würde ich wieder mit td und tr arbeiten kommt wieder wer und sagt: nönö, Tabellen und so sind nix professionelles

Ich suche doch einfach nach einer Art und Weise individuelle Designs SEO optimiert in Quelltext zu verarbeiten. Vermutlich ist es normal, dass viele Leute viele Meinungen darstellen.

Aber seit ein paar Tagen werde ich zum Spielball einzelner Ideen

Ich habe zunächst von meinem ursprünglichen Konzept Abstand genommen: Ich hatte immer eine index.php mit Tabellen, durch denen mein Design so aussah, wie ich es wollte, es mitwuchs und der Inhalt inkludiert wurde.
Das war für Seo nix, da die Metatags nicht übernommen wurden und ich somit unbekannt blieb. Darauf hin habe ich durch Hilfe und Tipps das System so gebaut, wie ich es oben beschrieben hatte:
Es gibt eine Datei, jetzt im Moment die test.php, in welche mein Inhalt kommt. Es gibt dann noch die Template Dateien top.php und footer.php, welche dann die Seite als Ganzes zusammenfügen. Dabei hatte ich meine funktionierenden Tabellen loslassen müssen, weil mir nunmal geraten wurde es mit CSS zu machen, Tabellen nutzt man nicht mehr.
Gut, dann habe ich meine Tabellen alle weggenommen und wieder was neues gemacht. Ich habe nun 3 Container, den Head, den Content und den Footer. Diese baue ich mit meinen Bilder ohne fixe Zuordnung zentirert auf. Das funktioniert doch auch, nur das eben diese Spalten sind.

Ich möchte doch nur wissen, warum diese Spalten kommen und wie ich das löse.

Wenn das geschafft ist kann ich endlich die Seite mit Inhalt fühlen. Dann lebt sie...
Aber nun sehe ich ganz viel Comments, was mich auch wirklich super freut, also bitte nicht falsch verstehen, aber noch nicht einer hat mich weiter gebraucht. Ich habe keine Tabellen und ich muss auch nichts mit dem Editor machen

Der Quelltext steht, mal abgesehen vom Design. Da stecke ich fest. Somit muss entweder was im in der 3 Dateien geändert werden, wo im Moment die Zeilen des Designs sind oder in der CSS.

Das ist somit die Baustelle

Meiner Meinung nach

Für jemanden, der sich mit CSS und SEO auskennt, der meine 3 php Dateien und die css angesehen hat, wird es doch vermutlich möglich sein zu sagen, warum die Spalten da sind und wie ich sie am besten wegbekomme.

Wenn ich ehrlich bin möchte ich auch nicht von meinen Designs weggehen. Sie sind mein Markenzeichen und ich mag nunmal diese schlichten "Designs" nicht so. Ist eben meine Meinung

Wenn ich erstmal die Lösung habe, wie ich derartige Spalten verhindere kann ich damit weiter arbeiten und es besser verstehen und in Zukunft es als Basis nehmen und mich in meine Art und Weise, eben Design von Photoshop, weiter entwickeln

Kann mich jetzt wer besser verstehen *umschauend*

LG Bolle

Beitrag von **Hobby_SEO79** » 10.02.2009, 00:00

Alle Grafiken die sich nicht verändern in den Hintergrund packen, zerschneiden und mit background definieren. Dann entfallen viele VErschachtelungen in den Quelltexten und du hast die besere Übersicht!

Beitrag von **bolle1980** » 10.02.2009, 10:13

Vielen Dank Hobby_SEO79,

so werde ich es probieren

Beitrag von **bolle1980** » 10.02.2009, 12:46

Vielen Dank Hobby_SEO79,

so werde ich es probieren

Beitrag von **Margin** » 11.02.2009, 11:29

Du brauchst von Deinen Designs überhaupt nicht wegzugehen. Es läßt sich nahezu jedes Design mit CSS neu aufsetzen. Nur der Ansatz bei Dir, der ist mal so völlig verquer ...

Dir ist nicht damit geholfen, die Spalten zu entfernen. Du verwechselst da Ursache und Wirkung. Der komplette Ansatz ist falsch. Fang mit einem leeren Blatt Papier komplett neu an. Pack Deine gesammelten Grafiken "in die Tonne" - Du wirst sie anschließend kaum mehr brauchen, bzw. die meisten in anderen Ausschnittsgrößen / Zusammensetzungen. Hast Du Dein weißes Blatt Papier dann per CSS aufgeteilt in die benötigten Blöcke und ein wenig Test-Content eingefügt, DANN geht es erst an die Grafiken, dann schaust Du, was wo dahinter gehört und integrierst es in die entsprechenden Container Deiner CSS.

Zur Zeit zäumst Du das Pferd von hinten auf, das kann nur schief gehen. Allerdings so "fremd" wie Du in der Materie bist, würde ich an Deiner Stelle wohl hergehen, mir einmal eine meiner Seiten komplett neu umsetzen lassen und mich dann auf der Basis an den restlichen versuchen.

Gruß Margin

Beitrag von **bolle1980** » 11.02.2009, 11:58

Hallo Margin,

vielen Dank für deine Antwort!

Ich gebe dir völlig Recht, es ist uneffektiv in dieser Art und Weise die Lösung zu erarbeiten. Problem ist einfach, dass ich was funktionierendes hatte und nun immer und immer wieder was ganz neues dazu kommt, bis man eben bei Null anfängt.

Diese Erkenntnis ist mir mittlerweile auch schon gekommen

Aus diesem Grund ist das Vorhaben nun so ähnlich, wie du es beschrieben hattest: Die Seite wird in Blöcke geteilt. so gibt es nun 3 Container: Head, Content, Footer.

Jeder dieser Container ist in seiner Form und Größe festgelegt und wird durch Verschachtelungen so gerückt und ergänzt, dass jeder Hauptcontainer so aussieht, wie er es soll und dann genutzt werden kann und ein annehmbares Gesamtbild ergibt. Dabei werden die Bilder als background eingebunden, der wachsende Background definiert und noch was: die Buttons fallen weg.

Bisher war es Bilder, welche durch andere Bilder und Mouserver ersetzt werden sollten und Links darstellen. Dies wird nun geändert, es kommen richtige CSS Links rein

Da mein Design für CSS nicht wirklich sinnvoll geschnitten war wurde dies nachgeholt und so gemacht, dass es dem Papier-Plan nah kommt

In Bezug auf CSS und SEO bin ich echt wirklich neu. Homepages und Design habe ich schon zahlreich gemacht. Nur habe ich irgendwann verpaßt das Grundkonzept weiter zu entwickeln. Um eben Seo optimiert zu sein musste nunmal komplett mein Quelltext geändert werden und es musste dann auch CSS gearbeitetet werden.

Das ist nunmal nicht von heute auf morgen begreifbar und vor allem auch dann noch nicht komplett beherrschbar. Ich habe Unterstützung bei einem Freund gefunden, durch den wir nun uns der Lösung nähern. An allein dieser Arbeit und den Ergebnissen kann zumindest ich ganz gut lernen und dann auf dieser Basis weiter arbeiten

Beitrag von **bolle1980** » 24.02.2009, 13:40

Hallo an alle,

nach vielen Stunden voller Arbeit, ganz vielen verloren Nerven und Haaren und super tollen Support eines Freundes konnte nun endlich die Lösung geschaffen werden: Eine Homepage nach meinen Design Ideen, mit CSS und SEO Optimimierung.

Bevor es gleich wieder Kritik hagelt: Die HP habe ich erst gestern online gestellt. Der Inhalt der Seiten, die optimalsten Keywords und Beschreibungen kommen nun erst dran

Danke nochmals an alle!

https://www.it-bo-sys.de