Zur Navigation

Sobald Bildschirm kleiner, rutschen Button ca. 1/3 übereinander

1 webuser

Hallo,
ich habe noch ein kleines, optisches Problem mit dem css:
Wenn die Seite normal auf dem PC gezeigt wird sind die einzelnen
Button sauber nebeneinander. Sobald aber der Bildschirm kleiner wird
(Tablett oder Handy) rutschen die Button ca. 1/3 übereinander.

Gruß
uwe

width: 2em;
        margin: 0.8em 0.2em 0 0;
        padding: 0.4em;
        font-weight: bold;
       text-decoration: underline;
        border: 1px solid blue;
        border-radius: 3px;
        background-color: powderblue ;
        box-shadow: 0px 5px 10px white inset;

09.08.2016 19:30

2 Jörg

Was meinst du mit "ca. 1/3 übereinander" - dass sich die Buttons überlappen?

Ich nehme an, der CSS-Code bezieht sich auf einen einzelnen Button? damit alleine lässt sich ein Überlappen nicht erklären. Kannst du vielleicht eine Demo-Seite verlinken? oder soviel HTML- und CSS-Code posten, dass sich das Problem damit nachstellen lässt.

09.08.2016 20:19

4 Jörg

Hinter den Buttons stecken <span>, also Inline-Elemente; diese verhalten sich beim weichen Umbruch anders als Blockelemente.

Probier's mal mit inline-block:

.xnormal, .xcurrent {
    display: inline-block;
    width: auto;
    /* .... */
}

Die margin und padding Werte müsstest du dann auch noch anpassen...

09.08.2016 22:50

5 webuser

Hallo,
danke, jetzt passt es.
Gruß
Uwe

10.08.2016 06:49

Beitrag schreiben (als Gast)





[BBCode-Hilfe]