[HaBo]

DolphVS · 16.08.07, 15:53

Guten Tag,

Ich habe ein Problem mit der Höhe von Divs - und das schon seit ich versuche mich von Tabellen um zu gewöhnen :D.

Ich besitze in meinem HTML-Dokument zwei absolute Divs.
Das erste div hat den CSS Wert "top:0px;" und "height: 100px;".
Das zwete div hat "top: 100px;" und "height: 100%".

Das problem ist nun, dass das Div 100px über den Browserrand überschreitet.
Ich habe es bereits mit margin-bottom oder anstatt "height: 100%;" mit "bottom: 0px;" versucht. Aber nichts funktioniert zufriedenstellend .

Der erste div braucht eine Feste höhe - da es ein Bild besitzt.
Das zweite div muss genau bis zum Ende der Seite kommen.

Ich hoffe es kann mir jemand helfen .

Herzlichen Dank.

Gruss

Eydeet · 16.08.07, 16:21

Das ist echt mal ein interessantes Problem. Man kann es zwar durch einige hässliche Hacks lösen (siehe unten), aber das ist ja auch nicht wirklich das Wahre.

Vielleicht weiß ja hier jemand hier im Forum, wie man das schöner hinbekommt.

Also, hier der Hack: Ich habe einfach das zweite Div nach oben (top:0) gesetzt, und ein drittes DIV mit einer Höhe von 100px in das Zweite hineingesetzt, damit der Text nach unten rutscht.

Code:

<style>
.div1 {
position: absolute;
top: 0;
height:100px;
}
.div2 {
position: absolute;
top: 0;
height:100%;
}
.divFill {
height: 100px;
position: relative;
left: -1000px;
}
</style>
<div class="div1">Div 1</div>
<div class="div2">
  <div class="divFill"></div>
  Div 2
</div>

Anzeige

- Anzeige -

DolphVS · 16.08.07, 16:57

Hey, danke für den Lösungsvorschlag.
Wir haben nur das Problem das unsere Divs muster enthalten...
Wir habens im moment mit

Code:

bottom: 0px;

notgelöst, aber das div schneidet sich dann einfach ab---
Schau es dir am besten selbst an:
www.sosindwir.de/webhorse/

Hoffe ihr könnt mir helfen....

Edit:
Sorry hatten grad nen kleinen Fehlern, die page kann man jetzt anschauen....

BigDevil · 16.08.07, 17:03

Hast du schon mal überlegt dem oberen Div auch eine Prozentangabe zu geben.Div1 machst du 10% und Div2 90%.Natürlich beides mit margin-top und margin bottom 0px.So hat dein Layout eine höhe von 100%.

Das hat den Vorteil,dass deine Seite auch bei höheren Auflösungen gut aussieht.Mit px Angaben hat man immer ein paar Probleme bei den unterschiedlichen Auflösungen.

boehmi · 16.08.07, 18:28

Zitat:

Original von BigDevil
Hast du schon mal überlegt dem oberen Div auch eine Prozentangabe zu geben.Div1 machst du 10% und Div2 90%.Natürlich beides mit margin-top und margin bottom 0px.So hat dein Layout eine höhe von 100%.

Das hat den Vorteil,dass deine Seite auch bei höheren Auflösungen gut aussieht.Mit px Angaben hat man immer ein paar Probleme bei den unterschiedlichen Auflösungen.

mh...

Zitat:

Original von DolphVS
Der erste div braucht eine Feste höhe - da es ein Bild besitzt.

oder hab ich da was falsch verstanden?

DolphVS · 16.08.07, 18:59

@boehmi: Neine hast du richtig verstanden. deswegen gehen prozentangaben nicht, da das Bild dann komplett verzogen ist!

@BigDevil: Danke für den Vorschlag, aber aus dem Grund den boehmi auch zitiert hat geht das leider nicht, da das Bild dann komplett verzogen ist!

valenterry · 16.08.07, 19:07

Poste doch mal die entsprechende Seite. Solche Ratespiele sind doof.

DolphVS · 16.08.07, 19:11

Irgendwie kann ich nicht schreiben oder ihr nicht lesen:
@valenterry:
siehe meine letzten posts und du findest das hier:

Zitat:

Hey, danke für den Lösungsvorschlag.
Wir haben nur das Problem das unsere Divs muster enthalten...
Wir habens im moment mit

Code:

bottom: 0px;

notgelöst, aber das div schneidet sich dann einfach ab---
Schau es dir am besten selbst an:
www.sosindwir.de/webhorse/

Hoffe ihr könnt mir helfen....

Edit:
Sorry hatten grad nen kleinen Fehlern, die page kann man jetzt anschauen....

Ratespiel: Finde die URL!

BigDevil · 16.08.07, 19:42

Ich hab es schon gesehen,ich hab mich nur falsch ausgedrückt.Ich hätte schreiben sollen "trotzdem Prozentangaben zu benutzen".

Es sieht einfach blöd aus,wenn bei höheren Auflösungen oben ein 100px hohe Grafik ist.Sie wirkt dann etwas mickrig.Sollte man dann auch noch eine width Angabe in % haben,wird die Grafik gestreckt.Denn dann hat man für die Höhe eine feste Größe und die Breite hat eine fliessende Größe.

valenterry · 16.08.07, 19:45

Gefunden!

Zuerstmal: du hast dich vertippt und "margin: autp" statt "margin: auto" geschrieben. Außerdem sollte dir klar sein, dass der IE damit seine Probleme hat.
Generell frage ich mich aber, warum du es dir so schwer machst. Entweder man erstellt seine Seite mit einer flexiblen Breite (was aufwendig ist) oder mit einer Festen. Wenn du dir schon die feste Breite ausgesucht hast, dann mach es dir leicht, erstell eine große Grafik (als Hintergrund) mit 2 <div>s, die du absolut positionierst. (eins für die Navi und eins für den Content)

BigDevil · 16.08.07, 20:00

Zitat:

Original von valenterry
Zuerstmal: du hast dich vertippt und "margin: autp" statt "margin: auto" geschrieben. Außerdem sollte dir klar sein, dass der IE damit seine Probleme hat.

Gibt es etwas mit das der keine Probleme hat?

Aber deine Lösung ist auch nicht schlecht.Wieso eine fliessende Höhe benutzen,wenn man eine feste Breite hat?

BasicAvid · 16.08.07, 21:04

Schonmal was von float gehört? Da würde ich mal ansetzen. Ach ja, und dazu dann noch clear: both; benutzen und alles wird gut. Zum Zentrieren der Seite kannst Du z.B. margin: 20px auto; benutzen. Wobei der erste Wert den Abstand oben und unten angibt, der zweite den linken und rechten Abstand.

Eydeet · 16.08.07, 22:08

Zitat:

Original von BasicAvid
Zum Zentrieren der Seite kannst Du z.B. margin: 20px auto; benutzen.

Zum Zentrieren gibt es auch noch nen alten Trick. Der Vorteil dabei ist, dass selbst uralte Browser ihn verstehen. Das Ganze funktioniert so:

Code:

#box {
  width: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -250px; <-- Hälfte von 500px
}

@DolphVS: Ich würde an deiner Stelle nicht mit height:100% arbeiten, sondern den Balken je nach Länge des Inhalts größer oder kleiner werden lassen.

Bloody2k · 17.08.07, 08:33

Zitat:

padding-bottom:10px;

Wie siehts den damit aus? Wenn du das an das ende der unteren Container schreibst schneidet ers auchnet ab

Anzeige

- Anzeige -

16.08.07, 15:53	#1 (permalink)
DolphVS Registriert seit: 20.05.05 Likes: 0	DIVs zu hoch bei 100% Anzeige Guten Tag, Ich habe ein Problem mit der Höhe von Divs - und das schon seit ich versuche mich von Tabellen um zu gewöhnen :D. Ich besitze in meinem HTML-Dokument zwei absolute Divs. Das erste div hat den CSS Wert "top:0px;" und "height: 100px;". Das zwete div hat "top: 100px;" und "height: 100%". Das problem ist nun, dass das Div 100px über den Browserrand überschreitet. Ich habe es bereits mit margin-bottom oder anstatt "height: 100%;" mit "bottom: 0px;" versucht. Aber nichts funktioniert zufriedenstellend . Der erste div braucht eine Feste höhe - da es ein Bild besitzt. Das zweite div muss genau bis zum Ende der Seite kommen. Ich hoffe es kann mir jemand helfen . Herzlichen Dank. Gruss

16.08.07, 16:21	#2 (permalink)
Eydeet Registriert seit: 14.04.06 Likes: 4	Das ist echt mal ein interessantes Problem. Man kann es zwar durch einige hässliche Hacks lösen (siehe unten), aber das ist ja auch nicht wirklich das Wahre. Vielleicht weiß ja hier jemand hier im Forum, wie man das schöner hinbekommt. Also, hier der Hack: Ich habe einfach das zweite Div nach oben (top:0) gesetzt, und ein drittes DIV mit einer Höhe von 100px in das Zweite hineingesetzt, damit der Text nach unten rutscht. Code: <style> .div1 { position: absolute; top: 0; height:100px; } .div2 { position: absolute; top: 0; height:100%; } .divFill { height: 100px; position: relative; left: -1000px; } </style> <div class="div1">Div 1</div> <div class="div2"> <div class="divFill"></div> Div 2 </div>

16.08.07, 16:57	#3 (permalink)
DolphVS Themenstarter Registriert seit: 20.05.05 Likes: 0	Hey, danke für den Lösungsvorschlag. Wir haben nur das Problem das unsere Divs muster enthalten... Wir habens im moment mit Code: bottom: 0px; notgelöst, aber das div schneidet sich dann einfach ab--- Schau es dir am besten selbst an: www.sosindwir.de/webhorse/ Hoffe ihr könnt mir helfen.... Edit: Sorry hatten grad nen kleinen Fehlern, die page kann man jetzt anschauen....

16.08.07, 21:04	#12 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	Schonmal was von float gehört? Da würde ich mal ansetzen. Ach ja, und dazu dann noch clear: both; benutzen und alles wird gut. Zum Zentrieren der Seite kannst Du z.B. margin: 20px auto; benutzen. Wobei der erste Wert den Abstand oben und unten angibt, der zweite den linken und rechten Abstand. __________________ Mfg Basic Avid - Use it or be used! -

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

16.08.07, 17:03	#4 (permalink)
BigDevil Registriert seit: 25.07.07 Likes: 0	Hast du schon mal überlegt dem oberen Div auch eine Prozentangabe zu geben.Div1 machst du 10% und Div2 90%.Natürlich beides mit margin-top und margin bottom 0px.So hat dein Layout eine höhe von 100%. Das hat den Vorteil,dass deine Seite auch bei höheren Auflösungen gut aussieht.Mit px Angaben hat man immer ein paar Probleme bei den unterschiedlichen Auflösungen.

16.08.07, 18:59	#6 (permalink)
DolphVS Themenstarter Registriert seit: 20.05.05 Likes: 0	@boehmi: Neine hast du richtig verstanden. deswegen gehen prozentangaben nicht, da das Bild dann komplett verzogen ist! @BigDevil: Danke für den Vorschlag, aber aus dem Grund den boehmi auch zitiert hat geht das leider nicht, da das Bild dann komplett verzogen ist!

16.08.07, 19:07	#7 (permalink)
valenterry Registriert seit: 25.07.06 Likes: 0	Poste doch mal die entsprechende Seite. Solche Ratespiele sind doof.

16.08.07, 19:42	#9 (permalink)
BigDevil Registriert seit: 25.07.07 Likes: 0	Ich hab es schon gesehen,ich hab mich nur falsch ausgedrückt.Ich hätte schreiben sollen "trotzdem Prozentangaben zu benutzen". Es sieht einfach blöd aus,wenn bei höheren Auflösungen oben ein 100px hohe Grafik ist.Sie wirkt dann etwas mickrig.Sollte man dann auch noch eine width Angabe in % haben,wird die Grafik gestreckt.Denn dann hat man für die Höhe eine feste Größe und die Breite hat eine fliessende Größe.

16.08.07, 19:45	#10 (permalink)
valenterry Registriert seit: 25.07.06 Likes: 0	Gefunden! Zuerstmal: du hast dich vertippt und "margin: autp" statt "margin: auto" geschrieben. Außerdem sollte dir klar sein, dass der IE damit seine Probleme hat. Generell frage ich mich aber, warum du es dir so schwer machst. Entweder man erstellt seine Seite mit einer flexiblen Breite (was aufwendig ist) oder mit einer Festen. Wenn du dir schon die feste Breite ausgesucht hast, dann mach es dir leicht, erstell eine große Grafik (als Hintergrund) mit 2 <div>s, die du absolut positionierst. (eins für die Navi und eins für den Content)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 divs neben einander	b4ck	(Web-) Design und webbasierte Sprachen	5	26.06.09 21:52
2 Divs nebeneinander XHTML 1.0 STRICT	AaFreak	(Web-) Design und webbasierte Sprachen	2	16.04.09 20:40
wie hoch ist die sicherheit mit 2 hardwarefirewalls?	tim20	(In)security allgemein	10	27.06.08 00:16
Computersucht hoch ?	PC Freak	Fun Section	8	15.12.06 15:32
PC fährt nicht hoch!	BlackHawk	Die Problemzone	3	17.12.04 10:30

[HaBo]

DIVs zu hoch bei 100%