float bei "andocken" stoppen?

html.de-Forum HTML, XHTML & CSS
1

hallo zusammen,

ich möchte erreichen, dass meine rechts floatende sidebar aufhört zu floaten, wenn es durch verkleinern des windows-fensters, an mein logo andockt. das ganze sieht bei verkleinerung des fensters nämlich so aus:
stp2.PNG

ich hätte es lieber so, dass die sidebar, wenn das fenster zu klein wird, einfach rechts vom logo bleibt, statt in der zeile zu verrücken. mein code sieht so aus:

[HTML]

AIR
[/HTML]

das is die css:

[HTML]body{
margin: 0;
}
#topbar{
margin: 0 auto;
width: 1024px;
}
.bigbar{
width: 242px;
height: 20px;
background: #75808d url(bar_gradient.png);
float: left;
}
.smallbar{
width: 149px;
height: 20px;
background: #fff url(bar_gradient.png);
float: left;
}
#logo{
width: 149px;
height: 51px;
background: url(logo.png);
float: left;
}
#sidebar{
float: right;
width: 242px;
}
[/HTML]

2

Mit einer minimalen Breite kannst du das erreich. Ist aber für mobule Geräte ungeeignet. Besser wär ein Respnsive Design.

3

erstmal danke,

ich weiß nicht so recht wo ich die min-width anbringen sollte, habs aber bei beiden divs wo’s sinn machen könnte versucht (topbar und sidebar), leider ohne erfolg. wenn du dir sicher bist, dass es funktioniert, kannst du mir dann sagen, wo ich die eigenschaft ergänzen oder austauschen soll?

edit: responsive-design sagte mir erstmal nichts, hab mir das mal angeschaut. allerdings soll die seite für desktops ausgerichtet sein, dafür erscheint mir eine solche mehrarbeit nicht gerechtfertigt.

4

Hallo,

du musst dem body-Element eine „min-width: 1024px;“ mit auf den Weg geben.

Oder du fügst um die bestehenden div herum ein weiteres div ein und weist dem die min-width zu. Wobei du dich dann mit den Auswirkungen der float-Anweisungen befassen musst, zum Beispiel der Herausnahme aus dem Fluss der Elemente.

Außerdem fehlt / fehlen noch die für float erforderlichen clear-Anweisungen.

Allerdings sehe ich wie djheke das Problem, das du mit deiner Herangehensweise in einer Sackgasse landen wirst und dann wieder komplett von vorne anfangen musst.

Gruss

MrMurphy

5

Probier mal

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>AIR</title>
<style>
body{
margin:0;
background:#aaa;
min-width:1024px;
}
#topbar{
margin:0 auto;
width:782px;
background:#000;
overflow:hidden;
}
.bigbar{
  width:  242px;
  height:  20px;
  background:  url(bar_gradient.png) #ff0;
  float:  left;
}
.smallbar{
  width:  149px;
  height:  20px;
  background:  url(bar_gradient.png) #ad0;
  float:  left;
}
#logo{
  width:  149px;
  height:  51px;
  background:  url(logo.png) #f00;
  float:  left;
}
#sidebar{
  float:  right;
  width:  242px;
background:#ad0;
}
</style>
</head>
 <body>
  <div id="sidebar">
  sidebar
  </div>
  <div id="topbar">
  <div class="bigbar">big</div>
  <div class="smallbar">small</div>
  <div class="bigbar">big</div>
  <div id="logo">logo</div>
  </div>

  </body>
</body>
</html>

Allerdings wird sich dein margin 0 auto nicht mehr erwartungsgemäß verhalten. Weiterhin habe ich so die Befürchtung, dass .small und .big nur der Gestaltung dienen. Was aber totaler Quatsch wäre.

6

min-width bei body klappt, danke. die divs .smallbar & .bigbar als gestaltungselemente zu nutzen war so geplant, warum soll das quatsch sein? ich dachte mir, dass ich die seite so klein wie möglich halte und grafiken nur dort ansetzte, wo ich sie tatsächlich brauche.

Was mich aber viel mehr interessiert ist, warum ich in einer sackgasse landen sollte? wenn du mir das kurz erklären könntest, lässt sich das vielleicht vermeiden.