Hallo,

ich soll am WE eine kleine Homepage für meinen Chef erstellen. Bisher besitze ich beim Thema HTML, CSS und Javascript lediglich Basiswissen (Berufsschule, SelfHTML...).

Das Layout soll aussehen wie im Anhang zu sehen.

Zunächst habe ich dieses Layout mit Frames definiert, aber auch gleich die Nachteile festgestellt. Trotz "noresize" passen sich die Frames nicht meinem Browserfenster an.

Kurzer Aufbau:
Bereich1 = Kopfzeile
Bereich2 = Navigation
Bereich3 = Hauptbereich
Bereich4 = Hilfsnavigation
Bereich5 = Fusszeile

Im Hauptbereich sollen sämtliche Links der Navigation/Hilfsnavigation/Fusszeile angezeigt werden. Allerdings dürfen sich die Fenster bei kleinem Browserfenster nicht verschieben, die Seite soll die gleiche Größe behalten, lediglich rechts&unten soll dann eine Scrollbar (= rote Markierung) erscheinen.

Wie stelle ich das am Besten an? Mit Frames komme ich da nicht weiter, oder?

http://www.8ung.at/...mepage/hp_layout.gif

Hallo Lorenzo,

Du kannst es mal mit CSS versuchen.
Hier gibt es fertige Layoutvorlagen für Dein Layout:
http://www.intensivstation.ch/templates/
http://www.intensivstation.ch/templates/bxcms/

Gruß Sabine

hallo lorenzo

nein, frames sind nicht mehr wirklich angesagt. es gibt viele nachteile, wie du auf subotnik.net nachlesen kannst (danke sabine ;-))
wenn du noch fast keine erfahrung hast, würde ich dir empfehlen, es mit einer tabelle zu machen. das ist nicht allzu anspruchsvoll und sieht recht schnell in allen browsern gleich aus.

oder such im internet nach einem fertigtemplate, das sollte schon irgendwo zu finden sein.

Über eine Tabelle?

Mmhh... da kann ich dann aber keine Links direkt einbauen?

Ich müsste quasi zur Darstellung einer anderen Navigationsauswahl, den kompletten Quelltext in eine neue Seite einfügen und dort lediglich den ausgewählten Punk ändern?

hallo

so, wie ich dich verstehe, möchtest du das so realisieren:

du hast deine seite. wenn du nun auf einen link in der navigation klickst, soll sich der navigations(-frame?) neu laden mit einem anderen inhalt (unternavigation oder so).
dazu soll sich auch gleich der haupt(-frame?) mit neuem inhalt laden.
die anderen bereiche sollen gleich bleiben, ausser man klickt z.b. auf einen link in der hilfsnavigation, dann sollen nur der hauptbereich und die hilfsnavigation verändern werden.

habe ich das richtig verstanden?


das könntest du auch mit einer tabelle einfach realisieren. du kannst die navigation mit javascript aufbauen. dann kannst du dort auf einen link klicken und das javascript verändert deine seite, ohne dass es einen reload braucht. dann würde ich ein file machen navigation.html und dieses dynamisch (php/ssi/cgi...) in die seiten einbinden. dass wenn du eine änderung vornehmen möchtest, du nicht immer alle dateien verändern musst.

Hi,

ja du hast mich in etwa richtig verstanden. Werde nun mal mein Glück mit CSS versuchen.

Hab mir dazu folgendes Template geladen:
http://theme-3-cols-bronze.freeflux.net/

Ich verstehe jetzt nur nicht weshalb ich z.B. eine Gif-Datei und eine Überschrift <h1> nicht nebeneinander in den Banner setzen kann. Dazu benötige ich dann doch wieder eine Tabelle oder?

Wie kann man verschiedene CSS-Felder "überlappen"? Ach, ich weiß nicht wie ich es erklären soll.

<h1> steht immer in einer anderen Zeile als class <banner> - ich möchte aber beides nebeneinander stehen haben.

Auszug aus meinem CSS:
#banner {
padding: 0px;
margin: 0px;
background-color: #B8860B;
}

#banner h1{
font-size: 30px;
padding: 40px 0px 0px 200px;
margin: 0px;
}

Wenn ich das CSS-Prinzip richtig verstanden habe, bezieht sich das Format #banner h1 auf das "Überformat" #banner, richtig?

Dann müsste ich doch theoretisch für mein Logo ein Format #banner img anlegen oder?

Hallo Lorenzo,

schreib vor <h1>

<img src="deinbild.jpg" alt="" width="" height="" align="left" />
Breite und Höhe des Bildes noch einsetzen.

so gehts dann weiter:
<h1><a href="http://theme-3-cols-bronze.freeflux.net/de/">theme-3-cols-bronze.freeflux.net</a></h1>...

Gruß Sabine

Ok,

hat geklappt und ich arbeite und mit <div>-Bereichen.

Frage mich jetzt nur noch wie z.B. die Fusszeile mit Impressum / Kontakt / Anfahrt mit diesem <div> am Besten mache.

Arbeite ich innerhalb der <div>-Bereiche wieder mit Tabellen? Wohl kaum, sonst könnte ich mir die Arbeit sparen?

Ich hab meine Testseite nun mal online gesetzt.
http://www.8ung.at/...o/Homepage/index.htm
http://www.8ung.at/...omepage/css/main.css

Problem 1:
Verkleinert das Fenster und beachtet die Überschrift, es ensteht wieder eine Zeilenumbruch, wie bekomme ich den raus?

Problem 2:
Die Fusszeile! Wie bekomme ich die so fix hin, das sie sich auch nicht bewegt. Ich möchte mein ganzes Layout fixiert haben, damit sich nichts verkleinert, sondern man den Scrollbalken verwenden muss.

hallo

wie möchtest du das genau realisieren?
schreib doch einfach:

Code

<a href="impressum.html">impressum</a> - <a href="kontakt.html">kontakt</a> - <a href="anfahrt.html">anfahrt</a> 

dann hast du die links schön dargestellt.
wenn du sie untereinander möchtest kannst du ja einfach noch ein <br> dazwischenhängen.

sorry, ich habe vorher deinen letzten beitrag nicht gelsen gehabt.

zu deinen zwei problemen: setze deine ganze seite in ein div. dass du dann hast:

<head>
</head>
<body>
<div class="gesamteseite">
inhalt...(deine anderen divs und so weiter)
</div>
</body>

für das div gesamteseite definierst du eine fixe breite/höhe. dann kannst du die divs im inhalt-teil an "gesamteseite" ausrichten.

dadurch verhinderst du ein zusammenrücken der fusszeile und erzwingst bei kleinerem browserfenster einen scrollbalken.

Gute Idee, aber was ist wenn meine Auflösung größer ist als die von meiner Seite?

Dann habe ich rechts jedemenge freien Platz.

Wie kann ich die Anpassung meiner Seitengröße wirklich 100%ig prof. an den Browser anpassen?

Gibts dafür bei CSS einen Eintrag?

hi

entweder du setzt das div zentriert in die mitte des browserfensters (mit margin:auto)
und definierst eine nicht störende hintergrundfarbe oder (ungetestet) du schreibst einfach in width:100%. ich weiss dann allerdings nicht, ob sich das dann nicht wieder anpasst.

ich würde die erste variante machen.

Hab ich versucht, aber es funktioniert trotzdem nicht!

/* Ganzeseite
-------------------------------------- */
#page {
width: 1024;
height: 768;
margin: auto;
}

Und das <div> fängt dennoch bei meiner Auflösung von 1200x800 ganz links an und rechts ist jedemenge Platz.

Wie bekomme ich den Bereich #page zentriet auf meinen Browser? Mit margin:auto funktioniert es nicht.

hi

ich habe dasselbe bei einer seite von mir:

Code

#alles 
	{ 
		width: 800px; 
		margin-left: auto; 
		margin-right: auto; 
	} 

so funzts bei mir.