Mehrere Fragen zu div&co...

[buyas]

hey leute,
ich habe folgendes problem, wofür ich leider einfach keine lösung finde ( bin neuling in sachen html, css, etc. ).
ich benutze 3 container, aber die sind leider nicht unabhängig voneinander, was heißt, dass das erste wenns durch hover größer wird im überschneidungsbereich hinter dem zweiten liegt etc. ganz gleich wie die z-indices eingestellt sind .. hätte vllt jemand ne idee, wie ich das hinbekomme, sie unabhängig voneinander zu halten, sodass die gehoverten ebenen die normal großen überlagern können im überschneidungsbereich ? das wäre suuuuper, bin am verzweifeln grad :s ... danke !

[cebito]

Ohne zu sehen, was du da gemacht hast wird das nix mit Hilfe.

[buyas]

geht los ...

CSS

#bigger1 a {position:absolute;
display: block; background: red; top:199px; left:201px; width:78px; 

height: 74px; z-

index:5}

}
#bigger1 a:link {position:absolute; display: block; top:199px; 

left:201px;width:78px; height: 74px; z-

index:5}


#bigger1 a:hover {position:absolute; display:block;top:199px; 

left:201px; width:180px; height: 180px; z-

index:5}


#bigger1 a:active {position:absolute; display:block;top:199px; 

left:201px;width:622px; height: 369px; z-

index:7}

#bigger2 a {position:absolute; display:block; background: green; 

top:199px; left:279px; width:78px; height: 74px; z-

index:5}

}
#bigger2 a:link {position:absolute; display:block; top:199px; 

left:279px;width:78px; height: 74px; z-

index:5}


#bigger2 a:hover {position:absolute; display:block; top:199px; 

left:279px; width:180px; height: 180px; z-

index:5}


#bigger2 a:active {position:absolute; display:block; top:199px; 

left:279px;width:622px; height: 369px; z-

index:7}


#bigger3 a {position:absolute; display:block; background: #257; 

top:199px; left:357px; width:78px; height: 74px; z-

index:5}

}
#bigger3 a:link {position:absolute; display:block; top:199px; 

left:357px;width:78px; height: 74px; z-

index:5}


#bigger3 a:hover {position:absolute; display:block; top:199px; 

left:357px; width:180px; height: 180px; z-

index:5}


#bigger3 a:active {position:absolute; display:block; top:199px; 

left:357px;width:622px; height: 369px; z-

index:7}

HTML

<div id="bigger1">
<a href="#">...inhalt...</a>

<!--bigger1--></div>

<div id="bigger2">
<a href="#">...inhalt...</a>

<!--bigger2--></div>

<div id="bigger3">
<a href="#">...html...</a>

<!--bigger3--></div>

vielen dank im voraus

[owieortho]

Dein CSS ist nicht valide. Ich sehe auf Anhieb drei rechte Schweifklammern, die da nicht hingehören. Ich sag mal grundsätzlich: Wenn es funktioniert und nicht validiert, dann funktioniert es nicht. Punkt.

[buyas]

danke für den hinweis owieortho. habs korrigiert, hat meinem problem an sich aber leider nicht gabgeholfen

[Postpunker]

Also wenn du mehrere div container auf einer ebene machen willst, dann mach einen großen container in den du die kleinen einfach einfügst:

im HTML sieht das dann so aus:

<div id="Name der Box">
<div id="Erstes Element>
Inhalt des ersten Elements
</div id="Erstes Element>
<div id="Zweites Element>
Inhalt des zweiten Elements
</div id="Zweites Element>
</div id="Name der Box">

Im CSS Stylesheet für die Seite definierst du die Box die die Elemente umschließt.
Zum Beispiel machst du sie zu einer blauen Box. Weißt bestimmt, was es alles für Möglichkeiten gibt. Die Elemente kannst du auch frei definieren.

Hoffe ich konnte dir irgendwie weiterhelfen. ^^

[owieortho]

Hab Dein CSS mal so formatiert, dass es jetzt auch validiert:

#bigger1 a
{
 background:red;
 display:block;
 height:74px;
 left:201px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger1 a:link
{
 display:block;
 height:74px;
 left:201px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger1 a:hover
{
 display:block;
 height:180px;
 left:201px;
 position:absolute;
 top:199px;
 width:180px;
 z-index:7;
}
#bigger1 a:active
{
 display:block;
 height:369px;
 left:201px;
 position:absolute;
 top:199px;
 width:622px;
 z-index:7;
}
#bigger2 a
{
 background:green;
 display:block;
 height:74px;
 left:279px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger2 a:link
{
 display:block;
 height:74px;
 left:279px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger2 a:hover
{
 display:block;
 height:180px;
 left:279px;
 position:absolute;
 top:199px;
 width:180px;
 z-index:7;
}
#bigger2 a:active
{
 display:block;
 height:369px;
 left:279px;
 position:absolute;
 top:199px;
 width:622px;
 z-index:7;
}
#bigger3 a
{
 background:#257;
 display:block;
 height:74px;
 left:357px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger3 a:link
{
 display:block;
 height:74px;
 left:357px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger3 a:hover
{
 display:block;
 height:180px;
 left:357px;
 position:absolute;
 top:199px;
 width:180px;
 z-index:7;
}
#bigger3 a:active
{
 display:block;
 height:369px;
 left:357px;
 position:absolute;
 top:199px;
 width:622px;
 z-index:7;
}

Und weiterhin habe ich für das hovern den z-index geändert. Jetzt macht das ganze bei mir das, was ich verstanden habe, dass es machen soll.

[buyas]

aaaaaahhhh super !!!!! vielen lieben dank owieortho, das funktioniert einwandfrei !!! hast was gut bei mir. was hab ich falsch gemacht ? würde mich freuen, wenn ich das verstehen könnte

[cebito]

Warum schreibst du alles doppelt und dreifach? Es gibt jede Menge Eigenschaften, die alle drei gemeinsam haben. Also gib ihnen noch eine Klasse mit und notiere diese Eigenschaften für die Klasse. Wie auch den hover- und active-Zustand, da ändert sich bei allen nix, also kann man die für alle notieren. Lediglich background und left sind different. Die gehören dann der ID zugeordnet. Und bei hover und active brauchst auch nicht alles nochmal schreiben, nur das, was sich im Gegensatz zum Urzustand ändern soll. Das ganze noch semantisch richtig in eine Liste gepackt, kannst dir auch viel rechnerei sparen, falls du es mal verschieben willst, dann allen drei li noch die Klasse bigger gegeben und dein CSS kann man auf die paar Zeilen reduzieren...

#wrapper{
    position:absolute;
    top:199px;
    left:201px;
}
.bigger a{
    display:block;
    position:absolute;
    height:74px;
    width:78px;
    top:0;
    z-index:5;
}
.bigger a:hover{
    height:180px;
    width:180px;
    z-index:7;
}
.bigger a:active{
    height:369px;
    width:622px;
    z-index:7;
}
#bigger1 a{
    background:red;
    left:0;
}
#bigger2 a{
    background:green;
    left:78px;
}
#bigger3 a{
    background:#257;
    left:156px;
}

<ul id="wrapper">
    <li id="bigger1" class="bigger"><a href="#">...inhalt...</a></li>
    <li id="bigger2" class="bigger"><a href="#">...inhalt...</a></li>
    <li id="bigger3" class="bigger"><a href="#">...html...</a></li>
</ul>

[owieortho]

Stimme cebito absolut zu. Hätte ich heute nachmittag mehr Zeit gehabt, hätte ich selbst schon mal was dazu geschrieben.

Aber zu Deiner letzten Frage:
es ist der z-index in den hovers, die ich von ursprünglich 5 auf 7 gesetzt habe, denn beim hover sollen die divs ja in den Vordergrund kommen.

So, dann noch einen schönen Abend und weiter viel Erfolg beim Lernen und Anwenden.

O

[buyas]

boah ihr seid super leute .. bin soviel hilfsbereitschaft und hingabe nicht gewohnt .. im ( medizin - ) studium war sowas leider ne ziemliche rarität :s - jaja die lieben damen und herren ärzte/innen :p ...
der z - index :o man man bei soviel rumprobieren und verzweifeln übersieht man schon sachen :s ...

[buyas]

wunderschönen guten abend !
ich habe folgendes problem, bei dem ich nicht weiterkomme.
ich habe div - container, die videos enthalten und bei hover und active bzw klicken größer werden und dann auch in der größe bleiben. gibt es ne möglichkeit nen button zu kreieren der sich entweder in dem div selbst oder auch in nem extra div befindet, aber bei klick bewirkt, dass der div mit den videos wieder die ursprungsgröße annimt ? vielen dank im voraus !

bisher
CSS

#bigger1 a
{
 background:red;
 display:block;
 height:74px;
 left:201px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger1 a:link
{
 display:block;
 height:74px;
 left:201px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:5;
}
#bigger1 a:hover
{
 display:block;
 height:180px;
 left:201px;
 position:absolute;
 top:199px;
 width:180px;
 z-index:7;
}
#bigger1 a:active
{
 display:block;
 height:369px;
 left:201px;
 position:absolute;
 top:199px;
 width:622px;
 z-index:7;
}

HTML

<div id="bigger1">
<a href="#">...inhalt bzw object/videos etc</a>

<!--bigger1--></div>

Bitte benutze doch demnächst die Codewerkzeuge oben Rechts im Editor, dann lassen sich deine Beiträge deutlich besser lesen, weil code vom restlichen Content klar abgegrenzt wird.
Da es hier auch wieder um dieselbe Seite geht, tacker ich das mal zusammen.

mfG cebito

[buyas]

oh ok alles klar .. danke für den hinweis cebito .. is das erste mal für mich an nem forum teilzunehmen.

[cebito]

Setze bitte erst um, was ich in meinem letzten Post vorgeschlagen habe. Es wird immer unübersichtlicher, wenn du nicht erst einmal aufräumst. Dazu kommt - was hast du denn selbst schon versucht/recherchiert? Da seh ich grad nix von dir. Nicht das du glaubst, weil hier alle so hilfsbereit sind kannst du mit 1000 kleinen Fragen dir alles zusammenzimmern und lösen lassen.

[buyas]

yo das aufräumen werd ich gleich mal angehen ..
also ich hab bis jetzt folgendes probiert ( die codes sind leider verworfen und kann ich hier nicht darstellen, sorry ):
im gleichen div conatiner ein bild eingebunden, welchen ich als button nutzen möchte und über ne klasse mit dem entsprechenden container verknüpft ( zumindest versucht ) indem ich glaub ich die class so versucht hab zu verknüpfen:

CSS

#bigger1 a:active
{
 display:block;
 height:369px;
 left:201px;
 position:absolute;
 top:199px;
 width:622px;
 z-index:7;
}
#bigger1 a:link .screenout {
position: absolute;
display:block;
width: 78px;
height: 74px;
}

etc.

HTML
die class="screenout" in img eingefügt

hab es desweiteren versucht nen extra container ( von bigger1 umschlossen ), der die img enthält, mit bigger1 zu verknüpfen funktional, allerdings hat der neue container das gemacht, was der umschließende gemacht hat und nicht anders herum.

als letztes hatte ich gelesen es soll seit css 3 ( oder 2 ? ) möglich sein wie folgt zu variieren: a:visited:active etc.

ich meine der zusätzliche code war wie folgt, ist aber leider auch schon verworfen:

CSS

#bigger1 a:visited:active
{
 display:block;
 height:74px;
 left:357px;
 position:absolute;
 top:199px;
 width:78px;
 z-index:7;
}

leider wurde bei dem versuch nur die position ( die ich hier anders angegeben hatte versuchsweise ) jedoch nicht die größe berücksichtigt, blieb also width:622, height:369.
Sorry, dass ich die codes nicht gesaved habe !

PS ich kann keine codewerkzeuge oben rechts im editor finden :s .. da sind nur link, graphik, zitat ( mittig ) und vergrößern/verkleinern, editor wechseln ( rechts ) ..