[Erledigt] Liquid Column with middle align of <span> element

dreamcatcher · 28.04.2011, 08:58

Guten Morgen,

ich habe folgendes horizontales Menü:

PHP-Code:

  <div id=header>
  <ul id=main_menue>
    <a href="#" class="home">
      <span class="selected" style="opacity: 1; "></span>
    </a>
    [Other Buttons]
  </ul>
</div>

Nun hatte ich es bisher so gehandhabt, dass ich padding-left gesetzt habe für die gesamte ul main_menue.

Nun möchte ich das Menü aber so haben, dass es sich links und rechts von den Buttons an die Bildschirmgröße anpasst.

Wie man dies "normalerweise" erledigt habe ich auch gefunden, hier ein Beispiel:

http://www.sohtanaka.com/web-design/...ch-banners.htm

Allerdings klappt es bei mir nicht über text-align=center, da mein Aufbau der Elemente anders ist.

Nun habe ich nach align gegoogelt und kam auf "vertical-align = middle" und habe dies auch der ul main_menue zugewiesen, dabei natürlich padding-left herausgenommen.

Leider sind die Buttons dann immernoch alle liinks.

Wie bekommt man es hin, dass links und rechts von meinem Menü der gleiche Abstand herrscht ?

Erkennt jemand vllt. den Fehler in meiner vorgehensweise oder sollte ich mehr Quellcode posten ?

Anmerkung:
Eigentlich gehört es in die HTML Sektion.
Da die Bilder aber animiert sind, hatte ich es zu erst an die JS Sektion gedacht.

nikosch · 28.04.2011, 10:42

Zitat:

vertical-align

heißt eben auch vertical align.

Zitat:

oder sollte ich mehr Quellcode posten

Ja. Am besten ein Live-Beispiel.

dreamcatcher · 28.04.2011, 23:06

Da hast du Recht, nach horizontal hatte ich ebenfalls nachgeschaut gehabt, diese Property ist jedoch nicht vorhanden.

Ich habe alles unnützliche herausgeworfen, hier nun die live Demo:

http://limebulls.com/phpde/Menue.htm

Man beachte hierbei:

PHP-Code:

  ul#main_menue {
[...]
    padding-left:200px;
}

Rechts habe ich es geschafft, dass es sich der Bildschirmauflösung anpasst.
Links allerdings fällt wie oben erwähnt ohne padding-left jedoch die das gesamte main_menue nach links ein.

text-align sowie vertical-align haben als property nichts gebracht. (Wie z.B. im Tutoriallink im Post1)

ChrisB · 28.04.2011, 23:13

Floating und Zentrierung schließt sich logischerweise aus.

Floate die LI nicht, formatiere sie stattdessen mit display:inline-block.
Zentrierung erfolgt dann über text-align auf das UL-Element angewandt.

Um die Abstände zwischen den LI zu vermeiden, die vom dort enthaltenen Whitespace her rühren, eliminiere diesen - also Elemente im Quelltext Tag-an-Tag notieren.

Chriz · 28.04.2011, 23:22

Meinst du "margin:0" auto?

ChrisB · 28.04.2011, 23:32

Zitat:

Zitat von Chriz

Meinst du "margin:0" auto?

Ich? Nein.

Dazu müsste man der Liste eine feste Breite geben. Gut, wäre hier zwar ggf. möglich, weil die Items feste Breite haben. Aber wenn deren Anzahl später dynamisch sein soll, oder auch die feste Breite keine Voraussetzung sein soll, wäre das nicht so flexibel.

Trainmaster · 28.04.2011, 23:33

Gib dem Menü eine feste Breite in px, wirf das padding komplett raus und füge stattdessen margin: 0 auto; ein.

Alternativ könntest du statt einer Liste das Link-Element als inline-block darstellen. Allerdings könnte das zu Problemen bei älteren Browsern führen.

dreamcatcher · 29.04.2011, 08:00

Zitat:

Zitat von ChrisB

Floating und Zentrierung schließt sich logischerweise aus.

Floate die LI nicht, formatiere sie stattdessen mit display:inline-block.
Zentrierung erfolgt dann über text-align auf das UL-Element angewandt.

Um die Abstände zwischen den LI zu vermeiden, die vom dort enthaltenen Whitespace her rühren, eliminiere diesen - also Elemente im Quelltext Tag-an-Tag notieren.

Das hat super funktioniert, danke

@Trainmaster
Danke auch dir.
Ich habe Chris Variante aus seinen o.g. Gründen vorgezogen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fusszeile verschwindet, Leerzeile fehlt	ariane	PHP Einsteiger	4	17.04.2011 18:21
İnstallation von Propel unter Windows und Ohne PEAR	sysr	PHP Einsteiger	4	07.02.2011 10:56
HTML-String auslesen	bit4fox	PHP Einsteiger	10	08.01.2011 16:33
Sphider Umlaute und MySQL Fehler	xnic	Datenbanken	2	03.08.2010 20:10
Fehler beim kompilieren von php 5.2.9	malio	Server, Hosting und Workstations	11	05.06.2009 18:40
Erneut Vorstellung meiner Seite.	litterauspirna	Off-Topic Diskussionen	11	16.02.2009 19:17
Suche Programmierer, Designer, Schreiber...	blinkster.de	Beitragsarchiv	76	14.08.2005 18:31

28.04.2011, 08:58
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	[Erledigt] Liquid Column with middle align of <span> element Guten Morgen, ich habe folgendes horizontales Menü: PHP-Code: `<div id=header> <ul id=main_menue> <a href="#" class="home"> <span class="selected" style="opacity: 1; "></span> </a> [Other Buttons] </ul> </div>` Nun hatte ich es bisher so gehandhabt, dass ich padding-left gesetzt habe für die gesamte ul main_menue. Nun möchte ich das Menü aber so haben, dass es sich links und rechts von den Buttons an die Bildschirmgröße anpasst. Wie man dies "normalerweise" erledigt habe ich auch gefunden, hier ein Beispiel: http://www.sohtanaka.com/web-design/...ch-banners.htm Allerdings klappt es bei mir nicht über text-align=center, da mein Aufbau der Elemente anders ist. Nun habe ich nach align gegoogelt und kam auf "vertical-align = middle" und habe dies auch der ul main_menue zugewiesen, dabei natürlich padding-left herausgenommen. Leider sind die Buttons dann immernoch alle liinks. Wie bekommt man es hin, dass links und rechts von meinem Menü der gleiche Abstand herrscht ? Erkennt jemand vllt. den Fehler in meiner vorgehensweise oder sollte ich mehr Quellcode posten ? Anmerkung: Eigentlich gehört es in die HTML Sektion. Da die Bilder aber animiert sind, hatte ich es zu erst an die JS Sektion gedacht. Geändert von dreamcatcher (28.04.2011 um 09:56 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.04.2011, 23:06
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Da hast du Recht, nach horizontal hatte ich ebenfalls nachgeschaut gehabt, diese Property ist jedoch nicht vorhanden. Ich habe alles unnützliche herausgeworfen, hier nun die live Demo: http://limebulls.com/phpde/Menue.htm Man beachte hierbei: PHP-Code: `ul#main_menue { [...] padding-left:200px; }` Rechts habe ich es geschafft, dass es sich der Bildschirmauflösung anpasst. Links allerdings fällt wie oben erwähnt ohne padding-left jedoch die das gesamte main_menue nach links ein. text-align sowie vertical-align haben als property nichts gebracht. (Wie z.B. im Tutoriallink im Post1)

28.04.2011, 23:13
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Floating und Zentrierung schließt sich logischerweise aus. Floate die LI nicht, formatiere sie stattdessen mit display:inline-block. Zentrierung erfolgt dann über text-align auf das UL-Element angewandt. Um die Abstände zwischen den LI zu vermeiden, die vom dort enthaltenen Whitespace her rühren, eliminiere diesen - also Elemente im Quelltext Tag-an-Tag notieren. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

28.04.2011, 23:22
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Meinst du "margin:0" auto? __________________ "Nuschel ich?" - "Was?"

28.04.2011, 23:33
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 852 PHP-Kenntnisse: Anfänger	Gib dem Menü eine feste Breite in px, wirf das padding komplett raus und füge stattdessen margin: 0 auto; ein. Alternativ könntest du statt einer Liste das Link-Element als inline-block darstellen. Allerdings könnte das zu Problemen bei älteren Browsern führen.