[Erledigt] Bild in Bild zum skalieren

Hoschi · 15.11.2011, 08:51

Moin!
Ich arbeite gerade an einem neuen Header für unsere Seite und dazu habe ich brauche ich drei Bilder:
- das Logo
- den Bilderrahmen
- ein Zufallsbild

Das ganze soll so wie im Anhang aussehen. Der Code dazu ist der hier:

Code:

        <div id="header">                                
          <div id="logoheader"></div>
          <div id="bilderrahmen">
             <img src="images/rahmen.png" id="rahmen">
          </div>                                                       
        </div>

Und hier der CSS-teil:

Code:

#logoheader {
	background:  URL(../images/logo.png) no-repeat;
	width: 300px;
	height: 202px;
	float: left;
	margin-left:10px;
	margin-right: -30px;
}

#bilderrahmen {
	background-image: url("../images/headerbild1.png"); 
	background-repeat: no-repeat;
	background-position: 30px 20px;
	float:left;
	height: 200px;
	margin-right: 10px;
	width: 750px;
}

#rahmen {
}

Klappt ja auch sehr schön, aber nur wenn man eine Bildschirmbreite von mind. 1050px hat. Ich will die Seite aber schon ab Auflösungen von 800 x 600 anbieten.
Wenn man das Browserfenster jetzt verkleinert, springt der zweite div-Block in die nächste Zeile (soll er ja theoretisch auch). Das soll er aber nicht.
Ich würde mir wünschen, dass der div "logoheader" immer gleich groß bleibt, und der Bilderrahmen dem Platz entsprechend groß ist.

Das Bild auf der rechten Seite besteht aus einem Bild und dem Rahmen (damit ich die Bilder im Rahmen leichter austauschen kann...). Wie man das besser lösen kann weiß ich auch nicht..

Fällt jemandem da was ein?
Danke & viele Grüße

fab · 15.11.2011, 08:56

Code:

#header { min-width: 1050px; }

?

Edit: ein skalierender Bilderrahmen passt nicht zu dem pixelgenauen Hintergrund aus dem Screenshot. Oder hast du dir dafür etwas überlegt?

Hoschi · 15.11.2011, 09:31

Also Das Bild in dem Rahmen soll einfach rechts abgeschnitten werden.
Nur der Rahmen sollskaliert werden, so dass er bei einer breite von 1050px normalgroß ist
und bei der mindestgröße von 800px. passend skaliert ist.
Ich weiß nicht, wie das sonst möglich ist. Oder fällt dir da was besseres ein?

nikosch · 16.11.2011, 20:39

Trivial ist das nicht zu lösen. Das läuft auf eine Variante der frühen Runden-Ecken-Lösung hinaus. http://www.andreas-kalt.de/webdesign...ls/runde-ecken

mquadrat · 17.11.2011, 12:57

Code:

#bilderrahmen {
	background-image: url("../images/headerbild1.png"); 
	background-repeat: no-repeat;
	background-position: 30px 20px;
	height: 200px;
        margin-left: 270px;
	margin-right: 10px;
}

Das sollte halbwegs funktionieren [nicht getestet, nur getippt].

Hoschi · 17.11.2011, 16:40

@Nikosch:
Geile Sache. Sowas kannte ich noch gar nicht

Problematisch ist nur, dass ich im Bilderrahmen halbtransparente Schattierungen habe. Somit habe ich Überlagerungen am rechten Rand.
Siehe hier: http://hoschi.bplaced.net/filemanage...est/index.html

Html:

Code:

<div id="rahmen">
  <div id="rahmen_links">
    <div id="rahmen_rechts">
    </div>
  </div>
</div>

CSS:

Code:

#rahmen {
  background:url(headerbild1.png) 25px 20px no-repeat;
  margin:0;
  padding:0;
}
#rahmen_links {
  background:url(rahmen_links2.png) top left no-repeat;
  margin:0;
  padding:0;
}
#rahmen_rechts {
  background:url(rahmen_rechts2.png) top right no-repeat;
  margin:0 -7px 0 0;
  padding:0 ;
  max-width: 769px;
  height: 196px;
}

So guckt beim Skalieren leider rechts das Bild und der linke Rahmenteil heraus...
Fällt euch da was ein?

nikosch · 17.11.2011, 20:55

Da fällt mir nicht viel ein, außer den weichen Rand wegzulassen. Der ist ja auch beim Überstand der beiden „Schiebeteile“ bereits problematisch. Dass man die Bilder links anschrägen muss, finde ich auch suboptimal. Vielleicht nochmal Headerlayout überdenken?

Hoschi · 18.11.2011, 08:13

manno

ich fand den super

.
Meine Hoffnung war es, dass man in css den background mit einem margin zum rechten rand versehen kann, oder so ähnlich.
Das finde ich aber nicht.
Daher habe ich ja auch schon beim css im letzten post bei #rahmen_rechts einen negativen margin eingebaut um einfach das rechte rahmenstück etwas aus dem Bild zu schieben. Wenn man den auf -23px setzt klappt das auch einigermaßen, ich weiß aber nicht ob das so bei jedem Browser klappt und dazu sind mir diese negativen margins nicht so sympatisch ;D

Hoschi · 21.11.2011, 19:45

Soooo.
Ich habe es letztendlich geschafft...
Die Lösung bei transparenten "Sliding Door"-Elementen ist wohl anscheinend doch die mit den negativen Margins.
Bei mir als Beispiel musste der links Rahmen die Div-Box voll ausfüllen und der rechte Rahmen dann mit negativen Margins nach rechts aus der Div-Box geschoben werden....

Danke!

nikosch · 21.11.2011, 20:25

Na dann - Gut Pfad! Kannst ja mal nen Link posten, wenns fertig ist, würde ich mir gerne ma angucken.

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild in Bild überblenden	mentalman	JavaScript, Ajax und mehr	14	23.05.2011 19:20
imagecreatefromjpeg() "Allowed memory size exhausted"	peter silie	PHP Tipps 2010	17	04.05.2011 14:25
[Erledigt] Bild ausgeben solange das Script läuft	favo	PHP-Fortgeschrittene	6	17.09.2010 13:34
[Erledigt] Bild erstellen, speichern und gespeichertes Bild anzeigen	Garog	PHP Tipps 2009	26	11.07.2010 18:01
Bildeffekte berechnen (Bild in den Hintergrund anschregen)	Frank	PHP-Fortgeschrittene	2	28.11.2009 02:20
[Erledigt] Bild erst skalieren und dann zuschneiden	LeChuck	Scriptbörse	13	22.09.2009 19:35
[Erledigt] Bild via PHP skalieren	ocean85	PHP Tipps 2009	18	13.05.2009 15:24
Bild in enuem Fenster öffnen?	K3HLIM	JavaScript, Ajax und mehr	6	10.04.2009 20:43
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
Bild skalieren --> pixelig	rocco	PHP-Fortgeschrittene	2	12.09.2007 16:14
[Erledigt] lokales bild auswaehlen, skalieren, dann uploaden, geht das?		PHP Tipps 2006	9	24.01.2006 19:47
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

15.11.2011, 08:51
Hoschi Neuer Benutzer Registriert seit: 03.02.2010 Beiträge: 23 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Bild in Bild zum skalieren Moin! Ich arbeite gerade an einem neuen Header für unsere Seite und dazu habe ich brauche ich drei Bilder: - das Logo - den Bilderrahmen - ein Zufallsbild Das ganze soll so wie im Anhang aussehen. Der Code dazu ist der hier: Code: <div id="header"> <div id="logoheader"></div> <div id="bilderrahmen"> <img src="images/rahmen.png" id="rahmen"> </div> </div> Und hier der CSS-teil: Code: #logoheader { background: URL(../images/logo.png) no-repeat; width: 300px; height: 202px; float: left; margin-left:10px; margin-right: -30px; } #bilderrahmen { background-image: url("../images/headerbild1.png"); background-repeat: no-repeat; background-position: 30px 20px; float:left; height: 200px; margin-right: 10px; width: 750px; } #rahmen { } Klappt ja auch sehr schön, aber nur wenn man eine Bildschirmbreite von mind. 1050px hat. Ich will die Seite aber schon ab Auflösungen von 800 x 600 anbieten. Wenn man das Browserfenster jetzt verkleinert, springt der zweite div-Block in die nächste Zeile (soll er ja theoretisch auch). Das soll er aber nicht. Ich würde mir wünschen, dass der div "logoheader" immer gleich groß bleibt, und der Bilderrahmen dem Platz entsprechend groß ist. Das Bild auf der rechten Seite besteht aus einem Bild und dem Rahmen (damit ich die Bilder im Rahmen leichter austauschen kann...). Wie man das besser lösen kann weiß ich auch nicht.. Fällt jemandem da was ein? Danke & viele Grüße Miniaturansicht angehängter Grafiken


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

15.11.2011, 08:56
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Code: #header { min-width: 1050px; } ? Edit: ein skalierender Bilderrahmen passt nicht zu dem pixelgenauen Hintergrund aus dem Screenshot. Oder hast du dir dafür etwas überlegt? __________________ PHP Blog + Library CSS Effects + Tools

15.11.2011, 09:31
Hoschi Neuer Benutzer Registriert seit: 03.02.2010 Beiträge: 23 PHP-Kenntnisse: Fortgeschritten	Also Das Bild in dem Rahmen soll einfach rechts abgeschnitten werden. Nur der Rahmen sollskaliert werden, so dass er bei einer breite von 1050px normalgroß ist und bei der mindestgröße von 800px. passend skaliert ist. Ich weiß nicht, wie das sonst möglich ist. Oder fällt dir da was besseres ein?

16.11.2011, 20:39
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Trivial ist das nicht zu lösen. Das läuft auf eine Variante der frühen Runden-Ecken-Lösung hinaus. http://www.andreas-kalt.de/webdesign...ls/runde-ecken __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.11.2011, 12:57
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Code: #bilderrahmen { background-image: url("../images/headerbild1.png"); background-repeat: no-repeat; background-position: 30px 20px; height: 200px; margin-left: 270px; margin-right: 10px; } Das sollte halbwegs funktionieren [nicht getestet, nur getippt]. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

17.11.2011, 16:40
Hoschi Neuer Benutzer Registriert seit: 03.02.2010 Beiträge: 23 PHP-Kenntnisse: Fortgeschritten	@Nikosch: Geile Sache. Sowas kannte ich noch gar nicht Problematisch ist nur, dass ich im Bilderrahmen halbtransparente Schattierungen habe. Somit habe ich Überlagerungen am rechten Rand. Siehe hier: http://hoschi.bplaced.net/filemanage...est/index.html Html: Code: <div id="rahmen"> <div id="rahmen_links"> <div id="rahmen_rechts"> </div> </div> </div> CSS: Code: #rahmen { background:url(headerbild1.png) 25px 20px no-repeat; margin:0; padding:0; } #rahmen_links { background:url(rahmen_links2.png) top left no-repeat; margin:0; padding:0; } #rahmen_rechts { background:url(rahmen_rechts2.png) top right no-repeat; margin:0 -7px 0 0; padding:0 ; max-width: 769px; height: 196px; } So guckt beim Skalieren leider rechts das Bild und der linke Rahmenteil heraus... Fällt euch da was ein?

17.11.2011, 20:55
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Da fällt mir nicht viel ein, außer den weichen Rand wegzulassen. Der ist ja auch beim Überstand der beiden „Schiebeteile“ bereits problematisch. Dass man die Bilder links anschrägen muss, finde ich auch suboptimal. Vielleicht nochmal Headerlayout überdenken? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

18.11.2011, 08:13
Hoschi Neuer Benutzer Registriert seit: 03.02.2010 Beiträge: 23 PHP-Kenntnisse: Fortgeschritten	manno ich fand den super . Meine Hoffnung war es, dass man in css den background mit einem margin zum rechten rand versehen kann, oder so ähnlich. Das finde ich aber nicht. Daher habe ich ja auch schon beim css im letzten post bei #rahmen_rechts einen negativen margin eingebaut um einfach das rechte rahmenstück etwas aus dem Bild zu schieben. Wenn man den auf -23px setzt klappt das auch einigermaßen, ich weiß aber nicht ob das so bei jedem Browser klappt und dazu sind mir diese negativen margins nicht so sympatisch ;D

21.11.2011, 19:45
Hoschi Neuer Benutzer Registriert seit: 03.02.2010 Beiträge: 23 PHP-Kenntnisse: Fortgeschritten	Soooo. Ich habe es letztendlich geschafft... Die Lösung bei transparenten "Sliding Door"-Elementen ist wohl anscheinend doch die mit den negativen Margins. Bei mir als Beispiel musste der links Rahmen die Div-Box voll ausfüllen und der rechte Rahmen dann mit negativen Margins nach rechts aus der Div-Box geschoben werden.... Danke!

21.11.2011, 20:25
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Na dann - Gut Pfad! Kannst ja mal nen Link posten, wenns fertig ist, würde ich mir gerne ma angucken. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --