NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Problém s šířkou prvku v procentech...

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

Aktivity
Avatar
HONZA271
Člen
Avatar
HONZA271:17.9.2016 20:59

Zdravím lidičky. :) Můj první web chci mít responsivní a mám u toho menší problém. Nahoře mám horizontální menu, které má 6 tlačítek vedle sebe. U tlačítek je nastavená šířka 16.66%. Při max-width 480px se změní šířka tlačítka na 33.33%... Vzniká tady nemilý problém s malou mezerou vpravo od tlačítek... Líbí se mi jak to mám jen mě fakt hodně dráždí ta mezera...

Editováno 17.9.2016 21:00
 
Odpovědět
17.9.2016 20:59
Avatar

Člen
Avatar
:17.9.2016 21:56

Mozes mi to poslat? Pozriem sa ti na to, ak ti to nebude vadit

Editováno 17.9.2016 21:58
 
Nahoru Odpovědět
17.9.2016 21:56
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na HONZA271
Petr Čech:17.9.2016 22:29

Dej sem nějaký ten kód (HTML i CSS). A použij prosím tlačítko na vložení kódu (2. zleva)

Nahoru Odpovědět
17.9.2016 22:29
the cake is a lie
Avatar
HONZA271
Člen
Avatar
HONZA271:18.9.2016 0:16

Tak asi nějak takhle. Uvítám jakékoliv připomínky. Jinak si tak říkám, že na začátek a na konec toho menu bych mohl použít nějaký stejně velký obrázek jako ty tlačítka. Tím bych se dostal na šířky 12.5% a při 480px na 25%, aby mi tam zkrátka nezůstával minimálně 1px volného místa vpravo... Nebo jestli víte něco jiného. Nechám se podat...

<!DOCTYPE html>
<html lang='cs'>
<head>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link rel="stylesheet" type="text/css" href="stylopis_1.css">
    <link rel="shortcut icon" type="image/x-icon" href="grafika/ikona.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
 <div class="obalovaci">
  <img src="grafika/background.png" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 2000px;">
  <img src="grafika/horni_okraj.png" style="position: relative; left: 0px; top: 0px; width: 100%; height: auto; float: left;">
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/uvod.png" class="tlacitko" onclick="this.src='grafika/uvod_2.png'">
   </form>
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/text.png" class="tlacitko" onclick="this.src='grafika/text_2.png'">
   </form>
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/hry.png" class="tlacitko" onclick="this.src='grafika/hry_2.png'">
   </form>
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/pixel_art.png" class="tlacitko" onclick="this.src='grafika/pixel_art_2.png'">
   </form>
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/diskuze.png" class="tlacitko" onclick="this.src='grafika/diskuze_2.png'">
   </form>
   <form action="https://www.google.cz/" target="_top">
    <input type="image" src="grafika/kontakt.png" class="tlacitko" onclick="this.src='grafika/kontakt_2.png'">
   </form>
   <div class="text">
   Aaaaaaaaab aaaaaaaaaaaab aaaaaab aaaaaab aaaaaaaaaaaab aaaaaaaaaaaaab aaaaaaaaaaaaaab
   aaaaaaaaaab aaaaaaaaaaaaab aaaaaaaaaab aaaaaaaaab aaaaaaaaaaab aaaaaaaaaaaaaaaaaaab
   aaaaaaaaaaaaaaaaaaaaaaab aaaaab
   aaaaaaab aaab aaaaaaaab aaaaaaab aaaaaaab aaaaaab aaaab aaaab
   aaaaaaaab
   aaaaaab aaaaaaaaaaaab aaaaaaaaaaaab aaaaaaaaaaab
   </div>
 </div>
</body>
</html>
/* CSS Document */

body {
  margin: 0px auto; background-color: #ebffc8;
}

.obalovaci {
  margin: 0px auto; position: relative;
  max-width: 960px; height: auto;
}

iframe {
  border-style: none;
}

.tlacitko {
  position: relative; width: 16.66%; height: auto;
  outline: none; float: left;
}

@media (max-width: 480px) {
  .tlacitko {
    width: 33.33%;
  }
}

.text {
  position: relative; top: 10px; width: 35em; max-width: 90%;
  margin: auto; overflow: auto; word-wrap: break-word;
}
Editováno 18.9.2016 0:18
 
Nahoru Odpovědět
18.9.2016 0:16
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:18.9.2016 2:47

To je prasárna. Přečti si to něco o tom, jak tvořit layout. Bude to lepší.

 
Nahoru Odpovědět
18.9.2016 2:47
Avatar
HONZA271
Člen
Avatar
HONZA271:18.9.2016 14:19

Až tak negativně to vidíš? Dobrá něco si přečtu o layoutu. Kromě toho, že je to nevhodně tvořený layout, tak co ještě vidíte za chyby?

 
Nahoru Odpovědět
18.9.2016 14:19
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na HONZA271
Petr Čech:18.9.2016 14:54

Celé je to jedna velká chyba, tak se weby nedělají.
Nepoužívají se obrázky, ale text. Obtruzivní JS v onclick="" je prostě špatně, to má být v úplně jiném souboru a idálně jQuery

Nahoru Odpovědět
18.9.2016 14:54
the cake is a lie
Avatar

Člen
Avatar
:18.9.2016 14:55

Img a input maju mat aj alt=' ' inak to vyhadzuje zbytocne errory
Dostal si ma. Nikdy som nevidel na menu pouzite form s inputom... Pouzivaj <a href=' '></a>
Ale k veci skus dat k classu .tlacitko text-align: center;

Btw ak ta html a css zaujima trochu viac skus toto:
HTML + CSS by Yablko: https://www.youtube.com/playlist?…

Dufam, ze toto si chcel dosiahnut

 
Nahoru Odpovědět
18.9.2016 14:55
Avatar

Člen
Avatar
:18.9.2016 15:09

Nech sa paci, tu je nahlad

 
Nahoru Odpovědět
18.9.2016 15:09
Avatar
00
Člen
Avatar
Odpovídá na
00:18.9.2016 18:29

lepší by byl screenshot

 
Nahoru Odpovědět
18.9.2016 18:29
Avatar
00
Člen
Avatar
Odpovídá na HONZA271
00:18.9.2016 18:29

Použít flex?

 
Nahoru Odpovědět
18.9.2016 18:29
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:18.9.2016 19:43

Ano máš tam opravdu hodně chyb. Pošlu ti kod, třeba ti to trochu pomůže.

 
Nahoru Odpovědět
18.9.2016 19:43
Avatar

Člen
Avatar
Odpovídá na 00
:18.9.2016 20:14

Nech si to tam hodi a uvidí, ze by mu text da do stredu a nebude mat napravo taku medzeru, ak chce, nech mi napise a pomozem mu s tym :-)

 
Nahoru Odpovědět
18.9.2016 20:14
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:18.9.2016 20:31

Tady máš ukázku

css a html si umíš stáhnout?

 
Nahoru Odpovědět
18.9.2016 20:31
Avatar
NouF
Člen
Avatar
NouF:18.9.2016 20:38

Dále ti pomůže validátor

 
Nahoru Odpovědět
18.9.2016 20:38
Avatar
00
Člen
Avatar
Odpovídá na HONZA271
00:18.9.2016 22:00

Formuláře a JS v nabídce? To bych na stránky nikdy nedával.

 
Nahoru Odpovědět
18.9.2016 22:00
Avatar
HONZA271
Člen
Avatar
HONZA271:19.9.2016 0:01

Díky za rady. :) Trochu jsem si ještě s tou stránkou hrál... Přidal jsem margin k tlačítkům a taky se tam vyskytla nějaká ta lišta. Použil jsem stará testovací tlačítka. Mohl bych je ještě upravit, aby minimálně nebyly zbytečně tak vysoké. Přikládám obrázky jak to vypadá při šířce nad 480px a jak při max-witdh: 480px. :)

Editováno 19.9.2016 0:03
 
Nahoru Odpovědět
19.9.2016 0:01
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petr Čech
Neaktivní uživatel:19.9.2016 0:17

V jiném souboru ano, ideálně jQuery ne.

Nahoru Odpovědět
19.9.2016 0:17
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na HONZA271
Honza Bittner:19.9.2016 12:34

Zkus kouknout třeba na tyto články http://www.itnetwork.cz/…ni-webdesign

Nahoru Odpovědět
19.9.2016 12:34
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Petr Čech:19.9.2016 17:24

A proč ne? Že je to overkill? Stejně je už ve všech prohlížečích zacachovaná...

Nahoru Odpovědět
19.9.2016 17:24
the cake is a lie
Avatar
HONZA271
Člen
Avatar
Odpovídá na NouF
HONZA271:20.9.2016 11:54

Díky. Kódy jsem si stáhl. Určitě si to projdu.

 
Nahoru Odpovědět
20.9.2016 11:54
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:25.9.2016 20:37

Už máš nejaký výsledek?

 
Nahoru Odpovědět
25.9.2016 20:37
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 22 zpráv z 22.