Elementgrößen je nach Bildschirmauflösung

[AukeArts]

Guten Tag zusammen.

Ich möchte mir gerne ein eigenes Portfolio machen. Zu diesem Zweck soll die Seite größenskalierbar sein. Soll heißen, wenn der Monitor 1600 Pixel in die Breite geht, ist auch das das Navigationsdiv so breit. Wenn der Monitor allerdings kleiner ist, soll die Navigation im Navigationsdiv nur zur Seite rutschen. Ich hoffe ich konnte es so gut erklären, wie ich es im Grunde meine. Ich denke es ist auch nichts wirklich schwieriges, jedoch weiß ich nicht wonach ich suchen soll.

Ein gutes Beispiel hierfür ist die Seite von der Zeche Zollverein.



...auch wenn diese sicherlich auch noch ein bissel Java und evtl. Flash intus hat.

Mit freundlichen Grüßen,
AukeArts

 

[wallpaperchen]

AW: Elementgrößen je nach Bildschirmauflösung

kannst du nicht einfach alle Größenangaben in Prozent machen???

 

[cebito]

AW: Elementgrößen je nach Bildschirmauflösung

... Wenn der Monitor allerdings kleiner ist, soll die Navigation im Navigationsdiv nur zur Seite rutschen...

Ein gutes Beispiel hierfür ist die Seite von der Zeche Zollverein.

Da rutscht nischt zur Seite, keine Ahnung was du meinst.
Wenn du ab einer bestimmten Viewportgröße andere Styles benötigst, schau dir mal die CSS3-Mediaqueries an. http://www.w3.org/TR/css3-mediaqueries/#width

 

[AukeArts]

@ wallpaperchen

Du hast verdammt recht. Da hätte ich ja eigentlich auch selbst drauf kommen können.
Wobei dort nicht vergessen werden darf, dass im CSS html, body noch margin:0 und padding: 0 angegeben werden muss, weil sonst unschöne Ränder entstehen.

Danke

@cebito
Nein, dass meinte ich nicht, aber denoch danke. Jetzt weiß ich auch wie ich das ganze zu nennen haben. Viewport .

PS: Auf der Zeche Zollverein Seite kann man es wirklich nicht gut erkennen, da man dort nicht die Möglichkeit hat, in die Seite rein und raus zu zoomen. Wenn man nicht gerade zwei Monitor mit unterschiedlichen Größen hat, sieht man das nicht.

Mit freundlichen Grüßen,
AukeArts

So. Nochmal. Neues, altes Problem. Ich möchte das der Inhaltsbereich so groß wie möglich ist. Allerdings kann ich das ja nicht mit 100% regeln.

 

[cebito]

AW: Elementgrößen je nach Bildschirmauflösung

Wäre ja interessant zu wissen, was links neben "relativ zum head..." passiert. Sonst kannst dir deine ganzen Prozentangaben schenken, da Blockelemente von Hause aus 100% der verfügbaren Breite einnehmen, solange du es ihnen nicht anders vorgibst.

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

...was soll den links neben dem "relativ zum head" passieren ? Da ist der Monitor zuende bzw. das Fenster des Internetbrowsers.

Die Seite kann man sich im Grunde wie einen Stapel vorstellen. Die divs gehen unendlich in die Breite und die Höhe ist bei 3 von 4 divs auch gegeben. Bei dem zweiten div (content /"relativ zum...") soll die Höhe relativ sein. Je nach Auflösung des heimischen Computers.

 

[cebito]

AW: Elementgrößen je nach Bildschirmauflösung

Soll heißen, wenn der Monitor 1600 Pixel in die Breite geht, ist auch das das Navigationsdiv so breit. Wenn der Monitor allerdings kleiner ist, soll die Navigation im Navigationsdiv nur zur Seite rutschen.

Bei dem zweiten div (content /"relativ zum...") soll die Höhe relativ sein.

Warum sagst du das nicht gleich? Dein Eingangspost lässt vermuten, dir gehts um die Breite.

Sonst wären auch mehr Infos Hilfreich, wenn sich nur die Hintergrundfarbe bis unten ziehen soll -> gib sie dem body, wenn es wie auf dem Bild sein soll, lässt sich das mit Hintergrundbildern für body, head und navi lösen.

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

Da gibt es eigentlich nicht viel weiteres zu erzählen. Die Seite wird eben in 4 "Stapelblöcken" aufgeteilt. Der obere Balken dient für ein paar Icons etc.

Der Balken, der größte der sich darunter befindet, wird dann ein "Image Slideshow Gedöns" beinhalten, da ich nur meine Bilder auf dieser Seite vorstellen möchte... ggf. auch Videos.

Dieses "Image Slideshow Gedöns" verbreitert sich dann auch je nachdem, wie groß der Monitor ist. Die Slideshow soll sich allerdings nicht in die Höhe verändern, sonder nur in die Breite. Wenn jedoch der div, durch den Monitor mehr in die Höhe geht, soll die Slideshoh im unteren Bereiches des div bleiben und seine Höhe behalten.

Die anderen divs, welche sich unter dem "Image Slideshow Gedöns" div liegen, sollen alle eine geregelte höhe haben und 100% in die Breite gehen.

Ich hoffe ich konnte mit meiner, naja etwas schlechteren Beschreibung, Licht ins Dunkel bringen.

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

Schade. Die Antwort weiß wohl keiner .

...oder doch ? =D

 

[passy]

AW: Elementgrößen je nach Bildschirmauflösung

Tach^^

Also ich bin ehrlich, ich verstehe kaum was du sagen willst aber wenn du was links bündig haben willst nehme ich in den meisten fällen " float:left; ", was eigentlich auch immer funzt

Am besten guckst du mal hier http://www.css4you.de/ da wird dir auch alles erklärt =)

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

Danke schonmal, auch wenn ich das garnicht erfragt habe

Also, ich versuche es nocheinmal in ein paar Sätzen zu erklären.

Es gibt 4 divs.
Alle 4 divs gehen zu 100% in die Breite.
3 von 4 divs haben eine festgelegte Größe (Breite 100 %, Höhe XXX px)
Das div, welche keine hat geht zu 100% sowohl in die Breite, als auch in die Höhe; allerdings sollen die anderen divs, welche eine feste Höhe haben, NICHT aus dem Bildschirm verschwinden. Ich möchte keinen Scrollbalken erzeugen.

Jetzt sollte es glaube ich verständlich sein. Dies ist mein Hauptproblem.

Mit freundlichen Grüßen,
AukeArts

 

[passy]

AW: Elementgrößen je nach Bildschirmauflösung

Okay das ist verständlicher ^.^
Soll dann DIV 4 unter DIV 1,2 & 3 liegen?

grobes beispiel:

<div id="DIV4">

<div id="DIV1"></div>
<div id="DIV2"></div>
<div id="DIV3"></div>

</div>

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

<div id="DIV1"></div> (feste höhe, 100% breit)
<div id="DIV2"></div> (100% hoch soviel wie eben möglich, 100% breit)
<div id="DIV3"></div> (feste höhe, 100% breit)
<div id="DIV4"></div> (feste höhe, 100% breit)

 

[passy]

AW: Elementgrößen je nach Bildschirmauflösung

So!?

DIV2 passt sich in dem fall an den inhalt an!





Uploaded with

 

[AukeArts]

AW: Elementgrößen je nach Bildschirmauflösung

Danke schonmal für deine Hilfe passy, aber...

Da bräuchte man doch nicht die 100% Angabe in die Höhe. Der Container, sofern keine Größenangabe vorhanden ist, wird ja immer so groß wie der Inhalt, oder ?

Das Portfolio soll halt immer Monitorfüllend sein. Wenn das "Imageslideshow Gedöns" nur 700px hoch ist, ist das div auch nur 700px hoch. Auch bei einem Monitor, der was weiß ich 1200px in die Höhe geht. Das soll das div aber nicht. Wenn es noch genug Platz nach oben gibt, soll das div auch nutzen. Das "Imageslideshow Gedöns" wird davon aber nicht betroffen sein. Diese befindet sich immer am unteren Rand des divs.