zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hintergrund wird abgeschnitten - 100% height..das alte uebel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.03.2012, 01:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.03.2012
Beiträge: 3
skitt befindet sich auf einem aufstrebenden Ast
Standard hintergrund wird abgeschnitten - 100% height..das alte uebel

hallo leute,

hab mich jetzt mehrere stunden mit dem problem beschaeftigt, dass die seite nicht auf 100% gezogen wird. bin ja schon geduldig, aber mittlerweile bin ich an dem punkt angekommen, an dem ich irgendwas kaputtmachen koennte...

ich weiss einfach nicht, was ich falsch mache, bzw. ob ich irgendwas uebersehe.

hier mal ein bild:
Imageshack - zwischenablage01bt.jpg

wie man sieht hoert der bg ploetzlich auf, obwohl der content viel laenger ist :/
der wrapper sollte richtig sein. die untergeordneten divs sollten sich, wenn ich das richtig gemacht habe, ja eigentlich an die hoehe des wraps anpassen, aber wollen sie nicht :/ ich koennte natuerlich auch den hintergrund bis zum gehtnichtmehr nach unten hin vergroessern, weil der 30-40pixel weiter unten sowieso ausfaded, aber das ist ja nun auch nicht so die optimale loesung.

hier der css:

Code:
html, body { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height:100%;
	background:url(img/bg_global.gif);
	margin:0;
	padding:0;
}


#wrapper {
	float:left;
	background:url(img/bg.jpg) no-repeat; 	
	width: 1000px; 
	min-height: 100%; 
	height:auto !important;
	height:100%;
	overflow: hidden !important;
	border-right:#000000 1px solid; 
}

#content {
	position:absolute;
	left: 310px;
	top: 100px;
	height:auto;
	width: 680px;
}
#content_head {
	position:absolute;
	left:8px;
}
#content_main {
	position:absolute;
	top: 95px;
}

#footer {
	clear: both;
}
	
#nav {
	width:100%;
	height: 747px;
	float:left;
	background:url(img/left.gif) no-repeat;
	margin: 0;
}
#menucontainer {
	position:absolute;
	top:200px;
}
#menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 14.4em;
}
#menu li {
	font-size: 80%;
	margin: 0;
	padding: 0;
}
#menu a {
	background:	url(img/bg_glob.gif);
	border-left: 4px solid #FF0;
	color: #000;
	display: block;
	margin: 0;
	padding: 5px 12px;
	margin-bottom:4px;
	text-decoration: none;
	font-weight: normal;
}
#menu a:hover {
	background:	url(img/bg_glob.gif);
	color: #000;
	margin-bottom:4px;
	text-decoration: none;
	font-style:italic;
}
und der html-code:
HTML-Code:
<body>
<div id="wrapper">
    	<div id="nav">
       	  <div id="menucontainer">
            <ul id="menu">
    <li><a href="#" target="_self">Unternehmen</a></li>
    <li><a href="#" target="_self">Leistungen</a></li>
    <li><a href="#" target="_self">Projekte</a></li>
    <li><a href="#" target="_self">Referenzen</a></li>
    <li><a href="#" target="_self">Partner</a></li>
    <li><a href="#" target="_self">Kontakt</a></li>
    <li><a href="#" target="_self">Impressum</a></li>        
    		</ul>
          </div>
      	</div>

    <div id="content">
    	<div id="content_head"><h1>&Uuml;berschrift</h1></div>
    	<div id="content_main">

  <br />
  <strong>Haftungshinweis:</strong><br />
  <br />
        Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die  Inhalte externer Links. Für 

den Inhalt der verlinkten Seiten sind  ausschließlich deren Betreiber verantwortlich.<br />
  <br />
        Wir übernehmen keinerlei Gewähr für die Aktualität,  Korrektheit, Vollständigkeit oder Qualität der 

bereitgestellten Informationen.  Haftungsansprüche gegen uns, welche sich auf Schäden materieller oder ideeller  

Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen  Informationen bzw. durch die Nutzung 

fehlerhafter und unvollständiger  Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern  

gesetzlich nicht zwingend gehaftet wird.<br />
  <br />
        Alle Angebote sind freibleibend und unverbindlich. Wir behalten uns  ausdrücklich vor, Teile der Seiten 

oder das gesamte Angebot ohne gesonderte  Ankündigung zu verändern, zu ergänzen, zu löschen oder die 

Veröffentlichung  zeitweise oder endgültig einzustellen.</p>
      <p>Wir übernehmen keine Verantwortung für die Inhalte fremder  Angebote. Seiten, auf die wir durch externe 

Links unmittelbar verweisen, werden  von uns vor dem Setzen des Links sorgfältig ausgewählt.<br />
      </p>
      <p>Auf spätere Änderungen von unmittelbar verlinkten  Seiten sowie auf Inhalte nachfolgender Seiten fremder 

Angebote haben wir jedoch  keinen Einfluss.<br />
        Wir distanzieren uns daher ausdrücklich von späteren Änderungen unmittelbar  verlinkter Seiten, den 

Inhalten auf nachfolgenden Seiten sowie deren Anbietern.    </p>
      <p>Auf spätere Änderungen von unmittelbar verlinkten  Seiten sowie auf Inhalte nachfolgender Seiten fremder 

Angebote haben wir jedoch  keinen Einfluss.<br />
        Wir distanzieren uns daher ausdrücklich von späteren Änderungen unmittelbar  verlinkter Seiten, den 

Inhalten auf nachfolgenden Seiten sowie deren Anbietern.    </p>
      <p>Auf spätere Änderungen von unmittelbar verlinkten  Seiten sowie auf Inhalte nachfolgender Seiten fremder 

Angebote haben wir jedoch  keinen Einfluss.<br />
        Wir distanzieren uns daher ausdrücklich von späteren Änderungen unmittelbar  verlinkter Seiten, den 

Inhalten auf nachfolgenden Seiten sowie deren Anbietern.    </p>
      <p>Auf spätere Änderungen von unmittelbar verlinkten  Seiten sowie auf Inhalte nachfolgender Seiten fremder 

Angebote haben wir jedoch  keinen Einfluss.<br />
        Wir distanzieren uns daher ausdrücklich von späteren Änderungen unmittelbar  verlinkter Seiten, den 

Inhalten auf nachfolgenden Seiten sowie deren Anbietern.    </p>
   	  </div>

 </div>
<div id="footer"><!--Clear-Div--></div>
</div>
</body>
</html>
hab die unwichtigen sachen rausgeloescht (p, h1..etc)
das background-image im #wrapper ist das, welches unterbrochen wird.
das haupthintergrund ist im html, body festgelegt und kann nicht geaendert werden.

ich hoffe, ich habe alles wichtige mitgeteilt und ihr koennt mir bei diesem problem helfen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2012, 19:17
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von skitt Beitrag anzeigen
wie man sieht hoert der bg ploetzlich auf, obwohl der content viel laenger ist :/
Wieso sollte es? Absolut positionierte Elemente werden von keinem anderen Element umschlossen.

Zitat:
Zitat von skitt Beitrag anzeigen
der wrapper sollte richtig sein. die untergeordneten divs sollten sich, wenn ich das richtig gemacht habe, ja eigentlich an die hoehe des wraps anpassen, aber wollen sie nicht :/
Dein Aufbau ist mMn zu kompliziert (außerdem hast du sehr viele Eigenschaften vergeben,deren Sinn sich mir nciht erschließt). Bedenke: weniger ist mehr.

Es reicht, wenn #wrapper seitliche Innen- oder Außenabstände besitzt. Dann kannst du:
  • #wrapper relativ positionieren und musst nur das Menü absolut in den seitlichen Abstand hineinpositionieren, oder
  • du floatest das Menü und schiebst es in den seitlichen Abstand hinein (mit negativen margins).

Zitat:
Zitat von skitt Beitrag anzeigen
ich hoffe, ich habe alles wichtige mitgeteilt und ihr koennt mir bei diesem problem helfen.
Wichtig ist auch, was vor dem body-Element steht (und zwar alles davon). Eine Testseite wäre noch besser. Aber ich hab den fehlenden Teil jetzt einfach mal mit Standardwerten ausgefüllt und mir meinen Teil gedacht.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2012, 20:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.03.2012
Beiträge: 3
skitt befindet sich auf einem aufstrebenden Ast
Standard

hallo gato,
vielen dank erstmal fuer deine antwort.
ich wuesste nicht, wie ich das noch mehr vereinfachen soll. habe den wrapper und darin ne spalte links, in der die navi drin is und eine rechts fuer den content. hm, dass sich die layer, die absolut positioniert werden nicht an dem uebergeordneten element orientieren, war mir nicht bewusst, aber jetzt, wo du es sagst, erscheint es mir auch logisch.
is schon ein paar jahre her, dass ich ne webseite gebaut hab und da hab ich noch alles mit tabellen gemacht
ich werde mal versuchen, die ganze sache noch anders zu loesen und wenn ichs nicht gebacken bekomme, muss ich nochmal stoeren
Mit Zitat antworten
  #4 (permalink)  
Alt 13.03.2012, 20:34
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von skitt Beitrag anzeigen
ich wuesste nicht, wie ich das noch mehr vereinfachen soll. habe den wrapper und darin ne spalte links, in der die navi drin is und eine rechts fuer den content.
Hör auf in Spalten zu denken. Mach dich mit den Bestandteilen eines Elements vertraut.

#wrapper braucht nur einen seitlichen Abstand, wenn du etwas hineinverschieben möchtest. Alle anderen Inhalte richten sich automatisch aus.

Zitat:
Zitat von skitt Beitrag anzeigen
ich werde mal versuchen, die ganze sache noch anders zu loesen und wenn ichs nicht gebacken bekomme, muss ich nochmal stoeren
Wenn du (neu) anfängst, rate ich dir ein Standardwerk wie Little Boxes durchzuarbeiten. Du kannst dir dadurch eine gute Grundlage erarbeiten.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.03.2012, 21:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.03.2012
Beiträge: 3
skitt befindet sich auf einem aufstrebenden Ast
Standard

danke fuer den tipp. ich schau mal rein. was haelst du eigentlich grundsaetzlich von der methode den background nach unten hin zu verlaengern auf 3000px oder sowas, ihn global zu setzen und dafuer die 2 kleineren, die ich momentan noch auf die 2 anderen ebenen verteilt habe weglassen? optisch bliebe das ergebnis unveraendert, abgesehen davon, dass der nicht unterbrochen waere. statt 3 bgs haette man dann nur noch einen grossen von etwa 300kb und im css natuerlich auch weniger code. von der ladezeit her machen solche kleinen grafiken ja wohl eh nix mehr aus, bei den heutigen anbindungen. frueher habe ich halt alles unterteilt und gekachelt, weil man da halt im besten fall ne isdn-leitung hatte - zumindest hierzulande.
wie wuerdest du es machen?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.03.2012, 21:28
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von skitt Beitrag anzeigen
was haelst du eigentlich grundsaetzlich von der methode den background nach unten hin zu verlaengern auf 3000px oder sowas, ihn global zu setzen und dafuer die 2 kleineren, die ich momentan noch auf die 2 anderen ebenen verteilt habe weglassen?
Das kann man nicht pauschal bewerten. Grundsätzlich sind weniger Bilder besser als mehrere (das gilt unabhängig von der zur Verfügung stehenden Bandbreite).

Zitat:
Zitat von skitt Beitrag anzeigen
statt 3 bgs haette man dann nur noch einen grossen von etwa 300kb und im css natuerlich auch weniger code. von der ladezeit her machen solche kleinen grafiken ja wohl eh nix mehr aus, bei den heutigen anbindungen. frueher habe ich halt alles unterteilt und gekachelt, weil man da halt im besten fall ne isdn-leitung hatte - zumindest hierzulande.
Mehrere Bilder versursachen mehrere HTTP-Requests und verlangsamen daher die Webseite. Das Zerschneiden von Bildern hatte daher stets negativen Einfluss auf die Darstellung der Webseite.

Aber: Wenn du drei Bilder a 50 kB zu einem Bild a 300 kB zusammenfügst, dann ist die Zusammenführung sinnlos, weil du mehr Daten übertragen musst als durch drei HTTP-Anfragen entstehen würden.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 23:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
height: 100% - Hintergrund abgeschnitten, IE geht maddesigns CSS 2 02.08.2006 23:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:17 Uhr.