[WEB] Pořád se mi na tom něco nezdá! (Zápis kódu)

[IDVert3X]

[smazáno uživatelem]

[Reklama]

[x-rated]

sice sis tam přidal h3, ale pořád tam nemáš h1 a h2
ta boční section neni ani tak section, jako spíš aside - nejde o žádnou hlavní obsahovou část, jenom o doplňující informace
pro lepší přehlednost css je fajn psát si každou selekci na samostatnej řádek a jednotlivý vlastnosti v nějakym svym zajetym pořadí... já třeba začínám display, width, height, float, margin, padding...

[CZechBoY]

Tak mas hlavní menu, submenu, menu v patičce. Hele já html5 tagy moc nepoužívám tak nevím
Nicméně parovat na genericky tagy, co nedelaj nic je hodne o hubu a hodnekrat se mi to vymstilo.
Urcite tagum div, span aj. dávat idecka, classy. Název není problém vymyslet, kdyžtak přejmenuješ podle obsahu.

[strangereu]

Tak už jsem si to css asi přizpůsobil k obrazu svému, snad je to lepší :)

Kód: Vybrat vše

html, body {
   background: url("/images/bg.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   font-family: "Open Sans", "sans-serif";
}

/* MARGIN & PADDING */
*, body {
   margin: 0;
   padding: 0;
}

/* RECOL */
a {color: #2ecc71;}
a.visited {color: #27ae60;}

/* MOBILE */
#navigation-bar {width: auto; height: auto; text-align: center; background: #fff;}
#navigation-bar > a {padding: 5px; text-decoration: none; color: #212121; display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
#navigation-bar > a:hover {color: #2ecc71;}
#container {width: auto; overflow: auto; background: #fff; margin-top: 50px;}

.container-name {width: auto; height: 40px; background: #2ecc71; color: #fff; line-height: 40px; text-align: center;}

.content > article {padding-bottom: 20px; overflow: auto;}
.content {width: auto; height: auto; padding: 10px; overflow: auto; display: inline-block;}
.content p:first-of-type {padding-bottom: 5px;}
.content p:last-of-type {text-align: right; float: right; font-size: 12px;}
.content a:last-of-type {text-align: left; float: left; font-size: 12px;}

.content-aside {width: auto; height: auto; background: #e2e2e2; padding: 10px; text-align: center;}
.content-aside > div {padding-bottom: 30px;}
.content-aside > h3 {color: #212121;}

.content-aside .player-name {text-align: center;}
.content-aside .section-name {text-align: center;}
.content-aside .social-panel {display: none;}

.content-aside .user-panel > input[type="text"], input[type="password"] {width: 400px; height: 35px; border-style: none; padding-left: 5px;}
.content-aside .user-panel > input[type="submit"] {width: 405px; height: 40px; border-style: none; background: #2ecc71; color: #fff; text-transform: uppercase;}

.content-aside .server-panel .serverStatus table {width: 100%;}
.content-aside .server-panel table tr > td {border: 1px solid #EAEAEA; background: #fff; height: 30px; text-align: center;}
.content-aside .server-panel .serverStatus table tr td.img {text-align: center;}
.content-aside .server-panel .serverStatus table tr td.value {font-weight: bold;}

#footer {width: auto; height: 55px; background: #fff; margin-top: 20px; text-align: center; line-height: 55px; font-size: 15px;}

/* BANLIST */
.content .banlist {width: 100%;}
.content .banlist tr, td, th {text-align: center;}

/* DESKTOP */
@media screen and (min-width: 1024px) {
   #navigation-bar {height: 55px; text-align: left; border-bottom: 1px solid #e9e9e9; line-height: 45px; padding-left: 20px;}
   #navigation-bar > a {display: inline-block;}
   #container {width: 1200px; margin-right: auto; margin-left: auto; margin-top: 70px;}
   
   .content {width: 840px; float: left; text-align: left;}
   
   .content-aside {float: right; width: 320px; height: 100%; text-align: left;}

   .content-aside .player-name {}
   .content-aside .section-name {text-align: left; padding-bottom: 10px;}
   .content-aside .social-panel {display: block;}
   
   .content-aside .user-panel > input[type="text"], input[type="password"] {width: 95%;}
   .content-aside .user-panel > input[type="submit"] {width: 96.5%; background: #2ecc71;}
   
   #footer {width: 1200px; margin-right: auto; margin-left: auto;}
}


Ukázka: http://ecrafting.stranger.tk/index.php

[CZechBoY]

Co budeš dělat, až budeš chtít přidat nějakej další blok (div) do .content-aside? Budeš muset z >div udělat třídu. Proč to neuděláš hned?

Jinak na mobilní verzi (< 440px) se kurví patička.

[x-rated]

všechny tyhle prefixy sou tam úplně na nic
a od 1025px vejš se to nevejde do okna

[strangereu]

Tak pár věcí jsem upravil, už jenom hlavně to rozlišení pro desktopy a přidal jsem banlist: http://ecrafting.stranger.tk/banlist

Teď tu řeším takovou věc s inputy, width text,pass inputu se nerovná widthu submitu a používat na submit 100.5% width na mobilních verzích je asi docela prasárna... Jinak ještě blbne UTF-8, přitom soubor je uložený v utf-8, v db je taky utf-8 a připojení je taky utf-8.

Kód: Vybrat vše

$db = new PDO("mysql:host=".$host.";dbname=".$dbname.";charset=utf8", $user, $password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));


Výpis dat:

Kód: Vybrat vše

               <?php
                  $PDOselect = $db->prepare("SELECT * FROM bans ORDER BY id DESC");
                  $PDOselect->execute();
           
                  $result = $PDOselect->fetchAll(PDO::FETCH_ASSOC);
                  
                  foreach($result as $data) {
                     if($data['active'] == 1) {
                        $pdo = $db->prepare("SELECT name FROM history WHERE uuid=?");
                        $pdo->execute(array($data['uuid']));
                        $result = $pdo->fetch(PDO::FETCH_ASSOC);
                        
                        echo "
                        <tr>
                           <td>".$result["name"]."</td>
                           <td>".$data['banned_by_name']."</td>
                           <td>".$data['reason']."</td>
                           <td>".date("d.m.Y", $data['time']/1000)."</td>
                           <td>".($data['until'] < '0' ? 'Permanentní' : date("d.m.Y v h:m", $data['until']/1000))."</td>
                        </tr>
                        ";
                     }
                  }
               ?>


[x-rated]

u těch formulářovejch prvků je třeba všude mít display block, width normálně 100%, klidně i box-sizing-border-box, popř. sjednocenej padding apod.

[CZechBoY]

Kde ti to kodování blbne?

[strangereu]

Tady http://ecrafting.stranger.tk/banlist v tom výpisu z db.
- Ukládání probíhá v utf-8 a v db je také nastaveno utf-8_cs, ale na webu se prostě v tom výpisu mění určité znaky na otazníky (v důvod).

[CZechBoY]

Aha, no jak jsem psal ten příspěvek tak to jelo v pohodě a diakritika tam byla.

Kudy tam lezou ty data? Nejede to tam z nějakýho zdroje co používá windows/cp-1250?