Mehrere Fragen zu div&co...

buyas · 23.03.2012

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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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

buyas · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

geht los

...

CSS

Code:

#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

Code:

<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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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

Postpunker · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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

Code:

#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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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...

Code:

#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;
}

HTML:

<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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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 · 23.03.2012

AW: Mehrere div-container unabhängig nebeneinander auf "einer ebene"

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

...
der z - index :eek:

man man bei soviel rumprobieren und verzweifeln übersieht man schon sachen :s ...

buyas · 23.03.2012

div - container mit "externem" button interaktiv verknüpfen ?

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

Code:

#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

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 · 23.03.2012

AW: Mehrere Fragen zu div&co...

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

cebito · 23.03.2012

AW: Mehrere Fragen zu div&co...

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 · 23.03.2012

AW: Mehrere Fragen zu div&co...

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

Code:

#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

Code:

#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 ) ..

cebito · 23.03.2012

AW: Mehrere Fragen zu div&co...

buyas schrieb:
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 ) ..

Geh mal auf "Mein PSD" > "Kontrollzentrum" > "Einstellungen ändern" - bissl runterscrollen und dann stellst du das hier ein...

buyas · 23.03.2012

AW: Mehrere Fragen zu div&co...

danke .. das is schon so eingestellt .. aber ich hab grad gesehen, man muss auf erweitert klicken und kann dann mit dem editor mit den codewerkzeugen arbeiten ..

buyas · 25.03.2012

active link funktioniert im IE aber nicht bei mozilla

Hi !

verstehe grad leider etwas nicht so ganz ..

habe divs, die ich über a:link/active etc. vergrößer. im IE funktioniert es, dass die divs nach dem zustand des klicks an sich in der größe verharren, bei mozilla allerdings nicht, worauf könnte daszurückzuführen sein ?

der css code

Code:

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

html

Code:

<div id="div1">

<a href="#" title="" onclick="show('div3')"><img src="..."></a>

<!--div1--></div>

vllt weiß ja jemand woran es liegt :uhm: ?

cebito · 25.03.2012

AW: Mehrere Fragen zu div&co...

Ich zitiere mich ungern selbst, aber...

cebito schrieb:
Setze bitte erst um, was ich in meinem letzten Post vorgeschlagen habe. Es wird immer unübersichtlicher, wenn du nicht erst einmal aufräumst.

Wenn du das nicht machst, kann man sich auch sparen zu helfen, da ist mir meine Zeit dann auch zu schade für.
Und ich sagte dir auch, du sollst nicht für jeden Furz dieselbe Seite betreffend einen neuen Thread aufmachen.

btw: active heißt nur bei gedrückter Maustaste, sobald die losgelassen wird ist dieser Zustand wieder vorbei. Du kannst :focus benutzen, funktioniert so lange bis du woanders hinklickst oder tab drückst.

buyas · 25.03.2012

AW: Mehrere Fragen zu div&co...

hab bitte nachsicht mit mir, bin wie gesagt noch forum-newbie, hab noch nie großartig mit foren zu tun gehabt. ich dachte, für meine aktuelle fragestellung wäre inzwischen ein neuer beitrag ( thema ) nötig, solch dinge vernünftig abzuschätzen ist etwas, was ich im laufe der zeit üben / mir angewöhnen muss. hoffe, du nimmst es mir nicht übel ( oder gar persönlich ).
ich habe deine angesprochene hilfeleistung noch nicht umgesetzt, da ich erst einmal ( funktional ) die aktuelle seite ( nicht die komplette website ) fertig bekommen wollte und dann das ganze mal cleaner machen, nach dem motto vom groben zum komplexen .. wobei wohl grob und komplex je nachdem unterschiedlich interpretiert / definiert werden können

...
ich weiß, was active und focus an sich heißen oder machen, daher war ich auch ein wenig verwundert, warum das im IE geht, aber hab mir nich großartig was bei gedacht ..
gibt's ne möglichkeit ( via css ) das so zu machen, dass es trotzdem in dem zustand bleibt, auch wenn irgendwo anders hingeklickt wird ? oder muss man das über javascript o.ä. machen ?