nicht angemeldet
Breite vom Container bei Broswerverkleinerung - bitte Hilfe
0 
Gunnar Bittersmann
0 0 
apsel
0 0 Gunnar Bittersmann
Breite vom Container bei Broswerverkleinerung - bitte Hilfe
Hallo zusammen,
ich glaub ich steh grad auf dem Schlauch: ich hab eine Seite, bei der ist im Header ein bg-image eingebunden. Wenn das Browserfenster normal groß ist, sieht alles wunderbar aus, verkleiner ich das fenster, entsteht rechts ein rand und ich weiß nicht woher der kommt.
Hier mal mein Code:
<body>
<div id="container">
<div id="header">
<h1>Ulrike Hub</h1>
<h2>Sonderpädagogin, Dipl. Pädagogin, Heilpraktikerin für Psychotherapie</h2>
</div>
<div id="navigation" align="right">
<ul>
<li><a>...</a></li>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
html {height: 100.01%;}
body {
background-color: #f8f8f8;
padding: 0;
margin: 0;
font-family:Verdana, Geneva, sans-serif;
color:#869fb2;
font-size:13px;
line-height:1.4;
height: 101%;
}
#container {
margin: 0 auto;
}
#header {
height:170px;
background:url(../images/header_bg.gif) repeat-x top left;
}
#header h1 {
background:url(../images/logo_.png) no-repeat 50px 30px;
height: 170px;
text-indent: -9999px;
overflow: hidden;
}
#header h2 {
text-indent: -9999px;
overflow: hidden;
}
#navigation {
margin-top: -80px;
margin-left: 400px;
margin-right: 50px;
height:80px;
width:660px;
position:relative;
}
#navigation ul {
list-style-image:none;
}
#navigation ul li {
display:inline;
margin: 0 5px;
}
#navigation ul li a {
color:#FFF;
font-size:14px;
text-decoration:none;
background:url(../images/navi-button.gif) no-repeat top center;
padding-top:40px;
}
#navigation ul li#on a {
color:#6c8a8f;
font-size:14px;
text-decoration:none;
background:url(../images/navi-button_active2.gif) no-repeat top center;
padding-top:40px;
}
#navigation ul li a:hover {
color:#6c8a8f;
font-size:14px;
text-decoration:none;
background:url(../images/navi-button_active.gif) no-repeat top center;
padding-top:40px;
}
Vielen Dank für Hilfe,
Bruzzler
-
@@Bruzzler:
nuqneH
Wenn das Browserfenster normal groß ist,
„Normal groß“ gibt es nicht. Jedenfalls nicht für mehrere Nutzer.
sieht alles wunderbar aus
Schön für dich,
dass du es siehst. Lässt du uns das auch sehen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
„Normal groß“ gibt es nicht. Jedenfalls nicht für mehrere Nutzer.
auch wieder wahr - anders formuliert: bei maximaler Browsergröße (egal wie groß)
Lässt du uns das auch sehen?
Sorry, Klick mich!
Grüße
Bruzzler-
Om nah hoo pez nyeetz, Bruzzler!
bei mir (FF3.6, XP SP3, 32bit) ist auch nach dem Verkleinern kein Rand, wohl aber ein Problem mit der Zeichenkodierung.
Matthias
--
-
Lässt du uns das auch sehen?
Sorry, Klick mich!
Wenn Du mit dem Rand die Navigationsleiste meinst, bei der die Schrift auf weißem Grund nicht so richtig gut zu lesen ist, dann liegt das in meinen Augen an der Positionierung der Navigationsleiste. Die ragt über den Kopfbereich hinaus. Gut zu sehen mit Firebug für Firefox (oder einem entsprechenden Werkzeug für den Browser Deiner Wahl).
Schöne Grüße,
Peter
-
Wenn Du mit dem Rand die Navigationsleiste meinst, bei der die Schrift auf weißem Grund nicht so richtig gut zu lesen ist, dann liegt das in meinen Augen an der Positionierung der Navigationsleiste. Die ragt über den Kopfbereich hinaus. Gut zu sehen mit Firebug für Firefox (oder einem entsprechenden Werkzeug für den Browser Deiner Wahl).
Ja, das ist ja mein Problem, wieso bleibt der Hintergrund nicht in diesem Farbverlauf, wenn ich das Fenster verkleinere??? Ich dachte der geht dann immer über die gesamte Breite???
Daanke und Grüße
bruzzler-
[...]
Ja, das ist ja mein Problem, wieso bleibt der Hintergrund nicht in diesem Farbverlauf, wenn ich das Fenster verkleinere??? Ich dachte der geht dann immer über die gesamte Breite???Weil der Farbverlauf (bzw. die Hintergrundgrafik) nur für den Header notiert ist, die Liste mit den Navigationselementen aber darüber hinaus ragt. Schau Dir das ganze mal mit der Mouse Over Ansicht beim Firebug an, dann siehst Du genau, was das Problem ist.
Schöne Grüße,
Peter
-
-
-
@@Bruzzler:
nuqneH
„Normal groß“ gibt es nicht. Jedenfalls nicht für mehrere Nutzer.
auch wieder wahr - anders formuliert: bei maximaler Browsergröße (egal wie groß)Auch „bei maximaler Browsergröße“ heißt bei verschiedenen Nutzern was anderes.
Lässt du uns das auch sehen?
Sorry, Klick mich!Sorry, ich sehe dein Problem nicht.
Dafür andere:
(1) Dein Menü ragt bei (schon nicht allzu) schmalen Viewports nach rechts raus. Hortizontales Scrolen ist blöd. Besonders blöd ist aber, dass dort dann kein rosa Hintergrund mehr ist, Weiß auf sehr hellem Grau ist so gut wie unleserlich. Dein Menü ist nicht benutzbar.
(Oder meintest du das mit „rechts ein rand“?)
Übrigens brauchst du für den leichten Farbverlauf kein Hintergrundbild, moderne Browser können das mit CSS. Nur ältere Browser müssten dann noch das Bild laden (was Übertragungszeit kostet). Und das Bild sollte breiter sein als 1 Pixel. Siehe Links in diesem Posting.
#header { background: url("../images/header_bg.gif") repeat-x; background: -moz-linear-gradient(top, #FED7B4, #FDC494) repeat-x; background: -webkit-gradient (linear, left center, right center, from(#FED7B4), to(#FDC494)) repeat-x; }(2) Du hast ein Probelem mit der Zeichencodierung („Ãœber mich“). Dein Server gibt eine falsche Codierung an. [CHANGING-ENCODING], Schritt 3.
(3) Die Höhe deiner Inhaltsboxen ist unnötigerweise höher als der Viewport, eine vertikale Scrollbar erscheint, auch wenn es gar nichts zu scrollen gibt.
(4) Unter dem rosa div[@id="bottom"] ist hellgrauer Hintergrund, was irgendwie blöd aussieht.
(5) Das div[@id="container"] ist völlig überflüssig.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
(1) Dein Menü ragt bei (schon nicht allzu) schmalen Viewports nach rechts raus. Hortizontales Scrolen ist blöd. Besonders blöd ist aber, dass dort dann kein rosa Hintergrund mehr ist, Weiß auf sehr hellem Grau ist so gut wie unleserlich. Dein Menü ist nicht benutzbar.
(Oder meintest du das mit „rechts ein rand“?)
genau, das ist mein Problem, liegt das nur an der Navi? Ich hab zwar eigentlich mal die Navi entfernt und das Problem mit dem grauen Rand war trotzdem noch da... von demher dachte, ich kann das ausschließen.
Wie kann ich denn verhindern, dass dieser Rand entsteht? Bei mir taucht der nur auf, wenn ich verkleinere...ist viell. doch die Positionierung der Navi?? Sollte ich die besser floaten?Übrigens brauchst du für den leichten Farbverlauf kein Hintergrundbild, m
super, danke für den hinweis, hab ich wieder dazu gelernt, übernehm ich...
(2) Du hast ein Probelem mit der Zeichencodierung
ich weiss, noch nicht geändert...
(3) Die Höhe deiner Inhaltsboxen ist unnötigerweise höher als der Viewport, eine vertikale Scrollbar erscheint, auch wenn es gar nichts zu scrollen gibt.
der inhalt ist auch noch nicht vollständig... da kommt schon noch content hin...
(4) Unter dem rosa div[@id="bottom"] ist hellgrauer Hintergrund, was irgendwie blöd aussieht.
danke für den hinweis...
(5) Das div[@id="container"] ist völlig überflüssig.
ok, dachte ich mir fast
Danke und viele Grüße
Bruzzler
-
-
-