Frage Absolute und relative position

DaPusti · 12 Januar 2017

HTML:

<!DOCTYPE html>
<html>
<head>

<title>Transparent MenuBar</title>
<meta charset="UTF-8"/>
<link href="Erste_Seite_Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 align="center"><font face="Comic Sans MS"> Willkommen bei &#8859;<span><i>Feli</span>Baby</font></i> </h1>
<br>
<br>

<div>
<hr>
   <ul>
      <li><a href="#">Spielen</a>
          <ul>
            <li><a href="Badespielzeug.html">Badespielzeug</a></li>   
            <li><a href="Beiß_und_Greifringe.html">Beiß- und Greifringe</a></li>
            <li><a href="Spielbögen.html">Spielbögen</a></li>
            <li><a href="Babytücher.html">Babybücher</a></li>
          </ul>
            </li>
      <li><a href="#">Nahrung</a><ul>
            <li><a href="Babybrei_Alete.html">Babybrei von Alete</a></li>   
            <li><a href="Babybrei_Hipp.html">Babybrei von Hipp</a></li>
            </li>
          </ul>
      <li><a href="#">Babymode</a>
          <ul>
             <li><a href="Strampler.html">Strampler</a></li>
             <li><a href="Body.html">Body</a></li>
             <li><a href="Unterwäsche.html">Unterwäsche</a></li>
          </ul>
            </li>
      <li><a href="#">Kindermode</a>
            <ul>
              <li><a href="T-Shirts.html">T-shirts</a></li>
              <li><a href="Babyschuhe.html">Schuhe</a></li>
              <li><a href="Baby_Jacken.html">Jacken</a></li>
              <li><a href="Baby_Hosen.html">Hosen</a></li>
            </ul>
      </li>
      <li><a href="#">About</a></li>
      
      
   </ul>
   <br>
   <br>
   <br>
   <hr>
</div>
<table> <tr>
 <td><img src="Bilder_Baby/baby1.jpg" alt="Can´t load picture Baby1" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby2.jpg" alt="Can´t load picture Baby2" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby3.jpg" alt="Can´t load picture Baby3" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby7.jpg" alt="Can´t load picture Baby7" style="width:350px;height:250px;"></td>
</tr></table>
<table><tr>
 <td><img src="Bilder_Baby/baby4.jpg" alt="Can´t load picture Baby4" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby5.jpg" alt="Can´t load picture Baby5" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby6.jpg" alt="Can´t load picture Baby6" style="width:350px;height:250px;"></td>
 <td><img src="Bilder_Baby/baby8.jpg" alt="Can´t load picture Baby8" style="width:350px;height:250px;"></td>
</tr></table>
</body>

</html>

HTML:

body {
    background-image:url(Hintergrundbild.jpg);
}
ul {
    
margin:0px; padding:0px;   
    
}

ul li a {
    text-decoration:none;
    color:white;
    display:block;
}

ul li{
    
list-style:none;   
float:left;   
width:150px;
background-color:black;
color:white;
font-size:20px;
line-height:50px;
text-align:center;
opacity:.5;
border:1px solid #285189
    
    
}

ul li a:hover {
    background-color:orange;
}
ul li ul li {
    
    display:none;   
}
ul li:hover ul li{
    
    display:block;
    
}

Mein Dropdownmenü verschiebt immer meine Bilder. Ich habe bereits schon rumgesucht und weiß, dass ich mit absolute und relative position arbeiten muss. Es klappt jedoch irgendwie nicht, muss irgendwas falsch machen, bzw. an der falschen Position eingeben. Kann mir vlt bitte sagen, was ich wo eintragen muss?

Vielen Dank für die Hilfe

bdt600 · 12 Januar 2017

Der z-index fehlt

Und wieso stellst du Bilder in einer Tabelle dar? Das sind doch keine tabellarischen Daten.

SpiceLab · 12 Januar 2017

DaPusti schrieb:
Ich habe bereits schon rumgesucht und weiß, dass ich mit absolute und relative position arbeiten muss. Es klappt jedoch irgendwie nicht, muss irgendwas falsch machen, bzw. an der falschen Position eingeben. Kann mir vlt bitte sagen, was ich wo eintragen muss?

Aus

CSS:

ul li{
 
...
border:1px solid #285189
 
}

ul li ul li {
 
    display:none;
}
ul li:hover ul li{
 
    display:block;
 
}

wird

CSS:

ul li{
 
...
border:1px solid #285189;
position:relative;
 
}

ul li ul { /* ohne li am Ende */
 
    display:none;
    position:absolute;
}
ul li:hover ul { /* ohne li am Ende */
 
    display:block;
 
}

https://jsfiddle.net/SpiceLab/b9nwvge2/ - incl. HTML-Korrektur falsch gesetzter </...>-Tags

PS: <table> wird hier in seiner semantischen Bedeutung mißbraucht, denn <img> stellt keine tabellarischen Daten dar ;)

DaPusti · 12 Januar 2017

Vielen vielen Dank. Bin einfach so lange dran gewesen und einfach nicht drauf gekommen. Was meinst du mit Mißbrauch des <table>? Also ich will, dass die Bilder in einer Reihe auftreten und die nächste Reihe dann drunter, deswegen dachte ich, dass ich <table> verwende, was wäre denn das Richtige um es zu tun? Bin ganz neu in der HTML Szene und immer offen für neues :)

SpiceLab · 12 Januar 2017

DaPusti schrieb:
Was meinst du mit Mißbrauch des <table>?

https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle#mw-content-text

DaPusti schrieb:
Also ich will, dass die Bilder in einer Reihe auftreten

Das machen Inline-Elemente, wie z.B. <img>, von sich aus.

DaPusti schrieb:
und die nächste Reihe dann drunter

Zeilenumbruch:

HTML:

<br>

Alternativ dazu beispielsweise jede einzelne Reihe in das allgemeine Block-Element <div></div>, oder in die Listenpunkte <li></li> einer unsortierten Liste <ul></ul> einbetten.

Frage Absolute und relative position

DaPusti

Neues Mitglied

bdt600

Guest

SpiceLab

Mod | ZENmechanic

DaPusti

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Neueste Beiträge