Problem mit Positionierung von CSS-Box

[Patrick190195]

Hallo zusammen!

Ich habe auf meiner Webseite ein "container"-Element, dass die Elemente "menue", "content" und sidebar in der Reihenfolge von links nach rechts beinhaltet. Die Einbindung von "menue" und "content" klappt auch super, allerdings wird "sidebar" in der falschen Höhe positioniert. Der CSS-Code lautet:

#sidebar {  
         margin-left: 875px;  
         margin-top: 40px;  
         background: #FFFF00;  
         padding: 5px;  
         box-shadow: 5px 5px 10px #000000;  
         min-height: 650px;  
         width: 200px;  
}

statt margin-top: 40px, was die Elemente "container", "menue" und "content" ebenfalls haben, wird "sidebar" jedoch in einem bestimmten Abstand unter "menue" und "content" positioniert, auch wenn es noch im "container" sich befindet.

Könntet Ihr mir da vielleicht helfen?

Danke im Voraus und liebe Grüße,

Patrick

P.S.: Nicht wundern, wenn ich nicht antworte - ich kann erst heute abend wieder hier hineinschauen.

[Der Martin]

Hi,

Ich habe auf meiner Webseite ein "container"-Element, dass die Elemente "menue", "content" und sidebar in der Reihenfolge von links nach rechts beinhaltet.

diese Prosa-Beschreibung ist ja ganz nett, aber nicht wirklich hilfreich. Am hilfreichsten wäre ein Online-Beispiel, an dem man selbst *sehen* kann, was los ist, und auch den Quellcode dazu.

#sidebar {

margin-left: 875px;
         margin-top: 40px;
         background: #FFFF00;
         padding: 5px;
         box-shadow: 5px 5px 10px #000000;
         min-height: 650px;
         width: 200px;
}

  
Und wie sind die anderen beiden Elemente gestylt, die noch mitspielen? Wie das gemeinsame Containerelement? Wie sieht das zugehörige Markup aus? CSS ist nahezu aussagefrei ohne das zugrundeliegende HTML.  
  
Ciao,  
 Martin  

-- 
Die letzten Worte des Fallschirmspringers:  
ELENDE SCHEISSMOTTEN!!  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[dave]

Hi,

einen Link zum Online-Beispiel hat der OP eingefügt.
Ich finde auch das man das viel zu leicht übersieht und finde das Feld URL beim ausfüllen des Formulars daher eher nutzlos.

~dave

[MudGuard]

Hi,

einen Link zum Online-Beispiel hat der OP eingefügt.
Ich finde auch das man das viel zu leicht übersieht und finde das Feld URL beim ausfüllen des Formulars daher eher nutzlos.

und es kommt noch dazu, daß manch einer dort einen Link zu seiner Homepage stehen hat, nicht zur Problemseite ...

cu,
Andreas

[Der Martin]

Hallo,

einen Link zum Online-Beispiel hat der OP eingefügt.

stimmt, hatte ich tatsächlich nicht gesehen. Sorry.

Ich finde auch das man das viel zu leicht übersieht und finde das Feld URL beim ausfüllen des Formulars daher eher nutzlos.

Zumal es von vielen dazu genutzt (missbraucht) wird, die eigene Website zu verlinken, anstatt der, um die es im Posting geht.

Na gut, das Problem von Patrick haben wir nun erkannt und beschrieben - zwei von drei Elementen gefloatet, das dritte nicht. Kein Wunder, wenn es sich dann anders verhält.
Der Hinweis auf validen Code ist auch angebracht ...

<div id="logo"><img height="150px" src="media/images/logo.png" width="150px" /></div>

Das Schließen leerer Elemente im XML-Stil (mit "/>") ist in HTML falsch, und "150px" ist kein gültiger Wert für das width- oder height-Attribut in HTML.

<a href="?pageid=start&cat=main">Startseite</a>
<a href="?pageid=news&cat=main">News</a>
<a href="?pageid=teamzone&cat=coachesstaff">Coaches & Staff</a>

Das '&' muss dem HTML-Kontext entsprechend codiert werden.

<br />
Herzlich willkommen auf der offiziellen Testseite der Uerdingen Tomahawks.
<br />
<br />

Zum fehlerhaften Schließen leerer Elemente siehe oben; davon abgesehen ist es nicht sinnvoll, einen zusammenhängenden Text mit Zeilenumbrüchen zwangsläufig zu zerhacken. Mehrere Zeilenumbrüche unmittelbar nacheinander ergeben erst recht keinen Sinn - für Abstände ist CSS da.

Hier findet Ihr aktuelle und &auml;ltere News bei den <i>Neuigkeiten</i>,

Das Verstümmeln von Umlauten ist Unfug, solange man eine Codierung verwendet, die diese direkt darstellen könnte (UTF-8 oder auch ISO-8859-x). Leider macht weder der Server im HTTP-Header eine Angabe zur Zeichencodierung, noch hat das Dokument eine Ersatzangabe als meta-Element. Der Browser darf also raten.

H E U T E

Auch für solche Effekte sollte CSS eingesetzt werden - wozu gibt es schließlich character-spacing?

Diese Webseite wurde NICHT im Namen des gleichnamigen Vereins ...

Verwechselt hier jemand Webseite und Website?

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

<a href="?pageid=teamzone&cat=coachesstaff">Coaches & Staff</a>
Das '&' muss dem HTML-Kontext entsprechend codiert werden.

Besonders das erste. Beim zweiten bin ich mir (mangels Zugang zur SGML-Spec) nicht sicher, ob das RFC-2119-Muss zutrifft. Sollte aber auf jeden Fall.

Leider macht weder der Server im HTTP-Header eine Angabe zur Zeichencodierung, noch hat das Dokument eine Ersatzangabe als meta-Element. Der Browser darf also raten.

Darf er eigentlich nicht; er sollte ISO 8859-1 nehmen. Er „rät“ aber trotzdem, d.h. er verwendet die im Browser als bevorzugt eigestellte Codierung. [article-o-http-charset]

H E U T E
Auch für solche Effekte sollte CSS eingesetzt werden - wozu gibt es schließlich character-spacing?

Und 'text-transform: uppercase'. [icke]

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Auch für solche Effekte sollte CSS eingesetzt werden - wozu gibt es schließlich character-spacing, ...

das in diesem Fall letter-spacing heißt?

Matthias

[dave]

Hi,

als erstes solltest du deine Seite validieren.

Mit Tools wie Firebug für Firefox oder anderen Entwickler-Tools für andere Browser kann man sehr gut erkennen was schief läuft.

#menue hat float:left
#content hat kein float, nimmt deshalb den restlichen Platz neben #menue ein.
#sidebar kommt dann natürlich darunter, weil #content den platz oben beansprucht.

Wie man dreispaltige Layouts mit CSS umsetzt ist <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=in SelfHTML >erklärt.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, Patrick190195!

float könnte auch hier dein Freund sein.

Matthias