Antworten auf deine Fragen:
Neues Thema erstellen

Mehrere Fragen zu div&co...

buyas

Nicht mehr ganz neu hier

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 !
 
Zuletzt bearbeitet:

cebito

undefined

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

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

buyas

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet von einem Moderator:

owieortho

Aktives Mitglied

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Aktives Mitglied

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.
 
Zuletzt bearbeitet:

buyas

Nicht mehr ganz neu hier

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

undefined

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>
 
Zuletzt bearbeitet:

owieortho

Aktives Mitglied

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

Nicht mehr ganz neu hier

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 :p ...
der z - index :eek: man man bei soviel rumprobieren und verzweifeln übersieht man schon sachen :s ...
 

buyas

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet von einem Moderator:

buyas

Nicht mehr ganz neu hier

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

undefined

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

Nicht mehr ganz neu hier

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 ) ..
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: Mehrere Fragen zu div&co...

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

undefined

AW: Mehrere Fragen zu div&co...

Ich zitiere mich ungern selbst, aber...
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.
 
Zuletzt bearbeitet:

buyas

Nicht mehr ganz neu hier

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 :p ...
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 ?
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben