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

[IDVert3X]

[smazáno uživatelem]

[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?