problem s nadpisy

Ahoj, tvořím stránky www.moonchild.wz.cz a narazil jsem na problém s nadpisy. Původně jsem měl pozici nadpisů nastavenou relativně a vše bylo v pořádku až na jeden detail. Nadpisy byly zabíraly celou šířku divu a při posuvu o 22px zasahovali o tuto vzdálenost mimo něj, takže při overflow: auto se mi do hlavního divu vkládal nežádoucí horizontální posuvník

Proto jsem nadpisům nastavil pozici absolute. Problém se šířkou a posuvníkem se vyřešil, ale nastal nový. Všechen ostatní obsah stránky najednou nadpisy ignoruje a posunul se výš a přes ně (jako by tam nadpisy nebyly).

Jsem začátečník a budu rád za každou odpověď a radu :) Kdyby vás napadla jakákoliv další kritika, či zlepšení, tak budu rád a rád se něco přiučim.

Moc se omlouvám, mohl by tenhle dotaz někdo přesunout do diskuze HTML? jsem se trochu spletl :)

"Všechen ostatní obsah stránky najednou nadpisy ignoruje a posunul se výš a přes ně (jako by tam nadpisy nebyly)."
To je přesně chování absolutně pozicovaného objektu. Takový objekt je, když to tak řeknu, mimo stránku (například se ti nepodaří jej schovat pod relativně pozicovaný element apod.). Stylování nadpisu přes absolutní pozicovaní nebude správný postup ;)

Ale abych řekl pravdu, z dotazu mi není jasné, co brání použití overflow:hidden nebo proč by se vůbec měl vykreslovat onen posuvník. Mohl bys to trochu víc rozepsat nebo (lépe) ukázat na konkrétním příkladu? Pokud máš jednoslovné nádpisy širší než samostnou stránku (to je jediná situace, na kterou si vzpomenu, že by se mohli zobrazit posuvníky), je návrh stránky zřejmě nevhodný (a stálo by za zvážení jej předělat nebo použít csskový word-wrap).

Když použiju overflow:hidden, tak zmizí i posuvník vertikální, který jaksi potřebuju. Našel jsem řešení pomocí overflow-x: hidden a overflow-y: auto, ale to mi neprošlo css validátorem.

Já teď teda zpátky hodim tu možnost s relativní pozicí nadpisů, abyste viděli, co to dělá.
Ještě pro lepší názornost jsem označil text, vyfotil to a označil místo, kde například nadpis zasahuje mimo div a tím div rozšiřuje a ten pak vkládá posuvník. Jedná se o nadpis o třech znacích.
http://img529.imageshack.us/img529/3788/problemcm.jpg

Když se na to dívám, bude to asi na větší úpravy.

Použití position:absolute nebo position:relative je pro tebe naprosto zbytečné. Nechej tam (výchozí) position:static a přidej normální padding (místo s prominutím pitomého zarovnávání přes left,right). Celý tvůj problém s nadpisy vyřeší toto:

h4
{
padding:0px 0px 0px 22px;
color:#00AC00;
}

Tak a ještě zmiňovaný dotaz -- proč používáš "scrollovatelný" vnitřní obsah? Například na monitoru s výškou 800px tak ve stránce vznikají 2 různé scrollovatelné oblasti -- celá stránka (protože před reklamou je asi 400px prázdno) a tvůj vnitřní div. Pokud se chci jako návštěvník podívat do spodní části obsahu stránky, musím se dostat ukazatelem nad prostřední div a teprve potom točit kolečkem/použít posuvník. Co ti brání tyto posuvníky spojit == udělat stránku s variabilní délkou podle obsahu?

A tenhle problém by šel vyřešit takhle ne?

H4
{width: 600px !important;
color: #00AC00;
padding: 0px 22px 0px 22px;
font-size: 15px;
}

Moc díky, padding ten problém s nadpisy vyřešil. Akorát ve firefoxu zůstával horizontální posuvník na stránce "číselné soustavy". Když jsem použil padding i pro tabulky, tak zmizel, ale ty tabulky tam jsou teď nalepený na levý okraj, i když jsem nastavil "padding:0px 0px 0px 50px" a nevim proč.

Ten problém se dvěma posuvníky bych rád vyřešil, ale nevím jak. Když v tom divu nebudu mít posuvník, tak mi ten obsah prostě poleze ven z divu, když bude moc dlouhej a nevim, jak bych udělal, aby se ten div zvětšoval podle obsahu. Navíc bych rád, aby se v tom případě stejně zvětšoval div, ve kterym je menu a aby se posouvala i patička.

A tu mezeru před reklamou nevim co způsobuje :(