100% mit 30px Margin?

nordi

nordi

Erfahrenes Mitglied
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: 
.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: 
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.
 
Zuletzt bearbeitet:
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 ;)
 
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

CSS: 
#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.


CSS: 
.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: 
$(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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück