• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[EDITOR/WYSIWYG] Design, Aufbau, Code und Ladezeiten [HTML/CSS]

d.h. statt den calsses nehme ich ID´s und setze diese dann per
<li id="eins">[...]</li> usw. ein?

Mir ist manchmal absolut schleierhaft, warum ein CSS-Layout so vorteilhaft sein soll.
Das Erstellen dieser einen Seite sorgt immer wieder für neue Überraschungen, deren Ursache ich suchen muss.
Mein Problem ist nun, dass ich mit UL im Navi-Div eine Verschiebung auftritt.
test

Wie deprimierend das ist, dass ich einfach nicht vorwärts komme. Und das alles eigentlich für die Katz. Ich frag mich echt in welchem Verhältnis hier Aufwand und Nutzen der Seite stehen.
Vor allem, warum hab ich mit dem verdammten Navi so viele Probleme, wo es doch eigentlich so leicht sein könnte, wenn ich auf die Grafiken verzichten würde.

Wieder ist ein Tag vergangen an dem ich nichts geschafft habe, ausser hunderte Seiten nach dem Problem zu durchsuchen, warum mein Navi auf einmal nicht mehr so aussieht wie vorher -.-
 
Werbung:
Die Höhe und Breite von ul musst du natürlich dann auch anpassen.

d.h. statt den calsses nehme ich ID´s und setze diese dann per
<li id="eins">[...]</li> usw. ein?
Zum Vergrößern anklicken....
ja so sollte es gehen.

Mit CSS lässt ich das Layout viel einfacher umsetzen, aber man kann auch nicht davon ausgehen, wenn man vorher damit kaum oder garnicht gearbeitet hat, das alles auf Anhieb klappt. Wie gesagt, belies dich. Das www bietet unzählige Tutoriale
 
Sorry, habs berichtigt, ändert aber am Problem nichts.
test

Sicher hat CSS viele Vorteile, vor allem wenn man später mal eine kleine Änderung vornehmen möchte, ohne dass man darfür überhaupt die HTML öffnen muss.
Das ist schon richtig, dass es nicht immer gleich klappt und ich kann mit Sicherheit sagen, dass ich nicht den ganzen Tag hier sitze und auf eine Antwort warte und derweil nichts ausprobiere oder nachlese. Mein Verlauf platzt förmlich aus allen Nähten was CSS suchen angeht.
Auch viele Tutorials habe ich inzwischen mal gelesen. Da ich aber nunmal nur mit dem Navi Probleme habe und es in diesem Falle gesonderte Umstände sind für die es mal wieder kein Tutorial gibt, hilft mir das oft nicht weiter.
So habe ich zwar einige Lösungsansätze z.b. von Selfhtml getestet, aber immer wieder festgestellt, dass das Verhalten von <ul> in einem Div (navi) abweicht, wie man es eben in meinem aktuellen Beispiel sehen sollte. Da muss ja irgendwo was im Weg sein, aber unter Navi hab ich ja ausserhalb von <ul> ... </ul> weder etwas eingefügt noch eine übergeordnete Formatierung die ich als Verursacher ausmachen konnte.
 
Werbung:
Danke, nun klappt das alles. Die Startseite hätte ich nun inzwischen fertig. Ich muss nun nochmal alles in Ruhe durch gehen, ob das auch so richtig ist. Vermutlich habe ich einige Formatierungen mehrfach oder unnütz platziert.
Nun hab ich mal angefangen die 2. Seite zu erstellen und bin da auf einen Zwiespalt getroffen. Zwar lese ich immer, dass man Design-Elemente nicht in Tabellen ausgeben soll, aber in CSS dehnt sich das Script auf ungeahnte längen.
Im Entwurf aus dem ersten Post ist es diese Seite:
Kadett-Info.de - Der Kadett von A bis Z

Die Tabelle mit den Jahren und den Monaten.
Ich hab nun hin und her überlegt, aber es führt per CSS kein Weg daran vorbei jeder <li> eine eigene ID zu verpassen um die Größen der Felder auf die Länge der Wörter anzupassen. Da sich ja auch das BG-Image ändert, geht da ohnehin kein Weg dran vorbei. Sind alle Felder gleich groß, wird entweder die Liste zu breit oder die Schrift zu klein.
Mit einer Tabelle bräuchte ich nur 6 classes statt 24 id´s.
Mir persönlich ist es egal, ob ich das per CSS erstelle oder eine Tabelle setze. Der CSS-Entwurf ist ja bereits fertig, ich frage also nicht weil ich faul bin, sondern weil ich nun wissen wollte, ob es irgendwie nachteile (z.B.Ladezeiten) haben könnte so viel CSS für 2 Zeilen zu verwenden.
CSS ist für mich klar die bessere Lösung. Durch cursor:default; kann ich die Links bereits jetzt setzen und muss später nur noch in der CSS die Daten für die einzelnen <li> ändern und muss es nicht auf allen Seiten wiederholen. Ginge allerdings auch mit einer Tabelle, was jedoch unnötig mehr Arbeit machen würde. So schlage ich ja 2 Fliegen mit einer Klappe.

Änderungen am Grundsätzlichen Design-Entwurf werde ich später noch vornehmen. Ich will jetzt erstmal den CSS-Entwurf komplett machen, es dann der entsprechenden testen und Community vorstellen und dann auf deren Meinung den Entwurf weiter ausarbeiten.
Das macht aus meiner Sicht jetzt mehr Sinn als alles zu ändern und dann wieder Änderungswünsche zu bekommen. So kann ich gleich alles auf einmal machen.
Dank des CSS-Entwurfs ist die Seite ja ohne viel Aufwand schnell zu ändern.
Ich muss wie oben erwähnt dann nur noch einige Angaben korrigieren und anpassen.
Ich habe die Anregungen hier aber alle auf dem Plan und werde dazu auch explizit noch einmal Fragen an die Community stellen.
 
Das DIV in Li ist die aktuell einzige Möglichkeit die ich gesehen habe.
Zum Vergrößern anklicken....
so... inzwischen bin ich schlauer. Und damit die Leute, die gerade stundenlang hunderte Google-Einträge durchforsten um in einer horizonatalen <ul><li> den Text horizontal ausrichten zu können.
Statt "height:20px;" gibt man "line-height:20px;" ein und der Text samt Background ist zentriert :D
mit text-align:center; im <ul> sitz der Text vertikal als auch horizontal zentriert. :D

Das hilft aber bei meinem Ursprungsproblem nicht direkt. Denn der Text sitz in diesem Falle nicht zentriert, sondern etwas drunter.

Gruß Chris
 
Werbung:
Inzwischen auch mein guter Rat: Suche dir einen Fachmann, der dir die Seite macht.

Alleine auf Grund der Tatsache, dass du andauernd überlegst, ob du CSS oder Tabellen für bestimmte Seitenbestandteile verwenden solltest, erkenne ich, dass du keine Einführung zu HTML und CSS aufmerksam gelesen hast. Obwohl mehrmals gesagt wurde, dass für tabellarische Daten eine Tabelle verwendet wird, willst du nun tatsächlich eine Tabelle mit CSS nachbauen. Nicht nur, dass es mit CSS nicht geht, sondern auch, dass du die absurde Variante mit 24 IDs :mrgreen: in Erwägung ziehst.

Bei HTML und CSS geht es um die strikte Trennung von Inhalt und Design!
Code: 
  HTML          CSS  
    |            |   
    V            V   
 Inhalt       Design

Das Problem mit der verschobenen Navigation, #25, kommt übrigens daher, dass du die Default-Style-Werte des Browsers nicht auf null gesetzt hast.
Code: 
*{margin:0;padding:0;}
Soetwas sollte zu Beginn jeden CSS-Tutorials kommen.

Vorteile von CSS, nach welchen du fragtest, stehen übrigens ebenfalls unter der verlinkten Seite zum Thema Tabellenmissbrauch, die ich in #14 aufführte.

Wenn du nach wie vor keinen Pro engagieren möchtest, dann tu dir selbst einen Gefallen und lege dein jetziges Design beiseite und fange neu an. Ganz von vorne, mit einem leeren Ordner! Dann lege eine index.html und eine style.css an und versuche erst ein wenig provisorischen Inhalt in der HTML-Datei zu verfassen und diesen anschließend mit CSS zu formatieren.
Ein Tabellenlayout auszumerzen ist schwieriger als eine Seite von Anfang an richtig zu machen. Mache ein paar Übungsseiten.

Wenn du denkst, du hast genug Übung, verfasse deine Kadettseite erneut - ggf. mit neuem Design, denn das jetzige wurde recht scharf kritisiert. Die html.de-Community wird dir sicherlich wieder deine Seite unter die Lupe nehmen und Verbesserungsvorschläge bringen.

Gruß
 
Denke auch an Suchmaschinen!!!

Ich gehe nicht aufs Design ein, Designs sind geschmacksache und ohne dass du mich da falsch verstehst, aber mein geschmack ist es nicht...

How ever; der Absolute NO-GO;
Ein Link ist <a href="http://www.html.de/links/links.html">Links</a>

GOOGLE FOLGT onClick= NICHT!!! Das ist (hinsichtlich Suchmaschinenoptimierung) absolut Wertlos!!!

Next Point: Wenn ich deine Navigation anschaue hast du alles in Ordner verpackt. Grundsätzlich ganz gut, so gibt es strukturierte URLs, aber die Datei darin heisst dann immer index.html

Beispiel (Links & Spenden):

Deine Ordnerstruktur:
/links/links.html
/spenden/spenden.html

Die Url sieht dann so aus:

http://kadett-info.de/20/test/links/links.html
http://kadett-info.de/20/test/spenden/spenden.html

würden die Webseitendaten innerhalb des Ordners index.html heissen wäre die URL schöner;

http://kadett-info.de/20/test/links/
http://kadett-info.de/20/test/spenden/

dann macht es auch Sinn die Webseitendaten in Ordner zu verschachteln.

Weiter;
- Description Tag fehlt.

Richtiges CSS:
Du schreibst im CSS:

td.navi2{
background-image:url(images/navi2_bestand.png);
background-position:center;
background-repeat:no-repeat;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
text-align:center;
width:187px;
height:69px;
cursor:pointer;
}

Sauber währe, wenn du im CSS eine Klasse machst (z.B. Navi), darin steht:

td.navi{
background-position:center;
background-repeat:no-repeat;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
text-align:center;
width:187px;
height:69px;
cursor:pointer;
}

und nur die einzelnen Background Pics in eigenen Klassen:

td.navi2{
background-image:url(images/navi2_bestand.png);
}

und im HTML dann:

<td class="navi navi1" valign="middle" onClick="location.href='../index.html'">STARTSEITE&nbsp;&nbsp;&nbsp;</td>
<td class="navi navi2" valign="middle" onClick="location.href='../bestand/bestand.html'">BESTAND&nbsp;</td>
<td class="navi navi3" valign="middle" onClick="location.href='../kadette/kadette.html'">KADETT E&nbsp;</td>
<td class="navi navi4" valign="middle" >LINKS&nbsp;</td>
<td class="navi navi5" valign="middle" onClick="location.href='../spenden/spenden.html'">SPENDEN&nbsp;</td>
<td class="navi navi6" valign="middle" onClick="location.href='../impressum/impressum.html'">IMPRESSUM&nbsp;</td>
 
Zuletzt bearbeitet:
O Gott....

Ich habe mir vor meinem letzten posting nicht die Zeit genommen die ganze Konversation zu lesen, habs lediglich überflogen... Nach dem ich nun nahezu alles gelesen habe und gesehen habe, wie viel Zeit in dem Projekt schon steckt hab ich fast ne Krise geschoben....

Unter dem Strich müsste ich mich da meinen Vorgängern anschliessen uns sagen, dass wohl besser einen Fachmann heranziehen solltest, da ich aber weiss das du es eh nicht machen wirst und weiter bastelst, dachte ich mir das ich weniger Zeit "verschwende" wenn ich das Projekt einfach realisiere als wenn ich dir erkläre wie man es realisiert...

Ich hab dir die ganze Seite (das ganze Gerüst deiner Webseite) in HTML5 und CSS umgesetzt und das beste... Ich habe meinen Bildschirm gefilmt, so dass du sehen kannst, wie man so ein Gerüst baut, und du in Zukunft nicht wieder TABLE, TD, TR (ach wie kann man nur....) online stellst...

Es dauert noch eine weile bis ich den Film hochgeladen habe, sobald der Film online ist werde ich alle Links posten... Nur so nebenbei, so was (deine Page) realisiert man in 20 Minuten....

Bis bald
 
Werbung:
Fertig (in HTML 5)

So, alle Files sind online. Hier die beiden Links:

Daten:

http://www.cgnetsphere.org/kadett-info.zip

Hier sind alle Daten deiner Page drin (inkl. Bilder) und das CSS ist dokumentiert.

Video:

http://dl.dropbox.com/u/9643192/kadett-howto-1080p.mov

Damit du jeden Arbeitsschritt sehen kannst.

Hier noch der Aufbau:

Das ist die HTML Struktur ohne Inhalt:

<!DOCTYPE html>

<html>
<head>
<title>Kadett-Info.de Der Kadett von A - Z</title>
<link href="./css/style.css" rel="stylesheet" media="screen" type="text/css">
<meta charset="UTF-8">
<!-- Internet Explorer 6, 7, 8 kennen auch kein HTML 5 (diese Zeile kann gelöscht werden) -->
<!--[if IE]>
<script src="./html5.js" type="text/javascript"></script>
<![endif]-->
</head>

<body>
<div class="container">
<header></header>
<nav>
<ul>
<li><a href="#" class="nav1">Startseite</a></li>
<li><a href="#" class="nav2">Bestand</a></li>
<li><a href="#" class="nav3">Kadette</a></li>
<li><a href="#" class="nav4">Links</a></li>
<li><a href="#" class="nav5">Spenden</a></li>
<li><a href="#" class="nav6">Impressum</a></li>
</ul>
</nav>

<section>

</section>

<footer>

</footer>
</div>
<div class="container">
<p class="center">Webseite mit freundlicher Unterstützung von der <a href="http://www.cgnetsphere.org" target="_blank">cgNetsphere</a> zum laufen gekriegt....</p>
</div>
</body>
</html>

Innerhalb von <Section> kannst du nun nach belieben deinen Inhalt reinhauen. Das CSS liegt im Zip File bei.

Bedingung:
1) Wenn du die Daten verwendest (oder nur teile daraus), gehört irgendwo unter der Domain (z.B. unter Links) einen Link zu mir rein…
2) Wenn du wieder mal eine Webseite machst, komme NIE WIEDER mit einem Table Gerüst…. Das ist wirklich aus der Steinzeit.

Hier noch mein PayPal Link… Wenn du willst und die Arbeit schätzt, kannst du mir ein paar Euronen, nach deinem Gutdünken "rüberwandern" lassen.

https://www.paypal.com/cgi-bin/webs...item_name=Spende%20%28Kadett%20Webger%FCst%29
 
Oh... hier ging es noch weiter ... jetzt hab ich ja was zu tun...

@vitus37

Kurz dazu. ich glaube, dass wir aneinander vorbeiquatschen, kann das sein? :D
Ich meine nicht die Tabelle mit den Überschriften, wo ich rein schreibe, wa ich wie lange gemacht habe, sondern das... und jetzt kommts ... "Design-Element" mit den Monaten und Jahren.
Für mich ist es ganz klar Design und kein direkter Inhalt. Es ist ja ein Menü.
Oder liege ich da jetzt falsch?

Und ich habe sehr wohl verstanden, dass man Design/CSS und Inhalt/HTML trennt.
Die Frage ist manchmal nur, wo fängt Design an und wo hört Inhalt auf ;)

@cgnetsphere

mh... krass...
Ich weiß grad nicht was genau ich nun antworten soll. Fangen wir mal beim
1. Beitrag an.

Auch wenn Du ja schon erwähnt hast, dass Du vorher nicht viele Beiträge gelesen hast, ist natürlich längst klar, dass ich das Design nicht in Tabellen gestalte.
Das onclick-Thema hat sich auch schon längst erledigt.


Zum 2. Beitrag
Das ist echt klasse und ich bin dir da sehr dankbar für.
Im Vergleich zu meinem jetzigen Entwurf sehe ich keinen wirklich großen Unterschied, abgesehen vom Design, dass ich inzwischen auf eine Ältere Version abgeändert habe.
Sicher gibt es ein paar Punkte, die ich noch ausbessern müsste, aber ich bin da ein bisschen eigen. Schlechter als das Alte kann es nicht sein und lieber ein 95% eigenes als ein 100%iges fremdes :D
Wenn ich den Code selbst schreibe, weiß ich immer wo ich was finde.
Nehme ich einen fremden Code muss ich alles so ändern, dass ich es finde und dann ist es auch schon fast identisch :D
Das Video ist ne tolle Idee. Leider scheint deine Bildschirmauflösung gut 3mal so groß zu sein, wie meine und daher ist alles so winzig, dass ich eigentlich nicht wirklich was darauf erkennen kann.
Unabhängig davon ob ich Elemente aus deinem Script gebrauchen können werde, werde ich einen Link setzen (aber nur unter "Links").
Und hätte ich etwa 3 Wochen früher von den Server-Angeboten gewusst, hätte ich sogar nen "Ultra-WebServer" gebucht.
Das Angebot ist mit 5GB deutlich besser (3GB mehr), wenngleich auch etwas teuerer (unglaubliche ~55 €cent).
Aber wenn man nach einem Webserver sucht, dann findet man einfach keine guten Angebote bzw. zu viele schlechte um die guten zu finden.

Gruß Chris

PS: Spaß am Rande:
Ist ja nicht so, dass ich nichts merke ;)

Code: 
nav a.nav1 {
	/* Bild */
	background: transparent url(../images/navi1_start.png) no-repeat;
	/* und hšhe */
	width: 187px;
}
Dachte width = weite / breite
 
Rippie schrieb:
Für mich ist es ganz klar Design und kein direkter Inhalt. Es ist ja ein Menü.
Oder liege ich da jetzt falsch?

Und ich habe sehr wohl verstanden, dass man Design/CSS und Inhalt/HTML trennt.
Die Frage ist manchmal nur, wo fängt Design an und wo hört Inhalt auf.
Zum Vergrößern anklicken....

Diese beiden Saetze sind ein Widerspruch in sich. Haettest du es verstanden haettest du das nicht gesagt.

Und dein Scherz am Rande haettest dir sparen koennen. Da macht der Kerl sich die Muehe und muss sich jetzt deine Klugscheißerei anhoeren, wo du nicht mal ... ;)

Naja. Dankbarkeit ist nicht jedermanns Tugend, da geht mir manchmal echt der Hut hoch
 
Werbung:
cgnetsphere schrieb:
So, alle Files sind online. Hier die beiden Links:

Daten:

http://www.cgnetsphere.org/kadett-info.zip
Zum Vergrößern anklicken....

Hallo,
Nachdem ich mich die letzten Tage mit der Gestaltung des Hauptmenüs befasst habe, was zur optischen Ansicht erstmal im alten Design mit Tabellen entstanden ist (die war ja schon da :D), habe ich heute dann den aktuellen Entwurf noch einmal komplett überarbeitet und bei dir dann doch einige gute Dinge abgeguckt um den Code etwas zu kürzen.
Auch die Sache mit der a.class habe ich so zum Großteil übernommen und auch auf weitere Bereiche angewendet. Zum einen, weil es funktioniert und zum Anderen, weil es ja irgendwie für den IE v5.x - v7.x nicht richtig dargestellt wird (hab ich irgendwie so in Erinnerung). Auch das mit der "Großschrift" habe ich mir gemerkt :D

Danke für die vielen Anregungen und Erklärungen. Wie gesagt, der Link ist dir sicher und ein Eintrag in der Rubrik "Danksagungen" (ebenfalls mit Link) :D

Gruß Chris
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben