Hallo liebes Forum

ich habe eine Frage zu einem Projekt, was ich demnächst starte und würde gerne eine Frage abklären. Der Seitenaufbau ist wie folgt: Oben links Logo, Oben rechts Navigation, Haupteil volle Breite (100%) mit einem Bild. Das Bild soll sich an die Bildschirmbreite proportional skalieren, daher würde ich mit folgendem Code arbeiten:

Code :

1 2 3 4 5 6 7

.bild {     width: 100%;     position: relative;     top: 10px;     left: 0;     z-index: 5000; }

Nun meine Frage: Ich möchte, dass das Bild in einem Container liegt, der rechts, link, oben und unten ein Margin von ca. 30px hat, sodass das Bild nicht komplett Fullscreen ist sondern einen Freiraum drumherum hat. Wie würdet ihr das mit CSS deklarieren?

Code :

1 2 3 4 5 6 7 8 9

body { margin:0; padding:0; }   #wrapper { width:100%; margin: 20px auto; }

Aber dass passt nicht, habt ihr ne Idee?

Ich würde es so machen: http://dabblet.com/gist/1634951

Edit: Was ich bei deinem Code nicht verstehe ist, wieso du den linken/rechten margin von #wrapper auf auto gestellt hast?

Und das Problem ist, dass du #wrapper eine Breite von 100% gegeben hast. margin wird dazu addiert. Lässt du die Angabe weg, werden Block Elemente automatisch 100% breit, aber inklusive margin, padding und border.

Hi, vielen Dank für die Topantwort! Klappt bestens so! Ich hab noch ne andere Frage.. habe mir mal die Seite auf einem 27' angeguckt und habe gesehen, dass das Bild (wie im Skript festgelegt) auf die 100% Breite skaliert, es aber dann auch so groß wird in der Höhe, dass man runterscrollen muss. Gibt es eine Möglichkeit, dass das komplette Layout so skaliert, dass es gerade soweit ín die Breite skaliert, sodass man horizontal nicht scrollen muss? Hoffe das ist verständlich

Das ist nicht ganz so einfach, weil das Bild ja trotzdem sein Seitenverhältnis behalten soll. Reicht das aus? http://dabblet.com/gist/1642299

Hi CPoly,

das sieht super aus!! Kannst du das kurz erklären? Würde gern verstehen, was dahinter steckt Ich würde dann dem #top genau die gleiche Breite geben wie dem Bild, damit das alles schön im "Raster" bleibt und abschließend miteinander ist.

#top so breit zu machen wie das Bild wir schwer bis unmöglich.


Aber hier erst mal die Erklärung

Code css:

1 2 3 4 5 6 7 8 9

#wrapper {     margin: 30px;     position:absolute;     left:0px;     top:50px;     right:0px;     bottom:0px;     text-align:center; }

Das Block Element nimmt standardmäßig die volle Breite ein. Das gilt aber nicht für die Höhe. Da bei height:100% wieder die 30px margin dazu gekommen wären, muss das absolut positioniert werden. Dadurch füllt #wrapper die volle Höhe und Breite aus. Das alles machen wir nur aus dem Grund, dass sich das Bild an etwas orientieren kann.

Code css:

1 2 3 4

.bild {     max-width: 100%;     max-height:100%; }

Bezogen auf #wrapper darf das Bild höchstens die volle Breite oder Höhe einnehmen. Wird dein Browserfenster also zu schmal, wie das Bild schmäler, wird es zu niedrig, wird das Bild ebenfalls niedriger.

Hallo, mich hat das Thema nicht losgelassen, konnte aber jetzt erst am Projekt weiterarbeiten und hatte die Idee, dass es doch bestimmt möglich wäre, die Breite vom Bild via Javascript abzufragen und diese dann direkt an #top weiterzugeben, sodass beide Bereiche gleich breit sind. Nach einigem Suchen habe ich dann dieses jQuery Skript gefunden (http://benalman.com/projects/jquery-resize-plugin/), was genau das machen soll, was ich vorhabe. Aber da ich nicht ganz fit bin in JS, habe ich es probiert an mein Beispiel anzupassen - leider ohne Erfolg. Evtl. könnt ihr mir hier meinen Fehler aufweisen:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(function(){   $(window).resize(function(){     var elem = $(this);         // Update     $('#top').css("width"," + elem.width() + ");   });     // Updates the info div immediately.   $(window).resize(); });   });

Ich bin mir nicht sicher, ob ich die .resize Funtion von window nehmen soll oder ob ich diese mit .bild $('.bildX').resize(function(){
var elem = $(this);
ansprechen soll, beides funktioniert nicht. Wäre sehr dankbar für einen Tipp.

Ich tippe mal es geht nicht, weil elem.width die volle Breite ist, aber die hat #top ja sowieso. Du brauchst auch das Plugin nicht, weil window.resize ausreicht.

https://tinker.io/df96a

Abgesehen vom JavaScript habe ich am CSS nur eine einzige Zeile geändert, und zwar "margin:auto;" für #top

Hi, super - das klappt ja wirklich Ich habe nur noch eine Frage.. eventuell liegt es auch an meinem Browser (Chrome/MacOS), aber wenn die Seite anfänglich geladen ist wird #top nicht angezeigt. Sobald man aber das Fenster vergrößert/verkleinert erscheint es, als wäre es immer dagewesen. Woran kann das liegen?

Das liegt daran, dass das Bild dann noch nicht geladen ist und die Breite von #top auf 0 gesetzt wird. Also muss das ganze bei onload erst passieren.

https://tinker.io/df96a/1

Hi super, damit hat sich meine Frage geklärt! Vielen Dank! Nur noch mal ne Fragen zum margin bei #wrapper. Wenn ich dem Bild nur ein margin-bottom:30px geben will habe ich es wie folgt geändert:

HTML-Code:

#wrapper {
    margin: 0 0 0 30px;
    position:absolute;
    left:0px;
    top:50px;
    right:0px;
    bottom:0px;
    text-align:center;
}

Aber jetzt verschiebt sich das Bild nach rechts, bzw. #top nach links. Woran liegt das?

Weil die Reihenfolge so ist: top right bottom left

Du hast also "left" gesetzt und nicht "bottom".

Code css:

1 2 3 4 5 6 7 8 9

#wrapper {     margin: 0 0 30px 0;     position:absolute;     left:0px;     top:50px;     right:0px;     bottom:0px;     text-align:center; }

Ah, ich Depp. Vielen Dank und schönen Sonntag noch.

Oh, hab vergessen die Seite in Opera zu checken, da nimmt er das mit der Funktion nicht an und stellt das Bild komplett in width:100% und height:100% dar.. Muss man die Funktion operatechnisch anpassen?

http://goo.gl/hjKSD

Hallo, ich habe noch eine kleine weitere Frage. Ich würde gerne hochformatige Bilder rechtsbündig an den ersten Block anlegen, wo momentan die Punkte "Portrait, Architektur, etc." drinnen sind. Die Querformate enden ja bündig mit der Navigation ganz rechts. Ich bin mir nicht sicher, wie ich das mit Hochformaten bewerkstelligen soll? Vielleicht hat da jemand eine Idee!