Autor Zpráva
depi
Profil
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?
peta
Profil *
depi
po pravde? Neni mi jasne, ceho chces docilit.
1. Takze ten obrazek je ten, jak je to spatne, ju? A ve kterem prohlizeci je to dobre a ve kterem spatne?
2. A kde je obrazek, jak to ma byt dobre?
3. A muzes situaci sim popsat podle textu a barev na strance?
Treba:
logo - cerny text, bile pozadi je obrazek IMG a potrebuji, aby byl vpravo nahore za slovem slogan a pritom soto slovo neprekryval...
text problematic ... - ...
mata
Profil
logo je zaroven aj linkom odkazujucim na titulku stranku
takže buď dáme obrázek do <a>čka a dáme mu text

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.
depi
Profil
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.
mata
Profil
...pretoze ked si clovek vypne len obrazky ...

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

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.
habendorf
Profil
Tohle se dělá celé trochu jinak. Podívej se třeba k Pixymu na image replacement.
mata
Profil
habendorf
teď úplně nevím co myslíš, že se dělá jinak...

depi
uznávám, že když bude obr v pozadí nebu alt. nějak se mi to všechno pomíchalo :)
habendorf
Profil
mata: no #header h1 span nastav display:none je prostě blbost, k čemu by to mělo být dobré? Vždyť bez obrázků neuvídím ani ten text, čímž se zcela ztrácí smysl toho h1.
mata
Profil
proto jsem jako první navrhoval dát do <a>čka obrázek, po kterém zbyde aspoň alt.
ten span bude mát smysl pro vyhledávač .. pravda je, že pro uživatele je jeho význam veškerý žádný (snad jen vypnutý styl + vypnuté obrázky)
habendorf
Profil
Jak říkám, mrkněte k Pixymu.
http://wellstyled.com/css-replace-text-by-image.html
depi
Profil
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.
Toto téma je uzamčeno. Odpověď nelze zaslat.