✔ div verschoben...

Status
Nicht offen für weitere Antworten.
C

chirp

Mitglied
Hallo,

ja die Divs...ich habe eine Navigation mit 4 Grafiken die im Rechteck ("nav") angeordnet sind.
Auf dieser Seite soll genau ein Menüpunkt durch einen "normalen" div mit Textinhalt ersetzt werden. Auf den 4 anderen Seiten genauso, am Platz des jeweiligen Links.
Überall gehts, bloß auf dieser Seite schiebt sich der eine Link über einen anderen.
Und ich finde nicht heraus warum, geschweige den das ich das verhindere..
Ein Tip bitte. Soll ich doch die text divs mit "relative" positionieren?



HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>schauspielunterricht</title>
<meta name="author" content="1">
<link rel="stylesheet" type="text/css" href="../css/testcss3.css">
</head>
<body>

<div class="wr">

     <div class="header"></div>

     <div id="nav">
          <ul>
              <li><a href="../pages/1.html" id="a"></a></li>
              <li><a href="../pages/1.html" id="b"></a></li>
              <li><a href="../pages/1.html" id="d"></a></li>
          </ul>
     </div>

               		<div id="divid5" class="div">titel></p>
                         </div>

                   	<div id="divid6" class="div">

                         text

                    	</div>

     <div id="nav2">
          <a href="../pages/1.html" id="m">1</a>
          <a href="../pages/1.html" id="n">2</a>
          <a href="../pages/1.html" id="o">3</a>
          <a href="../pages/1.html" id="p">4</a>
          <a href="../pages/1.html" id="q">5</a>
     </div>
</div>


</body>
</html>

der entscheidende css abschnitt:

Code: 
div.wr {
position:relative;
width: 600px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border-left: 1px solid #D7D7D7;
border-right: 1px solid #D7D7D7;
text-align:left; background: #C9C9C9;
}

div.header {
width: 600px;
height: 100px;
background: #C9C9C9; }


#nav                 { margin:0px;
                  padding:0;
                 list-style:none; border: 1px solid #C9C9C9}

#nav ul                 { margin:0;
                  padding:0;
                  list-style:none; }


#nav a
                {display:block; position:relative; }


a#a:link, a#a:visited            {        width:300px; height:200px; margin:0px 0px;

                                         background: url(../pictures/2.jpg); }

a#a:hover                        {        background:url(../pictures/2_tr.jpg); }

a#a:focus                        {        background:url(../pictures/3.jpg); }


a#b:link, a#b:visited            {              width:300px; height:200px; margin:-200px 0 0 300px;

                                        background: url(../pictures/1.jpg); }

a#b:hover                        {        background:url(../pictures/1.jpg); }

a#a:focus                        {        background:url(../pictures/1.jpg); }


a#c:link, a#c:visited            {       width:300px; height:200px; margin:0 0 0 0px;

                                        background: url(../pictures/s1.jpg); }

a#c:hover                        {        background:url(../1.jpg); }

a#a:focus                        {        background:url(../1r.jpg); }


a#d:link, a#d:visited            {       width:300px; height:200px; margin:-200px 0 0 300px;

                                        background: url(../pictures/1.jpg); }

a#d:hover                        {        background:url(../p1.jpg); }

a#a:focus                        {        background:url(../pictures/1.jpg); }


#divid1
                 { width:95px; height:25px; margin:0px 5px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:bold;
                   color:#000000; }

#divid2
		{ width:295px; height:175px; margin:0px 5px;
 		  overflow: scroll;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:normal;
                   color:#000000; }

#divid3
                 { width:95px; height:25px; margin:0px 5px;
                   position:absolute; left:300px; top:105px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:bold;
                   color:#000000; }

#divid4
		{ width:295px; height:175px; margin:0px 5px;
                   position:absolute; left:300px; top:125px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:normal; }

#divid5
                 { width:95px; height:25px; margin:0px 5px;
                   position:absolute; left:0px; top:310px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:bold;
                   color:#000000; }

#divid6
		{width:295px; height:175px; margin:0px 5px;
 		  overflow: scroll;
                   position:absolute; left:0px; top:335px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:normal;
                   color:#000000; }

#divid7
                 { width:95px; height:25px; margin:0px 5px;
                   position:absolute; left:300px; top:310px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:bold;
                   color:#000000; }

#divid8
		{ width:295px; height:175px; margin:0px 5px;
                   position:absolute; left:300px; top:335px;
                   font-family: Verdana, Helvetica, sans-serif;
		  font-size: 12px;
		  line-height:14px;
                   font-weight:normal;
                   color:#000000; }
Vielen Dank.

Ja..das war zu schnell habe ich glatt die falschen Angaben kopiert-
 
Zuletzt bearbeitet:
Hi,

fehlt da nicht der Link "#c", wenn es doch derer vier Links sind?

Wie lauten überhaupt die Regeln für die IDs #a bis #d, die fehlen nämlich im gezeigten Stylesheet, wie auch die Klasse .wr und ID #nav, und welche Formatierung wird mit der Klasse .div vorgenommen?

Wenn auf den anderen Seiten alles funktioniert, dann nenn hier bitte mal den Link zur Seite, damit man einen Anhaltspunkt hat, wohin sich welches DIV konkret verschiebt bzw. welcher Link sich über einen anderen schiebt, denn das geht aus deinem Post und gezeigten Quellcode nicht hervor, da die gesetzten Positionsangaben für die DIVs #divid5 und #divid6 von allen Browsern korrekt interpretiert werden. Oder von welchem DIV ist hier die Rede?
 
Hallo,

vier Links, vier Seiten.
Auf der Startseite nur die Links sichtbar. Wenn ein Link angeklickt wird, erscheint auf der entsprechende Seite an der Stelle des Links (Position auf der Startseite) der Text.
Deswegen fehlt der Linkpunkt "c" auf der Seite.
Das Problem: einer der anderen Linkpunkte wird verschoben. Ich kann leider keinen Link posten.
 
Wer lesen kann, ist klar im Vorteil:

Maik hat gesagt.:
Wie lauten überhaupt die Regeln für die IDs #a bis #d, die fehlen nämlich im gezeigten Stylesheet, wie auch die Klasse .wr und ID #nav, und welche Formatierung wird mit der Klasse .div vorgenommen?
Zum Vergrößern anklicken....
Wenn du hier keinen Link posten kannst/willst, wird es schwer mit der Hilfestellung, denn so fehlt jeglicher Vergleich zu den funktionierenden Seiten.
 
die div.class sollte weg, hatte ich im css aber noch nicht im html-:rolleyes:
#nav ist doch schon da? gleich oben?
Tja Link gibt es halt nicht... ich versuch es jetzt halt weiter.
Danke Maik.
 
Da der Link "c" nun nicht mehr im Markup existiert, rutscht der Link "d" wegen der margin-Deklaration unter den Link "b".
 
wie du willst...
ich sehe das zwar so wie gesagt - aber eidesstattlich versichern würde ich das nicht (nach den neueren wissenschaftlichen Erkenntnissen bezüglich Wahrnehmung).
________________________________________________-

Ja genau! Hätte ich das gleich so sagen sollen?

___________________________________________

Bloß was tun (bitte um grobe Richtungsweisung) ?
 
Zuletzt bearbeitet:
Ist doch ganz einfach und logisch: So wie du die Boxen absolut positionierst, müsstest du auch die Links absolut positionieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück