nicht angemeldet
Probleme mit background Grafik im Body
0 0 
MudGuard
Probleme mit background Grafik im Body
StruppiHallo,
ich habe ein Problem mit einer Grafik die im background des body dargestellt wird. Wenn ich eine kleinere Auflösung z. B. 800 x 600 oder 1024 x 768 einstelle, schneidet der Browser das Bild am unteren Rand ab obwohl dieses noch größer ist und nach unten hin "ausläuft". Bei höheren Auflösungen ist das kein Problem.
Gibt es da einen Trick, womit ich das komplette Bild im background dargestellt bekomme, ohne das der Browser mir am unteren Ende das Bild abschneidet?
Hier der Link: http://www.assedo.de/kunden/becker/index.html
Gruss
holli
-
Hallo Holli,
wäre toll, sofern du dieser Forumsteilnehmer bist, wenn du dich mal zu deinem anderen Posting äußern würdest.
Mit freundlichen Grüßen,
André-
hi,
wäre toll, sofern du dieser Forumsteilnehmer bist, wenn du dich mal zu deinem anderen Posting äußern würdest.
Du wolltest also eigentlich sagen: Doppelposting.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
Du wolltest also eigentlich sagen: Doppelposting.
ich bin mir nicht sicher, da es sich um zwei Projekte handelt, die jeweils eine andere Fragstellung aufwerfen:
1. Bewertung beim "Consulting-Projekt"
2. CSS-Probleme beim "Zimmerei-Projekt"(beide absichtlich nicht verlinkt)
Mit freundlichen Grüßen,
André
-
-
-
Hi,
ich habe ein Problem mit einer Grafik die im background des body dargestellt wird. Wenn ich eine kleinere Auflösung z. B. 800 x 600 oder 1024 x 768 einstelle, schneidet der Browser das Bild am unteren Rand ab obwohl dieses noch größer ist und nach unten hin "ausläuft". Bei höheren Auflösungen ist das kein Problem.
Du hast es doch so angegeben. Du hast html auf 100% Höhe gesetzt, also so hoch wie der Viewport. body ist auf 100%, also so hoch wie html, also so hoch wie der Viewport gesetzt.
Das Hintergrundbild des body wird natürlich nur innerhalb des body angezeigt (analog für das Hintergrundbild des html).Daß der Inhalt darüber hinaus angezeigt wird, liegt an dem default-Wert visible für overflow.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo Andreas,
... Du hast es doch so angegeben. Du hast html auf 100% Höhe gesetzt, also so hoch wie der Viewport. body ist auf 100%, also so hoch wie html, also so hoch wie der Viewport gesetzt.
Was würdest Du stattdessen machen, oder was muss ich ändern?
Gruss
holli-
hi,
Was würdest Du stattdessen machen, oder was muss ich ändern?
Keine Höhe angeben, sondern eine Mindesthöhe.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
ich habe doch eine Mindesthöhe angegeben für die Box. Wenn ich die anderen Angaben der Höhe lösche gehts gar nicht mehr. Ich habe auch schon versucht für den body die Höhe rauszunehmen und min-height eingesetzt. Klappt alles nicht.Könntest Du mir kurz posten, wo ich was und wie verändern muss?
Hier ist das entsprechende CSS:
*{
padding:0;
margin:0;
border:0;
}
html, body {
height:100%; /* wichtig */
background:#505851;
text-align:left;
font-family:trebuchet ms, verdana, arial, helvetica, sans-serif;
font-size:100.01%;
background-image:url(../images/spacer.gif);
background-repeat:repeat-y;
}
#box_left{
margin:0 0;
height:auto !important; /* moderne Browser */
float:left;
width:155px;
}
#box_right{
margin-left:200px;
height:100%;
*min-height:100%;
width:580px;
position:absolute;
top:0px;
}
#box_top{
position:relative;
top:0px;
height:180px;
width:580px;
}
#top_pic{
position:relative;
top:68px;
padding-left:70px;
}
#box_top2{
height:100px;
width:580px;
color:#fff;
}
#box_content{
width:580px;
background-color:#FFFFFF;
font-size:0.7em;
}
#box{
width:790px;
margin:0 0;
padding-top:0px;
min-height:100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
text-align:left;
background:#fff;
background-image:url(../images/bg_body.jpg);
background-repeat:no-repeat;
}
#box_menu {
position:absolute;
left:28px;
top:180px;
width:130px;
font-size:100%;
background:#fff;
z-index:3;
/* Hintergrundfarbe und Schriftfarbe f?r diesen Container wurde in #outer formatiert. Dieser Container muss durchsichtig bleiben. */
}
/* common styling */
#box_menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#333;
width:120px;
height:20px;
line-height:19px;
font-size:0.7em;
padding-left:10px;
background-color:#FFFFFF;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
}
#box_menu ul { padding:0; margin:0;list-style-type:none; }
#box_menu ul li {float:left; margin-right:1px; position:relative;}
#box_menu ul li ul {display:none;}
/* specific to non IE browsers */
#box_menu ul li:hover a {color:#EDBD16; background-color:#61796D;}
#box_menu ul li:hover ul {display:block; position:absolute; top:0; left:130px; width:150px;}
#box_menu ul li:hover ul li a.hide {background-color:#fff; color:#333;}
#box_menu ul li:hover ul li:hover a.hide {width:164px;}
#box_menu ul li:hover ul li ul {display:none;}
#box_menu ul li:hover ul li a {display:block; color:#333; background-color:#ffF; width:164px;}
#box_menu ul li:hover ul li a:hover {color:#EDBD16; background-color:#61796D;}
#box_menu ul li:hover ul li:hover ul {display:block; position:absolute; left:300px; top:0; color:#33;}
#box_menu ul li:hover ul li:hover ul li a {display:block; width:150px; background-color:#C6CEBF; color:#333;}
#box_menu ul li:hover ul li:hover ul li a:hover {color:#fff; background-color:#61796D;}
#box_menu p {margin-top:0px; /* margin-top damit erster inhalt im sichtbaren Bereich dargestellt wird. */
}
#guetezeichen {
width:130px;
text-align:center;
}
#guetezeichen p{
padding-top:340px;
padding-left:55px;
}
#box_menu_top{
padding-left:400px;
padding-top:0.7em;
font-size:0.7em;
color:#333;
}
#box_menu_top p{
float:left;
padding-left:10px;
}
#box_menu_top p a:link {
color:#333;
text-decoration:none;
}
#box_menu_top p a:visited {
color:#333;
text-decoration:none;
}
#box_menu_top p a:hover {
color:#EDBD16;
text-decoration:none;
}
#box_menu_top p a:active {
color:#333;
text-decoration:none;
}
#box_content p{
padding:1.2em;
}
#liste{
padding:0 0 0 3em;
list-style-image:none;
list-style:none;
}
#liste li{
line-height:20px;
padding:0 0 0 1.5em;
background-image:url(../images/arrow_liste.gif);
background-position:left center;
background-repeat:no-repeat;
}
Gruss
holli-
Hi,
ich habe doch eine Mindesthöhe angegeben für die Box.
Das ändert doch nichts daran, daß Du die Höhe von body und html (die das Hintergrundbild haben) auf die Viewporthöhe beschränkt hast.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo Andreas,
Das ändert doch nichts daran, daß Du die Höhe von body und html (die das Hintergrundbild haben) auf die Viewporthöhe beschränkt hast.
... ? Was muss ich dann tun?
Gruss
Holli-
Das ändert doch nichts daran, daß Du die Höhe von body und html (die das Hintergrundbild haben) auf die Viewporthöhe beschränkt hast.
... ? Was muss ich dann tun?
die Höhe weg lassen.
Struppi.
--
Javascript ist toll (Perl auch!)-
Hallo Struppi,
kannst Du mir bitte beschreiben, welche Höhe genau in welcher Klasse ich weglassen soll?Gruss
Holli-
Hi,
kannst Du mir bitte beschreiben, welche Höhe genau in welcher Klasse ich weglassen soll?
Nochmal ganz langsam: Dein Hintergrundbild ist im html- und im body-Element. Deren Höhe ist auf die Viewporthöhe begrenzt. Diese Begrenzung der Höhe von html und body willst Du nicht. Wo mußt Du also die Begrenzung wegnehmen?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo Andreas,
hier mal ein Auszug aus dem CSS. Das Hintergrundbild ist nicht im Body sondern in einer Box (siehe "#box")*{
padding:0;
margin:0;
border:0;
}
html, body {
height:100%; /* wichtig */
background:#505851;
text-align:left;
font-family:trebuchet ms, verdana, arial, helvetica, sans-serif;
font-size:100.01%;
background-image:url(../images/spacer.gif);
background-repeat:repeat-y;
}
#box_left{
margin:0 0;
height:auto !important; /* moderne Browser */
float:left;
width:155px;
}
#box_right{
margin-left:200px;
height:100%;
*min-height:100%;
width:580px;
position:absolute;
top:0px;
}
#box_top{
position:relative;
top:0px;
height:180px;
width:580px;
}
#top_pic{
position:relative;
top:68px;
padding-left:70px;
}
#box_top2{
height:100px;
width:580px;
color:#fff;
}
#box_content{
width:580px;
background-color:#FFFFFF;
font-size:0.7em;
}
#box{
width:790px;
margin:0 0;
padding-top:0px;
min-height:100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
text-align:left;
background:#fff;
background-image:url(../images/bg_body.jpg);
background-repeat:no-repeat;
}
#box_menu {
position:absolute;
left:28px;
top:180px;
width:130px;
font-size:100%;
background:#fff;
z-index:3;
/* Hintergrundfarbe und Schriftfarbe f?r diesen Container wurde in #outer formatiert. Dieser Container muss durchsichtig bleiben. */
}
/* common styling */
#box_menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#333;
width:120px;
height:20px;
line-height:19px;
font-size:0.7em;
padding-left:10px;
background-color:#FFFFFF;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
}
#box_menu ul { padding:0; margin:0;list-style-type:none; }
#box_menu ul li {float:left; margin-right:1px; position:relative;}
#box_menu ul li ul {display:none;}
/* specific to non IE browsers */
#box_menu ul li:hover a {color:#EDBD16; background-color:#61796D;}
#box_menu ul li:hover ul {display:block; position:absolute; top:0; left:130px; width:150px;}
#box_menu ul li:hover ul li a.hide {background-color:#fff; color:#333;}
#box_menu ul li:hover ul li:hover a.hide {width:164px;}
#box_menu ul li:hover ul li ul {display:none;}
#box_menu ul li:hover ul li a {display:block; color:#333; background-color:#ffF; width:164px;}
#box_menu ul li:hover ul li a:hover {color:#EDBD16; background-color:#61796D;}
#box_menu ul li:hover ul li:hover ul {display:block; position:absolute; left:300px; top:0; color:#33;}
#box_menu ul li:hover ul li:hover ul li a {display:block; width:150px; background-color:#C6CEBF; color:#333;}
#box_menu ul li:hover ul li:hover ul li a:hover {color:#fff; background-color:#61796D;}
#box_menu p {margin-top:0px; /* margin-top damit erster inhalt im sichtbaren Bereich dargestellt wird. */
}
#guetezeichen {
width:130px;
text-align:center;
}
#guetezeichen p{
padding-top:340px;
padding-left:55px;
}
#box_menu_top{
padding-left:400px;
padding-top:0.7em;
font-size:0.7em;
color:#333;
}
#box_menu_top p{
float:left;
padding-left:10px;
}
#box_menu_top p a:link {
color:#333;
text-decoration:none;
}
#box_menu_top p a:visited {
color:#333;
text-decoration:none;
}
#box_menu_top p a:hover {
color:#EDBD16;
text-decoration:none;
}
#box_menu_top p a:active {
color:#333;
text-decoration:none;
}
#box_content p{
padding:1.2em;
}
#liste{
padding:0 0 0 3em;
list-style-image:none;
list-style:none;
}
#liste li{
line-height:20px;
padding:0 0 0 1.5em;
background-image:url(../images/arrow_liste.gif);
background-position:left center;
background-repeat:no-repeat;
}
Hier nochmal die komplette Seite:
http://www.assedo.de/kunden/becker/index.html
Gruss
Holli-
hi,
hier mal ein Auszug aus dem CSS.
Wie oft willst du uns den jetzt noch vorsetzen?
Wenn man/du bei "assedo. << webdesign & logo gestaltung" nicht in der Lage ist, das gewünschte umzusetzen - dann sollte man die Aufgabe vielleicht auslagern ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
-
-
-
-
-