Autor Zpráva
Tolike
Profil
Dobrý den, potřeboval bych normální strńky dělane přez html s nějakýma těma menšíma prvkama css převést na css.
Prostě abych mel v css vzhled a v html aby byl jenom text.
Stránky vypadají takto.
Jak vidíte forma je rámcová, toho bych se taky chtěl zbavit použitím vlastnosti background-repeat.
Ale jelikož nejsem autorem originálu, nevyznám se v tom (autorka v tom má největší bordel) a rozhodl jsem se že to udělám od nuly. Aby jste mě správně pochopili tak začnu nový dokument (btw používám dreamweaver) a s originálem si budu ověřovat hodnoty..
1. krok, který jsem udělal že jsem v css nastavil pozadí body.

body {
background:url(patt2.png);
background-repeat:repeat-x repeat-y;
}

potom jsem ale narazil na problém:
rozdělil jsem původní obrázek (rámec) na 3 části: header, prostřední-opakující se část a footer
do style.css jsem zapsal toto

#1 {
background-image: url(l2_01.png);
background-position:center top;
background-repeat: no-repeat;
height: 390px;
width: 1059px;
}

#2 {
background-imge: url(l2_02.png);
background-position:center;
background-repeat:repeat-y;
height: 412px;
width: 1059px;
}

#3 {
background-image: url(l2_03.png);
background-position:center bottom;
background-repeat: no-repeat;
height: 167px;
width: 1059px;
}

a do html toto

<body>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</body>

ale nejspíš jsem někde udělal chybu, což je pochopitelné protože jsem s tvorbou stránek začal předevčírem, protože obrázky se mi nezobrazí..

Byl bych vám moc vděčný kdyby jste mi poradili jak mam tuto závadu opravit.
A kdyby jste mi ještě poradili jak mám postupovat dále tak bych byl nejšťastnějším člověkem na Zemi..

Moderátor Davex: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
Taurus
Profil
A otázka je? Externí css tam navíc vidím. Pokud pak máš někde např.:

<span style="background: #ddd;">


stačí to přepsat na

<span class="Nazev-tridy">


a do css napsat

.Nazev-tridy {background: #ddd;}
Tolike
Profil
Taurus:
Teď jsem trochu nerozuměl, ale asi máte na myslím jak bych mohl opravit ten original.
Já bych spíš chtěl udělat to celé od začátku a přijít na ten problém proč se mi ty 3 obrázky: header, prostřední a footer nezobrazují.
Taurus
Profil
Aha, editoval si svůj příspěvek... Třídy nemohou začínat čísly.
tiso
Profil
Tolike: problém je tu:
<div id="1">

ID nesmie začínať číslicou! pomenuj si tie divy podľa toho čo predstavujú (header, menu, main), aby si sa v tom potom vyznal.
Tolike
Profil
Taurus:
Tiso:

Děkuji, to jsem netušil.
A jak se jmenuje obrázek který je uprostřed a opakuje se?
Header to vím, ten je nahoře.
Footer je dole..
Taurus
Profil
To je na tobě. Body, content, tělo, střeva, ...
Tolike
Profil
Jo a mužu ještě jednu otázečku? Teď jsem to opravil, ale obrázky nejsou na středu, to se asi nenastavuje v css u obrázku ale v html u divu, že?
Taurus
Profil
Obrázky se nastavují v css. Navíc nemusíš psát tři řádky

background-image: url(l2_03.png);
background-position:center bottom;
background-repeat: no-repeat;


ale vše v jednom (background):

background: url("obrazek.png") center bottom no-repeat;


Protože nevidím živou ukázku, těžko ti budu dál pomáhat, je to jen střílení od boku. Takže vytvoř si v css třídu
#obal {margin: 0px auto}
a do html před tvůj původní první div napiš <div id="obal"> a za tvůj poslední uzavírací div napiš </div>. Proč se nezobrazuje prostřední obrázek nevím, poradili bysme, kdybys to vše nahrál na net. Jinak nám to dá práci, budeme jen tipovat a nikdo ti nakonec moc nepomůže.
Tolike
Profil
Děkuji.
Už jsem přišel na to proč se ten prostřední nezobrazuje- do css jsem napsal backround-imge tz. vynechal jsem písmeno "a"
Ten #obal mi nějak nešl, ale inspiroval jste mne a všechny 3 obrázky jsem dal do jednoho divu a tomu jsem dal hodnotu align=center..

A to s tím nahráním na web, mám Vám poslat kod do příspěvku nebo uploadovat soubory index.html a style.css třeba na rapid share?
Railbot
Profil
Tolike:
a tomu jsem dal hodnotu align=center
Psal jsi, že chceš využívat CSS, tak HTML tagům necpi žádné zbytečné atributy. To stejné lze udělat v CSS, když tomu divu dáš text-align:center

to s tím nahráním na web, mám Vám poslat kod do příspěvku nebo uploadovat soubory index.html a style.css třeba na rapid share?
Taurus tím myslel živou ukázku, tedy stránky nahrané na nějaký hosting, ani kód do příspěvku a už vůbec ne web nahraný na rapidu, to nikdo stahovat nebude.
Tolike
Profil
Omluvte mě prosím, pokud jsem vás vytočil, opravdu jsem to neměl v planu..

Když dám obrázky do #obal {margin: 0px auto} tak se to zase posune doleva!

"živá ukázka" : http://crashtest.okamzite.eu/
(ukázka je s align=center, tže pokud budete chtít můžu tam dát css řešeni který mi ale nešlo)
tiso
Profil
Tolike: tomu centrovaniu sa dá pomôcť takto: http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
Tolike
Profil
Tak jsem to asi někde pokálel, přísahám že to zase bude všechno vlevo když dám do css:


body {
background:url(patt2.png);
}

#obal {
margin: 0 auto;
}

#header {
background-image:url(l2_01.png);
background-position:center top;
background-repeat:no-repeat;
height: 390px;
width: 1059px;
}

#repeater {
background-image:url(l2_02.png);
background-position:center;
background-repeat:no-repeat;
height: 412px;
width: 1059px;
}

#footer {
background-image:url(l2_03.png);
background-position:center bottom;
background-repeat:no-repeat;
height: 167px;
width: 1059px;
}


a do html:

<body>
<div id="obal">
<div id="header"></div>
<div id="repeater"></div>
<div id="footer"></div>
</div>
</body>
panther
Profil
Tolike:
přísahám že to zase bude všechno vlevo když dám do css:
zkoušel jsi to? Myslím, že ne, v kódu chyba není a musí to být vycentrované.

Nedávej sem desítky řádků kódu, ale vše někam nahraj na hosting a dej sem odkaz.
Tolike
Profil
panther:
promeň, a kam třeba?
panther
Profil
Tolike:
wz.cz, ic.cz, kamkoliv.
Tolike
Profil
panther:
ale to pak bude ten živý nájled jak mě už prosil Taurus, ne?
Já vám chtěl ukázat kód..
Tolike
Profil
http://crashtest.okamzite.eu/obal/
panther
Profil
Tolike:
ale to pak bude ten živý nájled jak mě už prosil Taurus, ne?
omlouvám se, ten odkaz jsem přehlédl.

Já vám chtěl ukázat kód..
kód si každý zobrazí sám.

V uvedeném odkazu nevidím kód uvedený v [#14], který musí fungovat a o kterém tvrdíš opak.
Tolike
Profil
panther:
no jo, já ho zapomněl uložit, ale teď už tam je a stále to nejde..
panther
Profil
Tolike:
margin: 0 auto, resp. margin: auto ten blok vycentruje. Div je od přírody blokvý a má tedy šířku 100% (centruješ blok o šířce 100%, pozice na středu se tedy rovná pozici vlevo a ta se rovná pozici vpravo). Přidej šířku, kterou potřebuješ.
Tolike
Profil
panther:
přidal jsem pod margin width:1059 a žádná změna se nekonala
já už jsem z toho zoufalej..
Tolike
Profil
aha, ja jsem zapomněl na pixely :D už to jde..
moc děkuju!
panther
Profil
Tolike:
přidal jsem pod margin width:1059 a žádná změna se nekonala
můsíš refreshovat stránku. Teď je celý obsah vycentrovaný.
Tolike
Profil
panther, tiso, Railbot, Taurus:
Děkuju všem převelice, teď už předpokládám že mi zbývá dodělat menu a samotný obsah (každy do vlastního oddílu a pak ještě jeden oddíl pro statistiku)..
Taurus
Profil
Eh, omlouvám se, kdybych nezapomněl poradit šířku, ušetřil bych všem čas...

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: