Problemovy header

Zdravim.

Chcem urobit fixed-width layout s headerom, ktory sa bude skladat z 2 obrazkov. Jeden bude na pozadi (slogan.png) po celej sirke #headera, a druhy (logo.png) by sa mal nacitat nad slogan.png, cize na dalsej vrstve. Cele by to aj fungovalo, len problem je v tom, ze logo je zaroven aj linkom odkazujucim na titulku stranky - a ten text v odkaze prave robi problem, vysunie odtial logo.png a nasackuje sa tam text odkazu.

Cele je to tu: http://trash.depi.sk/problem/index.html

- pre zjednodusenie ma kazdy prvok inu farbu backgroundu.

Co robim zle?

pokud chceš mít text v h1čce a h1čku použít jako obrázek pak jí nastav width a height stejné jako má obrázek (+ nastav margin a padding na 0) a přiřaď jí background s požadovaným obrázkem. do h1čky dej span a do toho spanu text (pochopil jsem snad správně, že tam chceš dát i text jako alternativu obrázku) #header h1 span nastav display:none čímž se ti schová text, který dělá neplechu a zůstane jen obrázek.


Ahoj no uz som to vcera vyriesil, ale mam poznamku k tomu display:none - ked tymto sposobom schovam text tak nie je az take dobre riesenie, pretoze ked si clovek vypne len obrazky a styly necha zapate nebude tam mat alternativny text.

Tak tam bude mít alt od obrázku, s čímž si snad vystačí.

hmm, len ked nacitavas obrazok cez background tak neviem ako tam das alt.

Vyriesil som to nasledovne:

#header {

		width: 746px;

		height: 56px;

		background: url(../images/slogan.png) no-repeat;

		text-align: left;

		margin: 0 auto;

		overflow: hidden;

}



#header h1 {

		width: 160px;

		height: 56px;

		position: relative;

		top: 0; left: 0;

}



#header span {

		display: block;

		width: 160px;

		height: 56px;

		background: url(../images/logo.png) no-repeat;

		position: absolute; top: 0; left: 0;

		z-index: 1;

		cursor: hand;

}



HTML:

<div id="header">

<h1><a href="index.html" title="Titulka">Titulka<span></span></a></h1>

</div>

#header: nam nacita obrazok slogan.png na pozadie a pomocou overflow:hidden oreze vsetko co je mimo danych rozmerov

#header span: - nacita druhy obrazok logo.png nad slogan.png, cize na dalsej vrstve

#header h1: je tam kvoli umiestneniu H1ky, lebo inak to utecie do laveho horneho rohu

Tento sposob mi funguje v IE6, FF, Opere 8.54 aj Opere 9 Beta (ine prehliadace som neskusal)

Jedinou nevyhodou tohto sposobu je, ze ked je maly obrazok, v tomto pripade logo.png s rozmermy 160 x 56px tak sa nam nezmesti pod neho dlhy nadpis a, ked presiahne danu plochu tak sa vdaka overflow:hidden oreze, mensia nevyhoda, ale da sa ciastocne obist zmensenim velkosti fontu na H1.