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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

kElops

Člen

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 23.7.2013 16:49

Odpovědět

23.7.2013 16:48

Všechno de když se člověku chce.

Neaktivní uživatel

Tvůrce

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

kElops

Člen

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:23.7.2013 17:08

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

Nahoru Odpovědět

23.7.2013 17:08

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

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 23.7.2013 17:36

Nahoru Odpovědět

23.7.2013 17:34

Neaktivní uživatelský účet

kElops

Člen

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.

Michal Žůrek - misaz

Tvůrce

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

kElops

Člen

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.

Michal Žůrek - misaz

Tvůrce

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

kElops

Člen

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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:24.7.2013 10:38

Nahoru Odpovědět

24.7.2013 10:38

kElops

Člen

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.

kElops

Člen

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.

Neaktivní uživatel

Tvůrce

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.