Mal wieder ein CSS Problem

Dude566 · Verfasst: Sa 11.06.11 15:41

Hallo Leute,

ich weiß nicht wieso aber HTML & CSS mögen mich mal wieder nicht.

Es geht um die Positionierung einer Sidebar.

Ich habe einen Wrapper mit fester Breite und die Höhe ist auf auto gestellt.
In dem Wrapper möchte ich Links dann den Content haben, was auch klappt.
Rechts davon sollte dann eigentlich die Sidebar sein, ich weiß nicht wieso, aber sie will nicht dort hin.

Im Anhang 1 Bild wie es aussehen sollte und 1 Bild wie es wirklich dargestellt wird.

Hier mal der CSS Code dazu:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

#wrapper {
  width: 800px;
  height: auto;
  margin: 10px auto;
  padding: 0px 0px 20px 0px;
  background-color: #F2F2F2;
  border: 1px solid #E5E5FF;
  border-radius: 5px;
}
#content {
  color: #333333;
  width: 560px;
  margin: 0px;
  padding: 5px 20px;
}
#sidebar {
  width: 180px;
  padding: 10px;
  min-height: 300px;
  border-left: 1px dashed #000000;
}

Wenn ich bei sidebar float:left setze rutscht es ganz aus dem Wrapper, warum auch immer.
Stelle ich float:right ein hängt es rechts unten statt links, aber eben immer noch nicht so wie es soll.

Ich hoffe ihr könnt mir da mal wieder weiterhelfen, vielleicht blicke ich dann mal durch.

Einloggen, um Attachments anzusehen!

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

papa69 · Verfasst: Sa 11.06.11 16:38

versuch mal unter sidebar
...
#sidebar {
float:right;
width...

...}

das löst zwar nicht das ursprüngliche problem, bringt dich aber vlt. etwas weiter

ich glaube, das problem ist, das du die "sidebar" in den "wrapper" einbinden musst. Ich habe das nur ziemlich lange nicht mehr gemacht, deshalb fällt mir auf die schnelle die "richtige" lösung nicht ein...

Regan · Verfasst: Sa 11.06.11 17:09

Ich habe mal kurz etwas dazu gemacht. Ob dir das etwas hilft, weiß ich nicht. Prinzipiell habe ich ein Doppel-Float (txt, 477 Bytes)-Prinzip. Hintergrund ist, dass es dadurch und durch die Prozentangaben auf jeder Bildschirmauflösung ähnlich aussieht.

Einloggen, um Attachments anzusehen!

Dude566 · Verfasst: Sa 11.06.11 17:22

So funktioniert das aber auch nicht user profile icon

Regan, dann rutschen beiden Elemente komplett aus dem Wrapper und trotzdem ist die Sidebar nicht rechts vom Content. :nixweiss:

Bei deinem Beispiel funktioniert es ja, bei mir kann ich den Wrapper aber nicht mit Prozentangaben anpassen da ich eine Breite von genau 800 will, egal welche Auflösung.
Ich denke auch nicht das es daran liegt.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Regan · Verfasst: Sa 11.06.11 17:33

Dann musst du beide zur gleichen Seite floaten lassen. Sprich Content nach links floaten und Sidebar auch links dran floaten. Dazu muss das Div vom Content vor dem Div der Sidebar sein.

Dude566 · Verfasst: Sa 11.06.11 17:50

Ja auch schon probiert, dann rutschen aber beide aus dem Wrapper.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

WeBsPaCe · Verfasst: Sa 11.06.11 22:43

Wieso zwei Floats?! :gruebel:

Reicht doch, wenn dein "Wrapper" feste Breite hat:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:

<div style="width: 800px; background-color: red;">
<!-- wrapper -->
   <div style="float: right; width: 180px; background-color: green;">
   sidebar
   </div>
   <div style="background-color: blue;">
   content
   </div>
</div>

Vom roten Wrapper selbst sieht man nichts. Aber die Breite ist 800px.

War das so gemeint?

_________________
Steht der Bauer im Gemüse, hat er später grüne Füße.

papa69 · Verfasst: So 12.06.11 11:17

oh mann

html und css - ein buch mit 7 siegeln ... grrrr

hab mal was probiert und hoffe, es entspricht deinen vorstellungen

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

</head>

<body>
<style type="text/css">
<!--
#wrapper {
    width : 800px;
    height: auto;
    margin: 10px auto;
    padding: 0px 0px 20px 0px;
    background-color: #f2f2f2;
    border: 1px solid #e5e5ff;

}
#sidebar {
    float: right;
    width: 180px;
    padding: 10px;
    min-height: 300px;
    background-color: thistle;
}
#content {

    margin: 0px;
    width: auto;
    max-width: 560px;
    margin-left: 0px;
    padding: 5px 20px;
    background-color: lightblue;
}
-->
</style>
<div id="wrapper">
    <div id="sidebar">
        <ul>
            <li>Startseite</li>
            <li>Impressum</li>
        </ul>
    </div>

    <div id="content">
      <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
    pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
    enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
    Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
    vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
    varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam
    eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
    neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
    Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
    velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut,
    mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium
    turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.
    Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
    nunc. Nunc
    </p>
    </div>
</div>
</body>
</html>

ansonsten nochmal melden

WeBsPaCe · Verfasst: So 12.06.11 12:59

Ähm, wo ist der Unterschied? :wink:

_________________
Steht der Bauer im Gemüse, hat er später grüne Füße.

Dude566 · Verfasst: So 12.06.11 13:52

Ich habe die Sidebar jetzt einfach mal rechts floaten lassen und sie im HTML-Code vor den Content gesetzt und es funktioniert.

Problem ist allerdings immer noch wie ihr wisst wenn ich die Elemente im Wrapper floaten lasse, das sie bei Übergröße auch über den Wrapper hinauswachsen.

Habe das ganze so getestet indem ich den Content vom Inhalt her klein gelassen habe und der Sidebar eine Mindesthöhe von 300px und siehe da, die Sidebar ragt über den Wrapper nach unten hinaus.

Jemand dazu noch eine Idee?

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

Martok · Verfasst: So 12.06.11 18:16

Pack ein
<div style="clear:both"></div> hinter die beiden:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<div id="wrapper">
    <div id="sidebar">
        <ul>
            <li>Startseite</li>
            <li>Impressum</li>
        </ul>
    </div>

    <div id="content">foobar </div>

    <div style="clear:both"></div>
</div>

Muss doch mal das CSS-Layout-Kompendium schreiben, was ich wegen user profile icon

BenBE schon fast mal angefangen hätte. Aber die Zeit...

EDIT: Selfhtml kennt heute auch keiner mehr, oder?

_________________
"The phoenix's price isn't inevitable. It's not part of some deep balance built into the universe. It's just the parts of the game where you haven't figured out yet how to cheat."

Dude566 · Verfasst: So 12.06.11 21:25

Doch selfhtml kenne ich schon Martok, aber wie ich schon sagte verstehe ich manchmal nicht das Verhalten von CSS.

Danke dir! :zustimm:

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme