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.

HTML Div-Positionierung

Empfohlene Antworten

Veröffentlicht

Hi Leute, bei der Modifizierung eines Templates bin ich auf ein kleines Problemchen gestoßen!

Und zwar habe ich oben meine Menüleiste (im folgenden Screenshot erkennbar), der ich nebenan eine Suchleiste anfügen möchte.

Das Problem ist folgendes:

beides hab ich durch Divisions voneinander getrennt und jeweils 80% und 20% Breite vergeben. Sieht bei 1200er Auflösung ganz schick nebeneinander aus. Ziehe ich allerdings den rechten Rand des Browser-Fensters nach links, springt zuerst der rechteste der Menübuttons, gefolgt von der Suchleiste in die nächste Zeile.

Jetzt die Frage: Gibt es so etwas wie absolute Positionierung der Objekte, dass keines davon in die nächste Zeile springt, wenn das Fenster in der Breite verkleinert wird? Mit min-width und position:absolute war ich jedenfalls erfolglos.

Sieht in der index.php (Joomla-Template) erst mal so aus:

  <tr>

    <td><div id="top_menu">

        <div id="top_menu_inner">

          <?php mosLoadModules ( 'user3' ); ?> <!-- Die Menüleiste -->

        </div>

      </div>


	  <div id="top_menu_two">

        <div id="top_menu_inner_two">

           <?php mosLoadModules ( 'user4' ); ?> <!-- Die Suchleiste -->

        </div>

      </div>


	  </td>

  </tr>
So, und das ist ein Ausschnitt aus der dazugehörigen CSS-Datei:
#top_menu {

width : 80%;

float : left;

height : 53px;

padding : 0px;

margin : 0px;

overflow : visible;

background-color : #fafafa;

background-image : url(../images/bg_pagenav.gif);

background-repeat : repeat-x;

min-width: 800px;

}

#top_menu_inner {

	overflow : visible;

	padding-top : 10px;

	padding-left : 60px;

}

#top_menu_two {

width : 20%;

float : left;

height : 53px;

padding : 0px;

margin : 0px;

overflow : visible;

background-color : #fafafa;

background-image : url(../images/bg_pagenav.gif);

background-repeat : repeat-x;

}

#top_menu_inner_two {

	overflow : visible;

	padding-top : 10px;

Vielen Dank im Voraus für Bemühungen!

Hier noch der Screenshot:

post-29052-14430447681854_thumb.jpg

Ziehe ich allerdings den rechten Rand des Browser-Fensters nach links, springt zuerst der rechteste der Menübuttons, gefolgt von der Suchleiste in die nächste Zeile.

Das ist ein absolut normales und auch gewünschtes Ergebnis, allgemein.

Tip: Um beide Divs ein Div bzw bei der Table-Cell den min-Width angeben. Der Umbruch erfolg nämlich genau dann, wenn die elemente nicht mehr in der Breite nebeneinander dargestellt werden können. Gibst du dem darüberliegenden Element eine Breite, die nicht unterschritten werden darf, kommt es nie soweit.

Allerdings unterstützt der IE min-Width erst ab Version 7 AFAIK.

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.