Grundlegende Frage zum Seitenaufbau

html.de-Forum HTML, XHTML & CSS
1

Hallo

Ich möchte für die Firma meiner Eltern eine Website erstellen (Da alles andere einfach zu teuer ist).
Nun habe ich mich auf Selfhtml.de schon gut eingelesen, und versuche nun ein bisschen anzufangen.
Da ich ein eher ungedultiger Mensch bin, will ich „learning by doing“ machen, und nicht alles bis zum umfallen lernen sondern einfach mal anfangen, und das dazulernen, was ich gerade brauche.

Habe jetzt auch schon einen teil des Startfensters fertig, aber bevor ich weiter mache:
Ich habe einen „Kopf“ und darunter soll eine Navigationsleiste. Diese besteht (soll bestehen) aus ein paar Buttons. Mir währen jetzt mehrere Möglichkeiten eingefallen. Entweder ich positioniere die Buttons einfach da wo ich sie haben will, und verlinke zu den einzelnen Seiten. Oder ich erstelle mir z.b. mit Flash eine Navigationsleiste. Was ist sinnvoller (Dass ich Anfänger bin, sollte vernachlässigt werden… Lernen kann man ja alles)

Noch eine zweite frage (hat jetzt eher weniger mit dem Thread zu tun):
Ich will die Seite Zentriert haben. Alles schön und gut, nur wie mache ich das, das ich z.b. wie oben erwähnt meine buttons genau da sind wo sie sein sollen. Da nicht jeder mit der gleichen Auflösung surft, enfällt die absolute positionierung.
Wie kann ich dann die Position angeben, dass die Navi-leiste in der mitte ist. Hätte da so an eine Gruppe gedacht, die ich erstelle, und dann als ganzes zentrieren lasse, nur irgendwie funktioniert das nicht.

Hoffe ihr könnt mir ein paar tipps geben…

MFG Hase

2

wenn du ne gute website machen willst aber noch die Erfahrung hast dann mache es erstmal mit google sites. Da kannst du echt learnung by doing betreiben. Ich habe da selber ne seite gemacht besser gesagt zwei und am anfang hatte mal gar keine kenntnisse und jetzt kann ich schon ein bisschen was

3

also ich will google sites nicht runter machen (kenn ich ehrlich auch nicht) aber wenns was standfestes sein soll (ja das soll es) will ich es richtig machen. Und da html ja nicht schwer ist (bis auf ein paar kleinigkeiten) will ichs doch lieber richtig machen.

und zweitens ( :mrgreen: genau, wo ist erstens) wenns ich da mal den bogen raus hab, kann ich darauf aufbauen, und was besseres machen, da ich ja die grundlagen schon alle durchhabe. falls ich keinen bock habe darauf aufzubauen, dann hattest du recht :slight_smile:

4

wenn du die Website zentrieren willst dann mach:
[HTML]
content {
margin:auto
}
[/HTML]

Und wenn du eine Fest Breite haben willst dann gebe keine „px“ an sondern schreibe es mit „%“

lg
Akronym

5

Bei einer Pixelgenauen umsetzung wäre das schlecht, weil jeder eine andere Auflösung hat und dann Grafiken zusammengequetscht oder teilweise nicht angezeigt werden. Es kommt immer darauf an, was umgesetzt werden muss und dann muss man sich für % oder px entscheiden.

6

Du willst ein sogenanntes „Jello-Design“ erstellen. So wie html.de. Jello-Designs orientieren sich am umgebenen div. Interessant dabei ist für dich vielleicht das css-property float.
Dabei empfehle ich dir diese Begriffe mal zu googlen und dich in Quelltexten umzuschauen. Dabei kann man viel erschließen.
Wenn das alles nicht hilft habe ich die ultimative Einsteiger-Lektüre für dich. Die allerdings auch ein wenig kostet: HTML mit CSS und XHTML von Kopf bis Fuß: Amazon.de: Eric Freeman, Elisabeth Freeman, Lars Schulten, Stefan Fröhlich: Bücher

7

Wo muss das hin, in welchen abschnitt der html datei?

und wie siehts mit meiner frage bezüglich dem menü/navigationsleiste aus, wie sollte man das realisieren?

8

Das kommt in dein CSS Dokument.

Ich rate dir, mach ein Menü mit HTML (Liste, also

    und
  • ).

9

Darüber sollten Deine Eltern nochmal gut nachdenken!
Du bist Anfänger. Also dauert es fünf- oder zehnmal so lang, bist Du eine Website fertig hast (verglichen mit einem Profi).
In der Zeit stehst Du Deinen Eltern für nichts anderes zur Verfügung. Das kostet sie zwar direkt kein Geld, aber indirekt. Dieser indirekte Betrag kann u.U. auch schon gut auf den Preis eines Profis zusteuern.
Dann bedenke, dass WWW-Nutzer grundsätzlich eine perfekte Website erwarten. Kunden eines Unternehmens noch viel mehr.
Jeder Kunde, der die von Dir entwickelte Website wieder verlässt, weil Du irgendwo etwas nicht ganz richtig gemacht oder berücksichtigt hast, kostet Deine Eltern richtig Geld.
Das Image - wenn die Website nicht funktioniert oder schlecht aussieht, ist das ein teils enormer Imageverlust für Deine Eltern.

Wenn man sich dessen bewusst ist, und das alles summiert, dann ist das selber machen von Anfang an deutlich teurer als ein Profi.
Und wenn Dus besonders schlecht machst, ist das ein Verlust für die Firma, von dem sie sich vielleicht nie mehr erholt.

Nun habe ich mich auf Selfhtml.de schon gut eingelesen, und versuche nun ein bisschen anzufangen.

Schlechter Einstieg. SelfHTML geht zu wenig auf Semantik ein.
Lies mal hier die Grundlagen: Einführung | Webdesign mit XHTML und CSS

Da ich ein eher ungedultiger Mensch bin

Ganz schlecht. Damit könnte das Projekt schon jetzt zum Scheitern verurteilt sein. Du solltest Dir nicht vornehmen, früher als zu Weihnachten damit fertig zu sein.

will ich „learning by doing“ machen, und nicht alles bis zum umfallen lernen sondern einfach mal anfangen, und das dazulernen, was ich gerade brauche.

CSS funktioniert nur, wenn Du eine valide und semantisch korrekte Basis aus HTML hast. Und die kannst Du erst erstellen, wenn Du den Inhalt hast.
Gehst Du Deine Site (als Anfänger!) in anderer Reihenfolge an, wirst Du nochmal die doppelte oder dreifache Zeit brauchen und Dein Ergebnis wird schlechter sein. Weil Du als Anfänger gar nicht in der Lage bist, alle Zusammenhänge richtig zu verstehen.

Ich habe einen „Kopf“ und darunter soll eine Navigationsleiste.

Das war anzunehmen. Layout&Design vor dem Inhalt. So wird das nichts…Deine Site wird dann (vielleicht) toll aussehen, aber technisch eine Katastroiphe.

Hoffe ihr könnt mir ein paar tipps geben…

Ich hoffe, Du bist bereit, Tipps anzunehmen.
Helfen auf Deinem Weg können wir Dir hier, und werden wir auch, auch wenn mein Beitrag jetzt vielleicht nicht so klingt. Ich möchte aber nur, dass Du und Deine Eltern sich dessen bewusst sind, was da auf sie zu kommt, dass Ihr Eure Entscheidung nicht später bereut.

Wir helfen Dir gerne auf Deinem Weg, aber Du musst die Hilfe auch annehmen.

Und mein erster Tipp daher: Vergiss das Aussehen und fang bitte mit dem Inhalt an. Nur so lernst Du es als Anfänger gleich richtig.

Fragen? Fragen!

10

Ich möchte auch noch kurz zu der Antwort von Efchen (die sehr gut ist) hinzufügen, das eine geschäftliche Seite nicht nur das blosse erstellen eines Quellcodes ist um Inhalt darzustellen.

Eine geschäftliche Seite ist sozusagen die Business-Card im Internet. Du solltest Dir also auch Gedanken zum Thema UI, Userführung, „Corporate Identity“ und Grafick Design machen.

Ist also ein ganzer batzen mehr als „mal eben“ HTML „learning by doing“ zu lernen. Ich denke Deine Eltern sind weit besser beraten, wenn sie doch ein wenig Geld in einen Fachmann investieren.
Eine Reputation, die einmal zunichte gemacht wurde, lässt sich nur äusserst schwer wieder herstellen.

11

Also mal vorweg:

  1. Ich habe bereits mal mit dem Webcreator 3 Pro eine Website erstellt (ja, das Ergebnis war nicht berauschend) und das kann nur besser werden.
  2. Wird das nix aufwendiges, vll 7-10 Seiten wobei wirklich nur ein Wenig Inhalt drinnen sein muss, mal ein Kontaktformular, mal um einen Katalog zu downloaden…
  3. Wenn man bedenkt, dass eine Website von einem „Profi“ mehrere 1000€ kosten „kann“ (wie gesagt kann, man kanns bestimmt auch billiger bekommen, jedoch ist da nicht mehr als max. 200 - 300 € drinn) und mit dem bereitstehenden Budget ist das nicht so leicht zu realisieren.

Tipps werd ich auf jeden Fall annehmen!
Und meines Erachtens ist die Aussage, dass das bis Weihnachten dauert ein bisschen hoch gegriffen für so ein lächerliches Projekt…
In dieser Zeit lerne ich die komplette Siemens S7 SPS neben der Arbeit. Also auch wenn ich alles miteinander zusammenrechne, würde ich für das komplette HTML und css 2 Monate geben (vorausgesetzt man ist da ein bisschen dahinter)

also werd ich jetzt mal die oben genannte Einführung durchlesen und dann nachfragen was ich nicht verstehe…
berichtigt mich, wenn ich falsch liege!

MFG Hase

12

Nein ist es nicht. Nicht jeder hat Flash. Nicht bei jedem ist JS aktiv. Notwendige Inhalte dürfen nicht durch irgendwelche Techniken verschwinden.

Das hängt von dem gesamt Konzept der Seite ab. Mann kann auch in einem relativpositionierten Element etwas absolut positionieren.

13

@ Efchen: Also hab mir deine Einführung durchgelesen. Also wenn du nur die Einführung gemeint hast… tja, so was gehört einfach zum Grundwissen… (das ist vll für einen absoluten Anfänger interresant)
ist mir überhaupt nichts neues. Hab mir mal die Grundlagen zu html und css auch nochmal durchgelesen, und fühle mich bestätigt, das html nix besonderes ist (von der Schwierigkeit her).

Aber trozdem danke für den Link, da wichtige funktionen besser erklärt sind, als auf Selfhtml, und besser zusammengefasst.

MFG Hase

14

Für eine gewerbliche Site, bei der es ums Geld verdienen geht, nicht zu empfehlen.

  1. Wird das nix aufwendiges

Das hört man bei Anfängern immer. Websites zu erstellen ist immer aufwändig und man muss viel wissen.
Es ist nicht sonderlich kompliziert, wenn man sich nur damit beschäftigt, Lernwille da ist und Eigeninitiative gezeigt wird.
Aber ein großer Aufwand steckt da immer dahinter, weil das WWW so variabel ist.

  1. Wenn man bedenkt, dass eine Website von einem „Profi“ mehrere 1000€ kosten „kann“ … ist da nicht mehr als max. 200 - 300

Dann wäre es durchaus auch eine Überlegung, gar keine Website zu haben. Wenn man sich die Sites mancher Firmen ansieht, wäre gar keine Website die bessere Website.
Aber ich bekomme das Gefühl, dass Du lernwillig bist, dann werden wir DIch hier auch an die Hand nehmen!

Und meines Erachtens ist die Aussage, dass das bis Weihnachten dauert ein bisschen hoch gegriffen für so ein lächerliches Projekt.

Du bist doch noch blutiger Anfänger, wie kannst Du das abschätzen?
Nun, so ganz so ernst war das auch nicht gemeint, und es kommt natürlich drauf an, wieviel Zeit Du täglich investiert und wie schnell Du die Materie begreifst.

würde ich für das komplette HTML und css 2 Monate geben (vorausgesetzt man ist da ein bisschen dahinter)

Deine Einstellung beginnt mir zu gefallen und dann könnte das was werden… :slight_smile:

Das hat nie jemand gesagt. Aber die meisten Webmaster von heute haben HTML noch nicht begriffen.
Sie versuchen, mit HTML das Aussehen einer Site zu bestimmen.
HTML ist nur für die Semantik - Hast Du das begriffen?
Inhalt und Layout sollten immer strikt getrennt werden - Hast Du das begriffen?
Kein Layout mit Tabellen, kein Layout mit divs - Das ist hoffentlich klar?
Mach doch mal ne kleine Probeseite und stell sie hier wieder vor, dann sag ich Dir gerne, ob das so okay ist :slight_smile:

Aber trozdem danke für den Link, da wichtige funktionen besser erklärt sind, als auf Selfhtml, und besser zusammengefasst.

Genau. SelfHTML ist etwas der Zeit hinterher. Da wird zwar unterschieden zwischen logischer und physischer Inhaltsauszeichnung, aber nicht genug darauf eingegangen, wann man was oder was man nicht benutzen sollte.

Wäre schön, wenn ich meinen Kommentar „blutiger Anfänger“ zurücknehmen könnte, wenn ich Dich ricihtig einschätze, dann wird mir die Zusammenarbeit mit Dir echte Freude bereiten und viele könnten sich davon eine Scheibe abschneiden.

Bis demnächst!
-Efchen

15

bin gerade dabei, eine sogenannte „testsite“ zu erstellen.
habe jetzt gerade ein problem. ich habe einen head, und darin soll ein logo mit schrift sein. wenn ich das logo platziere, dann ist die schrift darunter, logisch. jetzt will ich aber die schrift rechts vom logo haben. ich weiß nicht, ob ich nach knapp 3 std zu ausgelaugt bin, aber die einzige möglichkeit die mir eingefallen ist, ist es mit „float“ zu lösen. jedoch orientiert sich nun die höhe des headers nicht mehr am logo.
wie kann ich es lösen, dass die höhe des headers sich am logo orientiert.

verstanden :D?
MFG Hase

ich glaub nicht, dass ihr das jetzt verstanden habt, morgen bekommt ihr einen screenshot.
aber ich glaube ich geh das jetzt anders an, wenn ich ein logo habe, und darunter die schrift, wie löse ich es am bessten, dass die schrifft dann (in der höhe zentriert) rechts neben meinem logo steht

16

Also du willst ein Logo, und rechts davon die Schrift?

Du könntest das Logo links floaten, und den Text (Ich denke das ist ein Absatz richtig. Hier sollte man übrigens dann

verwenden) ebenfalls links floaten. Dann kannst du den Logo und den Text noch padding und margin geben.

Um zu sehen was du immer genau anstellst kannst du dem Logo und dem Text jeweils einen Rahmen (boarder: 1px solid black;) geben. So siehst du immer was sich da tut.

Das sich die höhe des Headers nicht an die höhe des Logos musst du ohne Quelltext etwas näher beschreiben. Passt sich die höhe denn an den Text (p) an, oder verschwindet der header ganz?

Versuch mal den Header zu floaten, diesem eine breite in % zu geben (width) und dann müsste er sich eigentlich anpassen.

Ansonsten Screenshot oder Quelltext.

17

Das ist die gängige Lösung dafür, Block-Elemente nebeneinander zu bekommen.

jedoch orientiert sich nun die höhe des headers nicht mehr am logo.

Klar, das gefloatete Logo ist ja nun auch nicht mehr im Textfluss, bestimmt so nicht mehr die Größe seines Elternelements.

wie kann ich es lösen, dass die höhe des headers sich am logo orientiert.

Wer „float“ sagt, muss auch „clear“ sagen!

ich glaub nicht, dass ihr das jetzt verstanden habt

Wir sind nicht doof :slight_smile:

aber ich glaube ich geh das jetzt anders an

Warum?

wenn ich ein logo habe, und darunter die schrift, wie löse ich es am bessten, dass die schrifft dann (in der höhe zentriert) rechts neben meinem logo steht

Mit float. :smiley:

Könnte auch eine Überschrift sein. Neben Logos stehen meist die Site-Überschriften, das wäre dann

.

Um zu sehen was du immer genau anstellst kannst du dem Logo und dem Text jeweils einen Rahmen (boarder: 1px solid black;) geben. So siehst du immer was sich da tut.

Noch besser wäre es, sich sowas wie „Firebug“ zu installieren, dann kann man die Elemente sogar direkt manipulieren.

Das sich die höhe des Headers nicht an die höhe des Logos musst du ohne Quelltext etwas näher beschreiben.

Eigentlich sollte man das wissen, da das doch der klassische Nebeneffekt des floats ist, dass das Element aus dem Textfluss genommen wird.

Versuch mal den Header zu floaten, diesem eine breite in % zu geben (width) und dann müsste er sich eigentlich anpassen.

Warum sollte er?

Grüße in die Runde,
-Efchen

18

ok, das ich „float“ hernehme, ist mir jetzt ganz klaar, aber über die funktion bin ich mir noch nicht ganz sicher. Wenn ich das logo mit float aus header nehme, orientiert sich die höhe des headers nicht mehr an der größe des logos. Klaar verstehe ich. Aber warum kann ich den abstand zum header noch mit padding ändern, da das doch noch einfluss nimmt auf mein logo.

meine lösung währe jetzt so gewesen, mit float und clear aus dem header nehmen, dann dem header eine feste höhe geben (muss nicht variabel sein, da mein logo ja immer gleiche maße hat) und dann die schrift im header zentrieren?! Ja gut ehm… puh… wie mach ich das jetzt am geschicktesten oder wie gehört es sich.

MFG Hase

19

Weil das die Funktionsweise von float ist.
Text soll das gefloatete Element umfließen.
Es wird aber auch aus dem Textfluss genommen.
Das heißt, dass das Element keinen Platz einnimmt und das nächste Element an die selbe Stelle positioniert wird, wie das gefloatete.
Diese EIgenschaften widersprechen sich nicht.

Du brauchst nur nach dem gefloateten Element irgendwo ein leeres Element einfügen, das „clear“ gesetzt hat. Höhenangaben brauchst Du dabei nicht. Das „clear“ sorgt dafür, dass der Textfluss nach dem gefloateten Element weitergeht. Das funktioniert also auch mit variabel großen Elementen.

20

@ Efchen: Danke für deine Antwort.

Hatte in letzter zeit ein bisschen zu viel zu tun, aber versuche am WE meine „Test-seite“ online zu stellen.
Würde mich über jede positive und auch negative Kritik freuen.

MFG Hase