Darstellung wird gequetscht und nicht gescrollt

[Verena]

Liebe Forum-Gemeinde,

ich habe mir eine neue Homepage gebastelt und dieses Mal habe ich eine Layout-Vorgabe von selfhtml verwendet (Nr. 10). Ich bin super zufrieden mit der Seite und fülle sie nun nach und nach mit meinen Bildern. Was mich aber sehr murkst und mich ein wenig traurig macht ist die Tatsache, dass bei einer Verkleinerung des Browserfensters meine Inhalte gequetscht werden und kein Scrollbalken entsteht.

Ich habe schon mehrere Dinge mal getestet, aber ich finde den Fehler einfach nicht in meinem Code :(

Ich hoffe, sehr, dass ich über das Forum einen hilfreichen Hinweis erhalte, damit ich dieses Problem bald lösen kann.

Hier der CSS-Code meiner Seite:

``

body {
  background: url(../img/bg1.jpg) white;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  color: black; margin: 0; padding: 1%;
  filter: Shadow(color=#dbbdb3, direction=0)
  filter: Shadow(color=#95918f, direction=90)
  filter: Shadow(color=#95918f, direction=180)
  filter: Shadow(color=#95918f, direction=270)
  min-width: 640px;
  font-size: 100.01%;
  font-family: garamond, arial, sans-serif;

}

a { color: #0B4D8C; text-decoration: underline; }
a:visited { color: #553b62; }
.skip {
  position: absolute;
  margin-left: -999px;
  width: 990px;
}
h1 {
  font-size: 2.4em; font-weight: normal; line-height: 0.8em; padding: 0.6em 0 0.2em 0%; margin: 0; border-bottom: 1px dashed #E6E6FA;
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 {
  color: black; font-family: Garamond, "Times New Roman", Times, serif;
}
img {
  border: solid 0px #aaa; padding: 0px; max-width: 100%;
}
.fleft {
  float: left; margin: 0 1em 0.2em 0;
}
.fright {
  float: right; margin: 0 0 0.2em 1em; padding: 1px;
}

#container {
  font-size: 0.8em;
  max-width: 78em;
  margin: auto;
  height: auto;
  border-left: 0px solid #3c3735;
  border-right: 0px solid #3c3735;
  border-top: 0;
  background-color: white;

}

#footer {
  clear: both; padding: 0 20px;
}

#logo {
  background: url(../img/oben.jpg) 0 0 no-repeat white;
  height: 140px; padding: 0 05px; text-align: left; line-height: 180px; font-size: 54px; letter-spacing: -3px; margin: 0;
}
#logo a {
  color: white; text-decoration: none;
}
#logo a span {
  color: black; background: white; padding-right: 0.1em; font-weight: bold;
}

#menu {
  background: url(../img/men&uumlhintergrund.png) white;
  padding:0px 5%;
  margin: 0;
  text-align: right;
  color: #272121;

}
#menu li {
  font-size: 1.2em;
  display: inline;
  list-style-type: none;
  border-left: 1px solid black;
  padding: 0 10px 0 15px;
  font-weight: bold;

}
#menu li a {
  color: #8f8d8d;
  text-decoration: none;
}
  #Banner {
 background-image: url(../img/Banner.jpg);
 background-position:center;
 padding:0px;
 background-color:white; height:400px;
 margin: auto;
}

#subnav {
  width: 26%;
  min-width: 10em;
  float: right;
  padding: 70px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 1px dotted #aaa;
  font-size: 1.2em;

}
#subnav dt {
  font-size: 1.2em;
  font-family: Garamond, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa;
}
#subnav dd {
  padding: 0;
  margin: 0.2em 0;
}

#main {
  padding: 0 31% 0 20px;
  line-height: 1.5em;
}
 #footer .footer-col {
WIDTH: 202px; FLOAT: left; MARGIN-RIGHT: 30px
}
#footer #footer-widget-col-4 {
MARGIN-RIGHT: 0px
}
#copyright-footer-sep {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0.3em; PADDING-RIGHT: 0.3em; PADDING-TOP: 0px
}
SPAN.statcounter {
DISPLAY: inline
}
#footer {
PADDING-BOTTOM: 30px; LINE-HEIGHT: 1.4em !important; PADDING-LEFT: 30px; PADDING-RIGHT: 30px; PADDING-TOP: 30px
}
#footer H3 {
FONT-STYLE: normal; FONT-FAMILY: "Century Gothic", Helvetica, Arial, sans-serif; COLOR: #666666; FONT-SIZE: 17px
}
#footer {
BACKGROUND: #f0f0f0 left top
}
#copyright-footer {
TEXT-ALIGN: center; PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 11px
}

[Matthias Apsel]

Om nah hoo pez nyeetz, Verena!

body {
  filter: Shadow(color=#dbbdb3, direction=0)
  filter: Shadow(color=#95918f, direction=90)
  filter: Shadow(color=#95918f, direction=180)
  filter: Shadow(color=#95918f, direction=270)
  min-width: 640px;

Da fehlen ein Paar Semikola, deshalb wird min-width ignoriert.

Matthias

[Verena]

Matthias!!!!!!!!! DANKEEEEEEEEEE! Jetzt scrollt er schön :)

.....eine klitzekleine Frage habe ich aber doch noch, er scrollt jetzt zwar sehr schön, aber die Bilder quetscht er dennoch ein wenig, liegt das an den 640px die ich angegeben habe? Sollte ich da vielleicht eine andere Zahl eintragen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Verena!

.....eine klitzekleine Frage habe ich aber doch noch, er scrollt jetzt zwar sehr schön, aber die Bilder quetscht er dennoch ein wenig, liegt das an den 640px die ich angegeben habe? Sollte ich da vielleicht eine andere Zahl eintragen?

Du musst natürlich den gewünschten minimalen Wert eintragen, wenn du ein Bild darstellen möchtest, welches eine Breite von 1000 Pixeln hat und dieses weder skaliert noch abgeschnitten werden soll, ist eine minimale Breite von 500px nicht wirklich hilfreich.

Matthias

[Verena]

hmmmm... ich meinte das glaube ich, anders

das erste Bild z.Bsp. hier

http://verenavalescaphotography.com/female%20outdoor.html

hat eine Breite von 600px, wenn ich das Browserfenster jetzt verkleinere, dann erscheint zwar mein Scrollbalken, aber der Inhalt des Fensters wird trotzdem noch ein wenig gequetscht ;(

[Verena]

ahaaa... ich habe die min-width mal auf 1200px vergrößert, jetzt sieht es toll aus :)))

DANKEEEE lieber Matthias!