Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Syranus" data-source="post: 1544390" data-attributes="member: 49458">Hallo,also ich hab mal wieder ein Problem mit der Positionierung von CSS-Elementen. Keine Ahnung warum es diesmal schon wieder nicht funktionieren will. Also:Ich habe eine HTML-Seite, die in 3 Spalten aufgeteilt ist. Die 1. und 3. ist nur ein grafischer Rahmen, der sich über die gesamte Höhe zieht. In der 2. Spalte spielt sich der Hauptteil ab. Da drin will ich erst den Header aufbauen (funktioniert) und dann über die gesamte Breite der Spalte die Navigation aufbauen. Die Navigation ist eine Spalte Breit (genau so breit wie Spalte 2). Die einzelnen Buttons kleben nicht aneinander, sondern haben etwas Luft dazwischen. Ich habe also einen Container gezogen, der den Gesamten Inhalt der Seite fassen soll (960px). In diesem werden dann die 3 Spalten aufgerufen. Wenn ich nun aber mit einer Auflösung von mehr als 960px die Seite öffne, und das Browserfenster auf mehr als 960px (breite) ziehe, bewegen sich alle Container mit, sodass die Seite immer mittig angezeigt wird. Nur die Navigation bleibt &quot;kleben&quot; schauts euch am besten mal an, ist schwer zu erklären: <a href="http://volturi.gildenseite.de/" target="_blank">Gilden Homepage</a>Mir ist völlig fremd, warum sich die Seite so verhält, weil in den Seiten die ich bisher erstellt habe funktioniert die &quot;Dynamische Positionierung&quot; der Elemente auf der X-Achse immer tadellos =/ hier mal der CSS-Code der problematischen Elemente:[CODE]div#container {&nbsp; &nbsp; width:1100px; height:910px; margin:0 auto; font-size:11px; text-align: justify }div#container .bar_left {width:55px; height:910px; background-image:url(../img/sidebar_left.gif); background-repeat:repeat-y; float:left;}div#container .center_mainpart {width:960px; height:910px; float:left}.center_mainpart div#header {width:960px; height:303px; background-image:url(../img/header_bg.png); background-repeat:no-repeat; float:left}div#header ul#mainnavi li {list-style:none}div#header ul#mainnavi li a { height:48px; display:block; background-image:url(../img/navibar_inactive.gif); background-repeat:no-repeat; position:absolute; }div#header ul#mainnavi li a.home { width:95px; background-position:0 0; left:150px; top:256px; }div#header ul#mainnavi li a.member {&nbsp; width:126px; background-position:0 -48px; left:361px; top:257px; }div#header ul#mainnavi li a.satzung {&nbsp; width:131px; background-position:0 -96px; left:578px; top:258px; }div#header ul#mainnavi li a.forum {&nbsp; width:124px; background-position:0 -144px; left:804px; top:259px; }div#header ul#mainnavi li a:hover,div#header ul#mainnavi li.active a { background:none;}div#container .bar_right {width:55px; height:910px; background-image:url(../img/sidebar_right.gif); background-repeat:repeat-y; float:left;}[/CODE]Damit die Codes vollständig sind hier noch der BODY-Part der eigentlichen HTML-Seite:[CODE]&lt;div id=&quot;container&quot;&gt;&lt;div class=&quot;bar_left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;center_mainpart&quot;&gt; &lt;!-- hauptteil der Seite --&gt;&nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &lt;ul id=&quot;mainnavi&quot; class=&quot;noText&quot;&gt;&nbsp; &nbsp; &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;startseite noText&quot; title=&quot;Startseite&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;about-me.html&quot; class=&quot;member noText&quot; title=&quot;?ber Mich&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;portfolio.html&quot; class=&quot;satzung noText&quot; title=&quot;Portfolio&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;impressum.html&quot; class=&quot;forum noText&quot; title=&quot;Impressum &amp; Disclaimer&quot;&gt;&lt;/a&gt;&lt;/li&gt;&nbsp;&nbsp; &lt;/ul&gt;&nbsp;&nbsp; &lt;/div&gt;&lt;/div&gt; &lt;!--ENDE hauptteil der Seite --&gt;&lt;div class=&quot;bar_right&quot;&gt;&lt;/div&gt;&lt;/div&gt; &lt;!-- end main bodypart --&gt;[/CODE]Alles in allem noch absolut wenig Code, aber funktionieren will das dennoch nicht. Der Teufel steckt wahrscheinlich mal wieder im Detail =/Ja, die grafischen &quot;Fehler&quot; sind mir auch schon aufgefallen, aber ich wollte erstmal den Code der Seite fertigstellen, bevor ich mich an das Feintuning mache....P.S.: Bitte keine Diskussion über Design oder ähnliches. Ist alles noch im &quot;Pre-Alpha Status&quot; ;DVielen dank schonmal,syranus</blockquote>

[QUOTE="Syranus, post: 1544390, member: 49458"] Hallo, also ich hab mal wieder ein Problem mit der Positionierung von CSS-Elementen. Keine Ahnung warum es diesmal schon wieder nicht funktionieren will. Also: Ich habe eine HTML-Seite, die in 3 Spalten aufgeteilt ist. Die 1. und 3. ist nur ein grafischer Rahmen, der sich über die gesamte Höhe zieht. In der 2. Spalte spielt sich der Hauptteil ab. Da drin will ich erst den Header aufbauen (funktioniert) und dann über die gesamte Breite der Spalte die Navigation aufbauen. Die Navigation ist eine Spalte Breit (genau so breit wie Spalte 2). Die einzelnen Buttons kleben nicht aneinander, sondern haben etwas Luft dazwischen. Ich habe also einen Container gezogen, der den Gesamten Inhalt der Seite fassen soll (960px). In diesem werden dann die 3 Spalten aufgerufen. Wenn ich nun aber mit einer Auflösung von mehr als 960px die Seite öffne, und das Browserfenster auf mehr als 960px (breite) ziehe, bewegen sich alle Container mit, sodass die Seite immer mittig angezeigt wird. Nur die Navigation bleibt "kleben" schauts euch am besten mal an, ist schwer zu erklären: [URL="http://volturi.gildenseite.de/"]Gilden Homepage[/URL] Mir ist völlig fremd, warum sich die Seite so verhält, weil in den Seiten die ich bisher erstellt habe funktioniert die "Dynamische Positionierung" der Elemente auf der X-Achse immer tadellos =/ hier mal der CSS-Code der problematischen Elemente: [CODE]div#container { width:1100px; height:910px; margin:0 auto; font-size:11px; text-align: justify } div#container .bar_left {width:55px; height:910px; background-image:url(../img/sidebar_left.gif); background-repeat:repeat-y; float:left;} div#container .center_mainpart {width:960px; height:910px; float:left} .center_mainpart div#header {width:960px; height:303px; background-image:url(../img/header_bg.png); background-repeat:no-repeat; float:left} div#header ul#mainnavi li {list-style:none} div#header ul#mainnavi li a { height:48px; display:block; background-image:url(../img/navibar_inactive.gif); background-repeat:no-repeat; position:absolute; } div#header ul#mainnavi li a.home { width:95px; background-position:0 0; left:150px; top:256px; } div#header ul#mainnavi li a.member { width:126px; background-position:0 -48px; left:361px; top:257px; } div#header ul#mainnavi li a.satzung { width:131px; background-position:0 -96px; left:578px; top:258px; } div#header ul#mainnavi li a.forum { width:124px; background-position:0 -144px; left:804px; top:259px; } div#header ul#mainnavi li a:hover, div#header ul#mainnavi li.active a { background:none;} div#container .bar_right {width:55px; height:910px; background-image:url(../img/sidebar_right.gif); background-repeat:repeat-y; float:left;} [/CODE] Damit die Codes vollständig sind hier noch der BODY-Part der eigentlichen HTML-Seite: [CODE]<div id="container"> <div class="bar_left"></div> <div class="center_mainpart">  <div id="header"> <ul id="mainnavi" class="noText"> <li class="active"><a href="index.html" class="startseite noText" title="Startseite"></a></li> <li><a href="about-me.html" class="member noText" title="?ber Mich"></a></li> <li><a href="portfolio.html" class="satzung noText" title="Portfolio"></a></li> <li><a href="impressum.html" class="forum noText" title="Impressum & Disclaimer"></a></li> </ul> </div> </div>  <div class="bar_right"></div> </div> [/CODE] Alles in allem noch absolut wenig Code, aber funktionieren will das dennoch nicht. Der Teufel steckt wahrscheinlich mal wieder im Detail =/ Ja, die grafischen "Fehler" sind mir auch schon aufgefallen, aber ich wollte erstmal den Code der Seite fertigstellen, bevor ich mich an das Feintuning mache.... P.S.: Bitte keine Diskussion über Design oder ähnliches. Ist alles noch im "Pre-Alpha Status" ;D Vielen dank schonmal, syranus [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?