Neposlušný sloupec na webu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Neposlušný sloupec na webu – CSS – Fórum – Programujte.comNeposlušný sloupec na webu – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
thebighead
~ Anonymní uživatel
2 příspěvky
3. 6. 2015   #1
-
0
-

Zdravím všechny zkušené i nezkušené čtenáře a pomocníky. Mám takový větší problém. Ono pravděpodobně nebude těžké to opravit, ale nikdy jsem se s tím nesetkal a lámu si s tím hlavu už několik dní. Nakódoval jsem si hlavní stranu mé nové stránky. Problém je v tom, že mám články dělané do dvou sloupců. Můžete mi poradit, jak to opravit? Pokud zadám větší text u nadpisu, celý článek pod tím se mi posune o jeden celý blok dolu. Podívejte se sami, jak to vypadá na stránce:

http://mince.anmiro.eu/index.html

Také by jsem se chtěl zeptat, zda nebude problém stránku převést na wordpress? Nikdy jsem to nedělal, už jsem zhlédl pár tutoriálů a tak, ale nevím, zda to půjde s tímto designem. Děkuji moc za normální odpovědi.

P.S. Mám styly v externím souboru, takže pokud bude potřeba, přemístím je do HTML souboru.

Nahlásit jako SPAM
IP: 78.111.117.–
Reklama
Reklama
peter
~ Anonymní uživatel
2528 příspěvků
4. 6. 2015   #2
-
0
-

Sloupce - To je normalni chovani. Pouzil jsi flota a on presne tohle dela. Pokud to chces zarovnavat do sloupcu, musis tam ty sloupce vytvorit a clanky davat do nich. Ted to mas tak, ze, co clanek, to novy sloupec, ktery je bud zarovnany vravo nebo vlevo. Nebo muzes pouzit html5/css3, to tusim sloupcovani nejake ma, zati jsem to nepouzil.

Css externi - tak urcite :) i javascript. Google treba hodnoti kvalitu stranky podle toho, zda je pomer text / html blizky 1 (pokud ne, tak by mel, a jak koukam, mel by zacit i u sebe :) ). Pak hodnoti, kolik souboru se kvuli strance musi otvirat. Takze idealni je jeden css a jeden js soubor, minimum obrazku na strance nebo jako pozadi, minimum videji a tak.

Wordpress - Muze to byt problem. Zalezi na tom, jake mas s redakcnimi systemy zkusenosti. Funguje to tak, ze php vykresluje oblasti na strance pomoci sablony. Muzes udelat vlastni sablonu, rict, jaka cast se na ktere misto bude vykreslovat. Ale to, co generuje php ma vlastni strukturu html a vlastni className, id. takze budes muset svoje css prepsat. navic budes muset mozna hledat plugin, ktery ti to zobrazi tak, jak chces nebo si ten program napsat sam. idealni je najit si template s sablonami, ktery se nejvic podoba tvemu vysnenemu vzhledu a bude vyzadovat malo zasahu do css, mozna html.

Ta sablona muze vypadat treba takto ( tu sem si delal v js, wp bude mit php) Celou tu slozitost delam ted kvuli tomu, ze chci docilit vyrazny podil textu vuci nadbytecnemu html, ktery dela vzhled, menu a jine nesmysly. Je to dlouhodoba zalezitost, co to mam v hlave, zatim jsem to ale neuvedl do praxe :) Mezitim jina reseni objevila kvuli mobilum, schovane menu pod tlacitkem tri carek pod sebou, a tak.

// js kod, ktery nahradi "{neco}" za hodnoty v js poli "root.data['neco']"
	str = root.data.layout;
	for(i in root.data)
		{
		str = str.replace('{'+i+'}',root.data[i]);
		}
// tam, ja je {content}, tam vkladam obsah stranky

var TPL  = {
'layout': "\
<!DOCTYPE html><!-- web Peter Mlich -->\n\
<html id=\"html\">\n\
<head>\n\
  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1250\"\/>\n\
  <title>mracek: {title}<\/title>\n\
  <link rel=\"shortcut icon\" href=\"favicon.ico\"\/>\n\
  <link rel=\"stylesheet\" href=\".\/site\/css\/2014\/style_2014.css\" type=\"text\/css\" id=\"site_css\"\/>\n\
<\/head>\n\
<body id=\"body\">\n\
<div class=\"site\">\n\
<div class=\"site1\">\n\
\n\
\n\
  <div class=\"site_header\">\n\
    {wz}\n\
    {nav_path}\n\
    <div class=\"logo\">\n\
      <span><a href=\".\/index.htm\" accesskey=\"0\">Peťova stránka<\/a><\/span>\n\
      <hr\/>\n\
    <\/div><!--\/\/logo-->\n\
\n\
<div class=\"nav_lvl1\">\n\
  <ul>\n\
    <li><a href=\".\/index.htm\">Uvod<\/a><\/li>\n\
    <li><a href=\".\/o_mne\/index.htm\" >O mně<\/a><\/li>\n\
    <li><a href=\".\/zabava\/index.htm\">Zábava<\/a><\/li>\n\
    <li><a href=\".\/tech\/index.htm\">Technika<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Ke stažení<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Kontakt<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Odkazy<\/a><\/li>\n\
    <!--li><a href=\"#\" title=\"\">Kniha hostů<\/a><\/li-->\n\
    <!--li><a href=\".\/o_strance.htm\">O stránce<\/a><\/li-->\n\
    <!--li><a href=\"#\" title=\"\">Mapa stránek<\/a><\/li-->\n\
    <li><a href=\".\/x\/index.htm\">x<\/a><\/li>\n\
  <\/ul>\n\
<\/div>\n\
  <\/div><!--\/\/site_header-->\n\
\n\
\n\
\n\
<!-- ========================= -->\n\
\n\
\n\
\n\
  <div class=\"site_content\">\n\
    <div class=\"content\">\n\
	{content}\n\
    <\/div><!--\/\/content-->\n\
  <\/div><!--\/\/site_content-->\n\
\n\
\n\
\n\
<!-- ========================= -->\n\
\n\
\n\
\n\
  <div class=\"site_footer_js\">\n\
  <div class=\"site_footer\">\n\
    <hr\/>\n\
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n\
      <tr>\n\
        <td>2010 Peter Mlích, peter.mlich&#64;volny.cz<\/td>\n\
        <td align=\"right\">\n\
	  <a href=\".\/style.htm\" target=\"_top\">Zm?>nit vzhled<\/a>\n\
          <!--a href=\"http:\/\/www.toplist.cz\/\" target=\"_top\"><img src=\"http:\/\/toplist.cz\/dot.asp?id=118401\" border=\"0\" alt=\"TOPlist\" width=\"1\" height=\"1\"\/><\/a-->\n\
	<\/td>\n\
      <\/tr>\n\
    <\/table>\n\
  <\/div><!--\/\/site_footer-->\n\
  <\/div>\n\
\n\
\n\
\n\
<\/div><!--\/\/site1-->\n\
<\/div><!--\/\/site-->\n\
\n\
<\/body>\n\
<\/html>\n\
"
};

podil text / html na strance
seznam.cz ma 4143/69937 = 0.06 katastrofa :)
google.cz 240/140.000 = 0.0017 hruza :)
 wordpress.org 1.900/13.000 = 0.14
moje testovaci index 1185/1632 = 0.7 (slo by to i mnohem mene, ale pouzitim par tagu navic se vyhnu potizim)
moje testovaci index po vygenerovani js 1185/3381 = 0.35
moje stavajici online stranka 3922/7832 = 0.5 (po smazani komentare se starymi novinkami)

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:b04d:42...–
Vladusko
~ Anonymní uživatel
19 příspěvků
4. 6. 2015   #3
-
0
-

To: Peter
Prosim ta, ako zistujes ten pomer text/html ?

Zasláno z mobilního telefonu.

Nahlásit jako SPAM
IP: 88.212.41.–
peter
~ Anonymní uživatel
2528 příspěvků
4. 6. 2015   #4
-
0
-

Vladusko

- html -
Das si treba seznam.cz
Najdes si v menu zobrazit zdrojovy kod.
Zkopirujes do schranky (ctrl+c), otevres soubor, vlozis, ulozis.

- text -
Das si treba seznam.cz
Najdes v menu vybrat vse (ctrl+a)
Zkopirujes do schranky (ctrl+c), otevres soubor, vlozis, ulozis.

Nechas si zobrazit velikost souboru text a souboru html. (Mozna obe hodnoty dokaze zobrazit prohlizec nebo mozna pres plugin, ale takhle to taky funguje; Pozor, FF treba doplnuje tagy, tak ta velikost muze byt trosku jina nez realny html. Orientacne to vsak nevadi)

Jako, to je na tobe, jak si to udelas. Uzivatel vidi jen ten text a obrazky. Co je v pozadi ho nezajima (a mozna ani vetsinu vyhledavacu). Mne to zajima. Chci usetrit uzivateli cas, usetrit linku.

Treba, pro zajimavost, toto tema bez me reakce a vsech pod ni
http://programujte.com/…pec-na-webu/
text / html = 8801 / 69418 = 0.127

Jo, a u toho google bacha. On tam mas pribaleny do stranky JS pro jquery. To je kolem 130k. Minifikovane. Pokud neco dal stahuje, tak jen vysledek vyhledavani. Takze z hlediska rychlosti ma stranku optimalizovanou. samozrejme, kdyby to dal externe, tak je tam jeden pozadavek na soubor na vic, coz muze chvili trvat. Ale zas vy se to pekne kesovalo. Ja treba davam prednost tomu externimu i za cenu zpomaleni pri prvnim nacteni.
Kdyz se nad tim zamyslis jeste vic, tak se cela stranka opakovane kesuje. takze to ma google z hlediska rychlosti a uspory v poradku. Ikdyz se mi to nelibi :)

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:b04d:42...–
Vladusko
~ Anonymní uživatel
19 příspěvků
4. 6. 2015   #5
-
0
-

Peter
Dakujem za obsiahle vysvetlenie a tvoj cas.

Zasláno z mobilního telefonu.

Nahlásit jako SPAM
IP: 88.212.41.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý