Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
kElops
Člen
Avatar
kElops:23.7.2013 16:48

Dobrý den chtěl bych se zeptat jestli byste mi někdo neporadil jak mam udělat aby když jsem Rozcestník udělal na jednom Pc tak aby byla stejná velikost pozadí a rozpoležení tlačítek i na jiném PC.

Odkaz na web: http://www.worldofgame.cz/

HTML kód:

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title>World of game | Rozcestník</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link href='image/favicon.png' rel='shortcut icon' type='image/png'>
    <img id="logo" src="image/logo.png" alt="World of Game" />
  </head>
  <body>
    <div id="centrovac">

    <section id="odkaz1">
    <section id="shop">
    <a href="http://www.shop.worldofgame.cz"><button class="vetsi">Minecraft Obchod</button></a>
    </section>
    </section>

    <section id="odkaz2">
    <a href="http://www.mc.worldofgame.cz"><button>Minecraft</button></a>
    </section>

    <section id="odkaz3">
    <a href="http://www.bukkit.worldofgame.cz"><button>Bukkit</button></a>
    </section>

    <section id="odkaz4">
    <a href="http://www.wiki.worldofgame.cz"><button>Wiki</button></a>
    </section>

    <section id="odkaz5">
    <a href="http://www.forum.worldofgame.cz"><button>Forum</button></a>
    </section>

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

CSS kód:

@font-face {
        font-family: Minecraft;
        src: url('fonts/Minecraft.ttf');
}

#logo {
        background: url('image/logo.png') no repeat;
        position: absolute;
        left: 380px;
        top: 46px;
}

body {
        background: url('image/background.jpg');
        background-size: 1429px 760px;
        margin: 0px auto;
        width: 960px;
}

#centrovac {
        margin: 0px auto;
        width: 960px;
}

#odkaz1 {
        position: absolute;
        left: 545px;
        top: 270px;
        margin: 0px auto;
}

#odkaz2 {
        position: absolute;
        left: 240px;
        top: 430px;
        margin: 0px auto;
}

#odkaz3 {
        position: absolute;
        left: 900px;
        top: 430px;
        margin: 0px auto;
}

#odkaz4 {
        position: absolute;
        left: 240px;
        top: 570px;
        margin: 0px auto;
}

#odkaz5 {
        position: absolute;
        left: 900px;
        top: 570px;
        margin: 0px auto;
}

button {
        font-family: Minecraft;
        color: black;
        font-size: large;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        width: 280px;
        height: 70px;
        background: rgba(255,255,255,0.5);
        border: 3px solid 009dff;
        border-radius: 30px;
}

button:hover, .aktivni {
        background: rgba(255,255,255,0.8);
}

button.vetsi {
        background: rgba(255,255,255,0.7);
        text-align: center;
        border-radius: 40px;
        width: 330px;
        height: 100px
}

button.vetsi:hover, .aktivni {
        background: rgba(255,255,255,0.9);
}
Editováno
Odpovědět
23.7.2013 16:48
Všechno de když se člověku chce.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na kElops
Neaktivní uživatel:23.7.2013 16:55

Jak tak na to koukám, tak nejlepší pro tebe bude použít grid 960 -> zjednoduším to - obal všechen obsah divem s pevnou šířkou 960 px, který bude vycentrovaný na střed ;)

Nahoru Odpovědět
23.7.2013 16:55
Neaktivní uživatelský účet
Avatar
kElops
Člen
Avatar
Odpovídá na Neaktivní uživatel
kElops:23.7.2013 17:02

Ja jsem obalil do DIVu obsah body ted už i obsah Head stačí to

Nahoru Odpovědět
23.7.2013 17:02
Všechno de když se člověku chce.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na kElops
Neaktivní uživatel:23.7.2013 17:08

Vždyť ty to tam už máš :D ten centrovač je správně, tak je problém v absolutním centrování, promiň, nekoukal jsem se do kódu :P

Nahoru Odpovědět
23.7.2013 17:08
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na kElops
Neaktivní uživatel:23.7.2013 17:34

Dobře míněná rada - celý to smaž. Udělej si div, třeba #grid, ten bude mít tedy šířku 960px a margin 0 auto a bude ti držet obsah aby se nerozprc. V něm bude seznam, jeho položky budou mít pevnou šířku a výšku, kde šířka + margin ze stran + padding ze stran budou 480px (1/2 960px) a budou mít float left, takže se budou rovnat vedle sebe, tím ti odpadne to prkenný absolutní pozicování :) poslední (ten velký odkaz dole) bude mít šířku 960 px a obsah budeš zarovnávat na střed. Uvnitř bude JEN odkaz, žádný tlačítko, žádný section (section je pro jeden malinký odkaz zbytečný).

Zkus to takhle, HTML kód se ti provzdušní a zpřehlední, css z půlky zmizí ;)

// EDIT: pokud chceš nutně použít HTML5 tag, tak namísto div#grid použij nav ;)

Editováno
Nahoru Odpovědět
23.7.2013 17:34
Neaktivní uživatelský účet
Avatar
kElops
Člen
Avatar
Odpovídá na Neaktivní uživatel
kElops:23.7.2013 22:09

Můžes to prosím nějak blíže popsat.

Nahoru Odpovědět
23.7.2013 22:09
Všechno de když se člověku chce.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:23.7.2013 23:07

ale houby zas div, jen kvůli centrování, vycentruj body a pozadí dej do :root

 
Nahoru Odpovědět
23.7.2013 23:07
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
kElops:24.7.2013 9:46

Můžeš to nějak popsat já moc neumim z HTML a CSS

Nahoru Odpovědět
24.7.2013 9:46
Všechno de když se člověku chce.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na kElops
Michal Žůrek - misaz:24.7.2013 9:50

1.) přečti si zdejší tutoriály.
2.) tak ještě jednou když chceš vycentrovat celou stránku tak ji nedávej do divu, ale centrul body. To znamena:

body {
   max-width:960px;
   margin: 0 auto;
}

pozadí pak nebudeš dávat elementu body, ale pseudoelementu :root :

:root {
   background: ...;
}
 
Nahoru Odpovědět
24.7.2013 9:50
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
kElops:24.7.2013 10:26

A můžu nastavit tomu pozadí velikost.

:root {
        background: url('image/background.jpg');
        background-size: 1429px 760px;
}
Nahoru Odpovědět
24.7.2013 10:26
Všechno de když se člověku chce.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na kElops
Michal Žůrek - misaz:24.7.2013 10:38

jo

 
Nahoru Odpovědět
24.7.2013 10:38
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
kElops:24.7.2013 10:42

Moc ti děkuju za všechny rady :).

Nahoru Odpovědět
24.7.2013 10:42
Všechno de když se člověku chce.
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
kElops:24.7.2013 15:12

je to jak kdybych to neudělal

Nahoru Odpovědět
24.7.2013 15:12
Všechno de když se člověku chce.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na kElops
Neaktivní uživatel:24.7.2013 16:03

Tak si projeď ten seriál a pak to dost pravděpodobně zvládneš sám podle sebe, a budeš vědět co děláš. Zatím si myslím, že vůbec nevíš co a jak jsi to ztvořil :)

Nahoru Odpovědět
24.7.2013 16:03
Neaktivní uživatelský účet
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 14 zpráv z 14.