Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „anscheinend unlösbares problem mit dem box modell“

HumanGrunt

Nicht mehr ganz neu hier

Ich habe schon seit geraumer zeit ein für mich anscheinend unlösbares problem mit einem von mir entwickelten dropdown menü....

kurz und bündig, das menü scheint trotz verwendung von z-index und umstellen der div´s im dokument immer unten zu liegen... heisst, alle anderen inhalte der seite liegen immer darüber... hier mal ein kleiner screenshot und der quelltext


index.html:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<title>neu2</title>
</head>
<body>

<div class="navi_box">
<div class="button_head">Home</div>
<div class="button"><a href="index.html">unterkate1</a></div>
<div class="button"><a href="index.html">unterkate2</a></div>
<div class="button"><a href="index.html">unterkate3</a></div>
</div> <!-- end "navi_box" -->

<div class="navi_box">
<div class="button_head"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div> <!-- end "navi_box" -->

<div class="navi_box">
<div class="button_head"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div> <!-- end "navi_box" -->

<div class="test_content">
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
sdfsdfsdgdfsgdsfgdsfgsdfg<br>
</div>

</body>
</html>


Style.css

Code:
body
{
font-size:0.9em;
}

a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
color:red;
}

.navi_box
{
width:5em;
height:1.4em;
background-color:white;
overflow:hidden;
float:left;
margin-left:-1px;
padding:-1px;
border:solid black 1px;
z-index:999;
}

.navi_box:hover
{
width:5em;
height:auto;
color:red;
border-width:1px 1px 0px 1px;
}

.button_head
{
height:1.4em;
width:5em;
background-color:white;
float:bottom;
text-align:center;
border:solid black;
border-width:0 0 1px 0;
}

.button_head:hover
{
background-color:#F2F2F2;
}


.button
{
text-align:center;
height:1.4em;
width:5em;
background-color:white;
float:bottom;
color:black;
border:solid black;
border-width:0 0 1px 0;
}

.button:hover
{
background-color:#F2F2F2;
}

.test_content
{
position:absolute;
top:8em;
left:8em;
z-index:998;
}


Es wäre echt ganz super wenn mir da einer weiter helfen könnte , so langsam verzweifle ich. Wahrscheinlich isses ein ganz doofer Anfängerfehler, aber ich komme einfach nicht drauf...

PS: Ich benutze Safari und Firefox, jeweils die neuste Version

user11: Ich hab mal Code Tags eingefügt. Ist übersichtlicher. :D
 
Zuletzt bearbeitet von einem Moderator:

knispel

Mediendesigner

AW: anscheinend unlösbares problem mit dem box modell

Mal von anderen Ungereimtheiten abgesehen, deine Probleme sind auf den ersten Blick ersichtlich.
Code:
[I] .navi_box
{
width:5em;
height:1.4em;
background-color:white;
overflow:hidden;
[COLOR=Red] float:left;[/COLOR]
margin-left:-1px;
padding:-1px;
border:solid black 1px;
[COLOR=Red] z-index:999;[/COLOR][/I]
Code:
.button
{
text-align:center;
height:1.4em;
width:5em;
background-color:white;
[COLOR=Red]float:bottom;[/COLOR]
color:black;
border:solid black;
border-width:0 0 1px 0;
}
Dein Div-Konzept kann so nicht funktionieren.
Helfen dir die Markierungen ohne Kommentare?
 

HumanGrunt

Nicht mehr ganz neu hier

AW: anscheinend unlösbares problem mit dem box modell

ne wenn ich ehrlich bin net? also dieser ganze float kram sind mir eh noch nöhmische dörfer... aber was an dem z-index falsch sein soll, das weiss ich net... erklärs mir doch bitte mal, wäre nett
 

HumanGrunt

Nicht mehr ganz neu hier

AW: anscheinend unlösbares problem mit dem box modell

hab ich... soweit komm ich damit auch klar... mir is auch wieder eingefallen das es float:botton; nicht gibt... könntest du mir wohl trotzdem weiter helfen
 

knispel

Mediendesigner

AW: anscheinend unlösbares problem mit dem box modell

hab ich... soweit komm ich damit auch klar...
Das kann ich nicht glauben. Die Grundlagen sind dir nicht klar.

Die Schichtung von positionierten Elementen ist abhängig vom Z-Index.
Wenn du floatest, nimmst du das Element aus dem Fluß (und solltest auch clearen nicht vergessen).

Leider ist dein Div-Konzept ist nicht offensichtlich.
Vielleicht beschreibst du mal, was wo angezeigt werden soll, besser wäre eine kleine Skizze...
 

HumanGrunt

Nicht mehr ganz neu hier

AW: anscheinend unlösbares problem mit dem box modell

so ähnlich soll es aussehen, also die navi elemente sollen waagerecht aneinander hängen... leider ist auch dem shot auch das problem zu erkennen... undzwar dass der text über den buttons liegt:
 

knispel

Mediendesigner

AW: anscheinend unlösbares problem mit dem box modell

Code:
.navi_box
{
width:5em;
height:1.4em;
background-color:white;
overflow:hidden;
float:left;
margin-left:-1px;
padding:-1px;
border:solid black 1px;
}

.test_content
{
clear:left;
position:absolute;
top:8em;
left:8em;
}
Prinzipiell kommt das deiner Skizze am nächsten. Es wird weiter nichts extra positioniert oder gefloatet.
 

HumanGrunt

Nicht mehr ganz neu hier

AW: anscheinend unlösbares problem mit dem box modell

das ergebniss:




hat also nicht geklappt... is meinem ja auch sehr ähnlich
 

HumanGrunt

Nicht mehr ganz neu hier

AW: anscheinend unlösbares problem mit dem box modell

ähm... es sieht doch genau aus wie vorher... Mein einizges Problem ist, dass der text nicht über den Buttons stehen soll, sonder umgekehrt...
 

knispel

Mediendesigner

AW: anscheinend unlösbares problem mit dem box modell

Dann nimm doch z.B.

Code:
.test_content
{
clear:left;
position:absolute;
[COLOR=Red]z-index:-1;[/COLOR]
top:8em;
left:8em;
}
Sieht dann so aus:



Du könntest es aber auch ohne floats realisieren, müsstest dann aber genau positionieren und könntest stapeln.
 
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

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben