• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button 90% breit und ~18% hoch

T

the_zoker_09

Mitglied
Hallo zusammen,
Ich möchte ja eine Mobile Seite für meine Seite bauen.

Nun möchte ich nur 5 Buttons, die mit 5 Links versehen sind.
Diese Buttons sollen viereckig sein, grau und mit einem dünnen Rand.

Nun möchte ich, dass diese Buttons 90% Breit sind (das is kein Problem) und jeder Button ~18% hoch (das ist das Problem), damit sie, egal bei welcher Bildschirmgröße, immer den ganzen Bildschirm ausfüllen:

2rm9jpri.jpg


Nur leider habe ich bis jetzt keine Möglichkeit gefunden, diese Buttons ~18% hoch zu machen.

Hat da jemand eine Idee?

Vielen Dank
the_zoker_09
 
Natürlich kann man das was Du willst per CSS erreichen - nur sehe ich da nicht wirklich einen Sinn drinne? Wieso willst Du deine Seite an so ein Display anpassen? Es gibt unterschiedlichste Displays mit unterschiedlichen Breiten und Höhen. Auf einem iPad wären diese Buttons einfach nur gigantisch groß.

Dennoch ein Tipp wg. der Umsetzung: definiere die Buttons als <ul>-Liste und gib dieser 100% Höhe und Breite. en <li>'s gibst Du dann 18% Höhe. Das das was wird bezweifel ich jedoch weiterhin, weniger wg. HTML oder CSS - eher wegen den Displays und Browsern.
 
Ich wollte halt eine Mobile Seite, die sich dem Display anpasst, damit wenn man mit einem größeren Display surft, die Buttons nicht zu klein sind und wenn man mit einem Kleinen Display surft, die Buttons nicht zu größ sind.

Oder hast du eine andere Idee?

Danke
the_zoker_09
 
Hast Du dich schonmal über Webseiten für mobile Endgeräte informiert? Heutzutage können die auch normale Webseiten richtig darstellen. Man muss dafür lediglich einige Elemente ausblenden, wenn es das Design erfordert. Man muss keine extra Webseite nur für mobile Endgeräte schreiben. Welches Gerät hast Du denn vor dir?
 
Warum eigentlich nicht 20%?

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                height: 100%;
            }

            ul {
                height: 100%;
                width: 100%;
                background: red;
            }

            li {
                height: 20%;
                background: green;
            }

        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>

</html>
 
Also ich habe die Erfahrungen gemacht, dass css keine % Werte erkennt.Ich hab ein Desire HD (wie auf dem Bild oben) vor mir liegen.Ich weiss das ich die Seite ganz normal öffnen kann, aber es ist nicht gerade angenehm.
 
CSS kennt Prozentwerte, ist auch dokumentiert und wird vielfach verwendet. Man muss natürlich auch wissen wie man Prozentwerte anwendet. Sie entsprechen in Bezug auf Höhen und Breiten den prozentualen Anteilen der umgebenden Elemente, die auch eine Höhe definiert haben müssen.

Wenn Du die Seite normal öffnen kannst und sie nicht gut aussieht, dann schau dich mal um wie man für das Desire HD bzw. den von dir darauf verwendeten Browser eine extra CSS-Datei unterschieben kann. Mit dieser kannst Du die störenden Elemente deiner Webseite ausblenden oder neu definieren, so dass es dann passt. Du musst keine komplett neue Seite entwerfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben