Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Absolute Positionierung mit CSS





Frage

Hallo, anstatt Frames zu verwenden möchte ich die Homepage mit absolut positionierten Boxen erstellen. Das Grundgerüst habe ich auch, ich weiss aber nicht wie ich diese füllen muss bzw. kann. Mein Quellcode ist wie folgt: <html> <head> <title>...</title> <style type="text/css"> <!-- body { } #titel { position:absolute; top:5px; left:5px; width:1000px; height:60px; z-index:1; } #logo { position:absolute; top:65px; left:5px; width:300px; height:500px; z-index:2; } #menue { position:absolute; top:65px; left:305px; width:700px; height:40px; z-index:3; } #inhalt { position:absolute; top:105px; left:305px; width:700px; height:460px; z-index:4; } #fuss { position:absolute; top:565px; left:5px; width:1000px; height:40px; z-index:5; } --> </style> </head> <body bgcolor="FFFFFF" text="#000000"> <div id="titel" style="background-color:#BF0303;">Titel</div> <div id="logo" style="background-color:#839DBE;">Logo</div> <div id="menue" style="background-color:#3A2A7D;">Menue</div> <div id="inhalt" style="background-color:#839DBE;">Inhalt</div> <div id="fuss" style="background-color:#BF0303;">Fuss</div> </body> </html> Aber nun?????

Antwort 1 von disco

moin

verstehe dein problem nicht. sieht doch "gut" aus.

gut in dem sinne, dass es an den positionen steht, wo du es wohl haben willst.
allerdings sind absolute positionen ziemlich besucher-unfreundlich, da das layout so auflösungsabhängig ist. veränder mal deine auflösung oder mach mal den text sehr viel größer, dann siehste was ich meine.

was hat das eigentlich mit frames zu tun? machs doch mit tabellen, bzw. mit css.

g,
disco

Antwort 2 von rfb

@disco:
als Ersatz für die veralteten und nicht barrierefreien Frame- und Tabellenlayouts haben positionierte divs sehr wohl was damit zu tun
(und CSS verwendet Petra65 doch)

@Petra65:
jetzt schreibst du den Seiteninhalt in die divs. Wenn du nun sehr viel Inhalt hast könnnte das Problem auftreten, das disco erwähnte: passt nicht!
Daher sind relative Maße (%, em, ex) immer sinnvoller als absolute (px, cm), zumal du über Schriftart und -größe nix in die CSS geschrieben hast.

Anmerkung: die Angabe zu background-color kannst du auch in den <style>-bereich packen:
#titel { position:a ... ; background-color:#BF0303; }


Antwort 3 von Petra65

Zitat:
machs doch mit tabellen, bzw. mit css


Aber wenn ich Tabellen einsetze muss bei jeder Seite das Logo neu geladen werden (bei Modems kann das ziemlich nervig sein).
Und mit CSS - wie ??????


Ich habe die gleiche Seite auch mit Frames "versucht", da ist mein Problem, dass ich die Tabelle, die im Fenster inhalt angezeigt werden soll nicht perfekt positioniert bekomme. Es paßt dann mal im IE, dann mal im Firefox aber im IE nicht ....

Hier dazu der Quelltext:
<html>
<head>
<title>RE/MAX PB-Immobilienservice GmbH - Paderborn</title>
<meta name="author" content="Petra Henning">
</head>

<frameset rows="7%,65%,12%" frameborder="0" framespacing="0" border="0">
<frame name="titel" src="PB_titel.asp" noresize scrolling="no" marginwidth="0" marginheight="0">

<frameset cols="35%,100%" frameborder="0" framespacing="0" border="0">
<frame name="logo" src="PB_logo.asp" noresize scrolling="no" marginwidth="0" marginheight="0">

<frameset rows="5%,60%" frameborder="0" framespacing="0" border="0">
<frame name="menue" src="PB_menue.asp" noresize scrolling="no" marginwidth="0" marginheight="0">
<frame name="inhalt" src="PB_index1.asp" noresize scrolling="auto" marginwidth="0" marginheight="0">
</frameset>

</frameset>

<frame name="fuss" src="PB_fuss.asp" norezise scrlling="no" marginwidth="0" marginheight="0">
</frameset>

</html>


Hilfe - Hilfe ...

Antwort 4 von rfb

vergiss die Frames (und vor allem diese Frameorgie). Frames sind eine nicht barrierfreie Technik, d.h. dass Menschen, die aufgrund z.B. einer Sehbehinderung auf andere Browsertechniken angewiesen sind, in der Regel nix damit anfangen können.
Auf Seiten des Bundes, zunehmend der Länder und teilweise der Kommunen, sind Frames daher nicht mehr zulässig.
Ähnliches gilt fürs Tabellenlayout, wenn auch nicht mit der Schärfe.

Tipp: versuch die Anzahl der Bereiche deutlich einzugrenzen:
- Kopf mit Logo oben
- Navigation links oder oben quer
- Inhalt rechts / unten, Fußzeile mit Link um nach oben zu kommen einfach unterhalb des Inhalts ohne Positionierung.

macht eigentlich nur dei Bereiche, die auch jeder Seitenbesucher so oder so ähnlich erwartet. Alles andere ist Spielerei und damit überflüsig.

das Logo wird der Browser - wenn auf jeder Seite dieselbe Bilddatei geladen wird - einfach aus seinem Cache nehmen, dazu braucht es keine Frames (und tabellen schon gar nicht)

Antwort 5 von halfstone

Hi Petra65,

es gibt noch ein Argument gegen Frames.
Suchmaschinenrobots mögen keine Frames, falls doch indizieren sie die einzelnen Seiten, wenn ein Besucher die dann findet wird deine Seite ohne die anderen Frames aufgerufen.

Also entweder erscheint deine Seite gar nicht in den Suchmaschinen oder nur teilweise.

Daher mein Tipp, lass die Frames weg.

Gruß Fabian

Antwort 6 von Petra65

Was ist denn nun los ??????

Ich sehe die Antworten gar nicht - ich sehe in der Übersicht 5 Antworten, doch wenn ich diese auswähle ist nur Antwort 1 sichtbar!!!

Antwort 7 von disco

um ehrlich zu sein, habe ich bei meinem letzten versuch alles mit css zu machen aufgegeben, da ich die oberfläche relativ schnell fertig werden musste und mir das einlesen zu lange geadeuert hat. ausserdem ist im firmen-intranet die barrierenfreiheit noch nicht so relevant.

ich bin da mehr oder weniger auch an deinem problem gescheiter und benutze da immer noch tabellen.

aber vielleicht weiss rfb da ja wie das geht, was mir auch sehr gelegen kommen würde. ich hab das problem mal verkürzt.:

<html>
<head>
<title>...</title>

<style type="text/css">
<!--
body { }
#titel { position:absolute; top:5%; left:5%; width:50%; height:10%; z-index:1; background-color:#BF0303;}
#logo { position:absolute; top:10%; left:5%; width:50%; height:10%; z-index:2; background-color:#839DBE;}
#logo2 { position:absolute; top:10%; left:30%; width:25%; height:10%; z-index:3; background-color:blue;}

-->
</style>
</head>

<body bgcolor="FFFFFF" text="#000000">

<div id="titel">Titel</div>
<div id="logo">Logo</div>
<div id="logo2">
EIN EXTREM LANGER TEXT!!!!!!!!<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</body>
</html>

@rfb:
wie schaft man es nun, dass sich die 3 flächen entsprechend anpassen, wie es bei einer tabelle der fall wäre? wenn das geht steige ich auch komplett auf css um :-).

Antwort 8 von sutadur

Zitat:
Aber wenn ich Tabellen einsetze muss bei jeder Seite das Logo neu geladen werden ...

Das ist bei der Positionierung durch CSS nicht anders. Tatsächlich wird das Logo aber im Regelfall nicht neu geladen, sondern ab dem zweiten Aufruf aus dem Browsercache angezeigt.

Auch wenn vieles gegen Tabellen spricht, läßt sich maches damit deutlich leichter umsetzen. Barrierefreiheit ist sicher ein wichtiges Thema, und wie gesagt auch für Internetpräsentationen des Bundes zwingend vorgeschrieben. Daneben macht es auch für den gewerblichen Einsatz u.U. Sinn, denn jeder Besucher, der die Seite nicht ansehen kann, ist potentiell ein verlorener Kunde. Aber dennoch halte ich es für übertrieben, bei jeglicher privater Homepage auf Barriererfreiheit (die so ohnehin nur sehr schwer zu erreichen ist) zu bestehen.

Antwort 9 von rfb

ich weiß zwar nicht, wozu eine Beschränkung auf diesen Bruchteil des Fensters sinnvoll sein sollte, aber du musst dann eben dem Browser mitteilen, was er mit dem "überschüssigen" Inhalt machen soll, zB.
overflow:auto oder overflow:hidden und schon bleibt die Aufteilung erhalten (auf Kosten der Benutzbarkeit ;-)

Antwort 10 von rfb

@sutador:
Zitat:
bei jeglicher privater Homepage
richtig (obwohls eine nette Übung ist), aber hier dreht sichs wohl um einen Paderborner Immobilienservice.

Antwort 11 von sutadur

Zitat:
ich weiß zwar nicht, wozu eine Beschränkung auf diesen Bruchteil des Fensters sinnvoll sein sollte, ...

Weil es einfach nicht toll aussieht, wenn ein Text, der bei einer Aulösung von 1024x768 Punkten einen Absatz von 10 Zeilen bildet, auf einem 21"-TFT bei entsprechend hoher Auflösung plötzlich nur noch zwei Zeilen umfasst ... ;o)

Antwort 12 von sutadur

Zitat:
... aber hier dreht sichs wohl um einen Paderborner Immobilienservice.

Das stand da aber noch nicht, bevor ich meinen Beitrag geschrieben habe.

Antwort 13 von MoRe99

@ disco, und natürlich auch @ Petra65

css-faq -> gleiche Spaltenlänge bei zweispaltigem Design
liquid two column layout -> zwei gleich lange Spalten, mit Header und Footer
liquid three column layout -> drei gleich lange Spalten, mit Header und Footer
frames without frames -> Frames ohne Frames, dafür mit CSS
faux frames -> sieht aus wie Frames, sind keine Frames

Vielleicht ist da was nützliches dabei.

Antwort 14 von rfb

@sutador:
A11: discos Beispiel nutzt generell die halbe Fensterbreite und einen Bruchteil der Höhe - daher mein Kopfschütteln
A12: steht im head-bereich des Frame-Codes von Petra65

Antwort 15 von disco

also geht da eine dynamische anpassung an den text nicht?!

ich möchte dass jetzt nicht wieder zur diskussion über barrienfreiheit ausarten lassen, aber für mich sehe ich dann immer noch keine alternative zur tabelle.

für mich ist eines der wichtigsten elemente eine internetseite das layout. und wenn das nicht ein wenig dynamisch ist, wie das in meinen augen (jetzt noch mehr) bei css nicht gewährleistet ist, bringt mir das nicht viel.

man kann den text nicht in solch einen dynamischen einklang mit dem hintergrund bringen, wie es mit tabellen der fall ist.

Antwort 16 von sutadur

Zitat:
A12: steht im head-bereich des Frame-Codes von Petra65

Ja, JETZT. Aber als ich meinen Text geschrieben hab, gab es Antwort 7 und damit den besagten Quelltext noch gar nicht ...

Antwort 17 von MoRe99

Der besagte Quelltext steht in Antwort 3, sutadur! ;-)

Antwort 18 von sutadur

Oha ... tatsächlich, stimmt. Sorry, mein Fehler. Aber nun wieder zum Thema ... ;o)

Antwort 19 von rfb

@disco:
hast du dir die Beispiele von MoRe99 mal angesehen? Zumindest einige davon bei den barrierefreien E-Workern erfüllen locker deine Anforderungen.

Antwort 20 von disco

nee. hab das da noch nicht gelesen. ich guck die nachher mal durch.

Antwort 21 von Petra65

Man - oh - Man

da hab´ ich aber eine Frage gestellt!!

Vieles davon war mir nicht bewußt ...

Vielen, vielen Dank für die zahlreichen Antworten!!!


Gruss
Petra

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: