Problém se vzhledem stránky

Kit::: Ten článek (a už hned i úvodní titulek) je zavádějící už tím, že je zavádějící důvod, proč byl napsaný... A nepíše se o WYSIWYG jako takových, ale konkrétně o RS WordPressu. Titulek: Co že profesionál ocení? - je taky nesmyslný. Wysiwyg RS editor použije hlavně amatér, který nechce/neumí udělat web jinak. Co a proč by na tom měl oceňovat profesionál? Jinak článek je to zajímavý tím, že se člověk nemusí ve vlaku při tříhodinové cestě nudit. Samozřejmě mě napadla otázka: KDO JSEM, ŽE SI DOVOLÍM ZLEHČOVAT TAKOVÉHO AUTORA? Ale každý má přece právo na to nějak zabíjet nudu a nemusí to být jen ve vlaku... :-)

@Kit, přesně tak, až tvůrce webu pochopí principy, kterými se skladba zdrojového kódu řídí a místo zoufalého klikání na všechno možné v editoru, koukne na ta písmenka a řekne: "Aháá, no jo, vždyť tady jsem dal nadřazenému divu vlastnost, kterou dědí vložený prvek a proto mi to nejde nastylovat...", pak má šanci začít psát (X)HTML bez skutečných obludností. A potom bude moct přejít k něčemu, co nabízí lepší strukturovanost, více možností a širokou kompatibilitu.

Je třeba si uvědomit, že nikdo nenapsal svůj první web rovnou optimalizovaný pro všechna rozlišení a všechny prohlížeče a s přístupností pro nevidící.

Je úplně zbytečné, aby začátečník trpěl zděšením, co všechno se bude muset k ovládání EDITORU naučit (skoro nic není třeba, jen to na první pohled vypadá k uzoufání složitě a pokročilejší s tím možná trochu machrují) a přitom se musí naučit psát a chápat zdroják a ne dělat si těžkou hlavu z věcí, které by webdesignérovi měly život ulehčovat.

K čemu je mi dobré, že editor nabízí konverze kódování, když nevím, co to je? Že dokáže barevně odlišovat úseky kódu v JS a PHP, když mám co dělat, abych napsal kus HTML? Že dokáže něco opakovaně vkládat, jestliže ani nevím, jestli jsem to napsal správně? O WYSIWYG ni nemluvě - tam s tím se člověk dělat weby nikdy nenaučí.

Dobrý den, mám podobný problém s rozložením stránky. na mém monitoru se vše zobrazuje tak jak má, ale když je monitor širokoúhlý nebo má prostě jiné rozlišení, layouty jsou horizontálně posunuté. Jediné, co se mi podařilo vyřešit bylo to, aby stránka byla vždy ve středu obrazovky pomocí css:

body {text-align: center;
}

nebo obalit body do divu:

<div id="centruj">
</div>

CSS:
#centruj
{ width : 850px;
margin-left : auto;
margin-right : auto;

}



Ale layouty, které jsou umístěny pomocí css se stále u rozdílných rozlišení obrazovek pohybují vlevo od místa, která jsem díky PSPadu napozicoval.

příklad jednoho z mých layoutů:

<div class="vlevo">
<img class="levybanner" src="images/vlevo.png">

</div>

CSS:

.vlevo {
text-align : center;
z-index:2;
position:absolute;
left: 160px;
top: 235px;
width: 150px;
height: 300px;
background-color: transparent;

}

.levybanner {
text-align : center;
z-index:2;
position:relative;
left: 10px;
top: 0px;
width: 135px;
height: 230px;

}

layouty se dokonce pohybují i když jen zoomuju v prohlížeči. Nevím si rady jak je ukotvit tak, aby byly tam, kde mají být.
Předem mockrát děkuji za pomoc.

http://www.jakpsatweb.cz/centrovani-stranky.html

Tenhle článek jsem už vygooglil, pročetl, vyzkoušel, ale nepomohlo nic z toho.

To ti nemůže fungovat, když uvnitř bloku šířky 800px máš obrázek šířky 1920px. To dá rozum, ne?

To ano, ale tohle mrávě není probém, který mě trápí. Jde mi o ty layouty, proč se při obrazovce s větším rozlišením pohybujou doleva a nezůstávají ve středu jako pozadí.

Co jsem ještě zkusil bylo to, že jsem místo

body {text-align: center;
}

dal

body {text-align: left;
}

jenže vše bylo pak nalepeno la levý okraj.

ten text-align: center jsem zkoušel dát i do těch layoutů zvlášť ale stále se pohybovaly k levému okraji

Jestli používáš takový zápis, jaký jsi uvedl, tak tam vidím zásadní problém. Hlavní layout je centrován na střed, ale vnitřní layouty jsou absolutní. Prostě kombinuješ dva poziční prvky. Podívej se netu, jak pracuje absolutní pozicování a jak je případně ošetřit.

Celý problém je ten, že absolutní layouty jsou orientovány na celou stránku (BODY), takže nějaký <div id="centruj"> je mu ukradený. A to se projevuje, jak se projevuje - jsou mimo tento layout.
Máš v zásadě dvě možnosti, jak to vyřešit. Zbavit se position:absolute a použít obtékání (float), což by mělo být ideální. Nebo těm absolutním prvkům řekneš vůči čemu mají použít souřadnice. Což se provádí definováním omezujícího bloku. Zde tedy počítat souřadnice vůči bloku #centruj:

#centruj
{ width : 850px;
margin-left : auto;
margin-right : auto;
position : relative;
}

Když tedy chci, aby se ty layouty s absolutní pozicí orientovaly na něco jiného než <body>, například na celou ohraničenou plochu #podklad ve kterém mají být všechny prvky mojí webovky

<body>
<div id="podklad">
<img id="bg_up" src="images/bg_up.jpg" />
<img id="bg" src="images/bg.jpg" />
</div>
</body>

CSS:

#podklad {

margin: 0 auto;
background-color: transparent;
background-image:url('images/container.jpg');
background-position:center top;
position: absolute;
left: 0px;
height: 1120px;
top: 0px;
}

#bg_up {
margin-left: auto;
margin-right: auto;
width: 100%;
margin: 0 auto;
background-position:center top;
background-color: transparent;
background-position:center top;
height: 720px;
width: 1152px;
z-index:1;
}
#bg {
margin-left: auto;
margin-right: auto;
left:0px
z-index: 1;
height: 370px;
width: 1152px;
}

jak prosím provedu aby se ty layouty vázaly k tomuto? Jsem nováček a pořádně tomu ještě nerozumím. Třeba je to úplná banalita, jen ji omylem přehlížím.

jeden z layoutů:

<div id="vlevo">
<img class="levybanner" src="images/vlevo.png" >
<a href="index1.html"><img name="lbut1" class="vlevobutton1" src="images/vlevobutton1.png" alt="vrchbutton1" onmouseout="lbuttonDefault1 ()" onmouseover="lbuttonChange1 ()"></a>
</div>

CSS:

layout:

#vlevo {
z-index:2;
position:absolute;
left: 160px;
top: 235px;
width: 150px;
height: 300px;
background-color: transparent;

}

obrázek jako podklad:

.levybanner {
z-index:2;
position:relative;
left: 10px;
top: 0px;
width: 135px;
height: 230px;

}

tlačítko:

.vlevobutton1 {
z-index:3;
position: absolute;
left: 30px;
top: 55px;

}

Když si porovnáš ten tvůj zápis a můj, tak tam uvidíš změnu. Byl přidán:

position : relative;

Tento se aplikuje na nadřazený tag, odkud se pak aplikuji souřadnice. Viz http://www.jakpsatweb.cz/css/position.html - Position: absolute. Lze použít i position:absolute, pokud nadřazený tag je potřeba mít absolutní. Jinak zvolit relativní.

V tvém druhém příkladu je to paradoxně již provedeno.
#podklad { position: absolute; }
nebo
#vlevo { position:absolute; }

Všechny prvky uvnitř těchto identifikátorů se přizpůsobí souřadnicím daného identifikátoru.

Dobrý den,
prosím poraďte mi.

V Pspad mi stránky fungují, žádný problém. Na webu se mi potom nevykreslí modré pozadí vodorovného menu. V css se jedná o řádek 17. Snažím se už 3 dny o objevení příčiny problému, marně. Nebude to asi v tom řádku 17., ale jak už to při programování bývá, příčina bude na nějakém jiném řádku.

Toto je odkaz na mé stránky
http://pavlapavla.wz.cz/

Předem děkuji za Vaši reakci
Zdenka

Možná tam zlobí, že soubor "img/menu-bg.gif" neexistuje.