HTML-Grundgerüst mit CSS

[Luk.Online]

Hallo,
ich habe mir ein Grundgerüst mit CSS gebaut.
Leider funktioniert das noch nicht ganz.
Hinsichtlich der verschiedenen Auflösungen muss man ja manche Größenangaben in % angeben.
Jedoch passt das nicht ganz.

Luk.Online - Labor

Alle height-angaben ergeben zusammen 100%.
Wie hoch die einzelnen <div> sein sollen, will ich später genau anpassen.
Aber im groben stimmen die Angaben schon, doch die Umsetzung erfolgt falsch...
<div id="footer"></div> soll nur eine Zeile hoch werden.
Warum ist das so hoch? Er müsste doch theoretisch nur 1% des Bildschirms einnehmen... Außerdem soll die <div id="sidebar"></div> erst ab border-bottom vom header beginnen.

Wer kann mir meinen Fehler sagen???

Vielen Dank schonmal, Luk.

 

[prm]

Da kommen gleich mehrere Fehler zusammen:

Zum einen solltest du noch in der allerersten Quelltextzeile einen qualifizierten Doctype einfügen, damit der IE das CSS-boxmodell richtig anzeigen kann:

Dann hast du die Elemente absolut poitioniert und sie somit aus dem normalen Elementfluss genommen. Das ist nicht erforderlich und das sollte man auch bei deinem Layout vermeiden. Somit ordnet sich die Navi nicht unter dem Header an, sondern ebenfalls in der linken oberen Ecke.
Verzichte also auf sämtliche absoluten Angaben und arbeite besser mit float und margin.

Wenn du mit prozentualen Werten arbeitest, dann benötigen diese auch eine Basis, worauf sie sich beziehen können. Weise also html und body noch Höhen- und Breitenwerte von je 100% zu.

Schließlich:
So ganz exakt wird dein Modell dann auch nicht klappen, denn: Auch border- und padding-Werte haben bestimmte Höhen und Breiten. Sie führen nach dem CSS-Boxmodell dazu, dass die beabsichtigten 100% Gesamthöhe/-breite überschritten werden.
Das kannst du auch nicht exakt hinbekommen, denn Prozent und Pixel sind unterschiedliche Einheiten. Einen "gemeinsamen Nenner" gibt es deshalb nicht, weil (fast) jedes Bildschirmfenster eine andere Größe hat.

Überlege dir deshalb, ob du nicht besser ein fixes Layout verwendest. Flexible Layouts haben auch Nachteile, denn deine Seite sieht dann an jedem Bildschirm unterschiedlich aus, so dass die von dir an deinem Bildschirm gewohnten Proportionen verloren gehen können. Textzeilen werden bei größeren Viewports zu lang oder auch das Verhältnis Grafik zu Text kann ziemlich beeinträchtigt werden.

 

[Efchen]

Hinsichtlich der verschiedenen Auflösungen muss man ja manche Größenangaben in % angeben.

Die Auflösung des Bildschirms hat mit der Entwicklung eines Layouts nichts zu tun. Was entscheidend ist, ist die Größe des Viewports. Und der kann jede beliebige Größe haben. Ob 247x285 oder 725x991 oder 1671x756 ...

Er müsste doch theoretisch nur 1% des Bildschirms einnehmen...

Prozentuale Angaben in CSS beziehen sich nie auf die Größe des Bildschirms. Die ist nämlich irrelevant (s.o.) und CSS auch gar nicht bekannt.

Überlege dir deshalb, ob du nicht besser ein fixes Layout verwendest.

So ganz pauschal möchte ich das nicht stehen lassen. Alles hat irgendwie seine Vor- und Nachteile. Ich empfinde fixe Layouts aber als unangenehmer als flexible. In kleineren Viewports erzeugen fixe Layouts horizontale Scrollbalken, was beim Lesen von Texten immer ein extremer Nachteil ist.
Ich bin kein Designexperte, aber ich bin der Meinung, Web-Layouts sollten flexibel sein, denn das ganze Medium ist extrem flexibel. Ein Layout, das nicht mehr gut aussieht, wenn die Proportionen auf einem anderen Endgerät anders sind, ist IMHO nicht Web-fähig.
Irgendwas ist ohnehin immer auf jedem Rechner anders, ob es die Größe des Viewports ist, die verwendete Software, installierte Fonts, eingestellte Schriftgröße und und und...exakt gleich wird es nie auf allen Endgeräten aussehen. Dafür gibts zu viele Einstellungsmöglichkeiten und dazu sind die Geschmäcker der Menschen weltweit zu unterschiedlich.

Wahrscheinlich muss man aber alles mal durchprobieren, um zu sehen, was einem am besten liegt und was von den Besuchern am besten aufgenommen wird.

Grüße,
-Efchen

 

[Luk.Online]

und was ist jetzt die geläufigste grüße der viewports?

 

[Körnerbrötchen]

Diese Frage stellt sich erst gar nicht. Das sollte nicht wichtig für deine Site sein.

Grüße

 

[prm]

Das lässt sich nicht beantworten.
Ich persönlich nehme meist Breiten zwischen 800 und 950 px in der Hoffnung, dass die 800er Bildschirmauflösungen weitgehend ausgestorben sind und die meisten mindestens mit einer 1024er surfen.
Allerdings ist das wie bereits erwähnt nicht zwingend die Viewportgröße.
Wenn z.B. die Favoritenleiste geöffnet ist, wird's mit 950 auch zu knapp.

 

[Luk.Online]

also ich habe mal meine auflösung auf 1024x768 gestellt, die favoritenleiste und die tab-leiste geöffnet (firefox).
dann kam ich auf eine viewport-größe von 1024x560... die seite habe ich jetzt mit px werten, also statisch. da sollte alles reinpassen. und die 10 leute die 4 toolbars haben...wayne. die haben halt erstmal pech bis ich ne bessere lösung gefunden habe.

hier erstmal das ergebnis:
Luk.Online - Labor

jetzt aber noch eine frage:
habe <div id="website"></div> ja mit absolute und left, top:0 in die obere linke ecke gebunden. kann man es so machen, dass wenn jemand eine größere auflösung hat "website" zentriert wird?
bzw muss sie ja nicht mit absolute ausgerichtet werden bei 1024x768.. aber wie gehts anders?
könnte mir jemand nen code posen?
Vielen Dank!

 

[Efchen]

und was ist jetzt die geläufigste grüße der viewports?

Gibts nicht. Alle sind möglich. Deswegen bietet Dir CSS ja Einheiten wie "%", "em" oder "ex".

Ich persönlich nehme meist Breiten zwischen 800 und 950 px in der Hoffnung, dass die 800er Bildschirmauflösungen weitgehend ausgestorben sind

Wobei wir ja alle wissen, dass die Auflösung nicht maßgebend ist. Auch jemand mit 1600px in der Breite könnte seinen Browser auf nur 700px in der Breite aufziehen. Irgendeinen Grund dafür wird er schon haben.
Die EeePCs haben übrigens 800px oder 1024px in der Breite, hab ich neulich mal nachgesehen. Wobei ich glaube, dass viele auf max. 800px schalten, weil 1024 auf den kleinen Bildschirmen schon sehr klein ist.

Und Handys und PDAs haben in der Regel auch weniger als 800px in der Breite. Von aussterben kann also gar keine Rede sein. Wobei man hier ja zugegebenermaßen auf media="handheld" verweisen muss.

also ich habe mal meine auflösung auf 1024x768 gestellt, die favoritenleiste und die tab-leiste geöffnet (firefox).
dann kam ich auf eine viewport-größe von 1024x560.

Da hast Du ja dann keine Sidebars geöffnet. Auf die Höhe kommt es nämlich nicht so an, mehr auf die Breite.

da sollte alles reinpassen. und die 10 leute die 4 toolbars haben...wayne. die haben halt erstmal pech bis ich ne bessere lösung gefunden habe.

Sehr kurzsichtig von Dir. Viel von dem, was hier geschrieben wurde, hast Du wohl nicht verstanden - zugegeben, es ist auch was völlig anderes als Print-Design, da tun sich viele schwer mit.
Und letztendlich haben nicht die Leute Pech, bei denen die Anzeige schlecht ist, sondern Du. Zum einen verlierst Du dadurch Besucher, zum anderen darf man auch die Mundprpaganda nicht unterschätzen: "Was hältstn von der Site?" - "Nee, die ist Schrott, da ist die Anzeige völlig durcheinander".

hier erstmal das ergebnis:

Find ich grauenvoll, zumal das Ergebnis bei großen Viewports auch oben links in der Ecke klebt und mitten im Viewport der Scrollbalken steht.

kann man es so machen, dass wenn jemand eine größere auflösung hat "website" zentriert wird?

Auch wenn das noch immer nichts mit der Auflösung zu tun hat! kann man das natürlich. Nämlich ohne "position" und mit "margin: 0 auto".

Gruß,
-Efchen

 

[prm]

Zentriere #website danach Horizontale Zentrierung mit CSS
Du musst aber deine Seiten unbedingt dann noch mit einem doctype versehen, damit es auch im IE klappt.
Absolute Positionierung wie bereits empfohlen unbedingt weglassen.

 

[Luk.Online]

ich teste nochmal ein bisschen bzw versuche nochmal was dynamisches zu basteln.
geht body width und height 100% für prozentuale angaben in der seite?

ich schreib nochmal.

---------
EDIT:
habe jetzt nochmal mehr oder weniger gemischt gestaltet (dyn + stat).

Luk.Online - Labor
ich erklär mal meine gedankengänge...

1.HEADER
die höhe des headers ist nun mal wie sie ist --> statisch (der header soll noch anders werden - ist nur mal ein test...)
die breite ist 100%... is klar
2.SIDEBAR
die breite ist auch fest vorgegeben --> statisch
die höhe habe ich auf 100% (ist ja dynamisch) außerdem kann eh keiner den teil unter footer sehen...
3.FOOTER
-breite dynamisch - je nach auflösung
-höhe statisch - soll nur eine zeile beherbergen
4.CONTENT
da sidebar eine feste breite hat und header eine feste höhe, habe ich content absolut zwischen ihnen positioniert.

--> genau so soll das layout sein.

Mein einziges problem sind jetzt die scrollbalken. habe sie mal statisch so ausgerichtet, dass es zu 1280x800 passt. bei einer kleineren auflösung sind sie logischerweise nicht mehr zu sehen und bei einer größeren nicht am rand.

wie kann ich mir da behelfen???

Vielen Dank!!!

 

[Körnerbrötchen]

Die EeePCs haben übrigens 800px oder 1024px in der Breite, hab ich neulich mal nachgesehen. Wobei ich glaube, dass viele auf max. 800px schalten, weil 1024 auf den kleinen Bildschirmen schon sehr klein ist.

Das ist so nicht ganz korrekt. 800er Auflösungen werden auch bei Netbooks als Manko angesehen.

Grüße

 

[Efchen]

Das ist so nicht ganz korrekt. 800er Auflösungen werden auch bei Netbooks als Manko angesehen.

Es ist das, was an einem EeePC einstellbar war, 800 oder 1024 in der Breite. Nicht mehr und nicht weniger.
Und ich, der ich kleine Schrift bevorzuge, fand die 1024er schon ziemlich klein, daher bin ich überzeugt, dass viele nur 800 einstellen, auch wenn andere es als Manko ansehen.

-breite dynamisch - je nach auflösung
habe sie mal statisch so ausgerichtet, dass es zu 1280x800 passt. bei einer kleineren auflösung sind sie logischerweise nicht mehr zu sehen und bei einer größeren nicht am rand.

Nochmal: Mit der Auflösung hat das nichts zu tun.
Bei einem größeren Viewport stehen die Scrollbalken mitten im Viewport, was abscheulich aussieht, bei einem kleineren Viewport sind sie nicht mehr zu sehen, aber man kann dann auch nicht mehr scrollen (wenn man nicht eine Maus mit zwei Scrollrädern hat). Die Seite wird dadurch unbenutzbar! Das musst Du unbedingt ändern!

da sidebar eine feste breite hat und header eine feste höhe, habe ich content absolut zwischen ihnen positioniert.

Die Begründung verstehe ich nicht. Die Positionierung des Content hat mit dem Header nichts zu tun. Und wenn Du Deine Sidebar mit "float:left" versiehst, musst Du den Content gar nicht explizit positionieren, das macht der Browser für Dich. Das ist viel einfacher, als den Content mit position:absolute aus dem Fluß zu nehmen.

Mein einziges problem sind jetzt die scrollbalken.

Ich würde position:absolute, height und overflow rausnehmen, damit sich der Content an den Inhalt anpassen kann. Scrollbalken gibts dann auch nur für die gesamte Seite, wie man es erwarten würde.

 

[Luk.Online]

Die Begründung verstehe ich nicht. Die Positionierung des Content hat mit dem Header nichts zu tun. Und wenn Du Deine Sidebar mit "float:left" versiehst, musst Du den Content gar nicht explizit positionieren, das macht der Browser für Dich. Das ist viel einfacher, als den Content mit position:absolute aus dem Fluß zu nehmen.

ich meine damit dass sich die höhe des headers und die breite der navi eh nicht mehr ändern. deswegen kann man doch content absolute left top positionieren....

 

[Efchen]

ich meine damit dass sich die höhe des headers und die breite der navi eh nicht mehr ändern. deswegen kann man doch content absolute left top positionieren....

Nö. Deswegen braucht man den Content gar nicht zu positionieren. Vergiss anfangs das position:absolute. Viele Anfänger machen den Fehler zu glauben, das sei das ultimative Layoutmittel, das wäre das an CSS, was Layouten endlich zur Freude werden lässt. Aber dem ist nicht so. position:absolute ist ein komplexes Thema. Damit nimmst Du Elemente aus dem normalen Textfluss, der normalen Positionierung, die jeder Browser für Dich durchführt.

In normalen Layouts, wie auch Deinem, braucht man sowas nicht. Das einzige, was man da brauchen kann, ist "float", um Block-Elemente nebeneinander anzuordnen.

 

[Luk.Online]

ok, werde ich ändern.
aber nur bei content oder???

gibt es jetzt eine möglichkeit content mit so zu definieren dass es sich dynamisch anpasst und die scrollbalken immer an der seite sind?

 

[Luk.Online]

Ich habs!
absolut; left right top bottom angegeben und schon gehts automatisch bei allen auflösungen. ob mit oder ohne toolbar - SCHEIß-EGAL!!!

Vielen Dank!

Luk.Online - Labor

 

[Efchen]

Wie schon mehrmals gesagt, mit der Auflösung hat das nichts zu tun.
Bei meinen 1400+x px hab ich aber hässliche horizontale Scrollbalken.

Es funktioniert eben nicht so.

<h1 id="Header">Überschrift, auch als Bild mit alt-Attribut</h1>
<ul id="Sidebar">
  <li><a href="seite1.html">Seite 1</a></li>
  <li><a href="seite1.html">Seite 1</a></li>
  <li><a href="seite1.html">Seite 1</a></li>
</ul>
<div id="Content">
  <h2>Überschrift</h2>
  <p>Text</p>
</div>

body {
  font-family:sans-serif;
  font-size:100.01%;
}
h1#Header {
  height:100px;
  background-image:url(foo.jpg);
  font-size:1.5em;
}
ul#Sidebar {
  float:left;
  width:12em;
  font-size:1em;
}
div#Content {
  margin-left:13em;
  font-size:1em;
}

Klassisches zweispaltiges CSS-Layout mit Header oben drüber (ungetestet).

 

[Luk.Online]

habe body overflow von auto auf hidden gesetzt

und jetzt steht auch im stylesheet

html {
overflow: hidden;
}

jetzt läufts aber richtig^^

Luk.Online - Labor

EDIT:
------

Oder was meint ihr? Fehler bitte posten! Danke