Autor Zpráva
AlastorM
Profil
#1 · Zasláno: 21. 8. 2015, 12:46:12
Odpovědět Citovat
www.alastorm.4fan.cz

Snažil jsem tento web udělat dobře čitelný i na mobilech a tabletech, rád bych se zeptal na rady co na svém CSS vylepšit a také jak vyřešit jeden problém. Je v tom vše co jsem našel a co jsem se naučil 

/* globální reset */
body, html {
width: 100%;
height: 100%;
font-family: Verdana;
background-color: #aca9a9;
margin: 0;
padding: 0;
}
header {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
div {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
nav {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
section {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
article {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
    padding: 0;
    padding-top: 3%;
    padding-bottom: 3%;
}
h2, h3, h4 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
    line-height: 130%;
}
a, a:visited {
    margin: 0;
    padding: 0;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
img {
    margin: 0;
    padding: 0;
}

/* hlavička */
header {
    width: 100%;
    min-height: 20%;
    height: auto;
    font-family: Comic Sans MS;
    color: #ffffff;
    background-color: #666666;    
}
header h1 {
    padding-left: 5%;
    padding-bottom: 1%;
}
header p {
    padding-left: 8%;
}
header a, header a:visited, header a:hover {
    color: #ffffff;
    text-decoration: none;
}

#obal {
    height: auto;
}

/* menu */
nav {
    width: 25%;
    height: 60%;
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #3B8DBD;
    color: #D8E8E6;
}
nav a, nav a.visited {
    color: #D8E8E6;
}
nav a:hover {
    font-weight: bold;
}
.current-post-parent a, .current-post-parent a:visited, .current_page_item a, .current_page_item a:visited, 
.current-menu-item a, .current-menu-item a:visited{
    font-weight: bold;
}
nav li {
    padding-bottom: 1%;
    padding-top: 1%;
}
nav li ul li {
    margin-left: 10%;
    list-style-type: disc;
}
#hledani-nadpis {
    margin-top: 10%;
    text-align: center;
    font-weight: bold;
}
nav form {
    padding-top: 5%;
    text-align: center;
}
#sidebar-first {
    padding-top: 3%;
}
#sidebar-first a, #sidebar-first a:visited, #sidebar-first a:hover {
    font-weight: normal;
}
.widget-title {
    padding-bottom: 3%;
    padding-top: 3%;
}
.rss-date {
    display: block;
    font-weight: bold;
}
.rssSummary {
    border-bottom: 1px solid #444444;
}
@media screen and (max-width: 800px) {
nav {
    float: none;
    width: 100%;
    }
li {
    display: inline-block;
    list-style-type: none;
    }
nav form {
    display: none;
    }
nav h1, #hledani-nadpis {
    display: none;
    }
#sidebar-first {
    display: none;
    }
nav li ul li {
    display: none;
    }
}
@media screen and (max-width: 500px) {
nav {
    float: none;
    width: 100%;
    }
nav ul {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    }
li {
    display: inline-block;
    list-style-type: none;
    }
nav form {
    display: none;
    }
nav h1, #hledani-nadpis {
    display: none;
    }
#sidebar-first {
    display: none;
    }
nav li ul li {
    display: none;
    }
}
@media screen and (max-width: 350px) {
nav {
    float: none;
    width: 100%;
    }
nav ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    }
li {
    display: inline-block;
    list-style-type: none;
    }
nav form {
    display: none;
    }
nav h1, #hledani-nadpis {
    display: none;
    }
#sidebar-first {
    display: none;
    }
nav li ul li {
    display: none;
    }
}

/* Výpis článků */

section {
    width: 75%;
    height: 100%;
    float: left;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #f0f0f0;
}
.sticky {
    background-color: #D8E8E6;
}
section h1 {
    color: #444444;
}
.detail {
    margin-bottom: 4%;
    font-size: small;
    background-color: #3B8DBD;
    color: #D8E8E6;
}
.detail a {
    color: #D8E8E6;
}
.detail a:hover {
    color: #D8E8E6;
}
.detail a:visited {
    color: #D8E8E6;
}

#strankovani {
    padding-top: 3%;
    padding-bottom: 4%;
    font-weight: bold;
}
section a, section a:visited, article a, article a:visited {
    color: #444444;
}
section a:hover, article a:hover {
    color: red;
}
.attachment-single-post-thumbnail {
    margin-right: 3%;
    float: left;
}
@media screen and (max-width: 800px) {
section {
    float: none;
    width: 100%;
    }
}
@media screen and (max-width: 500px) {
section {
    float: none;
    width: 100%;
    }
.attachment-single-post-thumbnail {
    display: none;
}
}

/* Články */

article {
    width: 75%;
    height: 100%;
    float: left;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #f0f0f0;
}
/* facebook comments */
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {
    width: 100% !important;
}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {
    width: 100% !important;
}
article h1 {
    color: #444444;
}
article a, article a:visited {
    color: #444444;
}
article a:hover {
    color: red;
}
article p {
    margin-bottom: 2%;
}
.wp-caption { 
    border: 1px solid black; 
    text-align: center; 
    background-color: #ffffff; 
    padding-top: 3%;
    padding-bottom: 3%;
    margin-top: 3%; 
    margin-bottom: 3%;
    width: 100%!important;
}
.gallery {
    background-color: #ffffff;
    border: 1px solid black;
    margin-bottom: 3%;
}
dd {
    padding-bottom: 4%;
}
iframe {
    display: block;
    margin: auto;
}
.navigace {
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
}
@media screen and (max-width: 800px) {
article {
    float: none;
    width: 100%;
    }
}
@media screen and (max-width: 500px) {
article {
    float: none;
    width: 100%;
    }
.wp-caption, .gallery {
    display: none;
    }
}

/* Patička */
footer {
    width: 100%;
    background-color: #666666;
    clear: both;
    min-height: 20%;
    height: auto;
    color: #ffffff;
    font-weight: bold;
    font-size: small;
    text-align: center;
}
footer a, footer a:visited {
    color: #ffffff;
}
footer li {
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 2.5%;
}
footer li:after {
    content: ' | ';
}
footer li:last-child:after {
    content: none;
}

Doneslo se mi o této chybě na Firefoxu kdy se web rozdpadne, ale nevím jaké rozlišení monitoru.

http://imgur.com/Nqd9X60
Davex
Profil
#2 · Zasláno: 21. 8. 2015, 19:40:00
Odpovědět Citovat
Starší verze Firefoxu neznají přímo CSS vlastnost box-sizing a musí se prefixovat jako -moz-box-sizing.

Navíc můj starý Firefox nezná HTML elementy typu <header> a <footer> a nemyslí si o nich, že by měly být blokové, takže pokud náhodou nemají nastavený float, tak se berou jako řádkové, což s tvým problémem přímo nesouvisí, ale má to nepříjemné vedlejší efekty.

A ani nechtěj vědět, jak to vypadá v Exploreru 8 (protože neexistuje soubor s JavaScriptem, který by měl zachraňovat neznalost HTML elementů.)

Proč ty bloky neuděláš jako normální člověk přes <div>?
Tomáš123
Profil
#3 · Zasláno: 21. 8. 2015, 19:58:06
Odpovědět Citovat
AlastorM:
Ak ťa zaujímajú názory ostatných na vzhľad, založ si vlákno v kategórii Názor na stránku. Tiež kód by som radšej hodnotil tam.
AlastorM
Profil
#4 · Zasláno: 21. 8. 2015, 22:07:09
Odpovědět Citovat
Davex:
no jelikož je to dělané html 5 tak je mi jasné jak to vypadá v ie 8. Ono je něco špatně na používání html 5 elementů? Je na to ještě brzo nepodporovat staré prohlížeče? tu otázku myslím vážně :-)

Co se týká pokusu o responzivní web, zajimalo by mě zda je tato stránka dobrá nebo je i zde co vytknout? Měl jsem problém najít jak přesně se dělá responzivní web a jaký způsob je nejlepší.

Tomáš123
vzhled neřeším, řeším CSS, protože jednak viz obrázek s problémem, a druhak rád bych veděl co je špatně a co změnit aby vše fungovalo
Davex
Profil
#5 · Zasláno: 21. 8. 2015, 23:17:41
Odpovědět Citovat
AlastorM:
„Ono je něco špatně na používání html 5 elementů? Je na to ještě brzo nepodporovat staré prohlížeče?“
Ono je těžké už určit tu hranici, kdy je prohlížeč zastaralý. Dokud ho bude běžně někdo používat, tak by se měl podporovat alespoň v základní funkčnosti - bezproblémovém zobrazení obsahu. (Je spousta uživatelů, kteří prostě nemohou aktualizovat nebo nemají možnost volby jiného prohlížeče - třeba v internetovém kiosku, Smart TV nebo Windows CE/Mobile.)
Tomáš123
Profil
#6 · Zasláno: 22. 8. 2015, 09:33:23
Odpovědět Citovat
AlastorM:
„Je na to ještě brzo nepodporovat staré prohlížeče?“
Áno. Kvôli výhodám, ktoré plynú z používania HTML5 sa ti neoplatí odstrihnúť ani malé percento používateľov.

„řeším CSS“
Dobre teda:
1. Riadky 3, 8, 37, 43, 47, 50-53, 59-62, 66 a 85-87 sú zbytočné.
2. Riadky 10-34 sa dajú zlúčiť do jednej deklarácie (ktorá ale nie je potrebná, lebo žiadny z tých prvkov nemá ani padding ani margin a box-sizing stačí v dokumente definovať raz - pre body).
3. Väčšina responzívnych deklarácii je zbytočne duplicitných. Predsa, keď je niečo menšie ako 350px, je to menšie aj ako 500px aj 800px.
4. Nie je dobré všetko uvádzať v percentách. Ak by som si tvoju stránku zobrazil napríklad na televízore bola by dosť ťažko čitateľná.
5. Môže existovať ešte plno ďalších zbytočností, ale prešiel som iba kód, ktorý si sem dal.
Bubák
Profil
#7 · Zasláno: 22. 8. 2015, 17:33:41
Odpovědět Citovat
Tomáš123:
„box-sizing stačí v dokumente definovať raz - pre body“
Proč? CSS vlastnost box-sizing se nedědí. Pokud má vlastnost, která se nedědí, platit pro všechny elementy, tak se používá hvězdičkový selektor.
Tomáš123
Profil
#8 · Zasláno: 22. 8. 2015, 18:25:41
Odpovědět Citovat
Bubák:
Aha, pardón, máš pravdu. Na viacerých weboch som v nástrojoch prehliadača videl túto definíciu iba pre body. Ale v skutočnosti je to inak.
Časová prodleva: 11 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0