mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Sa 20.04.2024 02:16 Benutzername: Passwort: Auto-Login

Thema: DIV automatische Größenanpassung und Ausrichtung (gelöst) vom 27.09.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DIV automatische Größenanpassung und Ausrichtung (gelöst)
Autor Nachricht
tr7
Threadersteller

Dabei seit: 27.09.2007
Ort: Dessau
Alter: 39
Geschlecht: Männlich
Verfasst Do 27.09.2007 02:09
Titel

DIV automatische Größenanpassung und Ausrichtung (gelöst)

 Antworten mit Zitat Zum Seitenanfang
Hallo,

ich hab zwar schon eine weile zutun mit webseiten, doch bin ich nun auf ein problem in css gestoßen, welches ich bisher nicht lösen konnte. Zum thema habe ich zwar einiges hier im Forum gefunden, nur bekomm ichs einfach nicht hin in meinem Fall.

Zum Problem:
ich möchte auf meiner Website ein horizontales Menü anzeigen lassen, in welchem man über ein CMS Einträge hinzufügen kann oder löschen kann. Die Anzahl der Menüpunkte ist also Variabel.

nun soll dieses Menü allerdings einfach zentriert dargestellt werden und daran scheitert es irgendwie gerade.
Strukturiert ist alles über div elemente:

Code:

<div align="center">
  <div class="menu">
    <a href="#" class="button">Projekte</a>
    <a href="#" class="button">Tutorials</a>
    <a href="#" class="button">Videos</a>
  </div>
</div>

(css klassen siehe links)

in der Klasse "menu" kann ich eine breite angeben ("width:250px" oder so) und das menü wird schön zentiert angezeigt.
siehe: http://tflash.de/index2.html

Nur weiß ich vorher nicht, wieviel Buttons in das Menü kommen und kann deshalb keine breite angeben.
Lasse ich sie aber weg, wird das DIV element automatisch auf die volle browserbreite gezogen und das Menü erscheint dann links.
siehe: http://tflash.de/index3.html

Wie kann man das Div Element automatisch an den Inhalt anpassen, so dass das zentieren bei variablem Inhalt auch klappt?

mit display:table-cell; funktioniert es, aber nur im Firefox! Gibts ne Möglichkeit für den IE?
siehe: http://tflash.de/index4.html

besten Gruß und Dank im Vorraus,
Thomas

Zuletzt bearbeitet von tr7 am Do 27.09.2007 13:59, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kraat

Dabei seit: 05.10.2006
Ort: Köln
Alter: 42
Geschlecht: Männlich
Verfasst Do 27.09.2007 09:09
Titel

Antworten mit Zitat Zum Seitenanfang
keine breite angeben und mit paddings arbeiten ^^
  View user's profile Private Nachricht senden
Anzeige
Anzeige
tr7
Threadersteller

Dabei seit: 27.09.2007
Ort: Dessau
Alter: 39
Geschlecht: Männlich
Verfasst Do 27.09.2007 12:01
Titel

Antworten mit Zitat Zum Seitenanfang
idee war nicht schlecht, aber leider brechen die buttons in die nächste zeile...um Lächel
habs versucht mit white-space:nowrap zu verhindern, keine chance.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Do 27.09.2007 12:09
Titel

Antworten mit Zitat Zum Seitenanfang
probier mal

im menu
width: auto;

in button
float: left;


und jeweils:
display: block

Zuletzt bearbeitet von pixelpapst303 am Do 27.09.2007 12:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tr7
Threadersteller

Dabei seit: 27.09.2007
Ort: Dessau
Alter: 39
Geschlecht: Männlich
Verfasst Do 27.09.2007 13:00
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
.button{
  background-color:#ff0000;
  float:left;
  padding:4px 15px 3px 15px;
  color:#D2E5FB;
  display: block
}
.menu{
   height:21px;
   background-color:#00ff00;
   width: auto;
   display: block
}


so gehts leider auch nicht: http://tflash.de/index6.html

das problem ist hier wieder, dass width:auto das div element auf die ganze Bildschirmbreite streckt (das hab ich mit der grünen hintergrundfarbe mal hervorgehoben)

und dadurch wirkt das align=center vom darüberliegenden div nicht mehr auf die buttons :/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tr7
Threadersteller

Dabei seit: 27.09.2007
Ort: Dessau
Alter: 39
Geschlecht: Männlich
Verfasst Do 27.09.2007 13:03
Titel

Antworten mit Zitat Zum Seitenanfang
um die eigentliche Frage zu vereinfachen:
ich glaub, man braucht nur irgendwie das DIV element "menu" dazu zubringen, sich der Größe seines Inhalts automatisch anzupassen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tr7
Threadersteller

Dabei seit: 27.09.2007
Ort: Dessau
Alter: 39
Geschlecht: Männlich
Verfasst Do 27.09.2007 13:58
Titel

Antworten mit Zitat Zum Seitenanfang
so, ich hab eine Lösung! ich habe statt dem Div "menu" einfach eine Tabelle genommen (nur eine Zelle, wo alle buttons reinkommen). Die Tabelle passt sich wunderbar der Größe der Buttons an und wird dann vom darüberliegendem DIV zentriert Lächel

danke trotzdem für alle Tipps,

Gruß, Thomas
siehe: http://www.tflash.de/index7.html

Code:
<div align="center" style="background-color:#ffff00;">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<a href="#" class="button">Projekte</a>
<a href="#" class="button">Tutorials</a>
<a href="#" class="button">Videos</a>
</td></tr></table>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen (gelöst)einzelne Verlinkung zu Audio-Player ?(gelöst)
(gelöst) Joomla! ? Schriftproblem (sehr merkwürdig) (gelöst)
[HTML] Variable Größenanpassung?
CSS-Ausrichtung?
Ausrichtung von swf dateien
Browserunabhängige Ausrichtung von DIV`s
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB