mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 18.04.2024 03:57 Benutzername: Passwort: Auto-Login

Thema: Css, Divs nacheinander platzieren. 100% Browserhöhe. Hilfe. vom 27.06.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Css, Divs nacheinander platzieren. 100% Browserhöhe. Hilfe.
Seite: Zurück  1, 2
Autor Nachricht
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: Männlich
Verfasst Fr 27.06.2008 17:51
Titel

Antworten mit Zitat Zum Seitenanfang

Ja das stimmt schon. Nur wollte ich versuchen alles auf das Nötigste zu beschränken, damit ihr hier nicht zu lange an _meinem_ Problem sitzt - ich hatte gehofft, dass sich damit der Rest für mich - von allein - erschließen würde *zwinker*

folgend zwei Bilder, die meinen Aufbau verdeutlichen sollen.

Bild 1: komplett ohne vertikalen Scrollbalken.
Bild 2: alles ab der unteren, schwarzen horizontalen Linie sollte erst druch "scrollen" sichtbar sein. dies soll die "variable" text-/contenthöhe verdeutlichen. wie man sieht sollen der linke graue kasten entsprechend mit vergrößert werden in der höhe, bis zum unteren rand wieder. genauso rechts die dünne schwarze linie.

eventuell kann mir nun jemand "genauer" helfen und ich hoffe das ist nicht zu dreist den "größeren" kontext nun hier zu erfragen *zwinker*

Danke euch allen!

Bild 1:



Bild 2:

  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 27.06.2008 18:11
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.google.de/search?q=faux+columns

Mehr brauchst du dazu nicht zu wissen, und CSS & HTML Grundlagenwissen muss vorhanden sein.

Im groben kann es dann also so aussehen.


Code:
<div id="head">head</div>
<div id="faux">
  <div>inhalt</div>
  <div>inhalt</div>
  <div>inhalt</div>
</div>


Das Element mit der Id "faux" erhält einen entsprechenden Hintergrund und das war´s.

Deine Erklärung zu Bild2 ist mir nicht so ganz verständlich, vllt sehe ich also auch etwas falsch.


Zuletzt bearbeitet von m am Fr 27.06.2008 18:15, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: Männlich
Verfasst Fr 27.06.2008 19:13
Titel

Antworten mit Zitat Zum Seitenanfang

ich krieg zu viel hier xD

Danke für den Link, damit kriege ich zumindest hin, dass die Linie (als Hintergrund) und der graue Kasten jeweils immer die gleiche Höhe haben. Aber mehr doch auch nicht, oder irre ich mich hier? Wie kann ich denn nun z.B. hinbekommen, dass die Höhe wirklich nuur bis zum unteren Browserrand geht? Oder habe ich da irgendetwas falsch verstanden (und auch umgesetzt).

Ich habe den Faux-div nun der alten Datei hinzugefügt:
http://www.deliciious.de/lcg/Test/Header_mit_Navi.html

Der Scrollbalken rechts ist ja immer noch da. Der soll aber in diesem Beispiel weg und ERST erscheinen, wenn der contentbereich zu voll wird, so dass notwendig gescrollt werden muss. Kann hier jemand helfen?

Danke euch!


PS:
Das zweite Bild ist so gemeint: Es befindet sich ja eine horizontale Linie im Bild (unten). Alles was darunter abgebildet ist soll den Zustand beschreiben, wenn der Content-Bereich (der Text) soooo lang ist, dass _notwendigerweise_ gescrollt werden muss. D.H. alles unter der "bildlichen" Linie würde man erst sehen, wenn man rechts den Scrollbalken des Browsers betätigt. Dementsprechend soll sich ja auch der graue Balken und die Linie (vertikal) rechts nach unten hin vergrößern. In Bild 1 ging sie ja NUR bis zu der horizontalen Linie bzw. bis zum Browserrand unten. In Bild2 wird aber nun der Content vergrößert --> man muss scrollen --> Balken + Linie sollen sich entsprechend auch vergrößern.


Zuletzt bearbeitet von deliciious am Sa 28.06.2008 19:03, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 27.06.2008 21:06
Titel

Antworten mit Zitat Zum Seitenanfang

Hab mich jetzt nich die 2 Seiten durchgewühlt, aber warum nicht einen div erstellen der komplett um alle andren geht und dem die Höhe 100% geben und overflow: auto; ?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: Männlich
Verfasst Fr 27.06.2008 21:45
Titel

Antworten mit Zitat Zum Seitenanfang

mhhhh ich glaube du hast tatsächlich recht und es war tatsächlich so einfach. ohman.
....genauso hätte ich es ja damals mit tables gemacht.. hätte nicht gedacht dass
dieselbe methode auch bei divs funktioniert - hatte irgendwie in erinnerung, dass
es nicht hingehauen hätte Grins naja.. Dank Dir !!!

hier die aktualisierung:
http://www.deliciious.de/lcg/Test/Header_mit_Navi.html

scheint doch zu funktionieren? (bis auf dem schrecklichen quellcode, an den ich
mich jetzt nochmal setzen kann Lächel)


Ich danke euch allen bislang!!! Hoffe ich irre mich nicht und es ist tatsächlich alles
funktionstüchtig bisher. Dank euch. Jetzt kann ich durchatmen Lächel hehe


Zuletzt bearbeitet von deliciious am Sa 28.06.2008 19:03, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: Männlich
Verfasst Sa 28.06.2008 04:27
Titel

Antworten mit Zitat Zum Seitenanfang

Ein Problem besteht nun noch (mindestens hehe).
Die unterschiedliche Darstellung in Firefox & Opera vs dem IE. Im IE wird die Navigation links mit riiiesen Abständen dargestellt und nimmt beinahe die doppelte Höhe ein im Vergleich zum FF oder Opera! Weiss jemand auf welche Definitionen der IE hier anders reagiert? (padding? margin? von diesen habe ich ja einige für die Navigation genutzt).

Kann ich irgendwie die Höhe der Navigation bzw. die Abstände der einzelnen Auflistungen so anpassen, dass sie in allen drei Browsern ähnlich dargestellt wird. Bislang ists im IE ja echtextrem, finde ich. Weiss jemand Rat? Lächel (Versteht man überhaupt, was ich meine?)

Danke euch!

Der Link nochmal:
http://www.deliciious.de/lcg/Test/Header_mit_Navi.html


Zuletzt bearbeitet von deliciious am Sa 28.06.2008 19:03, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Sa 28.06.2008 08:07
Titel

Antworten mit Zitat Zum Seitenanfang

deliciious hat geschrieben:
Kann ich irgendwie die Höhe der Navigation bzw. die Abstände der einzelnen Auflistungen so anpassen, dass sie in allen drei Browsern ähnlich dargestellt wird. Bislang ists im IE ja echtextrem, finde ich. Weiss jemand Rat? Lächel (Versteht man überhaupt, was ich meine?)


verwend mal die suche - reset styles wär das stichwort
  View user's profile Private Nachricht senden
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: Männlich
Verfasst Sa 28.06.2008 14:58
Titel

Antworten mit Zitat Zum Seitenanfang

mh.. hab jetzt gesucht und versucht.. aber entweder versteh ichs falsch oder es bringt mir nichts. hatte folgende definitionen nun hinzugefügt:

Zitat:

/* reset styles */
dl {margin: 0 0 0 0;}
dl dt {margin: 0 0 0 0;}
dl dd+dt {margin-top: 0;}
dl dd {margin: 0 0 0 0;}

ol {list-style: none;}
ol li {margin: 0 0 0 0;}
ol li ol {margin: 0 0 0 0;}
ol li ul {margin: 0 0 0 0;}

p {margin-bottom: 0em;}

ul {list-style: none;}
ul li {margin: 0 0 0 0;}
ul li ul {margin: 0 0 0 0; list-style: none;}
ul li ol {margin: 0 0 0 0;}
/* reset styles */


trotzdem ist die Darstellung in IE und FF/Opera riesen unterschiedlich.
Folgend zwei Bilder zur Verdeutlichung. Es geht, wie man sieht, nuuur um die Navigation links.








EDIT____
ich glaube ich habe das Problem gefunden. Sehr gut erklärt ist es auf folgender Seite (generell das Problem, dass Listenelemente im IE einfach größere Abstände haben als im FF oder Opera): http://blog.gungfu.de/archives/2004/07/21/einfrallemal-css-buttons-mit-internetexplorer/
Weist man dem Listenelement welches den Zustand des Links beschreibt (in meinem Beispiel: ul#Navigation a.red) eine definierte Breite zu, dann passen sich die Abstände im IE entsprechend des Ergebnisses im FF/Opera an. Warum auch immer. Zumindest klappt es scheinbar nun bei mir...


Zuletzt bearbeitet von deliciious am Sa 28.06.2008 15:12, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen HTML/CSS: DIV unten kleben AUSSER wenn Browserhöhe < Inhalt
Mit PHP Links nacheinander aufrufen (Per ID)
flashs nacheinander abspielen
mehrere swf-filme nacheinander laden
[JS] Fomulare nacheinander einblenden lassen
2 Flash Dateien nacheinander laufen lassen
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.