topmenu mittig?

[shakedealer]

Hallo,

ich würde gerne das topmenu mittig anzeigen lassen?
<center> alleine funktioniert leider nicht.

Hat jemand einen Tipp für mich?


Linkback: https://www.modified-shop.org/forum/index.php?topic=28371.0

[burrito]

Hallo shakedealer,

Du fragst nach einem Tipp: de.selfhtml.org

Noch offene Fragen:
- Shopversion
- Template
- Link bzw. Codebeispiel

burrito

[shakedealer]

Version 1.06

Habe das Standard Template ein wenig umgebaut, hier kann man es sich ansehen:
http://goo.gl/aLt65A

[burrito]

Du musst in der CSS beim topmenu das float:right heraus nehmen und dafür die Liste zentrieren.

burrito

[shakedealer]

Also das float habe ich bereits rausgeschmissen, wie bekomme ich die Liste denn zentriert. Mit <center> klappt es nicht.

[Bonner]

probier mal mit margin-left und margin-right....

Bonner

[noRiddle (revilonetz)]

@shakedealer
Zuerst könntest du dich mal informieren, z.B. auf der Seite die burrito dir verlinkt hat.

• Gibt's den tag <center> ohnehin nicht, bzw. ist er "deprecated" und in HTML5 gar gar nicht mehr vorhanden.
  
• kann man Blockelemente, und um solche handelt es sich hier, nicht so zentrieren.
• ist die Idee mit der margin nicht flexibel.
  Man muß genau wissen wie breit die einzelnen Menu-Punkte sind und bei z.B. Mehrsprachigkeit ist's schon aus damit.

Es gibt einen Trick dafür:

Code: CSS  [Auswählen]

#topmenu {text-align:center;}
#topmenu li {display:inline-block;}

und/oder

Code: CSS  [Auswählen]

#topmenu:after {
content: "";
display: inline-block;
width: 100%;
}

Eventuell muß man sich, wenn denn Unterstützung gewünscht, noch IE7 anschauen, evtl. auch IE8.
Für den IE7 kann man ein conditional Stylesheet einbauen mit folgenden Styles:

Code: CSS  [Auswählen]

#topmenu li {zoom: 1; *display: inline;}

Gruß,
noRiddle

[shakedealer]

Vielen Dank für die ausführliche Antwort

Habe es natürlich sofort umgesetzt, leider drückt es aber weiterhin doch noch irgendwo.
Die Reiter werden nun zwar zentral angezeigt, jedoch nicht mehr nebeneinander, sondern plötzlich untereinander.

[noRiddle (revilonetz)]

• Warum hast du deine anderen Styles gelöscht ?
• Wo ist das ?

Code: CSS  [Auswählen]

#topmenu li {display:inline-block;}

Gruß,
noRiddle

[shakedealer]

So sieht meine stylesheet.css nun aus:

/* TOPMENU AS LIST */
#topmenuwrap {
background:#fdfdfd;
}
#topmenu {text-align:center;}
padding:0;
margin:0 auto;
list-style-type:none;
height:38px;
font-size:12px;
background:#fdfdfd;
}
#topmenu li {display:inline-block;}
height:38px;
float:left;
padding:0 20px;
margin:0 auto;
background:#fdfdfd;
background-position:right;
}

[noRiddle (revilonetz)]

Ich liebe Aufzählungen

• Benutze bitte die Code-Tags wenn du Code postest, du bist doch nicht seid gestern im Forum
• Warum sind hier so viele zu faul mal ein paar Sätze zu schreiben obwohl sie Hilfe wollen ?
  "So sieht meine stylesheet.css nun aus:"
  Aha, danke für die Mitteilung. Meine Oma hat übrigens gelbe Blümchentapete.
  Euch geht's hier viel zu gut in diesem Forum, um Längen zu gut.
• Wenn du die Klammer hinter display:inline-block; wegnimmst klappt's vielleicht...
  Bloß nicht seinen Code überprüfen sondern erstmal posten, daß es nicht geht.
  Bei mir kannst du dir merken:
  Es geht oder ich schreibe es nicht, period

Gruß,
noRiddle

[Matt]

Die Klammer bei #topmenu sollte vielleicht auch noch weg.

[shakedealer]

Oh wei, nun gut, nachdem ich das float:left rausgeschmissen habe, funktioniert es endlich.

Danke für eure Unterstützung!