Div

[Mad Dog]

Hey
ich habe ein problem!
und zwar bin ich dabei meine eigene Homepage zu erstellen und dafuer will ich links eine navigation einbauen!
dazu benutzte ich div. hier kommt mein erstes problem auf:
wenn ich das div z.b. mittels einer css datei auf 20% width aligned left definiere und jetzt aber test reinschreibe und dieser text lang ist, geht der text einfach ueber den rand des divs hinaus! sprich keine scrollbalken oder so.
gibt es eine moeglichkeit scrollbalken einzufuegen oder sogar dass am rand des divs automatisch ein zeilenumbruch erfolgt?

und ich habe noch eine weitere frage!
wenn ich diese navigation optisch aufbessern will also einen "besseren" rand moechte, wie mache ich das am besten? erstelle ich eine tabelle und in die aeussersten zellen wird ein bild geladen? oder gibt es andere moeglichkeiten!
mittels einem bild wuerde es ja gehen aber wenn ich das ganze bei einer aufloesung von 1600*1024 programmiere und jemand mit einer aufloesung von 1024*800 meine anschaut wird es ja einen unterschied geben, wenn dieser rand eine feste(pixel) groesse hat?
kann ich das auch umgehen?

vielen dank schon mal im voraus

 

[threadi]

dafuer will ich links eine navigation einbauen!
dazu benutzte ich div

Verwende lieber eine Definitionsliste dafür (<ul>).

gibt es eine moeglichkeit scrollbalken einzufuegen oder sogar dass am rand des divs automatisch ein zeilenumbruch erfolgt?

Der Zeilenumbruch sollte automatisch erfolgen falls der Text nicht mit "white-space: nowrap" formatiert wurde. Das kann man ohne Quellcode allerdings nur schwer sagen.
Einen Scrollbalken kann man mit der CSS-Eigenschaft "overflow" erzwingen.

wenn ich diese navigation optisch aufbessern will also einen "besseren" rand moechte, wie mache ich das am besten? erstelle ich eine tabelle und in die aeussersten zellen wird ein bild geladen? oder gibt es andere moeglichkeiten!

Keine Tabellen verwenden. Am besten nicht mal ein div. Wie oben geschrieben: Definitionsliste, und diese per CSS so formatieren wie du es dir wünschst.

 

[prm]

Ich vermute dass der Text deshalb über die Breite geht, weil du ihm im Test keine Chance gibst, umzubrechen. Das ist immer dann der Fall, wenn eine lange Buchstabenfolge ohne Leerzeichen verwendet wird.
Füge in deinen Text genügend Leerzeichen ein und dann sollte er auch umbrechen.

Mit relativen Breiten wie den von dir genannten 20% ist das so eine Sache: je nach Viewport sind die Container dann einmal mehr oder weniger Breit und bei sehr großen oder kleinen Viewports kann sich das nachteilig auf das Erscheinungsbild auswirken (t.B. zu lange oder zu kurze Textzeilen, Relationen bei Text und Grafiken). Aus diesen Gründen würde ich ein fixes Layout verwenden, wodurch die Seite unabhängig vom viewport immer gleich angezeigt wird.

Statt

<div id="navi">

verwende wir bereits erwähnt besser

<ul id="navi">

Viele Navi-Beispiele findest du hier: Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

 

[Mad Dog]

vielen dank!
werde die punkte die ihr mir vorgeschlagen habt abarbeiten und meine page verbessern!

prm meinte ich sollte ein fixes layout benutzten. denke mal du meinst mittels pixel angaben, nicht 20%.
daran hatte ich auch gedacht nur stellt sich dann die frage welche aufloesung wird am meisten benutzt? 1024*800? 1600*1024?

 

[prm]

Ich würde mich noch an 1024 orientieren. Mit so etwa 900-950px Gesamtbreite solltest du auf der sicheren Seite liegen.
Hier mal ein Beispiel: Dreispaltiges Layout, zentriert mit fixen Breiten

 

[Efchen]

wenn ich das ganze bei einer aufloesung von 1600*1024 programmiere und jemand mit einer aufloesung von 1024*800 meine anschaut wird es ja einen unterschied geben

Mit der Bildschirmauflösung hat das nichts zu tun, diese Größe ist für die Erstellung von Webseiten irrelevant. Einzig relevant ist die Größe des Viewports, also der Rest vom Fenster (das nicht maximiert sein muss!), der übrig bleibt, wenn man Fensterrahmen, Toolbars, Sidebars usw. wegnimmt.

Dabei von irgendeiner Größe auszugehen, ist reine Willkür, da jeder eine andere Größe haben kann und die Endgeräte zunehmend auch kleinere Bildschirme haben, auch solche, die nicht in die CSS-Kategorie "handheld" fallen.

Gruß,
-Efchen

 

[Mad Dog]

ja das stimmt danke.
meinte eigentlich, wenn ich meine seite FUER eine aufloesung von 1680 * 1024 programmiere sprich breite ist 1680 minus natuerlich irgendwelche browser raender etc. da wirds dann ja unterscheide geben wenn jemand mit 1024 * 800 meine seite anschaut!
hab mir jetzt ueberlegt erstmal das grundgeruest etc zu machen und dann alle pic und button etc fuer verscheidene aufloesungen zu erstellen!

gibt es eine moeglischkeit die aufloesung von jemanden rauszufinden der auf meine seite ghet und dann meine seite z.b doe 1680 * 1024 version anzeigt oder halt 1024 * 800???

danke

 

[Efchen]

meinte eigentlich, wenn ich meine seite FUER eine aufloesung von 1680 * 1024 programmiere sprich breite ist 1680 minus natuerlich irgendwelche browser raender etc. da wirds dann ja unterscheide geben wenn jemand mit 1024 * 800 meine seite anschaut!

Ja, aber um die Probleme zu bekommen, muss ich nicht meine Auflösung ändern. Ich kann meine Auflösung auf 1680x1024 lassen und einfach mein Browserfenster auf 1000x799 verkleinern und habe die selben Probleme.
Deswegen hat das nichts mit der Auflösung zu tun.

hab mir jetzt ueberlegt erstmal das grundgeruest etc zu machen und dann alle pic und button etc fuer verscheidene aufloesungen zu erstellen!

Zu welchem Zweck? Und für welche Auflösungen? Wie bestimmst Du, welche Menschen mit welcher Auflösung Menschen 1. Klasse sind und welche Menschen, weil sie eine Auflösung haben, die Du nicht berücksichtigt, Menschen 2. Klasse werden?

gibt es eine moeglischkeit die aufloesung von jemanden rauszufinden der auf meine seite ghet und dann meine seite z.b doe 1680 * 1024 version anzeigt oder halt 1024 * 800???

Ja, aber nur mit JavaScript. Und wenn das abgeschaltet ist, gehts gar nicht.
Aber zu welchem Zweck willst Du die Auflösung wissen? Nict umsonst kennt CSS keine Möglichkeit, auf die Auflösung zurückzugreifen - sie ist nicht relevant!

Ganz ehrlich, mich interessiert, welchen Gedanken Du verfolgst, wenn Du an die Auflösung denkst. Es gibt da wirklich eine Anwendung, bei der es theoretisch Sinn macht, auf die Auflösung zu reflektieren, aber das wäre ein Effekt, den eigentlich kaum jemand braucht, und ein Aufwand, den sich niemand machen würde, und gesehen hab ich das bisher auch noch nie.

Gruß,
-Efchen

 

[Mad Dog]

Ganz ehrlich, mich interessiert, welchen Gedanken Du verfolgst, wenn Du an die Auflösung denkst.

okay. also es gibt ja die ganz normale desktop aufloesung, die man ja selbst auswaehlen kann etc.
und in der aufloesung zeigt auch der browser die seiten an, also wenn ich eine aufloesung von 1024 * 800 habe, dann ist der browser von links nach rechts 1024 pixel breit (gut es gibt noch rahmen etc aber so ungefaehr).
Wenn ich jetzt irgendwas mittles css formatiere also sagen wir mal fuer 1024 * 800, wuerde ich ja darauf achten das kein element 1600 pixel breit ist, da es ja dann scroll balken gibt und man erst scrollen muss um den ganzen inhalt zu sehen.
klar noch unten hin spiel es keine rolle. internetseiten koennen ja "beliebig" lang nach unten hin sein.

wenn ich jetzt meine seite fuer eine aufloesung 1024 * 800 programmiet habe (sprich keine element ist breiter als 1024 pixel) und jemand mit einer hoeheren aufloesung greift auf meine seite zu dann ist das fuer den ja dann in dem sinne "zusammengerueckt" - in die mitte gerueckt und an der seite ist noch "platz".
wenn jetzt jemand aber mit einer aufloesung von 800 * 600 meine seite besucht wuerde es fuer denjenigen ja wieder scroll balken geben, was ich ja versuchen will zu verhindern.
ja das ist mein gedankengang hoffe ihr koennt den berichtigen. zu sagen ist noch das ich die formatierung mittels pixel angaben mache, sprich ein fixiertes layout.

 

[Körnerbrötchen]

Von einer Mindestbreite von ein paar hundert Pixeln darfst du aber ruhig ausgehen. ;)

 

[Lenchen]

Was Efchen meint ist glaub ich, dass du auch daran denken musst, dass nicht jeder immer den browser öffnet und über den ganzen Bildschirm aufhat. Häufig hat man ja 2 Dokumente gleichzeitig offen auf dem Bildschirm, z.B. das I-net für Recherche und eine Exeltabelle oder ein Word-Dokument um die Ergebnisse gleich eintragen zu können. Du kannst alle deine Größenangaben auch in % des Fensters angeben, so dass es nie zu horizontalen Scrollbalken kommt. Du kannst % und Pixelangaben auch mischen, was ich persönlich gerne mache, aber ich bin auch ziemlicher Anfänger. Probier doch einfach ein wenig rum, indem du einige Größen durch % ersetzt umd vergrößer, verkleiner dein Browserfenster und guck, was mit den Inhalten passiert.

 

[neuroleptika]

Für eine schön gestalte Seite braucht man zumindest eine Mindestbreite (min-width) und eine maximale Breite (max-width).
Das ist nicht nur schön sondern auch Benutzerfreundlich. Bei zu langen Zeilen verliert man schnell den nächsten Zeilenanfang. Bei zu kurzer Zeilenlänge wirkt der Text unübersichtlich.

Als guten Kompromiss habe ich für mich eine Mindestbreite in px und eine maximale Breite in em gewählt. Der Textzoom wirkt dann so ähnlich wie der Seitenzoom im ff3 oder Opera.

Für Seiten mit Inhalten fester Breite (größere, eingebundene Bilder / img) würde ich heute eine gemischte Variante wählen. Das erfordert aber etwas mehr css-Erfahrunng.
Für den Anfang ist es einfacher mit festen Breiten in px zu arbeiten.
Ca.900px finde ich in Zeitgemäß. Die wichtigsten Inhalte würde ich dann aber nicht auf der äußersten, rechten Seite platzieren.

Z.B. Eine Bildergallerie ganz ohne Breitenangan in px ist nur eingeschränkt möglich. Vor allem wenn man die Bider in best möglicher Qualität zeigen will.

Für tabellenlastige Seiten würde ich ein Layout in em-Breiten wählen.
(Tabellenzeilen lasen sich nicht umbrechen).

Grafisch aufgearbeitete Seiten arbeiten mit Hintergrundgrafiken. Eine uneingeschränkte Breite kann erheblichen Traffic verursachen (und dem entsrechend langsarm laden).

Dreispalter halte ich bei einer Gesamtbreite unter 900px nur eingeschränkt für praxistauglich.

Es kommt also auf die Inhalte und css-Erfahrung an, welches Layout am geeignetsten ist. Eine pauschale Antwort gibt es nicht.

 

[Efchen]

Das Auflösungsmärchen...

okay. also es gibt ja die ganz normale desktop aufloesung
und in der aufloesung zeigt auch der browser die seiten an, also wenn ich eine aufloesung von 1024 * 800 habe, dann ist der browser von links nach rechts 1024 pixel breit (gut es gibt noch rahmen etc aber so ungefaehr).

Nein. Das ist absolut falsch.

wenn ich jetzt meine seite fuer eine aufloesung 1024 * 800 programmiet habe (sprich keine element ist breiter als 1024 pixel) und jemand mit einer hoeheren aufloesung greift auf meine seite zu dann ist das fuer den ja dann in dem sinne "zusammengerueckt" - in die mitte gerueckt und an der seite ist noch "platz".

Nein, auch das ist falsch.

wenn jetzt jemand aber mit einer aufloesung von 800 * 600 meine seite besucht wuerde es fuer denjenigen ja wieder scroll balken geben, was ich ja versuchen will zu verhindern.

Das ist richtig.

ja das ist mein gedankengang hoffe ihr koennt den berichtigen. zu sagen ist noch das ich die formatierung mittels pixel angaben mache, sprich ein fixiertes layout.

Das ist keine gute Idee, so kann sich das Layout ja nicht dem verfügbaren Platz anpassen.

Also, zur Auflösung. So wie Du die Auflösung betrachtest, ist das eine für das Ersrtellen von Webseiten völlig irrelevante Größe.
Warum es falsch ist, dass der Browser bei einer Auflösungsbreite von 1024px auch 1024px breit ist?
1. Es ist völlig uninteressant wie breit der Browser ist, wichtig ist, wieviel Platz Du für Deine Website hast, und das sind nie 1024px. Nicht nur wegen des Fensterrahmens. Es gibt Browser, die erlauben Sidebars, wie z.B. die History in Firefox. Dann hast Du in der Breite deutlich weniger als 1024px. Ob das Deine Besucher so haben, kannst Du nicht wissen. Verlässt Du Dich aber auf 1024px Breite, hat der Nutzer Scrollbalken.
2. Wusstest Du, dass man Fenster nicht maximieren muss? Gerade mit größeren Bildschirmen/Auflösungen lohnt es sich, Browserfenster kleiner zu machen. Es kann also durchaus sein, dass Nutzer bei einer 1024er Auflösung ihren Browser nur z.B. 772px breit machen.
Du merkst, Du kannst Dich nicht auf die Auflösung verlassen, die sagt nichts darüber aus, wieviel Platz Du für Deine Website hast. Deswegen kann man mit CSS auch die Auflösung nicht auslesen - weil das irrelevant ist. Auch die Einheit "%" bezieht sich nie auf die Auflösung, sondern immer maximal auf den sog. Viewport, also den Platz, den Dir der Browser zur Verfügung stellt.

Warum es falsch ist, dass eine Website "zusammengerückt" ist, wenn jemand eine größere Auflösung hat?
Weil er sein Fenster nicht zwangsläufig auch wieder maximieren muss.

Natürlich wird aber der maximal zur Verfügung stehende Platz bei Verkleinerung der Auflösung auch kleiner. Aber jemand mit einer Aufösung von 1024x768 kann durchaus ein kleineres Browserfenster haben, als jemand mit einer Auflösung von 800x600.

Von einer Mindestbreite von ein paar hundert Pixeln darfst du aber ruhig ausgehen. ;)

Das erzählst Du mal einem Handy-Nutzer. Da sind glaub ich so Auflösungen wie 200x320px üblich.
Wenn man es perfekt macht (ist sicher ein gutes Stück Arbeit, klar), kann es einer Website egal sein, wieviel Platz zur Verfügung steht. Die meiste Arbeit macht ja der Browser, der die Elemente selbständig positioniert.

Gruß,
-Efchen

 

[Mad Dog]

vielen dank fuer eure hilfe!
habe ne bissle rumprobiert und es scheint auch so jetzt zu klappen!
nur habe ich jetzt ein problem!
Firefox zeigt mir alles so an wie ich es will!
aber der internet explorer mag das ganze gar nicht!
ich glaube auch woran es liegt, aber bin mir nciht sicher.
das hier ist die index.htm:

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title>Test</title>
<meta name="description" content="Test">
<meta name="keywords" content="Test">
<meta name="author" content="Mad Dog">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body bgcolor="#FFFFFF "link="#FF0000" alink="#FF0000" vlink="#FF0000" class="body">
<div class="banner">
banner
</div>
<div class="navi">
navi
</div>
<div class="main">
main
</div>
</body>
</html>

und das die layout.css:

.body {
font-size: 1em;
font-family: georgia, serif;
text-align: center;
background: #e6e6e6;
}
.banner {
position:absolute;
background-color:blue;
top:1%;
left:15%;
right:15%;
padding:1em;
}
.navi {
position:absolute;
background-color:red;
top:6.7%;
left:15%;
right:75%;
padding:1em;

}
.main {
position:absolute;
background-color:green;
top:6.7%;
left:25%;
right:15%;
padding:1em;
}

hier noch mal bilder dazu.
IE:
Kostenloser Bilder Upload Service - Gratis Bilder hochladen / uploaden ohne Anmeldung

FF:
Kostenloser Bilder Upload Service - Gratis Bilder hochladen / uploaden ohne Anmeldung

so wie es scheint mag der IE die absolute position mit den left right top und bottom angaben nicht!
das ist zumindest was ich vermute.

hoffe ihr koennte damit was anfangen.
gruss

 

[prm]

Zunächst kann der IE das CSS-Boxmodell nicht richtig darstellen, weil der Seite in der ersten Zeile der Doctype fehlt.

Die Klasse .body kommt nicht zum Tragen, weil sie nicht aufgerufen wird.
Wenn das für den body gelten soll, dann lass den vorangestellten Punkt weg.

Wozu die absoluten Positionierungen? Das kannst du viel besser mit ganz normalen margin-Werten und/oder float lösen.

Schließlich wäre es sinnvoll, den Elementen noch eine Breite zuzuweisen.