• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

Div-Container der aus dem Fenster rausgehen kann...

Kaischo

Kaischo

Becks Apfel (Emstaler Champagner)
Registriert
06.01.07
Beiträge
338
Hallo zusammen,

Also mein Problem ist folgendes. Zu sehen auf www.joeybottle.com . Wenn man eine Bildschirmauflösung von mindestens 1600Pixel breite hat sieht alles cool aus. Wenn nicht, ODER man eben das Fenster KLEINER zieht, dann bleibt mein Containter am Fenster rand hängen mit den grünen Vektor-Streifen da. Ich will aber dass erst beim inneren Fenster (der weiße Kasten) am Fenster hängen leibt. Wie stelle ich das an ???

HILFE :D
 
MasterofDistres

MasterofDistres

Kleiner Weinapfel
Registriert
07.12.06
Beiträge
1.139
Also mit meinen 1440 Pixeln sieht das auch noch voll okay aus von der Breite her, deshalb versteh' ich gerade dein Hauptanliegen leider nicht, sorry!

Aber noch ein paar Anmerkungen zu deiner Seite:

Code: 
<div id="containermain">


	

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • Vor den Doctype kommt, außer es handelt sich um PHP-Code, nichts - Container kommen erst im Body!
  • Weder Body, noch HTML Tag werden am Ende der Seite korrekt geschlossen
  • Es ist immer einfacher (Zum besseren Verständnis für sich selbst und Außenstehende), wenn man Code einrückt
    Code: 
    <div id="wrap">
	<div id="form">
		<h3>Login</h3>
		<form action="find.php" id="searchform" method="post" accept-charset="utf-8" autocomplete="off">
			<p><span class="num">Login:</span>
			[…]
  • Zur heutigen Zeit kann man eigentlich getrost UTF-8 als Kodierung empfehlen (muss jedoch auch vom Editor beim Speichern unterstützt werden)
    Code: 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  • Allgemein im Quelltext nicht so viel Freiraum lassen - bei privaten Seiten ändert sich der Traffic dadurch nicht sonderlich, aber bei größeren Webseiten mit vielen Tausend Besuchern machen eine KB schon einiges aus ;)
  • Deine Hintergrundbilder sind Dateigrößenmäßig relativ groß, vor allem „mainbg.jpg“ - du könntest das doch ein bisschen Zurechtschneiden und Auseinandernehmen wesentlich kleiner machen ;)
  • Ich weiß zwar nicht, wie es um die Schrift bestellt ist, aber man könnte auch in nicht allzu ferner Zukunft bedenken, „Footer-“ und „Headerbg“ über CSS3-Font-Embedding zu lösen!
  • Mit CSS3 ließe sich der Kasten in der Mitte (inkl. Schatten) auch ganz ohne jegliche Bilder realisieren (aber ich glaub' der IE8 ist da mal wieder ins Hintertreffen geraten und kann CSS3 noch nicht wirklich interpretieren
  • Allgemein ist es eher anzuraten, Javascript ganz am Ende (vor Schließen des Body-Tags) einzufügen, um durch große Scriptpakete den Seitenaufbau nicht extra zu verlangsamen ;)

Bitte alles als konstruktive Kritik sehen ;)
 
Kaischo

Kaischo

Becks Apfel (Emstaler Champagner)
Registriert
06.01.07
Beiträge
338
Da macht man einmal nicht volle Arbeit und schon wird mal so abgestempelt :D Nein vielen Dank! Einige Tipps sind mir sehr hilfreich, das meiste weiß ich aber schon selbst, die Seite ist der total MischMasch aus ner alten Seite, deswegen auch sowas wie Dogtype nach nem Container usw. - CSS3 wird halt nur von neuen Browsern unterstützt deswegen denke ich lasse ich das direkt sein, oder hab ich da was falsch verstanden ?

Und das große Hintergrundbild ist mir auch ein Dorn im Auge, aber das zusammenbasteln mit so vielen Div-Containern führt extrem oft zu schlechten Ansichten wenn man zB Zoomt im FireFox und solche Dinge. Und es sind ja "nur" 100-200Kb, das wird ja wohl heutzutage zu verkraften sein...oder etwa nicht ???

EDIT: Wo und wie würdest du denn die Seite aufbauen ? Ich bin schon wirklich soweit, dass ich mir da ernsthaft Gedanken mache, dass ich die bestmögliche Perfomance der Seite habe nur irgendwo weiß ich nicht wirklich wie es am besten ist sowas aufzubauen ?

EDIT 2: UND NOCH EINE FRAGE, im Safari ist da eine ca. 1px hohe Verschiebung von meinem Hitnergrundbild des Containermain und meines body-Hintergrunds. Im FireFox ist das nicht so. Ich finde den fehler nicht, kannst du mir helfen ?
 
MasterofDistres

MasterofDistres

Kleiner Weinapfel
Registriert
07.12.06
Beiträge
1.139
Kaischo schrieb:
Da macht man einmal nicht volle Arbeit und schon wird mal so abgestempelt :D Nein vielen Dank! Einige Tipps sind mir sehr hilfreich, das meiste weiß ich aber schon selbst, die Seite ist der total MischMasch aus ner alten Seite, deswegen auch sowas wie Dogtype nach nem Container usw. - CSS3 wird halt nur von neuen Browsern unterstützt deswegen denke ich lasse ich das direkt sein, oder hab ich da was falsch verstanden ?
Zum Vergrößern anklicken....
Kein Problem, gerne ;)
Das stimmt - der IE x hängt weiterhin hinterher; allgemein sollte man denke ich auch noch etwas warten mit der Implementierung, bis man sichergehen kann, dass auch so gut wie alle Benutzer einen Browser benutzen, der die Sachen unterstützt (beispielsweise beim Box-Shadow können das nur die aller neusten Versionen, und ich denk', dass die noch nicht von jedermann benutzt werden) (für den Internet-Explorer könnte man das dann jedoch mit Conditional Comments realisieren ;) (Sprich allgemein Boxshadow ins CSS und für den IE ein extra Hintergrundbild einbauen)

Kaischo schrieb:
Und das große Hintergrundbild ist mir auch ein Dorn im Auge, aber das zusammenbasteln mit so vielen Div-Containern führt extrem oft zu schlechten Ansichten wenn man zB Zoomt im FireFox und solche Dinge. Und es sind ja "nur" 100-200Kb, das wird ja wohl heutzutage zu verkraften sein...oder etwa nicht ???
Zum Vergrößern anklicken....
Vorweg erstmal ein Programmtipp (falls du es noch nicht kennst), der mir bei CSS-Problemen immer sehr nützlich war: CSSEdit und der X-Ray-Modus ;) Allgemein ist es immer besser, die Seite möglichst klein zu halten, denn allein in unserem schönen Ländchen hat bei weitem noch nicht jeder DSL (1000) ;)


Kaischo schrieb:
EDIT: Wo und wie würdest du denn die Seite aufbauen ? Ich bin schon wirklich soweit, dass ich mir da ernsthaft Gedanken mache, dass ich die bestmögliche Perfomance der Seite habe nur irgendwo weiß ich nicht wirklich wie es am besten ist sowas aufzubauen ?
Zum Vergrößern anklicken....
Also du hast ja bereits eine „bg.jpg“, die du per repeat-x wiederholen lässt - somit brauchst du den Streifen bei „fullbg.jpg“ ja nicht mehr! Ich würd's so lösen, dass
  • weiterhin „bg.jpg“ in x-Richtung wiederholt wird
  • Die Flasche oben herausschneiden (wahlweise mit der Schrift, falls das nicht über CSS realisierbar ist) und als Logo einbauen (die Trennlinie lässt sich ja beispielsweise mit „<br class…“ erstellen
  • Dem Kasten in der Mitte würde ich eine (feste Breite/Höhe geben, die so groß ist, dass es auch bei einer 15"-17" Auflösung noch ohne Anzuecken in der Mitte platziert ist (du könntest die Größe auch über Javascript errechnen lassen, was dann aber zum Problem wird, wenn der Besucher Javascript deaktiviert hat)
  • Die grünen Linien würd' ich dann als transparente .pngs einbauen
  • Und zu guter Letzt die Informationen im Footer: gleiche Anweisung wie am Anfang, falls es nicht über CSS-Styling zu erzeugen ist, dann auch als Bild einbinden, aber trotzdem als Text einfügen… beispielsweise
    Code: 
    	font-size: 1px;
	text-indent: -9999px;
    macht ihn für den Benutzer dann unsichtbar

Kaischo schrieb:
EDIT 2: UND NOCH EINE FRAGE, im Safari ist da eine ca. 1px hohe Verschiebung von meinem Hitnergrundbild des Containermain und meines body-Hintergrunds. Im FireFox ist das nicht so. Ich finde den fehler nicht, kannst du mir helfen ?
Zum Vergrößern anklicken....
Schau dir das am besten mal mit CSSEdit an ;)
 
Kaischo

Kaischo

Becks Apfel (Emstaler Champagner)
Registriert
06.01.07
Beiträge
338
Ich danke dir vielmals für deine ausführliche Antwort! DANKE!

Also die transparenten .png sind mir auch schon eingefallen, aber die alpha-transparenz mögen einige Browser wieder nicht. Also ist das auch doof. Ich habe nun ein sehr großes Fullbg.jpg. Da werde ich so alles in allem auch nicht drumherumkommen. Ich hatte nun mal alles in kleinen Bildern abgespeichert und habe mir die größen Angeschaut. Das EINE große Bild war sogar etwas kleiner als die vielen Einzelnen bei denen ich dann etwas weglassen konnte. - Wenn du nun mal auf meine Seite gehst wirst du sehen, dass ich sogar noch zu meinen 4 Menupunkten Fotos als Hintergrundbilder einsetzten werde. Die finde ich so schön dass ich sie benutzen will!

Meine Seite soll ja hier wirklich eher künstlerisch sein. Da komme ich um große Dateien immer schlecht drumherum. Es werden noch Videos im Flash-Format folgen und große Fotos für meine Bilder-Galerie. Natürlich bin ich da mit sowas immer schlecht dran. Ich möchte halt aus dieser Misere noch das bestmögliche rausholen, dass ist alles.

Ich habe nun einen Preloader gefunden der per JavaScript die großen Bilddateien "vorlädt" (der ist jetzt nicht eingebaut aber habe ihn schon getestet) - was hälst du davon ??????

CSS Edit sieht echt gut aus, werde ich mir mal anschauen genauer!!!!! Das Safari 1px Problem habe ich gelöst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten