Div 100% - nur nicht ganz

creative_one · 21.09.2010, 09:51

Hallo,

Habe folgendes Problem, hoffe Ihr könnt mir helfen:

http://baschd.vs120130.hl-users.com/Bild%202.png

http://baschd.vs120130.hl-users.com/Bild%203.png

Habe hier auf der Linken Seite einen DIV Balken, dieser soll auf 100% sein. Also wenn man die page mit einer höheren Auflösung betrachtet, das der Strich immer ganz (fast) nach unten geht.
Habe jetzt wie man sieht oben und unten ein Logo stehen. Nun wie bekomme ich es hin, dass ich den Balken scalieren kann, aber immer noch einen Abstand habe für die Logos?
Das Logo unten wird auch transparent sein.

Vielen Dank

fab · 21.09.2010, 10:09

Das Design sieht aus als würde der Inhalt selber nicht vertikal scrollen, wenn das so ist könntest du die Logos und den Balken absolut positionieren a la

Code:

.logo_top {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 50px;
}
.logo_bottom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 50px;
}
.line {
  position: absolute;
  left: 10px;
  top: 60px;
  bottom: 60px;
}

mquadrat · 21.09.2010, 15:04

Geraten würde ich sagen, du versucht einen Sticky Footer zu realisieren. In diesem Fall CSS Sticky Footer in Google eingeben und durchklicken.

Aber so ganz sicher was du meinst bin ich mir nicht. Was soll nun wie skalieren?

creative_one · 21.09.2010, 15:10

Die Linie auf der linken Seite soll immer von dem Logo oben zu dem Logo unten gehen. Und das bei jeder Bildschrimauflösung, sprich 100%. Der Rest der Seite und die Logos sind immer absolut.
Das Problem ist eben, dass die Linie ja nicht wirklich 100% haben soll, da es ja noch einen Abstand zu den Logos gibt.
Oben kann ich einen Abstand zu dem Logo definieren, da unten aber leider nicht funktioniert.

mquadrat · 22.09.2010, 09:52

Also ich würde den Strich mittels Hintergrundgrafik beim body machen und das Logo unten über Sticky Footer. Nachteil: Wenn der Inhalt länger als 100% wird, schiebt es den Footer nach unten aus dem Bild raus und zeigt entsprechend Schrollbars an.

Alternative Möglichkeit (Ich spinne gerade mal rum):
- Content div mit height 100%, overflow: auto, und einem padding oben unten, dass den Logobalken entspricht
- Logos jeweils auf einem div mit fixer Positionierung und größerem z-Index als der Content-Layer. Sowie einer margin rechts für den Scrollbalken.

Noch nie ausprobiert, also mit Vorsicht zu genießen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

21.09.2010, 09:51
creative_one Neuer Benutzer Registriert seit: 21.09.2010 Beiträge: 2 PHP-Kenntnisse: Anfänger	Div 100% - nur nicht ganz Hallo, Habe folgendes Problem, hoffe Ihr könnt mir helfen: http://baschd.vs120130.hl-users.com/Bild%202.png http://baschd.vs120130.hl-users.com/Bild%203.png Habe hier auf der Linken Seite einen DIV Balken, dieser soll auf 100% sein. Also wenn man die page mit einer höheren Auflösung betrachtet, das der Strich immer ganz (fast) nach unten geht. Habe jetzt wie man sieht oben und unten ein Logo stehen. Nun wie bekomme ich es hin, dass ich den Balken scalieren kann, aber immer noch einen Abstand habe für die Logos? Das Logo unten wird auch transparent sein. Vielen Dank


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.09.2010, 10:09
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Das Design sieht aus als würde der Inhalt selber nicht vertikal scrollen, wenn das so ist könntest du die Logos und den Balken absolut positionieren a la Code: .logo_top { position: absolute; left: 10px; top: 10px; height: 50px; } .logo_bottom { position: absolute; left: 10px; bottom: 10px; height: 50px; } .line { position: absolute; left: 10px; top: 60px; bottom: 60px; } __________________ PHP Blog + Library CSS Effects + Tools

21.09.2010, 15:04
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Geraten würde ich sagen, du versucht einen Sticky Footer zu realisieren. In diesem Fall CSS Sticky Footer in Google eingeben und durchklicken. Aber so ganz sicher was du meinst bin ich mir nicht. Was soll nun wie skalieren? __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

21.09.2010, 15:10
creative_one Neuer Benutzer Registriert seit: 21.09.2010 Beiträge: 2 PHP-Kenntnisse: Anfänger	Die Linie auf der linken Seite soll immer von dem Logo oben zu dem Logo unten gehen. Und das bei jeder Bildschrimauflösung, sprich 100%. Der Rest der Seite und die Logos sind immer absolut. Das Problem ist eben, dass die Linie ja nicht wirklich 100% haben soll, da es ja noch einen Abstand zu den Logos gibt. Oben kann ich einen Abstand zu dem Logo definieren, da unten aber leider nicht funktioniert.

22.09.2010, 09:52
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Also ich würde den Strich mittels Hintergrundgrafik beim body machen und das Logo unten über Sticky Footer. Nachteil: Wenn der Inhalt länger als 100% wird, schiebt es den Footer nach unten aus dem Bild raus und zeigt entsprechend Schrollbars an. Alternative Möglichkeit (Ich spinne gerade mal rum): - Content div mit height 100%, overflow: auto, und einem padding oben unten, dass den Logobalken entspricht - Logos jeweils auf einem div mit fixer Positionierung und größerem z-Index als der Content-Layer. Sowie einer margin rechts für den Scrollbalken. Noch nie ausprobiert, also mit Vorsicht zu genießen. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de