Forum PHP.pl

Witam!

Mam pewien problem dot. laya - niby ze wszystko ok ale okazuje sie ze z powodu trudnego ulozenia ciezko bedzie mi ustawic dobrze laya

Oto obrazek budowy laya
(IMG:http://www.otofotki.pl/img12/obrazki/pi8678_11111.png)

Kolorem srebrnym oznaczylem tabele o szerokosci 100% siegajacej gdzies do polowy wysokosci str (bez suwaka!), jest tam pocieta grafika z ktora nie bylo problemu wstawic na strone

Kolorem czarnym zaznaczylem pole w ktorym jest tekst ale ze bedzie to tabela ktora wychodzi poza ta powyzsza str i mam zamiar ja zrobic divem

bialym oznaczylem pole w ktorym powinien byc obraz rozciagajacy sie na szerokosc str - ale nie mam pojecia w jaki sposob zrobic rozciagliwosc na cala strone jako tlo

fioletowym kolejna rzecz wystajaca z czarnego ktora pewnie tez bedzie trzeba dac divem

Jak uporac sie z takim layem?
Prosze o pomoc

Pozycjonowanie relatywne + absolutne się zapewne przyda. Trudno tak ze schematu wywróżyć. W tym szarym bloku też będą jakieś dane?

Tak - ma byc tam tekst i prawdopodobnie bedzie sie tam rozciagal

No to tak jak mówię, relative + absolute i nie powinno być żadnego problemu. Jak dobrze zakodujesz (w sensie, bez tabel jak nie masz danych tabelarycznych i dobry CSS będziesz miał) to nawet IE nie powinno mieć problemów.

mm ten szablon okazal sie wielce przydatny (IMG:style_emoticons/default/winksmiley.jpg)

mam jednak kolejny problem - menu jest jedna grafika i nie wiem jak do divow (pustych pol) przypisac link - tak to wyglada

<div style="position: relative; background-image: url('xxx'); width:450px; height:32px">
<div style="top: 5px; left: 13px; position: absolute; width: 100px; height: 20px;"></div>
<div style="top: 5px; left: 157px; position: absolute; width: 60px; height: 20px;"></div>
<div style="top: 5px; left: 258px; position: absolute; width: 70px; height: 20px;"></div>
<div style="top: 5px; left: 373px; position: absolute; width: 65px; height: 20px;"></div>
</div>

Przykładowe menu powinno wyglądać tak

[CSS] pobierz, plaintext 
.menu {
width: 780px;
height: 30px;
margin: 0 auto 0 auto;
}
 
.menu ul, ul li {
height: 30px;
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
 
.menu ul {
float: left;
margin: 0 0 0 8px;
}
 
 
.menu ul a {
padding: 6px 6px 6px 6px;
line-height: 1.8em;
font-size: 1em;
text-decoration: none;
font-weight: bold;
color: #ffffff;
}
 
.menu ul a:hover {
color: #000000;
background: url(grafika.png) repeat-x;
}
 
.menu ul li {
padding-left: 6px;
background: url(grafika.png) no-repeat left;
}
 
[CSS] pobierz, plaintext 

i

[HTML] pobierz, plaintext 
<div class="menu">
<ul>
<li><a href="twoj link ">Home</a></li>
<li><a href="twoj link">Oferta</a></li>
<li><a href="twoj link">Formularz kontaktowy</a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

Nie o to chodzi... chce by linkiem bylo puste pole diva w odpowiednim polozeniu np o szerokosci 100 wysokosci 20 a nie tekst

No to ukrywasz to za pomcoą ujemnego text-indent i już.

mozna prosic o przykladowy kod?

może po prostu

[HTML] pobierz, plaintext 
<a href="#"><div></div></a>
[HTML] pobierz, plaintext 

?

[CSS] pobierz, plaintext 
text-indent:-999em;
[CSS] pobierz, plaintext 

@up: Diva w a? Oszalałeś? Element blokowy wewnątrz liniowego? Znasz cos takiego jak display:block? I sztywne ustawienie rozmarów?

Ten post edytował pedro84 18.04.2010, 19:38:02