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

HTML a CSS HTML a CSS Problém s šířkou prvku v procentech... American English version English version

Avatar
HONZA271
Člen
Avatar
HONZA271:

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. září 21:00
 
Odpovědět 17. září 20:59
Avatar
Adrian Kokula:

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

Editováno 17. září 21:58
 
Nahoru Odpovědět  +1 17. září 21:56
Avatar
Odpovídá na HONZA271
Petr Čech (czubehead):

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. září 22:29
Why so serious? -Joker
Avatar
HONZA271
Člen
Avatar
HONZA271:

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. září 0:18
 
Nahoru Odpovědět 18. září 0:16
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:

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

 
Nahoru Odpovědět  +2 18. září 2:47
Avatar
HONZA271
Člen
Avatar
HONZA271:

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. září 14:19
Avatar
Odpovídá na HONZA271
Petr Čech (czubehead):

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  ±0 18. září 14:54
Why so serious? -Joker
Avatar
Adrian Kokula:

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
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. září 14:55
Avatar
Adrian Kokula:

Nech sa paci, tu je nahlad

 
Nahoru Odpovědět 18. září 15:09
Avatar
00
Člen
Avatar
Odpovídá na Adrian Kokula
00:

lepší by byl screenshot

 
Nahoru Odpovědět 18. září 18:29
Avatar
00
Člen
Avatar
 
Nahoru Odpovědět 18. září 18:29
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:

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

 
Nahoru Odpovědět 18. září 19:43
Avatar
Odpovídá na 00
Adrian Kokula:

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. září 20:14
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:

Tady máš ukázku

css a html si umíš stáhnout?

 
Nahoru Odpovědět  +2 18. září 20:31
Avatar
NouF
Člen
Avatar
NouF:

Dále ti pomůže validátor

 
Nahoru Odpovědět 18. září 20:38
Avatar
00
Člen
Avatar
Odpovídá na HONZA271
00:

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

 
Nahoru Odpovědět 18. září 22:00
Avatar
HONZA271
Člen
Avatar
HONZA271:

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. září 0:03
 
Nahoru Odpovědět 19. září 0:01
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Petr Čech (czubehead)
Jiří Gracík:

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

Nahoru Odpovědět  +2 19. září 0:17
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 19. září 12:34
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Jiří Gracík
Petr Čech (czubehead):

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

Nahoru Odpovědět 19. září 17:24
Why so serious? -Joker
Avatar
HONZA271
Člen
Avatar
Odpovídá na NouF
HONZA271:

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

 
Nahoru Odpovědět  +1 20. září 11:54
Avatar
NouF
Člen
Avatar
Odpovídá na HONZA271
NouF:

Už máš nejaký výsledek?

 
Nahoru Odpovědět 25. září 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.