• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild Position

newbe

Neues Mitglied
Hi,
ich habe auf meinen erstellten Seiten eine Navigationsleiste, darunter soll nun ein Logo angezeigt werden. Dies versuchte ich wie folgt umzusetzen:

<ul id="Navigation" style="position: fixed">
<h1 style="text-align:center">Navigation</h1>
<li><a href="Startseite.html">Startseite</a></li>
<li><a href="Rück.html">1. Definition des Rückstoßprin- zips und dessen Auswirkungen</a></li>
<li><a style="background-color: #DADADA;
border: 0px solid; border-radius: 3px" href="doku.html">2. Dokumentation des Modell- raketenbaus und Simulation der Modellrakete</a></li>
<li><a href="rech.html">3. Physikalischer Hintergrund und Berechnung</a></li>
<li><a href="erpro.html">4. Praktische Erprobung und Überprüfung<a></li>
<li><a href="rechtlich.html">5. Rechtliche Rahmenbedingungen und Sicherheitshinweise<a></li>
<li><a href="hi.html">Literaturverzeichnis</a></li>
</ul>
<ul style="position: fixed; float: left; top: 550px; left: 0px">
<li style="list-style: none;">
<a href="http://www.kleineburg.de/leoburg"><img src="logo.jpg" style="width: 170px; margin: 0px 0px 20px 0px"></a>

</li>
</ul>

Beide Elemente sollen mitscrollen, dieses habe ich ja auch schon definiert. Das Problem ist aber anscheinend, dass wenn man die Position des Bildes absolut bestimmt, die Position irgendwie von Browser zu Browser etwas variiert. Bei Firefox wird alles so angezeigt, wie es sein soll, beim IE etwas zu weit unten, aber noch ok. Bei SeaMonkey aber ist es zuweit rechts (also in ein <div> hinein) und auch weiter unten als es sein soll. Muss ich die Position also irgendwie anders definieren (z.B. über relative Angaben?), damit die Position in jedem Browser gleich ist? (Ich habe kein Chrome, also damit habe ich es nicht getestet.)
Ich freue mich über jegliche Hilfe.

MfG
Newbe
 
Hallo.

Dein Quelltext ist fehlerhaft.
Innerhalb eines <ul> dürfen nur Listenpunkte <li> vorhanden sein, keine Überschriften.

HTML:
<ul style="position: fixed; float: left; top: 550px; left: 0px">

Das ist Unsinn. Wenn du etwas fix positionieren willst willst du es ja nicht floaten. Die Angaben widersprechen sich.
Ausserdem ist in dieser Liste nur ein Link enthalten also ist es auch semantisch falsch, da es sich nicht um eine Liste handelt.

Um dein Problem besser nachvollziehen zu können solltest du uns einen Link zu deiner Seite posten damit man sich das mal anschauen kann.

Gruss
Elroy
 
Habe ich mir schon gedacht, dass das mit dem float und dem ul Element keinen Sinn macht, ich habe es aber einfach mal so gepostet. Das mit der Überschrift war übrigens so auf w3schools.com, denn da habe ich die Grundstruktur her. Die Überschrift hat bisher auch noch keinerlei Probleme verursacht. Das Problem ist, ich habe keinen Server oder so, auf den ich es laden kann. Denn das ganze ist für die Schule und die Sachen werden dann auf die dortigen Server geladen. Oder gibt es da andere Mittel und Wege?


EDIT:

Ich habe jetzt nur noch:
<a href="http://www.kleineburg.de/leoburg"><img src="logo.jpg" style="width: 156px; margin: 20px 0px 20px 0px; position: fixed; top: 550px; left: 58px"></a>

stehen. Geht trotzdem nicht, wird nicht bei allen Browsern an der selben Position angezeigt.
 
Zuletzt bearbeitet:
Das mit der Überschrift war übrigens so auf w3schools.com, denn da habe ich die Grundstruktur her.

Bei w3schools befindet sich die Überschrift aber ausserhalb der Liste.
Dort ist es richtig, bei dir ist es falsch.

Absonsten kann ich dir leider nicht weiterhelfen ohne das Online zu sehen.
Es gibt ja genug Free Webspace Provider wie zum Beispiel bplaced wo du das probeweise hochladen kannst.

Gruss
Elroy
 
Ne stimmt, die hatte ich im nachhinein eingefügt, denn vorher war da gar keine Überschrift glaube ich.
Hier die angeforderte Demonstration der Seite. (Das Überlappen des Logos bitte ignorieren, war zu faul das bei der einen Seite noch anzupassen, obwohl es überlappt ja trotzdem wenn man andere Browser als Firefox verwendet.)

MfG
Newbe
 
Zuletzt bearbeitet:
Hallo,

du hast in deiner Seite mehrere Lösungen verwendet, die entweder veraltet sind oder so nicht verwendet werden sollten.

1. In Texten sollten die deutschen Umlaute direkt verwendet werden

2. In Links sollten hingegen keine deutschen Umlaute verwendet werden

3. Text sollte niemals direkt in Containern wie div, header, main, footer, article, aside u.s.w. stehen, sondern immer in passenden Elementen wie h1, h2 ... h6, p, li, dt, dd u.s.w.

4. Bei HTML5 sollten auch die passenden Container verwendet werden

5. Abstände sollten nicht mit dem br-Element erzeugt werden

6. CSS-Angaben sollten nicht innerhalb des HTML-Quelltextes (also im body-Bereich) stehen

7. Leere Tags sollten weggelassen werden

8. Das Copyright-Zeichen ist in Deutschland sinnlos und hat keinerlei rechtliche Bedeutung

9. Für das Layout sollte bei HTML5 / CSS3 das Flexbox-Modell verwendet werden

10. Es sollten keine Bindestriche als Trennzeichen eingegeben werden. Dazu gibt für lange Worte in HTML "&shy;". Damit kann dann auch die Containerbreite flexibel angepasst werden.

Ich habe mal die Seite mit aktuellem HTML5 / CSS3 und etwas Responsive Design nachgebaut. Die Verlinkungen und Hover-Effekte habe ich weggelassen, die können ja problemlos nachgerüstet werden:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
...
</body>
</html>

Edith: Code wegen Desinteresse gelöscht.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
1. In Texten sollten die deutschen Umlaute direkt verwendet werden

2. In Links sollten hingegen keine deutschen Umlaute verwendet werden

Die Umlaute sind noch Überesete von bevor ich UTF-8 eungefügt hatte, das mit den links haben ich beim uploaden gemerkt :D.

7. Leere Tags sollten weggelassen werden
Wir arbeiten in einer Gruppe und wenn doch noch was geändert werden soll, habe ich machne leere Tags noch drin gelassen.
8. Das Copyright-Zeichen ist in Deutschland sinnlos und hat keinerlei rechtliche Bedeutung
War nur ein optisches Element und sollte keinerlei rechtliche Bedeutung haben.

Ich find es ja nett, dass du mir diesen Code schickst, aber ich kann nur wenig davon jetzt nachvollziehen. Und dieses jetzt einfach stumpf zu kopieren... Ich weiß nicht. Zudem ist das Logo jetzt in der Navigationsleiste, dieses wollte ich nicht. Auch die Info-Box soll nicht über die ganze Seite gehen. Und die Schrift ist jetzt schon etwas arg groß.
 
Zuletzt bearbeitet:
Das Grund-Html kann ich ja eigentlich, aber dieser code erscheint mir irgendwie fremd. Und mich jetzt extra nochmal mit diesem html5 auseinander zu setzen, ich weiß nicht.. Zudem geht unser Internet schon wieder nicht (dorfleitung), ich schreibe gerade über's handynetz.
 
Zurück
Oben