Problém se vzhledem stránky

Dobrý den jsem v html začatečník a nevím ted jsem si udělal stránky na notebooku tam mam rozlišení 15,6 na stránce jsem se dost vyhrál ale zapl jsem tu stránku u kámoše co má obrazovku 22 no a ta stránka je moc na levo a ne u prostřed jak jsem ji měl na notebooku a na pravo je jen bíle co mám dělat aby to na všech obrazovkách bylo stejné Děkuji napište mi na Boogaz@email.cz nebo sem děkuju budu moc vděčný

// EDIT: Upraven nadpis tématu. Příště, až budeš někdy zakládat nové téma, vol něco výstižnějšího než "Prosim podivejte se". Nípal.

<HTML>1) Úhlopříčka s tím nemá co dělat, ale pixely (samozřejmě na větší úhlopříčku se obvykle vejde víc pixelů).
2) Napravo to nevidím bílé, ale pokračuje tam pozadí z levé části, takže u mě to až tak zle nevypadá. Ale používám Operu, nevím, jak to vypadá v tom kulatým nesmyslu, který používáš ty.
3) Zdrojový kód je něco příšernýho. Samý div, img, div, img... sémantika tvého webu už ani nemůže brečet, protože žádná není.
- Udělej stránky nejprve bez layoutu
- Potom napiš CSS tak, aby všechny ty "obrázky", které ve skutečnosti netvoří nějaký obrazový materiál či obrazový obsah (tak by se měl tag img používat), ale pouze vzhled stránky, byly adresovány v CSS (nejspíše - vzhledem ke komplikovanosti grafiky - se nevyhneš nějakým CSS 3 vychytávkám, ale v dnešní době se už není čeho bát)
- Stránka zobrazená bez stylů musí vypadat stále stejně jako v první pomlčce.
- Žádné inline styly! (myslím atribut style) Zvyšují nepřehlednost kódu a znesnadňují údržbu.
- Hlavní příčinou tvého problému je absolutní pozicování jednotlivých prvků. Tím jim říkáš: "Budeš hezky sedět na tomhle a tomhle pixelu zleva a tomhle a tomhle pixelu zhora. Tečka. A je mi fuk, jak se tam nacpeš a že by se ti uprostřed líbilo víc."
<hr style="border: none; border-top: 1px solid black;" />
Na závěr ti dám dobrou radu stařešiny kmene:
Nežádej na veřejných fórech odpovědi na email. Je to nezdvořilé.</HTML>

Dík moc ale ja se v tom moc nevyznám používám wysiwyg web builder.Prosím nemohl bys ten text zjednodušit abych to pochopil i já který s HTML sotva začal.Ještě ani neumim s CSS umim jen udělat myš prosím kdybys byl tak hodný zjednoduš to.Dik moc

Zjednodušit? Používej lepší editor nebo se smiř se stávajícím stavem.

Jak už napsal Kit, postup už moc zjednodušit nelze.
Víceméně stojíš před rozhodnutím:
a) naučit se html a css od základů a zahodit wysiwyg editor
b) použít jiný editor (nebo stávající přemluvit, aby nepoužíval absolutní pozicování)
c) smířit se s momentální sitací/stavem

Pokud bych ale přesto měl pro tebe Nípalovy rady zjednodušit:
1) Začni s obsahem, tedy co bude nadpis, kolik položek menu a kam budou odkazovat atp. Udělej si představu, kolik textu/obrázků na každé stránce bude. Tomu musíš přizpůsobit návrh a layout samotný.
2) Potom stylování -- nadpisy, texty, obrázky na pozadí -- na všech podstránkách stejné (mimochodem černé pozadí a výrazné světlé písmo je na čtení delších textu nevhodné).

___
Vždycky mě tak příjemně zahřeje u srdce, když zjistím, že wysiwyg editory ani po dalších letech vývoje stále nedosáhly schopností běžných kodérů :)

Dik moc asi si stahnu nový wysiwyg nebo se začnu učit css

Existují i jiné generátory HTML než WYSIWYG. Kromě toho se technologie WYSIWYG na tvorbu webu vůbec nehodí.

Ja mám podobný problém ..keď otvorím stránku v google chrome zobrazí to ako má ale v Mozila Firefox a IE 6 nie čím to je? nespolupracujú spolu alebo ako?

peter: Podle množství br a nbsp na tvé stránce soudím, že jsi moc nepochopil smysl CSS. Když v CSS najdu takové obludnosti jako "position:absolute", tak je mi jasné, že ty stránky v různých prohlížečích a při různém rozlišení _budou_ vypadat různě.

Základem podobného (nikoli stejného) vzhledu v různých prohlížečích je tzv. gumový design. To znamená, že bloky, které nemusí mít přesnou velikost (obsahující menu, texty apod.) a s nimi související grafické prvky musí být přizpůsobivé, tedy proměnlivé velikosti.

Tak ak ťa môžem poprosiť povieš mi ako mám urobiť gumový design? A ten position absolute tam mám preto, lebo som sa radil s kamošom a nevedeli sme to urobiť tak aby sa stránka zobrazovala v strede širokého monitoru tak som použil position absolute :)

Ahoj lidi, může mi někdo pomoct? Mám problém s tím, když napíšu česky do PSPadu nějaké přání - tvořím web. stránku k narozeninám bráchovi, tak se mi tam nezobrazuje ř , č - obě písmena malá. Co mám udělat a jak, aby se mi to zobrazovalo? Jsem v tom začátečník.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Vše nejlepší Natíšku</title>
</head>
<body bgcolor = "#0033FF">
<center>
<table border = "2" width = "800" height = "1024" bgcolor = "#FFFF33" bordercolor = "#00CCFF" align = "justify" cellspacing = "20" cellpadding = "20" link = "#990066" vlink = "#33FF00" text = "#0099FF">
<tr>
<td bgcolor = "#9966FF" rowspan = "3"> MENU <img src ="http://www.navliecky.sk/upload/prestieranie_krtko_lp1008_v.jpg" width = "450" height = "500">
<img src = "http://www.volny.cz/univsro/obrazky/auta.jpg" width = "400" height = "450">



</td>
<td colspan = "4"> Milý Natíšku, přeji ti všechno nejlepší k narozeninám a doufám, že se Ti vše bude líbit. 
 Když klikneš na odkazy v číslech od 5 do 12 najdeš tam překvapení. </td>
</tr>

<tr>
<td>
 5 První odkaz je <a href= "http://1.bp.blogspot.com/_wFopBZXnJd0/TQtxmf8KncI/AAAAAAAACOU/oBbBBm0ObSY/s400/shrek.jpg" width = "400" height = "450"> HERE </a> </td>
<td>
 6 Druhý odkaz je <a href= "http://www.wallpaperbase.com/wallpapers/movie/harrypotter/harry_potter_1.jpg" width = "400" height = "450"> HERE </a> </td>
<td>
 7 Other link is <a href= "http://media.novinky.cz/149/61492-original-gamjr.jpg" width = "400" height = "450"> HERE </a> </td>
<td>
 8 Next link is <a href = "http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg?&k=Flowers+in+a+Garden+Border"> HERE </a> </td>
</tr>

<tr>
<td>
 9 Pátý odkaz je <a href = "http://www.techwench.com/wp-content/uploads/2010/10/Best-laptops.jpg"> ZDE </a> </td>
<td>
 10 Šestý odkaz je <a href = "http://www.microsoft.com/presspass/images/gallery/hardware/WirelessOpticalDesktopPro.jpg"> TADY </a> </td>
<td>
 11 Other link is <a href = "http://2.bp.blogspot.com/_p_rio8tZ4oU/S1TCVmAdFcI/AAAAAAAAAJI/eTIZ-QciPBs/s400/noty.png"> HERE </a> </td>
<td>
 12 Next link is <a href = "http://www.sonet.me.cz/antikvariat/t/1789.jpg"> HERE </a> </td>
</tr>
</body>

Jelikož to není ještě hotové - díky diakritice, tak to nemůžu vyvěsit na web a poslat odkaz, proto posílám, alespoň kód stránky. Díky za odpověď.

peter: gumový design je vlastně cokoli co neobsahuje position:absolute. Je lepší dát designu volnost. Tím budeš mít větší šanci, že design bude vypadat stejně na jakémkoli počítači, prohlížeči a obrazovce.
Obecný problém prohlížečů, že sice dodržuji daná pravidla, ale každý tyto pravidla interpretuje po svém. Takže nelze úplně dosáhnout přesného zobrazení ve všech prohlížečů. Co se zobrazuje správně v jednom, se nemusí správně zobrazovat v jiném. Aby k tomuto nešvaru nedošlo, tak kóder musí buď striktně dodržovat obecná pravidla nebo najít kompromis. Což je u začátečníku docela problém. Pokud v tom chce pokračovat, tak nezbývá než zkoušet a experimentovat.

Kristýna: Podle kódu to vypadá vše v pořádku. Meta tág tam máš. Česky je to napsané. Ovšem tohle všechno někdy nemusí stačit. Meta tág je pouze informační. Základem je potřeba zjistit v jakém kódovaní je editor a podle něj nastavit meta tág.
V případě PsPadu je oprava jednodušší. Otevři si onen soubor a v menu Formát klikni na položku Windows (CP1250) a soubor ulož.

Kristýna: Zkus místo textu "windows-1250" nahradit "ISO-8859-2" nebo "UTF-8". Záleží na tom, jak máš nastavený PSPad.

Tomík:ale keď dám preč position:absolute vôbec niesu div-ká na svojom mieste sú rozhádzané ..ja som to skúšal aj bez position:absolute a mal som z toho guláš :) Ale aj tak díky

peter: Vyhnutí se position:absolute neznamená, že tuto vlastnost smažeš a zbytek necháš být. Samozřejmě musíš ještě "dostylovat" to, co dříve řešil position:absolute ;)

Tak jako nijak nezavrhuji použití position:absolute. Jen by se měl využívat s rozmyslem. Pro základní kostru layoutu bych absolutní pozicování raději vůbec nepoužíval. Jsou s nimi problémy a pozdější úprava může být pak peklo. Absolutní pozicování lze nahradit technikou skládačky (od levého horního do pravého dolního). Zde se využívají rozměrů divu, případné floatování, obalování divu apod. Jde prostě o to vyzkoušet si to a pochopit ;)

Tomík: Jaký soubor mám otevřít? Já to dělala rovnou v PSPadu, otevřela jsem PSPad, dala jsem nový (CTRL + N) a psala jsem kód, který jste viděli, byla to patlačka - alespoň pro mne, ale stojí to za to.

ISO a UTF- 8 ani nevím co je totéž position: absolute.
Můžete mi to trošku objasnit? Já se PC (obecně) učím, totéž www stránky, ale jsem začátečník nikoli pokročilý a vyšší.
Já si ty www stránky právě zkouším od 1.9.2010 - kdy jsme se je začali učit, ale začalo to odkazy, barvou pozadí, vložením obrázků .... atd. - tedy věcy, které už tam jsou v tom kódu - to jsme se postupně naučili a trénuji si to, ale ta diakritika mě štve. Nejhorší je, že mi to blbne (dikaritika) akorát na domácích PC, ve škole ne.
Díky za reakci a ujasnění co přesně mám udělat.

Kristýna: Pěkné povídání o češtině na webu je na
http://www.jakpsatweb.cz/cestina.html

"position: absolute" se týká Devianta. Připletla ses do řešení jeho problémů a tak se v tom asi budeš hůř orientovat. Tvůj problém je úplně jiný, měla sis založit své téma. Ale už jsi tady. My se v tom vyznáme a ty se s tím taky nějak popereš.

Nevidím důvod, proč by se absolutní pozicování nemělo používat, tím méně, proč by to měla být jakási "obludnost". Jde vždy o to, k čemu je absolutní pozice prvku vztažena.

Je blbost position vztahovat ke vzdálených prvkům, kde může hrát roli nějaký border nebo padding. Ukotvit plovoucí prvek k nejbližšímu "nadřazenému" prvku (tedy takovému, který by bez position: absolute nadřazeným byl), nemusí znamenat žádné komplikace.

Pro Kristýna: Přinejhorším to celé z PSPadu překopíruj do obyčejného Notepadu (Poznámkového bloku) a tím to ulož - kóduje ve windows-1250.

PSPad bude mít stoprocentně nějakou nabídku v nastavení. Já používám Notepad++, dokáže velmi jednoduše v hlavním menu kódování konvertovat - nabídka "Formát".

Skg: Však jsem také neříkal, aby se absolutní pozicování nepoužívalo. Jen jsem říkal, aby se používal tam, kde jiná možnost není a kde vím, co dělám.
Když se podíváš na celé vlákno, a vůbec kdekoli kolem fóra o HTML, tak většinou narazíš na problémy s používáním absolutního pozicování, kdy zelenáči a některé editory pro tvorbu layoutu využívají výhradně position:absolute. Pak se diví, proč jejich web jinde vypadá úplně jinak nebo ve spojení s dalšími nedobrovolnými prvky (reklamní banner nebo lišta) se jejich web totálně rozpadne.
Prostě absolutní pozicovaní trpí efektem "dobrý sluha, ale špatný pán". Kdo ho umí používat, tak se mu dostane kvality. Kdo ho neumí používat, tak bude zlý a nebude poslouchat ;)

Skg: Zrovna tvoje stránka je ukázkou téměř zkroceného position:absolute, ale potíž je v tom, že začínajícímu webmasterovi se často jeho výtvor s touto technologií rozsype. Pak hledá v diskuzních fórech, jak to spravit. Poradit takovému začátečníkovi je velmi problematické a tak se často dozví jen informaci "Zbav se position:absolute", která vede rychleji k použitelnému webu.

Skg: Nikomu prosím neraď, aby používal klasický Notepad. Je to sraní do vlastních bot. (Mimochodem, Notepad se snaží udržet kódování, převod do windows-1250 rozhodně neudělá vždy.) Neber to prosím jako urážku, ale oprosti se takových rad. PSPad všechny evropské kódování v pohodě zvládá -- změu kódování lze udělat přes menu -> formát.

Rozvádět debatu na téma position:absolute nemá smysl. Začátečníci by jej však měli ignorovat (v opačném případě později neuvidí/neocení jeho sílu).

@Tomík, já vím, reagoval jsem především na reakci, že absolutní pozicování je "obludnost" - není.

@Kit, souhlas, chce to testovat, testovat a testovat, on se pak ten vhled do problematiky časem dostaví.

@Freeze, chtělo by se skoro říct "rozkaz, šéfe ;)", ale vážně... Já si naopak myslím, ŽE ÚPLNÉ KAŽDÝ by měl začínat od toho nejjednoduššího a pakliže rezignuje na smysluplné UTF-8, určitě začít tím windowsáckým notepadem, který člověka oprostí od tuny sraček v nabídkách a pro úplného začátečníka množství "barevného balastu" na monitoru. Ten prostinký notepad totiž váže pozornost jen na tagy a ne na víru, že za tebe editor něco vyřeší.

Zajímavý článek o nevhodnosti WYSIWYG editorů a proč tomu tak je:
http://zdrojak.root.cz/clanky/wysiwyg-musi-zemrit/

Ve zkratce: V editoru autor stráví 97 % času psaním textu a koukáním na to, co napsal. Proto by samotnému textu měla být věnována největší plocha. Ostatní ovládací prvky by měly být k dispozici až "na požádání".

Notepad splňuje první kritérium. Nabídne prázdnou plochu, kterou autor vyplní textem. V druhém kritériu však pokulhává, protože žádné další funkce nenabízí. Proto vznikly editory Notepad++ a PSPad (nemám zkušenosti se žádným z nich), které nějaké další funkce obsahují, ovšem za cenu mírného zmenšení plochy pro text a odvádění pozornosti směrem k ovládacím prvkům. Rovnováha se hledá těžko.

← Zpět na všechna témata

Nové příspěvky

Smazani stranek index.html ) HTML Tabulky Zalamování textu pomocí CSS Přesměrování Arduino - 400 Bad Request Nastavení českých písmen POMOC! po druhé! Pozicování (obrázek na střed). Jak vycentrovat obrazek, ktery je v prikazu absolute ? Použití tvůrce webu katalog async functions' is only available in es8 (use 'esversion: 8') Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Problém s načítáním Div pro reklamu překrývá prvky webové stránky Nezobrazuje se mi lišta s reklamou ako nahrám na môj web favicon? JavaScript - nečitelný soubor *.js - jak prohlížet/editovat Problém s textem videostream index.html GB///refresh///JS Total Commander - server nenalezen Mobilní verze webu

Další témata

Webzdarma zvládnete to sami

Problém se vzhledem stránky

Nové příspěvky