# 100% mit 30px Margin?



## nordi (18. Januar 2012)

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:


```
.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?


```
body {
margin:0;
padding:0;
}

#wrapper {
width:100%;
margin: 20px auto;
}
```

Aber dass passt nicht, habt ihr ne Idee?


----------



## CPoly (18. Januar 2012)

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*.


----------



## nordi (19. Januar 2012)

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


----------



## CPoly (19. Januar 2012)

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


----------



## nordi (19. Januar 2012)

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.


----------



## CPoly (20. Januar 2012)

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


Aber hier erst mal die Erklärung


```
#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.



```
.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.


----------



## nordi (11. März 2012)

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:


```
$(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.


----------



## CPoly (11. März 2012)

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


----------



## nordi (11. März 2012)

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?


----------



## CPoly (11. März 2012)

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


----------



## nordi (11. März 2012)

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:


```
#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?


----------



## CPoly (11. März 2012)

Weil die Reihenfolge so ist: top right bottom left

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


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


----------



## nordi (11. März 2012)

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


----------



## nordi (11. März 2012)

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


----------



## nordi (21. März 2012)

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!


----------



## SpiceLab (22. März 2012)

nordi hat gesagt.:


> Ich würde gerne hochformatige Bilder rechtsbündig an den ersten Block anlegen [...] Ich bin mir nicht sicher, wie ich das mit Hochformaten bewerkstelligen soll?


Das Bildformat spielt hierfür  eine untergeordnete Rolle. 

Zur rechtsbündigen Ausrichtung steht dir  *text-align:right* für ein übergeordnetes Blockelement, das das Bild enthält, oder *float:right* für das Grafikelement zur Auswahl.


----------



## nordi (22. März 2012)

Hi,

danke erstmal für die Antwort. Im Hintergrund läuft ja ein Skript, welches sich die Browserbreite nimmt und dann das Bild so lange skaliert, sodass man nicht vertikal/horizontal scrollen muss. Das klappt alles super. Doch wenn ich jetzt ein Hochformatbild einstelle, dann zerschießt er die Seite. Bei Hochformatbildern soll die #top & #inhalt auch auf die maximale Breite skaliert werden, das Bild jedoch einfach nur zentriert in #inhalt platziert werden. Ich steh hier total auf dem Schlauch. Würde auch was springen lassen, wenn mir jemand eine gute Lösung anbietet  Bin aber Student  Also nicht zu viel verlangen! Schon mal danke für alle Tipps!

http://goo.gl/Tmyvx


----------

