Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Ajax - CSS-Elemente verschieben sich nicht, wenn dynamisch Inhalte hinzugefügt werden

Empfohlene Antworten

Veröffentlicht

Hallo.

Ich lade zuerst einen Inhalt in "#main #top #content"über Ajax. Wenn dieser Inhalt geschrieben wird, dann verschiebt sich "#main #bottom" wie i möchte nach unten.


#main
{
display: block;
position: relative;
margin-top: -330px;
margin-left: 320px;
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #content
{
}

#main #bottom
{
display: block;
position: relative;
float: left;
margin-left: 95px;
margin-top: -15px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}[/HTML]

Doch dann möchte ich durch einen Klick auf einen Javascript-Link erneut einen Inhalt per Ajax laden. Wenn dieser Inhalt geschrieben wird, verschiebt sich "#main #bottom" im Firefox nicht mehr nach unten, im IE7 komischerweise schon.

Zu sehen auf Hanrun Hu's Website und dann unter Home->Announcements. Beim Klicken auf "Read Comments" sollen die Kommentare geladen werden.

[HTML]#main #top #content #topic_x
{
position: relative;
float: left;
margin-left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350;
}

#main #top #content #topic_x .comments
{
display: block;
position: relative;
margin-top: 5px;
margin-left: 0px;
padding-left: 20px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350;
}

Auch wenn ich ".comments" zu "#comments" ändere verschiebt sich "#main #bottom" nicht.

MfG J!M!

Wieso hast du denn überhaupt position: relative? Du nutzt nirgendwo eine Positionsangabe, also lass das doch ganz normal.

ansonsten kann ich das Problem auf der Seite nachvollziehen, nur einen echten Grund dafür sehe ich erstmal nicht.

wie gesagt, probier mal das position: relative wegzulassen.

Mehr fällt mir so auf Anhieb nicht ein. (Und die Angaben von dir sind auch eher knapp, ich hab keine Lust die ganze Seite auseinander zu nehmen jetzt ;) )

Dass es generell eine eher schlechte Idee ist, sämtliche Inhalte per Javascript zu laden, sieht man sehr schön an diesem Beispiel. Man sieht nämlich nicht oder nur umständlich, was da letzten Endes für HTML-Code zusammengekleistert wird. Von der Zugänglichkeit mal ganz abgesehen.

Du solltest als erstes sämtliche Fehler im eigentlichen Quelltext ausmerzen. Das geht zum Beispiel gar nicht:

<a href=javascript:load_subnav_and_content(escape("Home"), escape("home.png"));>

Da kann der Browser bestenfalls raten, was er machen soll.

Außerdem werden verschiedene IDs mehrmals vergeben, was nicht sein darf. IDs müssen einzigartig sein. (Z.B. #topic_x, #date, #subject)

Vermutlich sind noch mehr solcher Fehler vorhanden, die nur schwer zu finden sind, weil sie nicht im Quelltext stehen.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.