| Autor | Zpráva | ||
|---|---|---|---|
| Borec Profil * |
#1 · Zasláno: 28. 12. 2009, 13:20:07
Dobrý den
Nějak se mi nedaří složit web :(. Jsem začátečník. Mám udělaný 3 obrázky na design: Logo: 850x100 Obsah: 850x283 Patka: 850x89 Potřeboval bych složit z tohoto web. Mám slozku style.css Logo už sem nejak udelal: #logo {
width: 850px;
height: 100px;
background-repeat: no-repeat;
background-image: url("design/logo.gif");
margin: 0px;
position: absolute;
left: 5px;
top: 30px;
} Ale potrebuju udelat obsah, ve kterem bude nalevo menu a napravo obsah. Bude to ten obrazek obsah.gif A kdyz se tam napise par radku vet, tak aby se ten obsah posouval postupne dolu a patka byla porad pod nim hned ... Problem me dela udelat ten obsah. priklad: priklad . Je tam obsah a menu v jednom obrazku ... uz mam tema tady: diskuze.jakpsatweb...., ale nejak me to nejde udelat. Prosim, vy jste skoro vsichni tak chytri, kdybyste me udelali ten styl, tak bych vam moc dekuju. Ty cary u obsahu bych si udelal ja. |
||
| Webonym Profil * |
#2 · Zasláno: 28. 12. 2009, 13:53:09
Zrovna se taky trápím s prvním mým webem, mám div obalstránky a v něm div hlavičku (logo) nahoře, pod ní nalevo div menu, vpravo div obsah a pod tím vším div patku.
#obalstranky {width: 960px}
#hiavicka {width: 960px; height: 100px}
#menu {width: 200px; float: left}
#obsah {width: 757px; float: right}
#patka {width: 960px; background-color: gray; text-align: center; clear: both}
Menu by mělo být samostatný div oddělený od divu s obsahem. Position absolute není podle mě vhodné řešení, lepší je nechat divy menu a obsah vzájemně obtékat, viz float: left/right. |
||
| Railbot Profil |
#3 · Zasláno: 28. 12. 2009, 13:55:37
Borec:
Nepoužívej absolutní pozicování a přečti si jak funguje float a cler. Už v minulém vlákně ti to někdo doporučoval, byl jsi na správné cestě. „kdybyste me udelali ten styl“ Pani dejte mi korunu a dejte mi ji do kapsy, že? Zkus to v Práce a zakázky nebo se uč. |
||
| Borec Profil * |
#4 · Zasláno: 28. 12. 2009, 14:00:24
No ja jsem nastavil na menu a na obsah neco podobneho jako toto:
#menu {width: 20%; float: left + obrazek obsah.gif}
#obsah {width: 78%; float: right}ale on se ten obrazek zmensil na 20% a u obsahu zacinal hned od kraju stranky a byl zmenseny na 78% :D ale to prave myslim potrebuju udelat s textem. aby byl 20% siroky na menu a 78% na obsahu ... |
||
| Borec Profil * |
#5 · Zasláno: 28. 12. 2009, 14:41:14
Ja jsem si stahl ten CSS styl z toho webu paladina a jsem z toho uplne baf. Jak byste udelali ten obsah? me se to nedari ;(
ja posouvam ten obrazek obsah.gif (zmensuju a zvetsuju) ale prave mel by sem posouvat ten text jen. |
||
| Trejpa Profil |
#6 · Zasláno: 28. 12. 2009, 15:04:40
Borec:
Co jsem ti vedle napsal? Že hlavní obrázek na pozadí je vložen jako do divu, který menu a obsah obaluje. <style>
body { text-align: center; }
#obal {text-align: left; width: 850px; margin: 0 auto; overflow: auto; background: url(obsah.gif) repeat-x; }
#hlavicka { height: 100px; background: url(logo.gif) no-repeat; }
#menu { width: 170px; float: left; }
#obsah { width: 680px; float: left; }
#paticka { clear: left; height: 89px; background: url(patka.gif) no-repeat; }
</style>
<div id=obal>
<div id=hlavicka>Hlavička</div>
<div id=menu>Menu</div>
<div id=obsah>Obsah</div>
<div id=paticka>Patička</div>
</div>
|
||
| Borec Profil * |
#7 · Zasláno: 28. 12. 2009, 15:10:54
Promin, nepochopil jsem to, prece jen sem zacatecnik. Dik moc
|
||
| Borec Profil * |
#8 · Zasláno: 28. 12. 2009, 15:36:12
Ted ale kdyz tam neco napisu do menu nebo do obsahu dlouhyho na jeden radek, tak to na konci toho obrazku nepreskoci na dalsi radek, ale pokracuje to dal pres pozadi :( nebo kdyz napisu neco do menu, tak to pokracuje dal do obsahu a porad dal ...
|
||
| Borec Profil * |
#9 · Zasláno: 28. 12. 2009, 16:11:06
CSS:
body { text-align: center; }
#obal {text-align: left; width: 850px; margin: 0 auto; background: url(design/obsah.gif) repeat-x; }
#logo { height: 100px; background: url(design/logo.gif) no-repeat; }
#menu { width: 200px; float: left; }
#obsah { width: 650px; float: left; }
#patka { clear: left; height: 89px; background: url(design/patka.jpg) no-repeat; text-align: center; }HTML: <div id=obal> <div id=logo>Hlavička</div> <div id=menu>MenuMenuMenuMenuMenuMenuMenunuMenuMenuMen</div> <div id=obsah>ObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsahObsah</div> <div id=patka>Patička</div> </div> No tak kdyz ty slova obsah napisu do jednoho radku bez <br> tak to pokracuje klidne pres pozadi mimo obrazek obsah.gif. to snejne je ani s menu. co me tam chyby, ja nic nenasel :( |
||
| Trejpa Profil |
#10 · Zasláno: 28. 12. 2009, 16:19:11 · Upravil/a: Trejpa
Borec:
A co čekáš? MenuMenuMenuMenuMenuMenuMenunuMenuMenuMen je jedno slovo. Slova se zalamují po mezerách. Ty tam nemáš. Pokud by ti vadilo i toto, o čemž pochybuji, můžeš těm blokům nastavit overflow: hidden a přebytky se oříznou. |
||
| Borec Profil * |
#11 · Zasláno: 28. 12. 2009, 16:21:35
Jej, ja lama. To mě fakt netrklo, opět dík.
|
||
| Borec Profil * |
#12 · Zasláno: 28. 12. 2009, 16:34:59
Zase primitivni otazka.
Jak mam udelat aby se ten text psal treba 10px. od kraju? |
||
| Borec Profil * |
#13 · Zasláno: 28. 12. 2009, 16:49:28
uz vim, nastavuje e to pres to margin
|
||
| Trejpa Profil |
#14 · Zasláno: 28. 12. 2009, 17:18:18
Borec:
Obecné řešení je opravdu primitivní, má však své ALE. Normálně by se konkrétnímu bloku vložil padding: 10px;. Problém je s tím, že různé prohlížeče vypočítávají velikosti bloků různě (včetně/bez paddingu a borderu) a potom by ti neseděly velikosti. 1) Nejjednodušší řešení pro tebe bude řešení zvané Matrioška. Do požadovaného bloku se vloží další. Vnější určuje velikost, vnitřní odsazení pomocí paddingu nebo marginu (teď je to jedno). Takže třeba takto: <style>
#logo .odsaz { padding: 10px; }
#menu .odsaz { padding: 10px 1em 0 2ex; }
#obsah .odsaz { padding: 1em 2ex; }
#patka .odsaz { padding: 0 3%; }
</style>
<div id=obal>
<div id=logo><div class=odsaz>Hlavička</div></div>
<div id=menu><div class=odsaz>Menu</div></div>
<div id=obsah><div class=odsaz>Obsah</div></div>
<div id=patka><div class=odsaz>Patička</div></div>
</div>2) Můžeš sjednotit box modely prohlížečů na okrajový (quirk - zpětně kompatibilní režim), ve kterém se počítá velikost bloku = šířky/výška + padding + border. V HTML nepoužít žádné <!DOCTYPE ...> nebo použít např. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. <style>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
/* a teď můžeš blokům nastavit padding podle potřeby */
</style>3) Můžeš sjednotit box modely prohlížečů na obsahový (standardního režim), ve kterém se počítá velikost bloku jako samotná šířka/výška obsahu bez paddingu a borderu. V HTML vložit na začátek stránky <!DOCTYPE HTML> nebo např. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. <style>
/* blok široký 200 px, tj [10 + 180 + 10] */
#menu { width: 180px; padding: 10px; }
* html #menu { width: 200px } /* hack pro IE 5.5 a nižší, které standardní režim nemají */
</style>4) Můžeš použít nějaké jiné řešení založené na rozlišení jednotlivých prohlížečů a servírování rozdílných stylů. |
||
| Borec Profil * |
#15 · Zasláno: 29. 12. 2009, 14:32:06
Uz jsem to vyresil. Dik a uz zadny problem neni
|
||
|
Časová prodleva: 15 let
|
|||
0