Diskuze: Problém s rozložením

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

Aktivity

Mino19

Člen

Mino19:2.11.2018 14:05

Čaute,robím si taký istý web podla úvodného tutoriálu a mám menší problém.

Pri otvorení suboru "rozlozenie.html" mi nebobrazuje pätičku stránky ihneď.Mám ju tam ale musím scrollovať dolu aby som ju videl,proste zle rozloženie.

Zkusil jsem: Pridávam css súbor

body{
background: url('obrazky/pozadie_sede.png') #1c2228;
font: 14px Verdana;
margin: 73px 0px 0px 0px;
min-width: 960px;
}

h2, h3, h4, h5, h6 {
text-align: center;
text-shadow: 3px 3px 7px #666666;
color: #0a294b;
font-family: Arial;
}

h1 {
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}

.centrovany {
text-align: center;
}

h2{
font-size: 1.7em;
}

article {
background: url('obrazky/pozadie.png') #009aca;
padding: 30px 0px;
}

article header {
width: 250px;
float: left;
position: static;
background: none;
}

article section {
        width: 666px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 20px;
}

.cistic {
clear: both;
}

.vlavo{
float: left;
}

header {
height: 73px;
position: fixed;
top: 0px;
background: url('obrazky/pozadie_sede.png') #1c2228;
width: 100%;
}

#logo {
background: url('obrazky/logo.png') no-repeat;
width: 250px;
height: 60px;
float: left;
margin: 7px 0px 0px 20px;
}

#logo h1 {
margin: 14px 0px 0ox 10px;
}

nav ul {
margin: 0px;
list-style-type: none;
}

nav ul li {
float: left;
padding: 0px 25px;
margin: 0 5px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}

nav a {
color: white;
text-decoration: none;
}

nav ul li:hover, .aktivni {
background: #ffbb00;
box-shadow: 0px 0px 5px black;
}

footer {
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
}

footer a {
        color:  #ffbb00;
        text-decoration: none;
}

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

Chci docílit: Ďakujem za odpovede

Odpovědět

2.11.2018 14:05

Honza Bittner

Tvůrce

Honza Bittner:2.11.2018 15:09

Rozložení není špatné, jen není takové, jak bys ho chtěl mít. Pokud chápu správně, tak chceš mít něco, čemu se říká "fixní patička".

Jelikož se ptáš, předpokládám, že jsi začátečník. V tom případě bych ti asi doporučil si tento problém někam zapsat a vyřešit ho později, až budeš mít více znalostí.

Tak či onak, na těchto odkazech můžeš najít několik způsobů, jak to vyřešit https://css-tricks.com/…icky-footer/ a https://philipwalton.github.io/…icky-footer/

Nahoru Odpovědět

2.11.2018 15:09

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Mino19

Člen

Mino19:2.11.2018 15:25

Pýtam sa viac-menej z toho dôvodu,že postupujem podla tutoriálu krok za krokom a keď si stiahnem súbory z tutoriálu tak tam tá pätička je vidieť.Ako pozerám ja myslím,že skôr v mojom prípade mám väčší ten rámček na text ako v prípade tutoriálu,ale už som si kontroloval či mi všetko sedí ako má,nenašiel som chybu tak neviem.
Prikladám sem screen z tutoriálov ako to vyzerá tam.

Nahoru Odpovědět

2.11.2018 15:25

Honza Bittner

Tvůrce

Honza Bittner:2.11.2018 15:28

A jelikož má každá obrazovka jinou šířku a výšku, tak někde budeš scrollovat a někde ne. Monitor, ze kterého je daný screen je zřejmě větší (případně máš více obsahu, a tím pádem) se na něj vejde obsah a vidíš i patičku.

Pokud chceš mít patičku viditelnou vždy (tj. mít jí mimo scroll), řiď se ukázkami viz odkaz výše.

Pokud ti to je jedno, nemusíš se tím zabývat, máš to vše správně.

Nahoru Odpovědět

2.11.2018 15:28

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Mino19

Člen

Mino19:2.11.2018 15:32

Screenshoty som robil obidva na tom istom notebooku,v tom istom prehliadači.

Preto sa mi to nezdá,že som nenašiel v kódoch žiaden rozdiel a vo výsledku áno,ale pokiaľ to nie je chyba tak pokračujem ďalej,popr. pozriem linky ktoré si posielal a uvidím.
Ďakujem

Nahoru Odpovědět

2.11.2018 15:32

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

Zjistit více...

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 5 zpráv z 5.