| Autor | Zpráva | ||
|---|---|---|---|
| danhill Profil |
#1 · Zasláno: 12. 10. 2016, 01:59:27
Ahoj,
prosím vás zkušenější o kontrolu mé css šablony pro weby. Zkouším si vytvořit takový jako univerzální vzor pro své weby, který mi vyhovuje a stejně je tak i mám,ale chci to sjednotit a udělat si v css pořádek, protože už aby se v tom čert vyznal. Ale protože to chci mít co nejjednodušší, na co nejdéle, a hlavně plně funkční, raději se jdu poradit. Jestli tam nemám nějaké zbytečnosti,nebo naopak mi tam něco nechybí ... Moc děkuji za rady a názory. * { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
border: 1px solid red;
margin: 0 auto;
width: 99%;
min-width:900px;
}
#main {
border: 1px solid green;
margin-bottom: 5px;
overflow: auto;
width: 100%;
min-width:900px;
}
#header {
border: 1px solid black;
width: 100%;
height: 50px;
}
#navigation {
border: 1px solid green;
color: #333;
padding: 2px;
}
#leftcolumn {
border: 1px solid red;
display: inline;
width: 10%;
float: left;
text-align: center;
}
#page {
border: 1px solid red;
float: left;
color: #333;
margin:0px 0px 0px 1%;
width: 78%;
display: inline;
text-align: center;
}
#rightcolumn {
border: 1px solid red;
display: inline;
width: 10%;
float: right;
text-align: center;
position: relative;
}
#footer {
border: 1px solid red;
width: 100%;
clear: both;
}
.clear {
clear: both;
background: none;
}EXAMPLE USE <body>
<div id="wrapper">
<div id="header">
LOGO
</div>
<div id="navigation">
Navigation
</div>
<div id="main">
<div id="leftcolumn">
Levé menu
</div>
<div id="page">
Obsah hlavního boku
</div>
<div id="rightcolumn">
Pravé menu
</div>
<div class="clear"> </div>
</div>
<div id="footer">
Patička
</div>
</div>
</body> |
||
| Tomášeek Profil * |
#2 · Zasláno: 12. 10. 2016, 11:06:41 · Upravil/a: Moderátor (editace znemožněna) 12. 10. 2016, 13:13:15
Těch pár řádků mi moc užitečných nepřijde, na to je jich příliš málo.
Každopádně, nesmysly, které tam vidím: - Šíře 99%, co tomu řekne FullHD a větší rozlišení? - Deklarace písma v px - Zbytečná deklarace width: 100% u jednotlivých blokových prvků - Zbytečný display: inline u floatovaných prvků - Nesmyslná šíře sidebarů 10% pro případ šíře webu u minimální hranice - co se ti do 90px šíře vejde? Navíc bez paddingu, reálně s ním jsi na 50px pro obsah. Hm, to je slovo na řádek. - Nikde nedefinuješ barvu sidebarů, footeru. V navigaci ti ta barva #333 nejspíše neprojde, budou tam odkazy a budou modré. Výsledek: pokud ti to takhle vyhovuje a pomůže, klidně to používej. Jako výchozí stav pro kohokliv jiného, třeba v rámci týmu, to je nepoužitelné. Už jen množství změn pro 2-col layout (odstranění z HTML, vyhledání a úprava v CSS) mi zabere víc času než napsat od nuly HTML a příslušné 2-col CSS. Pro malý web tvořený komplet programátorem, kde designová odlišnost znamená změna barvy daného elementu, to bude ale asi dobré (tam bych pak volil tu šablonu ještě širší, jako kopii nějakého již existujícího webu). Ještě ses ptal na zbytečnosti v tom kódu: - Téměř jistě text-align: center - Jednotky u nul - margin: 0 auto jde v tomto případě úsporněji jako margin: auto. - clear: both u footeru - background: none u .clearu Celkově ty styly, uvádění zbytečných viz výše na mě působí dojmem, že vlastně ani nevíš, co kde a proč uvádět, tak toho uvedeš raději více než méně. |
||
| danhill Profil |
#3 · Zasláno: 12. 10. 2016, 18:06:11
Moc děkuji,že jsi na to koukl.
Já vím,že to není žádný zázrak,ale kdyby jsi věděl na jakých paskvilech mi běží stávající weby vůbec by jsi se nedivil,že s tím chci něco dělat,ikdyž jak správně píšeš o tom houby vím,ale snažím se a proto jsem i tady :) - Zvláštní, když jsem tu šablonu tvořil a dal jsem 100% tak mi to nechodilo správně,ale možná,když už je "hotová" tak už se mají elementy o co opřít a funguje to, takže 99% odstraněno ... Dodatku o full HD nerozumím, to je přeci jedno jestli je 100% 1280px nebo 4096px , pořád je to 100% - výcházel jsem z této úvahy, že to je lepší řešit procenty než pevnou šířkou. -px jsem odebral a předělal na vw - tohle se mi líbí, písmo se mění podle velikosti obrazovky - zajímavá funkce ... - width: 100% odebráno - display: inline odebráno - přikládám funkční zkušební link TEST - nevím,ale mě příjde,že těch 10% je tak akorát na postranní menu ... samozřejmě tam nemohou být žádné dlouhě texty,ale na menu to stačí,ne? - tady barvy a styly neřeším zatím - tohle je skutečně jen nástřel rámců webu , bordery pak samozřejmě taky zmizí, jsou tam jen pro to abych to viděl jak jednotlivé id vypadají a ta #333 mi tam zůstala omylem ... - 2-col layout - nevím úplně co to je nebo co tím myslíš - jako dvousloupcová stránka? Nebo se to týká css funkce pro různé prohlížeče? - ty další věci jsem taky odebral a opět to kupodivu chodí i bez toho :) ... Děkuji - jen text-align: center to tam mám záměrně,aby se mi texty právě na střed rovnaly, to si myslím,že je záměr celé šablony. No a tady druhá verze, snad o kousíček lepší,ikdyž vím,že to není žádný zázrak,ale něco potřebuji, něco co pochopím, sám napíšu a bude to jednoduché a funkční ... * { padding: 0; margin: 0; }
body {
font-family: 'Play';
font-size: 1vw;
}
#wrapper {
border: 1px solid red;
margin: auto;
min-width:600px;
}
#main {
border: 1px solid green;
margin-bottom: 5px;
overflow: auto;
min-width:600px;
}
#header {
border: 1px solid black;
height: 67px;
}
#topline {
background: url('../img/topline.png') repeat;
height: 10px;
min-width: 600px;
}
#logo {
border: 1px solid cyan;
float: left;
height: 45px;
line-height: 67px; /* same as header height */
width:276px;
}
#switch {
border: 1px solid cyan;
height: 45px;
line-height: 45px;
width:300px;
margin-left:auto;
margin-right:0;
text-align: center;
}
#navigation {
border: 1px solid green;
padding: 2px;
font-size: 0.8vw;
}
#leftcolumn {
border: 1px solid red;
width: 10%;
white-space: nowrap;
float: left;
text-align: center;
}
#page {
border: 1px solid red;
float: left;
margin:0 0 0 1%;
width: 78%;
text-align: center;
}
#rightcolumn {
border: 1px solid red;
width: 10%;
white-space: nowrap;
float: right;
text-align: center;
position: relative;
}
#footer {
border: 1px solid red;
font-size: 0.8vw;
}
.clear {
clear: both;
}-mám několik ale zádrhelů v tuto chvíli. 1. bylo by pěkné,kdyby se mi stejně jako písmo měnilo i logo v id logo - ale toho se mi nedaří dosáhnout. 2. text v id switch a obrázek v id logo se mi nedaří vycentrovat na horizontální střed a to řešení s line-height mi asi nepříjde úplně správné ... 3. nerozumím jak to, že když mám šířku #leftcolumn 10% a #rightcolumn 10% nemůžu mít #page 80% , což by mi dohromady dávalo smysl jako 100% stránky, ale musím tam mít 78% a ještě margin aby se to aspoň trochu centrovalo a hlavně aby mi #rightcolumn nepadal až pod #page |
||
| Tomášeek Profil * |
#4 · Zasláno: 13. 10. 2016, 06:47:48
danhill:
„- Zvláštní, když jsem tu šablonu tvořil a dal jsem 100% tak mi to nechodilo správně“ Toje divné, ledaže bys tam měl nějaký třeba border, padding nebo tak, tak by se to do okna nevlezlo. „Dodatku o full HD nerozumím, to je přeci jedno jestli je 100% 1280px nebo 4096px , pořád je to 100%“ Ten dodatek směřoval na čtitelnost - délku řádků. Nikoho nezajímají řádky dlouhé přes celý monitor (nebo tedy 80% contentu, což je u fullHD i tak dost). „nevím,ale mě příjde,že těch 10% je tak akorát na postranní menu“ Minimální šířka 900px, uvažujme tu. Na menu bez paddingů zbývá 90px. Přidám padding 15px ze stran. Na obsah zbývá 70px. To je na menu proklatě málo, i dvouslovné položky se začnou zalamovat a bude to nehezké. „- 2-col layout - nevím úplně co to je nebo co tím myslíš - jako dvousloupcová stránka?“ Ano. „text-align: center to tam mám záměrně,aby se mi texty právě na střed rovnaly, to si myslím,že je záměr celé šablony.“ V krátkých textech (sidebar a jeho 70px prlochy) to bude nehezké, v contentu ještě více nehezké. centrování má smysl jen v málo případech, celý obsah mezi ně nepatří. „No a tady druhá verze, snad o kousíček lepší“ Hned v první deklaraci máš chyby. Co když nemám písmo Play? Co když můj prohlížeč nepodporuje jednotku vw? Proč má pravý sloupec relativní pozici? „1. bylo by pěkné,kdyby se mi stejně jako písmo měnilo i logo v id logo - ale toho se mi nedaří dosáhnout.“ Myslíš velikost bitmapového obrázku? CSS není uzpůsobené na kvalitní resize obrázků. „. nerozumím jak to, že když mám šířku #leftcolumn 10% a #rightcolumn 10% nemůžu mít #page 80%“ Protože border (a případně padding). |
||
| danhill Profil |
#5 · Zasláno: 13. 10. 2016, 09:29:41
Děkuji za vysvětlení ...
Tak jsem to zase trochu uptavil : TEST -já ale mám tedy 3-col layout -těch 600px tam mám spíše jen kvůli mobilům,hlavně iPhony, ty mívají velmi malé rozlišení.Jinak bych tam dal klidně i 1280px, což je dneska skoro minimum standardního monitoru bych řekl.Ale to se dá změnit kdykoli. -text-align: center - jasně, já to pak odeberu až budou v šabloně další divy - to jen teď pro zobrazení šablony samotné -no jo no s písmem, to je pravda, ale tak snad jsem to ošetřil. Přidal jsem Arial a ještě jsem nahrál Play font i přímo do složky s css - tak to by snad mělo stačit. - mnoo a s tím vw, to jako nevím jak vyřešit ... taková funkce pro starší prohlížeče není ... Snad nejistější by bylo asi em,ale to by se mi zase nezmenšovalo... - s tím obrázkem jsem to vyřešil, prozatimě, ono pak tam bude stejně css logo,takže to bude chodit dobře ... - šířku menu jsem upravil, ale to je taky individuální. Uvidím až podle skutečných dat v divech. na většině webů co mám stejně vesměs žádné texty nezobrazuji,jen tabulky,grafy a případně obrázky a tam je zase lepší mít hlavní prostor co největší. kdybych chtěl blogovat, nebo zveřejňovat texty, šel bych asi cestou pevné šířky stránky a horního menu,ale jak říkám,takové weby já nemám ... Na patičku jsem použil funkci "flex" a to je moc pěkné ... Myslím,že by to se to dalo aplikovat i na samotný id="main" a rozdělilo by to krásně na celou stránku.Ale to nedaří se mi flex aplikovat s různými šířkami sloupců. Přikládám aktuální 3. verzi: @import url(http://fonts.googleapis.com/css?family=Play&subset=latin,latin-ext);
* { padding: 0; margin: 0; }
body {
font-family: Play, Arial;
font-size: 1vw;
src: url('Play-Regular.ttf');
}
#wrapper {
border: 1px solid red;
margin: auto;
min-width:600px;
}
#main {
border: 1px solid green;
margin-bottom: 5px;
overflow: auto;
min-width:600px;
}
#header {
border: 1px solid black;
height: 3em;
}
#topline {
background: url('../img/topline.png') repeat;
height: 13%;
min-width: 600px;
}
#logo {
border: 1px solid cyan;
float: left;
height: 74%;
line-height: 3em; /* same as header height */
width:15%;
text-align: left;
}
.imgresize {
max-width:100%;
max-height:100%;
margin:auto;
}
#switch {
border: 1px solid cyan;
height: 74%;
line-height: 2em;
width:17%;
margin-left:auto;
margin-right:0;
text-align: center;
}
#navigation {
border: 1px solid green;
padding: 0.1em;
font-size: 0.8vw;
}
#leftcolumn {
border: 1px solid red;
width: 15%;
white-space: nowrap;
float: left;
text-align: center;
}
#page {
border: 1px solid red;
float: left;
width: 69%;
text-align: center;
}
#rightcolumn {
border: 1px solid red;
width: 15%;
white-space: nowrap;
float: left;
text-align: center;
}
#footer {
border: 1px solid red;
font-size: 0.8vw;
}
.container {
display: flex;
}
.container > .footersection {
border: 1px solid black;
flex: 1; /*automatický růst*/
}
.clear {
clear: both;
} |
||
|
Časová prodleva: 3 dny
|
|||
| danhill Profil |
Asi už otravuju moc, že nikdo nekomunikuje ... Ale stále s tím bojuji.
Po dlouhém zvážení jsem usoudil,že 3-col šablonu úplně nevyužiji a stačí mi sloupce 2. Šablonu jsem za poupravil a zjednodušil a zrušil vw ve všech místech a přešel na em. Ale stejně to pořád není ono ... potřebuji pomoct od Vás aby to fakt bylo jednou tak jak to má být a ne abych narazil na nějaké problémy hned co to zveřejním. Fonty jsem předělal,teď už to snad bude funkční. Doplnil jsem funkci kdy při rozlišení menším než 1000px se z levého menu stane horní ... to docela chodí,ale stejně tam mám chybu,protože id #leftcolumn se mi nerozevře na class .menublock a to je špatně, protože tak nemohu .menublocky vycentrovat na střed,ale nevím proč to dělá,když je menu vlevo tak to chodí ... :( ... TEST |
||
|
Časová prodleva: 8 let
|
|||
0