| Autor | Zpráva | ||
|---|---|---|---|
| kulich_ Profil * |
Ahoj, chci se naučit web dělat trošku líp a tak sem si našel ukol, který bych rád zvládnul, ale budu potřebovat pomoc a hlavně diskutovat o nejlepších možných cestách, protože si myslím, že se mi bude dost často stávat, že se budu drbat za levym uchem pravou rukou :) Takže kdyby byl někdo tak hodný a trpělivý..
Takže bych se chtěl zeptat, 1) zda můžu tento web: k nahlédnutí tady Moderátor Petr ZZZ: Doplňuji odkaz na živou ukázku. Udělat tímto způsobem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<STYLE type="text/css">
a:link { color: #B00000; text-decoration: none; }
a:visited { color: #B00000; text-decoration: none }
a:hover { color: #4E4E4E; text-decoration: none }
body { background-image: URL('picture/04.png'); background-color: white; }
#lem { position: relative; width: 1000px; height: 800px; margin: auto; background-color: yellow
}
#header { position: absolute; width: 779px; height: 100px; top: 10px; left: 221px;
background-color: white; margin-top:0px; margin-right:0px; margin-bottom:0px;margin-left:5px;
}
#topper { position: absolute; width: 777px; height: 33px; top: 116px; left: 222px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#main_s { position: absolute; width: 557px; height: 35px; top: 169px; left: 222px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#main_w { position: absolute; width: 557px; height: 486px; top: 205px; left: 222px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_s_1 { position: absolute; width: 198px; height: 35px; top: 11px; left: 11px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_w_1 { position: absolute; width: 198px; height: 81px; top: 47px; left: 11px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_s_2 { position: absolute; width: 198px; height: 35px; top: 129px; left: 11px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_w_2 { position: absolute; width: 198px; height: 89px; top: 165px; left: 11px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_s_3 { position: absolute; width: 198px; height: 35px; top: 255px; left: 11px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#left_sidebar_w_3 { position: absolute; width: 198px; height: 400px; top: 291px; left: 11px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
}
#right_sidebar_s { position: absolute; width: 198px; height: 35px; top: 169px; left: 793px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#right_sidebar_w { position: absolute; width: 198px; height: 486px; top: 205px; left: 793px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#footer { position: absolute; width: 998px; height: 57px; top: 692px; left: 1px;
background-color: #F1F3F5;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
padding: 0px 10px 0px 10px;
}
#lower_out { position: absolute; width: 1000px; height: 59px; top: 691px; left: 0px;
}
</style>
<title></title>
</head>
<body>
<div id="lem">
<div id="header">
<br>
<font color="#AC3232"><font size=50px>Název firmy</font></font>
</div>
<div id="topper">
s
</div>
<div id="main_s">
s
</div>
<div id="main_w">
s
</div>
<div id="left_sidebar_s_1">
s
</div>
<div id="left_sidebar_w_1">
s
</div>
<div id="left_sidebar_s_2">
s
</div>
<div id="left_sidebar_w_2">
s
</div>
<div id="left_sidebar_s_3">
s
</div>
<div id="left_sidebar_w_3">
sloupec normalne postaveny, bohuzel bez paddigu :(
</div>
<div id="right_sidebar_s">
s
</div>
<div id="right_sidebar_w">
s
</div>
<div id="footer">
s
</div>
</div>
</body>
</html>2) Lze nějak provést padding tak, aby se neposunuly hranice divu, ve kterém padding provádím? Pokud si všimnete v kodu, pokud bych padding smazal (jako jsem provedl v divu left_sidebar_w_3), stránky by vypadali jak chci, ale text v divech nebude odsazený od rámu divu.. 3) Jsou absolutní pozice provedení tímto způsobem nepraktické, existuje lepší řešení? Díky za odpověď! P.S. O paddingu sem si přečetl co jsem mohl, jak na jakpsatweb, tak na forku, ale prostě nevim, nevim, nevim! :) |
||
| panther Profil |
#2 · Zasláno: 10. 12. 2010, 21:19:43
kulich:
1) místo kilometru kódu sem dej odkaz. Kód si nikam kopírovat nebudu, a domýšlet, jak by to mohlo vypadat, taky ne. Obecně bych ti tento postup nedoporučoval, pozicovaný layout není (minimálně pro začátečníka) vhodný. 2) jak se počítá padding do rozměrů, záleží na módu prohlížeče, obrázkové vyjádření je zde. 3) ano, vlastně se to kryje s odpovědí na 1). Koukni se na floatované layouty. |
||
| kulich_ Profil * |
#3 · Zasláno: 10. 12. 2010, 21:53:56
panther:
Takže říkáš, že je snažší používat layouty? :) |
||
| panther Profil |
#4 · Zasláno: 10. 12. 2010, 21:54:55
kulich:
všechno to jsou layouty, jen ti doporučuji ten floatovaný namísto pozicovaného. |
||
| kulich_ Profil * |
#5 · Zasláno: 10. 12. 2010, 21:59:40
Kouknu na to, díky moc.. Nějak se s tim poperu a zítra dám věděat, jak to dopadlo..
|
||
| kulich_ Profil * |
#6 · Zasláno: 10. 12. 2010, 22:26:55
Ještě otázečka :))
Lze tady nahradit padding šířkou content divů? Abych se přiznal, z toho cleaneru moc moudrý nejsem, není to někde více rozepsané? |
||
| panther Profil |
#7 · Zasláno: 10. 12. 2010, 22:31:41
kulich:
„z toho cleaneru moc moudrý nejsem, není to někde více rozepsané?“ hezký článek napsal Pixy, jestli je pochopitelný i pro začátečníka, neposoudím. Mě přijde dobrý, odkazuji na něj rád. Ostatně, nejlépe na to přijdeš sám, když si budeš s odkázanou stránkou hrát - vyzkoušej si, jak se to chová bez cleaneru, projdi si příklady zde uváděné. „Lze tady nahradit padding šířkou content divů?“ vzhledem k tomu, že odsazení (padding) je něco jiného než šířka (width), tak ne. Moc jsem tu otázku nepochopil, ale z principu jedna vlastnost nemůže nahradit druhou, která dělá něco úplně jiného. |
||
| kulich_ Profil * |
#8 · Zasláno: 11. 12. 2010, 14:34:22
Lze dělat floatováním stránku, která se složená z více než 3 divů? Mám tím na mysli například web, který se snažím udělat já..
Mám tam uděláno 16 divů a nějak se nedokážu poprat ani se 4ma tak, aby dělali co bych chtěl.. Mohl bych poprosit o příklad? Prostě nejsem schopný dostat 3 divy vedle sebe tak, aby pod nima mohly být další.. |
||
| panther Profil |
#9 · Zasláno: 11. 12. 2010, 15:07:40 · Upravil/a: panther
kulich:
na počtu jednotlivých prvků na stránce nezáleží. To, oč se pokoušíš, je klasický dvoudloupcový layout, stejný, jako jsem tě odkázal na wellstyled v [#2]. Jen jeho pravý sloupec pak je rozdělen na další dva bloky. Jestli tě to zajímá konkrétněji, tak <div>ů, když už jsi je začal počítat, budeš potřebovat 5, když budeme trochu pohodlní a budeš chtít mít web vycentrovaný (obal kvůli centrování, 3 sloupce a patička).
|
||
| kulich_ Profil * |
#10 · Zasláno: 11. 12. 2010, 16:39:31
panther:
Takže tohle je špatná cesta? Když jsme u toho, lze nastavit šířku mid_boxu tak, aby se dotahovala vždy např. 10 px od right_boxu? Mám tím namysli, že nebudu zadávat pevnou šířku, ale konec okraje 10px od levého okraje right_boxu, je to dobré, nebo je lepší zadávat pevnou šíři? |
||
| panther Profil |
#11 · Zasláno: 11. 12. 2010, 16:46:57
kulich:
„Takže tohle je špatná cesta?“ řekl bych začátečnická cesta. Ve skutečnosti, jestli jsem to dobře pochopil, to šedivé budou nadpisy, tedy <hn>.
Levý sloupec: pod prvním nadpisem bude menu, tedy <menu> pod druhým nadpisem bude formulář, tedy <form> pod třetím nadpisem bude adresa, tedy <address> pod logem (což bude odkaz) bude taktéž <address>, bude-li tam adresa. Jinak třeba <p>, bude-li tam text. vpravo aktuality bude seznam aktualit, tedy <ul> a každá aktualita v <li> pod „Doporučujeme“ bude odkaz, tedy <a>, pravděpodobně s obrázkem. Ještě ke tvému dílu v [#10]: - vyházej veškeré výšky, které jsi zadal, ať se web může natahovat dle délky textu. „lze nastavit šířku mid_boxu tak, aby se dotahovala vždy např. 10 px od right_boxu?“ ano, lze. Těch 400px, které jsi zadal, je evidentně málo. „nebo je lepší zadávat pevnou šíři?“ vzhledem k tomu, že bude pevná, klidně ji nastav. Nic se měnit nebude. |
||
| kulich_ Profil * |
#12 · Zasláno: 11. 12. 2010, 17:36:01
panther:
Myslíš, že bych tě mohl poprosit o hrubý náčrt toho webu od Tebe? Nebo nějaký jiný,jednoduchý kde je tohle použito.. Potřeboval bych nějaký příklad.. Docela se v tom začínám ztrácet :) Jinak jaký mají význam menu a adress, když je to v podstatě to samý co ul? |
||
| pavuk Profil |
#13 · Zasláno: 11. 12. 2010, 17:42:05
Víc nebudeš potřebovat, myslím že to je plně postačující na všechno co máš na mysli. Sbírka layoutů
|
||
| panther Profil |
#14 · Zasláno: 11. 12. 2010, 17:49:33 · Upravil/a: panther
kulich:
„Myslíš, že bych tě mohl poprosit o hrubý náčrt toho webu od Tebe?“ hrubý náčrt jsem ti udělal (schválně docela podrobný) „Jinak jaký mají význam menu a adress, když je to v podstatě to samý co ul?“ <menu> je menu, <ul> je nečíslovaný seznam. A address, jak jméno napovídá, je adresa - oproti seznamům v <address> nejsou položky seznamu, tedy <li>. A je defaultně kurzívou, aby byla adresa odlišena od okolního textu. |
||
| kulich_ Profil * |
#15 · Zasláno: 11. 12. 2010, 22:30:28
panther:
Nějak nechápu, jak jsi napsal, že je to začátečnická cesta, co je udělaný ne uplně dobře? (myslim zatim jen strukturu rozvržení) A ještě bych se chtěl optat, jak lz udělat toto: Když jsme u toho, lze nastavit šířku mid_boxu tak, aby se dotahovala vždy např. 10 px od right_boxu? |
||
| panther Profil |
#16 · Zasláno: 11. 12. 2010, 22:56:31
kulich:
„že je to začátečnická cesta, co je udělaný ne uplně dobře?“ chyba je v tom, že nectíš sémantická pravidla, všude cpeš <div>y, které tu jsou špatně. O zadávání výšky textovým blokům se podruhé zmiňovat nebudu.
„Když jsme u toho, lze nastavit šířku mid_boxu tak, aby se dotahovala vždy např. 10 px od right_boxu?“ klidně mu zadej šířku, není to chybou. Případně margin: 0 205px.
|
||
| kulich_ Profil * |
#17 · Zasláno: 11. 12. 2010, 23:13:27
panther:
Dobře, díky moc.. Zítra na to zase kouknu a dám vědět jak jsem pokročil, tak kdyby ses mi k tomu pak zase prosim vyjádřil.. :) A díky za trpělivost :)) |
||
|
Časová prodleva: 16 let
|
|||
0