<div> Button nicht ansprechbar

[Lola_Rennt]

Hi Leute

ich habe das Problem, dass ich zum Einen gerne über jedes einzelne <div>
<div id="rectangle_green">
<div id="rectangle_yellow">
<div id="rectangle_orange">
gerne einen link legen würde

und zum anderen gerne über jedes einzelne <p>
<p>#snap!</p>
<p>#Java Script</p>
<p>#D3</p>
ein border-bottom: 3px solid black legenwürde

Nur beides funktioniert nicht. Ich kann sie nicht ansprechen. Mache ich den Test bei einfachen <p> die nicht in einer deratigen verschachtelten Lage sind funktioniert das (auch wenn ein Elternelement davor steht.

Ich komme einfach nicht drauf. Kann mit evtl jemand sagen, was das Problem ist.
ps ich bin immer noch blutiger Anfänger. Wäre also nett wenn die Erklärungen einfach und verständlich bleiben würden :)

.content {
    height: 350px;
    width: 2500px;
    top: 25%;
    background-image: url(../img/stripe.png);
    position: fixed;
    z-index: -1;
    }


.scroll {
    position: fixed;
    top: 27.5%;
    width: 2500px;
    overflow: scroll;
    margin: 0 0 0 30%;
    }


.scroll p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 102px;
    z-index: 1;
    }


#rectangle_yellow p:hover {

    border-bottom: 3px solid black;
    }

<div class="content">
    <div class="scroll">
      <a href="index_snap.html"><div id="rectangle_green"><p>#snap!</p></div></a>
      <a href="index_java.html"><div id="rectangle_yellow"><p>#Java Script</p></div></a>
      <a href="index_d3.html"><div id="rectangle_orange"><p>#D3</p></div></a>
    </div>
</div>

 

[Lola_Rennt]

#rectangle_yellow > p:hover { border-bottom: 3px solid black;} habe ich auch schon probiert.
ah und .scroll p { border-bottom: 3px solid black;} (<- warum auch immer das funktionieren sollte?!)

Ich bin ratlos

 

[thecain]

Ein <div> in einem <a> ist falsch
wenn das ein menu sein soll, mach eine liste mit den links drin

 

[Lola_Rennt]

nein es sind drei super große angeordnete Rechtecke, die man horizontal scrollen kann ;)
Achso und Problem <p> konnte ich auch ohne <a> nicht lösen. Hab das bereits zuvor (als das <a> noch nicht davor stand) probiert.

 

[Lola_Rennt]

Ein <div> in einem <a> ist falsch
wenn das ein menu sein soll, mach eine liste mit den links drin

Hab ich gleich mal bereinigt :)

<div class="content">  
    <div class="scroll">
      <a href="index_snap.html" id="rectangle_green"> <p>#snap!</p></a>
      <a href="index_java.html" id="rectangle_yellow"><p>#Java Script</p></a>
      <a href="index_d3.html" id="rectangle_orange"><p>#D3</p></a>
    </div>
</div>

 

[Tronjer]

Hab ich gleich mal bereinigt

Und ist gleich mal falsch.

- Links gehören semantisch in eine <ul>.
- Inline-Elemente wie <a> dürfen nicht in Blockelementen wie <p> verschachtelt sein.
- Verwende niemals Attribute wie top ohne ein margin- oder padding- davor.
- Verwende niemals position fixed oder absolute, solange du nicht um deren Eigenschaften auf den Textfluss weißt.
- Verwende niemals IDs als CSS-Selektoren.

 

[Lola_Rennt]

- Verwende niemals IDs als CSS-Selektoren.
means: (?) Selektor { CSS-Eigenschaften } in meinem fall #rectangle_yellow {} darf man nicht?

- Verwende niemals position fixed oder absolute, solange du nicht um deren Eigenschaften auf den Textfluss weißt.
müsstest du dazu nicht meine Animation sehen um das beurteilen zu können?!

- Verwende niemals Attribute wie top ohne ein margin- oder padding- davor.
DANKE

- Inline-Elemente wie <a> dürfen nicht in Blockelementen wie <p> verschachtelt sein.
DANKE

- Links gehören semantisch in eine <ul>.
DANKE

Der Herr versteht wohl nicht, dass es auch noch HTML-Anfänger auf dieser Welt gibt.
Trotzdem DANKE ;)

Ich habe aber glaub ich auch angedeutet, dass meine Vorhaben auch ohne <a> nicht funktioniert haben

 

[MrMurphy]

Hallo,

ich kann deinen bisherigen Ausführungen nicht entnehmen, was du überhaupt erreichen willst? Wenn das klar wäre könnte dir vielleicht sinnvoller geholfen werden. Beschreib also bitte mal was du als Ergebnis im Browser erwartest.

Und den Browsern ist es vollkommen egal ob du ein HTML-Anfänger bist oder nicht. Ohne sinnvollen Quelltext werden die nicht machen was du erwartest.

Wobei grade Anfänger immer wieder Probleme haben zu erkennen, was erstens sinnvoll ist und zweitens technisch machbar ist. HTML und CSS sind schließlich keine Programme sondern Seitenbeschreibungssprachen.

Grundlage jeder Seite ist zunächst ein technisch sauberer und semantisch korrekter HTML-Quelltext. Das Aussehen wird danach mit CSS bestimmt.

müsstest du dazu nicht meine Animation sehen um das beurteilen zu können

Von einer Animation war bislang keine Rede. Ich finde es nicht in Ordnung wenn du uns Informationen vorenthälst und uns anschließend dieses fehlende Wissen vorwirfst. Das ist Kindergartenniveau. Wir können dir nur Hilfe zu vorhandenen Informationen geben. Berufe dich also bitte nur auf Informationen, die du uns auch zugänglich gemacht hast.

Am sinnvollsten ist immer ein Link zur betreffenden Seite. Das erleichtert in der Regel auch die Kommunikation, weil Anfänger sich zwangsweise mit HTML- und CSS-Ausdrücken nicht auskennen können, deshalb ihr eigentliches Problem häufig nicht richtig umschreiben können und auch die Antworten nicht verstehen.

Gruss

MrMurphy

 

[djheke]

Oder den gesamten Code HTML/CSS.

 

[scbawik]

Ein <div> in einem <a> ist falsch

Soweit ich weiß ist das in HTML5 sogar erlaubt.

 

[thecain]

Tatasache? Dann ich jetzt wohl auch langsam veraltet :/

 

[scbawik]

Tatasache? Dann ich jetzt wohl auch langsam veraltet :/

http://davidwalsh.name/html5-elements-links

In der Praxis habe ich das auch noch nicht gemacht, gefällt mir einfach nicht.
Gibt nur wenige Fälle wo das für mich Sinn macht.

 

[djheke]

Ja, aber "LOLA .." hilft das, ohne zu lernen nicht weiter.