Weiteres Bild im Hintergrund positionieren ?

[Efchen]

Also erstmal hast Du viel zu vele divs. Du kochst div-Suppe.
Ein Header ist eine Überschrift. Dafür gibts Tags <h1>..<h6>. Es gibt keinen Grund, das als <div> auszuzeichnen und beides sind Block-Elemente, verhalten sich also gleich.
Dann packst Du die Navigation nochmal in ein div, das ist so, als würdest Du ein Geschenk zweimal in Geschenkpapier einpacken. div dient nur zum Gruppieren mehrerer Elemente. div und ul sind aber beides Block-Elemente, verhalten sich also auch beide gleich. Außerdem gibst Du beiden Elementen die selbe ID, einen ID muss aber über das gesamte Dokument eindeutig sein.
Dann verwendest Du <h5> ohne <h1>..<h4> zu haben, das ist unlogisch. Angesichts der Tatsache, dass #Header wohl ein <h1> ist, muss hier <h2> hin. Und warum Du .copyright als "allgemeines Block-Element" ausgezeichnet hast, ist auch unlogisch. Es handelt sich doch mindestens um Text, sollte also als <p> ausgezeichnet werden. Ist übrigens auch ein Block-Element und verhält sich ebenfalls wie <div>.

Dein eigentliches Problem finde ich auf die Schnelle nicht. Normalerweise reicht es aus, ein Element hier links zu floaten und ein anderes Element ohne float und ohne position im HTML-Code danach zu platzieren. Dieses zweite Element sollte dann noch ein margin-left in mindestens der Breite des gefloateten Elements bekommen, dass der Inhalt nicht unter das Menü rutscht (es umfließt; wg. float). Dem zweiten Element würde ich dann als erstes Dein #bg2 einstellen und dann den Content-Bereich, beides mit position, damit die sich angemessen überlagern können. Und wenn dann der COntent-Bereich mit dem grauen Hintergrund innerhalb eines Block-Elements, das neben der Navigation steht, steht, dann müsste das auch mit dem Hintergrund klappen, denn im Moment wird der background wahrscheinlich einen Abstand von links bekommen müssen (background-position).

Schau mal, ob Dir das weiter hilft.

Viel Erfolg,
-Efchen

 

[sergej59]

Danke, für die Hilfe, habe die Fehler korogiert (nicht hochgeladen).
Allerdings ändert sich trotzdem nichts daran, dass
meine texte im div nicht richtig dargestellt werden und in der
Navigation landen. Wenn ich aber die Texte einfach so in den
Body ohne div Element schreibe, werden si richtig dargestellt nähmlich
aligne:left. Mein div in dem die Texte sein sollen hat ein margin:auto, wodurch es ja zentriert sein muss und nicht auf der navigation überlappen.

Hier nochmal mein div indem die texte stehen sollen

#tabdiv2 {
    text-align: left;
    font-weight: bold;
    border:0px solid #333;
    -moz-border-radius: 30px 5px;
    background-image: url(design/tablebg.png);
    width: 75%;
    margin: 5% auto 0%;
    padding:30px 40px 20px;
    position:relative;
    z-index:2;}

Dann weiß ich nicht , wie ich wie ich z.B meinem #tabdiv2 ein margin-left:200px geben soll, wenn es schon ein margin:auto har, damit es zentriert ist?

EDIT: Habe eben noch festgestellt, dass wenn ich die id Tabellen vergebe sie richtig Positioniert sind,
wenn ich aber divs die gleiche id vergebe sind sie verschoben ?

 

[sergej59]

So, habe heute alles mögliche ausprobiert und
Stundenlang rumgesucht und bin immer noch auf keine
lösung gestoßen, sobald ich divs für die texte verwende
verrutschen die einfach, wenn ich Tabellen nehme, oder sie direkt
in den Body schreibe gehts.

Seht ihr den Fehler :?:

 

[Efchen]

Danke, für die Hilfe, habe die Fehler korogiert (nicht hochgeladen).

Dann kann man Dir nur schwerer helfen.

Dann weiß ich nicht , wie ich wie ich z.B meinem #tabdiv2 ein margin-left:200px geben soll, wenn es schon ein margin:auto har, damit es zentriert ist?

Gar nicht. Entweder hat ein Element ein margin-left von 200px oder es ist zentriert. Beides ist logischerweise unmöglich.

Habe eben noch festgestellt, dass wenn ich die id Tabellen vergebe sie richtig Positioniert sind, wenn ich aber divs die gleiche id vergebe sind sie verschoben ?

Das kann viele Ursachen haben. Die Elemente könnten mit table#id angesprochen werden, das gilt dann natürlich nicht für div#id.

sobald ich divs für die texte verwende verrutschen die einfach, wenn ich Tabellen nehme, oder sie direkt in den Body schreibe gehts.

Also für Texte nimmt man eigentlich <p> und nicht <div>. Letzteres ist zum Gruppieren mehrerer Elemente.

Seht ihr den Fehler :?:

Nur, wenn Du Änderungen auch immer hochlädst.

 

[sergej59]

Dann kann man Dir nur schwerer helfen.


Gar nicht. Entweder hat ein Element ein margin-left von 200px oder es ist zentriert. Beides ist logischerweise unmöglich.


Das kann viele Ursachen haben. Die Elemente könnten mit table#id angesprochen werden, das gilt dann natürlich nicht für div#id.


Also für Texte nimmt man eigentlich <p> und nicht <div>. Letzteres ist zum Gruppieren mehrerer Elemente.


Nur, wenn Du Änderungen auch immer hochlädst.

Danke für deine Hilfe, ich habe jetzt eine Lösung gefunden.
Ich habe damit es nicht überlappt, alles inein Weiteres Div gepackt,
was ein padding-left:200px hat,so klappt das, ist diese Lösung OK ?

Und noch eine Frage hätte ich, wie lege ich z.B ul, ul li, ul li a in #navigation fest, damit wie du gesagt hast ich dem ul keine extra id geben muss ?

Index of /test

 

[Efchen]

Scheint mir jetzt auf den ersten Blick ganz passael zu sein. Für etwas ausgefallenere CSS-Aktionen muss man manchmal das ein oder andere div mehr im HTML-Code unterbringen.

Die Frage nach dem "festlegen" der Listenelemente hab ich jetzt nicht verstanden. Es ist ja nicht verkehrt, der Liste eine eigene id (hier #navigation) zu geben.

Was ich vermutlich gesagt habe ist, dass Du das div#navi weglassen kannst, weil Du ul#navigation genauso formatieren kannst (height, background-image und so).

 

[schinkes]

Newbie - HTML Problem - Flash in HTML

Moin moin,

ich bin neu hier und wohlmöglich gehört mein Beitrag hier auch nicht hin.
Da ich nicht raffe, wie ich eine neues Thema eröffnen kann, poste ich hier mein Anliegen, in der Hoffnung auf Hilfe zu stoßen...ansonsten muss der Admin meinen Beitrag löschen.

Folgendes Problem:
Ich möchte auf einer myspace.com Präsenz einen Topbanner mittig einbasteln. Das stellt soweit kein Problem dar;
Jetzt möchte ich aber von meinem Server ein Flash-File in den Topbanner einbetten. Den Topbanner habe ich als teilweise transparentes png abgespeichert, so dass das Flash-Element (ein Countdown) rechts exakt über folgendem Text stehen soll: "...until release of Gano's Debut Album...usw.".

Bevor mein PC das sogenannte "Fenster zum Hof" macht und ich komplett die Geduld verliere, poste ich hier den Code zur Ansicht.

Vielleicht weiß ja irgend jemand Rat von Euch?!


<style>
body{
background-position:top center;margin-top: 497;
background-color:rgb(0,0,0);
}
div.topbanner {
position: absolute;center;
clear:none;
top: 0%;
left: 50%;
margin-left: -512px;
margin-top: 0;
width: 1024px;
height: 600px;}
</style>


<div class="topbanner">
<center><img src="http://www.heimatkind.de/myspace_ganoble/images/6.png" height="600" width="1024" />


<div class="topbanner">
</div style="position: absolute; left: 555px; top: 20px">
<embed src="http://www.heimatkind.de/myspace_ganoble/CountdownTimer_flash8.swf" quality="high" bgcolor="#000000" width="400" height="100" name="CountdownTimer_flash8" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_de" />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="100" id="CountdownTimer_flash8" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="CountdownTimer_flash8.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />
</object>


</div>

 

[Efchen]

Da ich nicht raffe, wie ich eine neues Thema eröffnen kann

Am einfachsten wäre es wohl über den Button

:-)

Vielleicht weiß ja irgend jemand Rat von Euch?!

Auf welche Frage?

Besser als Code ist übrigens immer ein Link.

 

[schinkes]

Am einfachsten wäre es wohl über den Button

:-)


Auf welche Frage?

Besser als Code ist übrigens immer ein Link.

Moin Efchen,

für den "Button" bin ich wohl zu doof :-)

Hier erstmal der Link zur Page, um die es sich dreht:
myspace.com/ganomusic

und der von mir gepostete HTML code soll eingebastelt werden;
nur funzt dieser nicht so wie ich will. Der Coundown läßt sich nicht an die von mir gewünschte Stelle positionieren. Ich denke das der Fehler irgendwo in diesen Zeilen liegen könnte:

<div class="topbanner">
</div style="position: absolute; left: 555px; top: 20px">


Can U help??

 

[Efchen]

und der von mir gepostete HTML code soll eingebastelt werden;
nur funzt dieser nicht so wie ich will.

Das kann ich mir vorstellen. Der ist ja auch nicht korrekt.

<div class="topbanner">
<center><img src="http://www.heimatkind.de/myspace_ganoble/images/6.png" height="600" width="1024" />
<div class="topbanner">
</div style="position: absolute; left: 555px; top: 20px">

1. Das <center>-Tag ist schon seit nem Jahrzeht veraltet. HTML benutzt man nur, um dem Inhalt eine Bedeutung zu geben (= Semantik), nicht aber um das Aussehen zu definierne. Das macht man mit CSS.
Block-Elemente zentriert man mit "margin:0 auto" und Inline-Elemente mit "text-align:center". Ein Image zählt in diesem Fall als Inline-Element.
2. Dem Image fehlt das alt-Attribut. Das ist jetzt für Dein Problem nicht ausschlaggebend, ist aber verpflichtend.
3. Es fällt mir auf, dass Du noch ein div mit der Klasse "topbanner" öffnest, obwohl das alte noch nicht zu ist. Das ist zwar syntaktisch korrekt, aber ob Du das so gewollt hast?
4. Ein schließendes Tag (</div>) hat niemals Attribute, wie bei Dir hier.

Dann noch zu Deinem CSS-Code:

div.topbanner {
position: absolute;center;
clear:none;
top: 0%;
left: 50%;
margin-left: -512px;
margin-top: 0;
width: 1024px;
height: 600px;}

Das "center" hinter der position-Zeile muss komplett weg. Das steht da ohne jeglichen Zusammenhang. In CSS schreibt man immer "eigenschaft:wert;".
Deine Zentrierungsmethode, das Element erst 50% von links zu positionieren und es dann mit seiner halben Breite nach links zu schieben, solltest Du nicht machen, denn wenn der Viewport weniger breit ist, als die 1024px des Elements, dann verschwindet es links aus dem Browser raus, wo kein Scrollbalken hin kommt. An die Inhalte kommt man dann nicht mehr dran.
Zentrieren eines BLock-Elements geht, wie oben gesagt, mit "margin:0 auto";

Wenn Dein Ziel jetzt ist, oben das Image als Banner zentriert zu setzen und darunter das Flash, dann musst Du das zweite div.topbanner aus dem HTML-Code und im schließenden Tag das Attribut style entfernen, sowie das center-Tag. Die absolute Positionierung für div.topbanner kannst Du komplett rauswerfen (position, top, left, margin-left) und sattdessen "text-align:center" aufnehmen, dann ist das Image zentriert.

 

[sergej59]

Scheint mir jetzt auf den ersten Blick ganz passael zu sein. Für etwas ausgefallenere CSS-Aktionen muss man manchmal das ein oder andere div mehr im HTML-Code unterbringen.

Die Frage nach dem "festlegen" der Listenelemente hab ich jetzt nicht verstanden. Es ist ja nicht verkehrt, der Liste eine eigene id (hier #navigation) zu geben.

Was ich vermutlich gesagt habe ist, dass Du das div#navi weglassen kannst, weil Du ul#navigation genauso formatieren kannst (height, background-image und so).

OK, geht nun alles soweit,
hätte nur noch zwei kleine Problämchen

Ich möchte im header ein weiteres div positionieren, was links einen Abstand von 200px hat und dann, den rest der Seite einnimmt, soll also nicht über die Seite hinnaus gehen, sodass man scrollen muss.

So sah mein Code bisher aus:

#header2{
    width:100%;
    height: 160px;
    background-image:url(design/world.png);
    background-position:center;
    background-repeat:no-repeat;
    position: absolute;
    left:200px;
    z-index:1;
  }

Das Problem dabei ist, dass wie es aussieht sich die 100% auf die Width der ganzen aktuellen seite bezieht und nicht auf 100%-200px, wie stelle ich es an dass es nur den Rest der seite einnimt ?

Dan wollte ich gerne unter dem Navi eine weitere Box posetionieren, diese soll auch soweit gehen, wie man Scrollen kann und ein y-repeat haben.

Hier der Code:

#bg3{
    width: 160px;
    height: 100%;
    background:url(design/bg3.png) 
    repeat-y top left;
    position: absolute;
    top: 700px;
    left:0px;
    z-index:1;
  }

Das Problem bei beiden ist, dass ich nicht weiß, wie ich festlegen kann, dass Width/height:bis zum Ende, bzw. bis zum anfang des Scrolls gehen soll. Mit 100% meint man ja nur die Seite auf die man Guckt, ohne den Scroll.

Hier nochmal wie das Ganze aussehen soll.

http://img41.imageshack.us/img41/8681/unbenanntfdl.png

 

[Efchen]

Ich möchte im header ein weiteres div positionieren

Aus Sicht von HTML ist das sinnfrei.
Aus Sicht von HTML geht es darum, dem Inhalt eine Bedeutung zu geben. Man fügt nicht einfach irgendwo ein Element ein, um zu wissen, welches Element man nimmt, muss man erst wissen, was für ein Inhalt da reinkommen soll.

was links einen Abstand von 200px hat und dann, den rest der Seite einnimmt, soll also nicht über die Seite hinnaus gehen, sodass man scrollen muss.

Ein beliebiges Block-Element streckt sich immer auf Breite 100%. Dabei beziehen sich 100% Breite immer auf die Breite des Elternelements. Das oberste Elternelement ist immer <html>. Es gibt keine Möglichkeit, bei der Größe verschiedene Einheiten zu mischen, also % und px z.B.
Aber Du kannst einem Block-Element, das automatisch 100% breit ist, einen Abstand nach links von 200px geben und hast schon das erreicht, was Du willst.

Auf absolute Positionierung solltest Du verzichten, die ist nicht primär dazu da, Objekte an einer bestimmten Stelle zu positionieren, um damit ein bestimmtes Layout umzusetzen. Man positioniert damit eher Elemente, die "aus der Reihe tanzen" sollen. Oder wenn es um das Überlappen verschiedener Elemente geht.

Dan wollte ich gerne unter dem Navi eine weitere Box posetionieren, diese soll auch soweit gehen, wie man Scrollen kann und ein y-repeat haben.

Suche nach "Faux Columns". Denn so ein von Dir beschriebenes Verhalten gibt es nur bei Tabellenzellen. Es gibt leider "moderne" Browser, die nicht damit zurechtkommen, wenn man einem Element mittels "display:table-cell" sagt, es soll sich wie eine Tabellenzelle verhalten.

Gruß,
-Efchen