Diskuze: Ořezané okraje na jíních PC

HTML a CSS HTML a CSS Ořezané okraje na jíních PC American English version English version

Avatar
kElops
Člen
Avatar
kElops:

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 23.7.2013 16:49
Odpovědět 23.7.2013 16:48
Všechno de když se člověku chce.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na kElops
Jiří Gracík:

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  +1 23.7.2013 16:55
Creating websites is awesome till you see the result in another browser ...
Avatar
kElops
Člen
Avatar
Odpovídá na Jiří Gracík
kElops:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na kElops
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na kElops
Jiří Gracík:

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 23.7.2013 17:36
Nahoru Odpovědět 23.7.2013 17:34
Creating websites is awesome till you see the result in another browser ...
Avatar
kElops
Člen
Avatar
Odpovídá na Jiří Gracík
kElops:

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
Odpovídá na Jiří Gracík
Michal Žůrek (misaz):

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

Nahoru Odpovědět  -1 23.7.2013 23:07
Nesnáším {}, proto se jim vyhýbám.
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kElops:

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
Odpovídá na kElops
Michal Žůrek (misaz):

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  -1 24.7.2013 9:50
Nesnáším {}, proto se jim vyhýbám.
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kElops:

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
Nahoru Odpovědět 24.7.2013 10:38
Nesnáším {}, proto se jim vyhýbám.
Avatar
kElops
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kElops:

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:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na kElops
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
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.