Diskuze: Pomoc (absolutní souřadnice)

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

BluPri

Člen

BluPri:3.7.2017 10:41

Snažil jsem se udělat hezkou úvodní stránku ke hře, ale skončil jsem u toho, že můj kód je plný absolutních souřadnic. Na ostatních rozlišeních by moje stránka vypadala hrozně. Potřeboval bych nějaké tipy jak docílit výsledku podobnému na obrázku bez použití tolika absolutních souřadnic.
Přikládám kód:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" />
                <link rel="stylesheet" href="style.css" type="text/css" />
                <title>Topnotch</title>
        </head>

        <body>
                <div id="aligner">

                <article id="mainBox">
                        <header>
                                <h1>Something</h1>
                        </header>
                        <section>
                                <p>Something about the game...</p>
                        </section>
                </article>

                <article id="informationBox">
                        <section>
                                <p>Something.</p>
                        </section>
                </article>

                <article id="addBox">
                        <section>
                                <p>Something</p>
                        </section>
                </article>

                <article id="scoreBox">
                        <section>
                                <p>Somehing</p>
                        </section>
                </article>

                </div>
        </body>
</html>

CSS

#mainBox {
        position: static;
        margin-right: auto;
        margin-left: auto;
        margin-top: 200px;
        padding-top: 0px;
        padding-down: 0px;
        width: 500px;
        height: 400px;
        border: 2px solid rgb(245, 245, 245);
        border-radius: 15px;
        box-shadow: 1px 1px 16px rgb(20, 20, 20);
}

#informationBox {
        position: absolute;
        top: 200px;
        left: 375px;
        padding-top: 0px;
        padding-down: 0px;
        width: 250px;
        height: 175px;
        border: 2px solid rgb(245, 245, 245);
        border-radius: 15px;
        box-shadow: 1px 1px 16px rgb(20, 20, 20);
}

#addBox {
        position: absolute;
        top: 425px;
        left: 375px;
        width: 250px;
        height: 175px;
        border: 2px solid rgb(245, 245, 245);
        border-radius: 15px;
        box-shadow: 1px 1px 16px rgb(20, 20, 20);
}

#scoreBox {
        position: absolute;
        top: 200px;
        right: 375px;
        width: 250px;
        height: 400px;
        border: 2px solid rgb(245, 245, 245);
        border-radius: 15px;
        box-shadow: 1px 1px 16px rgb(20, 20, 20);
}

#aligner {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
}

h1 {
        text-align: center;
}

p {
        text-align: center;
}

Odpovědět

3.7.2017 10:41

Ján Timoranský

Tvůrce

Ján Timoranský:3.7.2017 10:51

Daný layout sa dá docieliť viacerými spôsobmi, buď floatovaním alebo cez flexbox . Osobne odporúčam flexbox a na prispôsobenie pre rôzne veľkosti obrazoviek zariadení použi media query.

Nahoru Odpovědět

3.7.2017 10:51

Find what you love and let it kill you.

Ján Timoranský

Tvůrce

Ján Timoranský:3.7.2017 10:57

Ukážka daného layoutu s použitím flexboxu: https://jsfiddle.net/f0w0h0as/ . Pri menších obrazovkách by stačilo zmeniť flex-direction na column a upraviť poradie elementov.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

3.7.2017 10:57

Find what you love and let it kill you.

BluPri

Člen

BluPri:3.7.2017 12:00

Díky moc :-)

Nahoru Odpovědět

3.7.2017 12:00

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.