App installieren
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature may not be available in some browsers.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
buttons innerhalb eines div zentrieren
- Ersteller hokage555
- Erstellt am
- Status
- Für weitere Antworten geschlossen.
neuroleptika
Aktives Mitglied
Mit float geht das nicht.
Es kommt drauf an wie die Buttons aussehen sollen.
Ganz einfache kann man mit text-align: center; zentrieren.
Aufwendigere Button brauchen oft display: block. Die kann man nicht mit text-align ausrichten.
Eine einheitliche Lösung für alle Browser kenne ich nicht.
Die einen kennen display: inline-block (ff2 leider nicht) andere display: table (IE bis vers.7 leider nicht).
Zeige doch mal wie es aussehen soll.
Es kommt drauf an wie die Buttons aussehen sollen.
Ganz einfache kann man mit text-align: center; zentrieren.
Aufwendigere Button brauchen oft display: block. Die kann man nicht mit text-align ausrichten.
Eine einheitliche Lösung für alle Browser kenne ich nicht.
Die einen kennen display: inline-block (ff2 leider nicht) andere display: table (IE bis vers.7 leider nicht).
Zeige doch mal wie es aussehen soll.
^^
^^
naja...
ich hab die page nur lokal im moment.
bisl dumm, aber ich regel das mit dem webspace und lad die so schnell es geht hoch
danke auf jeden fall für deine hilfe.
text-align wird wohl nicht gehen, da die buttons ein bild als hintergrund haben.
naja und das andere...
ich probiers aus xD
ich muss wirklich mal meine seite hochladen^^
^^
naja...
ich hab die page nur lokal im moment.
bisl dumm, aber ich regel das mit dem webspace und lad die so schnell es geht hoch
danke auf jeden fall für deine hilfe.
text-align wird wohl nicht gehen, da die buttons ein bild als hintergrund haben.
naja und das andere...
ich probiers aus xD
ich muss wirklich mal meine seite hochladen^^
E
Efchen
Guest
Du hast eine horizontale Menüleiste, also <ul>.
Jedes Listenelement <li> hat ein Hintergrundbild. Horizontal wird es, indem Du display:inline verwendest.
Wenn nun die Liste text-align:center bekommt, werden die einelnen Menüeinträge alle zusammen zentriert.
Fertig.
Jedes Listenelement <li> hat ein Hintergrundbild. Horizontal wird es, indem Du display:inline verwendest.
Wenn nun die Liste text-align:center bekommt, werden die einelnen Menüeinträge alle zusammen zentriert.
Fertig.
neuroleptika
Aktives Mitglied
Dann kann er aber kein height, width und margin verwenden. Der Text dürfte nicht umbrechen.
Ohne das Menü / die Buttons zu sehen kann man nicht sagen ob das reicht.
Ohne das Menü / die Buttons zu sehen kann man nicht sagen ob das reicht.
Zuletzt bearbeitet:
E
Efchen
Guest
Also auf der von Dir verlinkten Seite sehe ich nichts von dem, was ich vorgeschlagen habe.
Aber noch eine Frage, wozu ist div#navi? Das ist überflüssig. Du packst ul#navigationsliste in einen Container der genaso groß ist und die selben Eigenschaften, wie der Container ul#navigationsliste selbst. Aus Sicht von HTML solltest Du Dich von div#navi trennen.
Aber noch eine Frage, wozu ist div#navi? Das ist überflüssig. Du packst ul#navigationsliste in einen Container der genaso groß ist und die selben Eigenschaften, wie der Container ul#navigationsliste selbst. Aus Sicht von HTML solltest Du Dich von div#navi trennen.
ja weil ich das von zu hause hochgeladen hab und hier bei der arbeit das nicht ändern kann.
verstehst?
also ich schreib mal den code den ich jetzt geändert hab:
html-code:
<div class="navi-horizontal" >
<ul class="navigationsliste-horizontal">
<li> <a class="link-horizontal" href="home.html"> Home </a> </li>
<li> <a class="link-horizontal" href="allgemeines.html"> Allgemeines </a>
</li>
<li> <a class="link-horizontal" href="vorteile-internet.html"> Vorteile </a> </li>
<li> <a class="link-horizontal" href="nachteile-internet.html"> Nachteile </a> </li>
<li> <a class="link-horizontal" href="impressum.html"> Impressum </a> </li>
</ul>
</div>
css-code:
.navi-horizontal{
float:left;
width:100%;
}
.navigationsliste-horizontal{
.text-align:center;
list-style:none;
}
.link-horizontal{
display:inline;
color:#ffffff;
width:150px;
height:25px;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
line-height:25px;
border:1px solid #8c8c8c;
margin-right:10px;
margin-bottom:20px;
background-image:url(../pic/jpg-png-gif-dateien/button-1-horizontal.jpg);
}
.link-horizontal:hover{
display:inline;
color:#ffffff;
width:150px;
height:25px;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
text-align:center;
line-height:25px;
border:1px solid #8c8c8c;
margin-right:10px;
margin-bottom:20px;
background-image:url(../pic/jpg-png-gif-dateien/button-2-horizontal.jpg);
}
also so hab ich dich verstanden.
nicht böse sein wenn das falsch ist^^
die überflüssigen divs lösche ich später ;-)
verstehst?
also ich schreib mal den code den ich jetzt geändert hab:
html-code:
<div class="navi-horizontal" >
<ul class="navigationsliste-horizontal">
<li> <a class="link-horizontal" href="home.html"> Home </a> </li>
<li> <a class="link-horizontal" href="allgemeines.html"> Allgemeines </a>
</li>
<li> <a class="link-horizontal" href="vorteile-internet.html"> Vorteile </a> </li>
<li> <a class="link-horizontal" href="nachteile-internet.html"> Nachteile </a> </li>
<li> <a class="link-horizontal" href="impressum.html"> Impressum </a> </li>
</ul>
</div>
css-code:
.navi-horizontal{
float:left;
width:100%;
}
.navigationsliste-horizontal{
.text-align:center;
list-style:none;
}
.link-horizontal{
display:inline;
color:#ffffff;
width:150px;
height:25px;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
line-height:25px;
border:1px solid #8c8c8c;
margin-right:10px;
margin-bottom:20px;
background-image:url(../pic/jpg-png-gif-dateien/button-1-horizontal.jpg);
}
.link-horizontal:hover{
display:inline;
color:#ffffff;
width:150px;
height:25px;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
text-align:center;
line-height:25px;
border:1px solid #8c8c8c;
margin-right:10px;
margin-bottom:20px;
background-image:url(../pic/jpg-png-gif-dateien/button-2-horizontal.jpg);
}
also so hab ich dich verstanden.
nicht böse sein wenn das falsch ist^^
die überflüssigen divs lösche ich später ;-)
E
Efchen
Guest
Und die überflüssigen Klassen, die überflüssigen, weil doppelt vorkommenden Eigenschaften und und und...es treten sicherlich weniger Fehler auf, wenn Du nicht von vornherein so viel überflüssiges Zeug schreiben würdest.die überflüssigen divs lösche ich später ;-)
DAS bringts! ;-).navi-horizontal{
float:left;
width:100%;
}
"Benutze die volle Breite und schreib alles andere noch daneben" ;-)
Da liegt der Fehler, weil Du text-align nicht gesetzt hast..navigationsliste-horizontal{
.text-align:center;
list-style:none;
}
Wie neuroleptika schon sagte, gibts bei Inline-Elementen kein width oder height.display:inline;
width:150px;
height:25px;
Die Einheit sollte man nicht verwenden, weil der IE die nicht skalieren kann.font-size:11px;
Besser ist em.
In einem Inline-Element hinfällig.text-align:center;
Und hier nochmal alles, was aus .link-horizontal vererbt wird..link-horizontal:hover{
Gruß,
-Efchen
Zitat:
.navigationsliste-horizontal{
.text-align:center;
list-style:none;
}
Da liegt der Fehler, weil Du text-align nicht gesetzt hast.
das muss hier beim einfügen passiert sein.
in der css datei ist kein "." vor "text-align:center".
auch nachdem ich hight und width weggelassen habe hat es nicht funktioniert. das background-image der buttons wird irgendwie nicht richtig angezeigt und gelistet werden die buttons untereinander und auch nicht nebeneinander.
also irwas ist da ganz und gar nicht richtig.
hoffe du hast noch ne idee^^
E
Efchen
Guest
Weil Du für Inline-Elemente kein width/height setzen kannst, wird wohl nicht genügen Platz für das Image bereitgestellt.das background-image der buttons wird irgendwie nicht richtig angezeigt
Hab ich erst jetzt gesehen. Du hast ja auch die Listenelemente nicht zum Inline-Element gemacht, sondern die Links. Die sind aber von Hause aus Inline-Elemente.gelistet werden die buttons untereinander und auch nicht nebeneinander.
hi
erstmal danke für dein angagement xD
gibt es denn eine möglichkeit das background image ohne width und height voll anzuzeigen?
tut mir leid, aber auch als ich display:inline auf die einzelnen li-tags angewendet habe blieben die links untereinander angeordnet.
kp was das soll oder was ich da falsch mache.
erstmal danke für dein angagement xD
gibt es denn eine möglichkeit das background image ohne width und height voll anzuzeigen?
tut mir leid, aber auch als ich display:inline auf die einzelnen li-tags angewendet habe blieben die links untereinander angeordnet.
kp was das soll oder was ich da falsch mache.
neuroleptika
Aktives Mitglied
Das geht so nicht.
Height und width gibt es nicht für display: inline.
Float macht das Element zur Blockbox wodurch text-align nicht mehr greift.
line-height erhöt nur die Zeilen nicht den Zeileninhalt. Das kannst du drehen wie du willst. Es wird nicht gehen.
Entweder du verwendest img (verhält sich wie display: inline-block) oder es wird kompliziert.
Für die Internetexplorer 5-7 bleibt nur eine inline-Box zu simulieren.
suche: haslayout display-inline
Für die anderen Browser:
suche: display: table
Hier habe ich das mal geübt:
inline-block IE
Weil es eine Übung war sieht es etwas wirr aus.
Eine andere Möglichkeit:
Schreibe den Text in die Hintergrundgrafik und verwende feste Breiten.
Dann könntest du mit margin: 0 auto; zentrieren.
Height und width gibt es nicht für display: inline.
Float macht das Element zur Blockbox wodurch text-align nicht mehr greift.
line-height erhöt nur die Zeilen nicht den Zeileninhalt. Das kannst du drehen wie du willst. Es wird nicht gehen.
Entweder du verwendest img (verhält sich wie display: inline-block) oder es wird kompliziert.
Für die Internetexplorer 5-7 bleibt nur eine inline-Box zu simulieren.
suche: haslayout display-inline
Für die anderen Browser:
suche: display: table
Hier habe ich das mal geübt:
inline-block IE
Weil es eine Übung war sieht es etwas wirr aus.
Eine andere Möglichkeit:
Schreibe den Text in die Hintergrundgrafik und verwende feste Breiten.
Dann könntest du mit margin: 0 auto; zentrieren.
Zuletzt bearbeitet:
gut xD
dann werde ich das wohl so lösen:
text mit photoshop auf den button direkt schreiben und die button so vergrößern, dass die leiste genau so breit ist wie das banner.
schwierig wird dann nur die einzelgrößen der buttons zu berechnen, damit dass dann auch passt xD
aber das krieg ich hin ;-)
danke euch beiden
dann werde ich das wohl so lösen:
text mit photoshop auf den button direkt schreiben und die button so vergrößern, dass die leiste genau so breit ist wie das banner.
schwierig wird dann nur die einzelgrößen der buttons zu berechnen, damit dass dann auch passt xD
aber das krieg ich hin ;-)
danke euch beiden
E
Efchen
Guest
Tja, und da waren sie dann wieder meine Probleme...schon kann man den Text nicht mehr skalieren.
Ist halt schon gemein, dieses WWW :-)
Ist halt schon gemein, dieses WWW :-)
E
Efchen
Guest
Das kommt drauf an, wen Du fragst.
Es soll halt Menschen auf der Welt geben, die nicht so gut sehen, wie andere. Die sind vielleicht tatsächlich auf die Schriftvergrößerung angewiesen. In Zeiten von barrierefreiem Webdesign und Antidiskriminierungsgesetzen ist das eine wichtige Sache. Da ist mit Ändern der Bilddatei nicht geholfen.
Ja, mir ist bewusst, dass ich Dich da in eine Sackgasse hineinmanövriere, aus der ich Dich auch nicht unbedingt rausleiten kann. Ich würde knallhart das Design ändern, so dass das mit dem Skalieren geht. Aber Leute, die sehr auf das Design fixiert sind, würden da so argumentieren, dass man richtig heraushört, dass ihnen Leute mit Sehschwächen völlig egal sind, hauptsache das Design passt. Das kann ich persönlich nicht nachvollziehen.
Aber egal...Du wirst auch Deinen Weg finden :-)
Es soll halt Menschen auf der Welt geben, die nicht so gut sehen, wie andere. Die sind vielleicht tatsächlich auf die Schriftvergrößerung angewiesen. In Zeiten von barrierefreiem Webdesign und Antidiskriminierungsgesetzen ist das eine wichtige Sache. Da ist mit Ändern der Bilddatei nicht geholfen.
Ja, mir ist bewusst, dass ich Dich da in eine Sackgasse hineinmanövriere, aus der ich Dich auch nicht unbedingt rausleiten kann. Ich würde knallhart das Design ändern, so dass das mit dem Skalieren geht. Aber Leute, die sehr auf das Design fixiert sind, würden da so argumentieren, dass man richtig heraushört, dass ihnen Leute mit Sehschwächen völlig egal sind, hauptsache das Design passt. Das kann ich persönlich nicht nachvollziehen.
Aber egal...Du wirst auch Deinen Weg finden :-)
neuroleptika
Aktives Mitglied
Es ist keine Sackgasse.
table-cell funktioniert in allen gängigen Browsern (bis auf IE < Vers.8 )
IE5-IE7 kann man mit haslayout und display: inline; zu etwas wie display:block bewegen.
http://css-spalten.red-rod.net/test/beispiel/nav-table.htm
In dem Beispiel habe ich zoom:1; für haslayout verwendet. Das funktioniert ab IE5.5. Für ältere IE könnte height:1% verwendet werden.
Wenn ff unter Vers.3 display:inline-block; kennen würde ginge das auch ohne display:table;
Wurde jetzt der IE oder ff2 "gehackt"? - oder beide?
Manchmal komme ich mir vor als würde ich in den Wind schreiben.
table-cell funktioniert in allen gängigen Browsern (bis auf IE < Vers.8 )
IE5-IE7 kann man mit haslayout und display: inline; zu etwas wie display:block bewegen.
http://css-spalten.red-rod.net/test/beispiel/nav-table.htm
In dem Beispiel habe ich zoom:1; für haslayout verwendet. Das funktioniert ab IE5.5. Für ältere IE könnte height:1% verwendet werden.
Wenn ff unter Vers.3 display:inline-block; kennen würde ginge das auch ohne display:table;
Wurde jetzt der IE oder ff2 "gehackt"? - oder beide?
Manchmal komme ich mir vor als würde ich in den Wind schreiben.
Zuletzt bearbeitet:
- Status
- Für weitere Antworten geschlossen.
