Forum PHP.pl

Ja np przy niewielkich grafikach (buttony, menu) stosuje rozwiazanie typu 2 kontenery jeden w drugim bo lubie kiedy struktura htmla jest ladna i poprawna semantycznie (tj nie jakies 3 kontenery obok siebie)

[HTML] pobierz, plaintext 
<div class="menu">
    <div class="menu-wrapper">
    tu tresc ktora moze sie powiekszac i wtedy grafika sie rozszerza
     </div>
</div>
[HTML] pobierz, plaintext 

i w tej sytuacji div.menu ma w tle obrazek b wysoki ktory ma dolny element graficzny (ta indywidualna czesc i reszta to ta powstarzajaca sie czesc jednolitego tla). to tlo ukladasz od dolu. (background-position: bottom). a drug div ma w tle gorna grafike ktora ukladasz na gorze (background-position: top). Oczywiscie w obu przypadkach no-repeat. Takie rozwiazanie dobrze sie sprawdza przy elementach przy ktorych wiesz ze wysokosc moze byc zmienna ale nie osiagnie jakiejs nieobliczalnej wysokosci (dla ktorej obrazek pierwszego diva musialby byc gigantyyyyyycznie wysoki)

zamiast linijek

[HTML] pobierz, plaintext 
<div class="name">Zamiast tego X</div><div class="slogan">to obrazek</div>
[HTML] pobierz, plaintext 

dajesz wstawke do obrazka swojego logo i tyle np

[HTML] pobierz, plaintext 
<img src="http://validator.w3.org/images/w3c.png" alt="" />
[HTML] pobierz, plaintext 

Nie wiem w czym miala pomoc mi ta odpowiedz W kazdym razie poradzilam sobie juz. Podaje rozwiazanie cssa, moze przyda sie kiedys komus. Html bez zmian. Okazalo sie proste

[HTML] pobierz, plaintext 
* {padding: 0; margin: 0}
ul.countries li {width: 200px; list-style: none; margin-top: -1px}
ul.countries li a {display: block; background-color: #FFF; padding: 5px; border: 1px solid green; position: relative; z-index:1}
 
ul.countries li:hover {}
ul.countries li:hover a {width: 188px; border: 1px solid blue; z-index:1000} 
ul.countries li.active a {border: 1px solid red}
ul.countries li.active ul {border: 1px solid red; z-index: 1000; position:relative}
ul.countries li.active ul li {border: 0 solid; width: auto}
ul.countries li.active ul li a {border: 0 solid; padding-left: 30px; width: 163px}
[HTML] pobierz, plaintext 

Dziwny problem. Potrzebuje zrobic menu w zgodzie z projektem. Zarys jest jak na screenie -
. Dwa pytania:
- jak pozbyc sie zielonego bordera tego nad rozwinietym, aktywnym li
- jak powinien wygladac styl dla :hover zeby efekt byl jak na screenie?
Prosze o pomoc Dziwny efekt bo musze osiagnac efekt jakby te bordery byly wspolne dla sasiadujacych li

[HTML] pobierz, plaintext 
<ul>
	<li><a href="#">To jest pierwsza opcja i ma  długa nazwe</a></li>
	<li><a href="#">Druga</a></li>
	<li class="active"><a href="#">To jest trzecia i do tego jest jeszcze aktywna</a>
		<ul>
			<li><a href="#">jeden</a></li>
			<li><a href="#">dwa</a></li>
			<li><a href="#">trzy</a></li>
			<li><a href="#">cztery</a></li>
		</ul>
	</li>
	<li><a href="#">Czwarta</a></li>
	<li><a href="#">Piąta</a></li>
</ul>
 
 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
* {padding: 0; margin: 0}
ul li a {display: block; background-color: #FFF; padding: 5px}
ul li {border: 1px solid green; width: 200px; list-style: none; margin-top: -1px; z-index:10}
ul li.active {z-index:100; margin-bottom: 1px; border-bottom: 0 solid}
ul li.active a {background-color: #CCC; border: 1px solid red; width: 190px; margin-left: -1px}
ul li.active ul {border-left: 1px solid green}
ul li.active ul li a {background-color: #FFF; border: 0 solid; padding-left: 30px; width: 160px}
ul li ul li {width: auto; border: 0 solid; margin: 0}
[HTML] pobierz, plaintext 

Czy jest mozliwe cos takiego do osiagneicia (jedynie htmlem i cssem) zeby w liscie rozwijanej w optinie mogl sie pojawic tekst zwykly i obok tekst przekreslony? Z tego co wiem, to nie, ale prosze po prostu o info czy da sie to jakos osiagnac bo ponizsze rozwiazanie nie dziala.

[HTML] pobierz, plaintext 
	.normalny {}
	.przekreslony {text-decoration: line-through}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
	<select>
		<option><span class="normalny">aaa</span><span class="przekreslony">bbb</span></option>
		<option><span class="normalny">ccc</span><span class="przekreslony">ddd</span></option>
		<option><span class="normalny">eee</span><span class="przekreslony">fff</span></option>
	</select>
[HTML] pobierz, plaintext 

Jesli nie czystym htmlem i cssem to macie jakis inny powod jak to osiagnac? pilne

Pewnie banalne, ale chce sie upewnic.
Czy jest jakis inny sposob na to, zeby kilka tekstow bylo pod soba - jeden pod drugim a nie przyklejaly sie do siebie?
Oczywiste sposoby to:
- <br />
- blokowosc danego znacznika czyli np jesli kazdy tekst bedzie w osobnym <p /> to od razu beda w osobnych liniach.

Ale co jesli chce aby kazdy tekst byl objety <span> albo <a> zamiast <p> i nie chce wstawiac <br />? Jedyny sposob to nadac spanowi display: block? Tylko jesli potrzebuje czesto taki efekt to czy to nie jest nieprofesjonalne ze caly czas przerabiam span na element blokowy? Dzieki za pomoc

Wiem, ze temat poruszany ale nie znalazlam konkretnego rozwiazania
POtzrebuje osiagnac efekt jak tu

tzn html

[HTML] pobierz, plaintext 
<div id="content">
	<div id="lewy">Tu krótszy tekst, tu krótszy tekst</div>
	<div id="prawy">Tu dłuzszy tekst, Tu dłuzszy tekst, Tu dłuzszy tekst, Tu dłuzszy tekst, Tu dłuzszy tekst, Tu dłuzszy tekst</div>
</div>
[HTML] pobierz, plaintext 

gdzie wysokosc:
- wysokosc content nie jest stala, bo zalezy od wysokosci div#lewy lub div#prawy - w zaleznosci od tego ktory ma wiecej tekstu czyli jest wyzszy
- wysokosc div#lewy lub div#prawy zaleza wzajemnie od siebie bo te ktory jest mniej rozepchniety tekstem wyciaga sie do tej samej wysokosci co ten ktory ma wiecej tekstu.

Pomocy!

Buduje tabele z danymi wg projektu grafika.
Potrzebuje osiagnac efekt jak na szkicu czyli zeby tdki mialy border ale nie do konca swojej szerokosci (bez 20px). Jedynie ostatnia kolumna ma miec border do konca. Doszlam jzu do

[HTML] pobierz, plaintext 
table {border-collapse: separate;  border-spacing: 20px}
table tr td {border-top: 1px solid #ccc} 
[HTML] pobierz, plaintext 

ale w tym przypadku:
- olewa wyjatek z ostatnia kolumna bo wszystkei traktuje tak samo
- odstepy bordera robia sie po obu bokach kolumny a nie jak chcialabym - tylko po prawej.

Jest na to jakies rozwiazanie? Nie interesuje mnie wstawianie dodatkowych pustych <td> jako przerwy

Rzeczywiscie - w mozillowatych i safari ok ale oczywiscie IE nie rozumie tego.
Co miales na mysli piszac ze "jednak nic nie stoi na przeszkodzie by z tego korzystac"? Tzn zrobic tak, zeby dzialalo w tych w ktorych sie daje a dla IE inaczej to zrobic (np wszystko w jedej szpalcie), t?

Grafik zaprojektowal mi projekt w ktorym tekst pisany jest w 2 szpaltach obok siebie tak jak w gazecie i juz z projektu widze ze chcialby zeby ten tekst sie sam automatycznie "przelewal" z kolumny do drugiej. Cos takiego jak jest zawsze w gazetach . Z projektu wynika, ze albo:
- obie szpalty beda stalej wysokosci i tekst (z CMSa) bedzie sie lamal do 2giej szpalty jak skonczy sie wysokosc pierwszej lub
- caly tekst bedzie sie (jakims cudem) dzieli na pol i pierwsza polowa wypelni 1sza szpalte, druga - druga.
Czy ktores z tych rozwiazan jest mozliwe?? Jesli tak to podeslijcie namiary na taki przyklad. Jesli nie to tez dajcie znac - musze to przekazac grafikowi, a chce sie wczesniej upenic zeby nie wyjsc na glupia

Witam,
testuje na takim przykladzie

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
	div.hint {position: absolute; left: 300px; top: 300px; height: 25px}
	div.hint div.hint2 {position: relative} 
	p {float: left; border: 1px solid red}
</style>
</head>
 
<body>
<div class="hint">
	<div class="hint2">
		<p>pierwszy</p>
		<p>drugi drugi drugi drugi drugi drugi drugi drugi </p>
		<p>trzeci</p>
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

Efekt ktory potrzebuje osiagnac to taki, ze podczas zmniejszania okna przegladarki od prawej strony te 3 elementy <p /> maja sie chowac, a nie spadac gdy sie przestaja miescic. Wszystko byloby ok gdyby div.hint nie mial position: absolute, ale to jest konieczne! W srodek moge wsadzic tam cokolwiek, ale okalajacy div musi bezwzglednie miec position: absolute. I jeszcze jeden warunek - drugi <p> nie moze miec podanej na sztywno szerokosci, bo tekst w nim bedzie generowany z automatu, wiec zmiennej szerokosci bedzie ten blok. Bardzo prosze - pomozcie!

Witam,
Czy jest jakis sposob zeby w moim przykladzie sprawic zeby <p /> nachodzilo na <div class="container" /> Tzn tak, zeby bylo jakby nad nim (jedna tresc przykrywajaca druga). Wazne zalozenie - nie moge dac dla <div class="all" /> position: relative (bo to zepsuloby inne rzeczy w tym ukladzie ktorych nie zamiescilam w przykladzie).
Zalozenia:
- Moge zmienic neico struktire htmla lub kolejnosc elementow jesli to pomoze
- oba divy moga miec zmienna szerokosc. Te podane wysokosci to tylko dla przykladu
- chce zeby <p /> wyladowalo jakies 100px od gory

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>100% wysokosci</title>
	<style type="text/css">
		div.all {background-color:#0000FF; height: 200px; width: 300px}
		div.container {background-color:#FFFF00; top: 0; left: 0; z-index: 2; height: 150px}
		p {padding: 0; margin: 0; z-index:100}
	</style>
</head>
 
<body>
	<div class="all">
		<div class="container">d fgd gfdg dfg df gdfgdfg dfg </div>
				<p>To test</p>
	</div>
</body>
</html>
[HTML] pobierz, plaintext 

a nie podoba Ci sie takie rozwiazanie jak na yahoo? tj <span class="pipe">?

[HTML] pobierz, plaintext 
.hd li .pipe {
display:block;
height:1.15em;
position:absolute;
right:-1px;
top:1px;
width:1px;
}
 
.hd li .pipe {
background:#788A98 none repeat scroll 0 0;
border-right:1px solid #FFFFFF;
}
[HTML] pobierz, plaintext 

Witam;
Kawalek kodu html:

[HTML] pobierz, plaintext 
		<div class="hint">
			<p class="h1"></p>
			<p id="hinttxt" class="h2">Hello world test blablabla</p>
			<p class="h3"></p>
		</div>
[HTML] pobierz, plaintext 

css

[HTML] pobierz, plaintext 
div.hint {height: 25px; font-size: 9px; position: absolute; line-height: 19px; vertical-align: middle; z-index: 1000}
div.hint p.h1 {background: url(ico_hint1.gif) no-repeat; width:19px; height: 25px; float:left}
div.hint p.h2 {background: url(ico_hint2.gif) repeat-x; height: 25px; float:left; text-indent: -12px}
div.hint p.h3 {background: url(ico_hint3.gif) no-repeat; width: 4px; height: 25px; float:left}
[HTML] pobierz, plaintext 

To jest kod takiego "dymka": lewa strona (.h1), rozciagajacy sie srodek (.h2) i prawa strona (.h3). Chcialabym zeby tekst pisany w h2 byl cofniety tak zeby pojawial sie juz na p.h2. We wszystkich przegladarkach ujemny text-indent dziala ok, jak zwykle nie w ie6. Jak to rozwiazac - pomoznie.

Wielkei dzieki, samo inline zalatwilo sprawe. Swoja droga niezle dziwactwa sa w tym IE6

Witam,
Strona juz cala pocieta, wszystko ok tylko drobny myk w ie6 - jakims cudem kilka elementow nie wiadomo dlaczego mi umyka.

Spreparowany przyklad:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
	div {background-color:#FF0000; width: 200px; height: 200px}
	a.tick {background: url(img/ico_tick.gif) no-repeat 0 0; margin:0 0 0 10px; display: block; float: left; width: 11px; height: 11px; padding: 0}
</style>
</head>
 
<body>
	<div>
		<a class="tick"></a>
	</div>
</body>
</html>
[HTML] pobierz, plaintext 

We wszystkich przegladarkach ok tylko jak zwykle ie6 odwala cos takiego, ze <a /> jest odsuniety od lewej o 20px (zmierzone na screenie) zamaist o 10px. Jesli dam go na 0 to rzeczywiscie znika, ale jak juz jest jakas wartosc (jak w przykladzie: 10px) to robi sie z tego podwojnie. Pomoznie prosze.

Niestety tez dziala zle bo tak samo jak z 100% tzn w FF jest ok, w IE sie rozciaga.

Jeszcze jakies pomysly?

WItam,
potrzebuje pociac taki placek. To jest fruwajacy za kursorem dymek.

Zrobilam to tak

[HTML] pobierz, plaintext 
		<div class="hint_ok">
			<p class="h1"></p>
			<p class="h2">
				<span>Tu jest edytowalny tekst</span>
				<span class="ok">Przycisk</span>
			</p>
			<p class="h3"></p>
		</div>
[HTML] pobierz, plaintext 

a css

[HTML] pobierz, plaintext 
div.hint_ok {height: 38px; font-size: 10px; position: absolute; color: #FFF; margin: 0; padding: 0}
div.hint_ok p.h1 {background: url(ico_hint_ok1.gif) no-repeat; width:10px; height: 38px; float:left; margin: 0}
div.hint_ok p.h2 {background: url(ico_hint_ok2.gif) repeat-x; height: 33px; float:left; padding: 5px 5px 0 1px; margin: 0 auto}
div.hint_ok p.h2 span.ok {background:url(ico_hint_ok.gif) no-repeat center bottom; display: block; color: #FFF; height: 18px; width: 100%; font-weight: bold; line-height: 18px; cursor: pointer; text-align: center}
div.hint_ok p.h3 {background: url(ico_hint_ok3.gif) no-repeat; width: 5px; height: 38px; float:left; margin: 0}
[HTML] pobierz, plaintext 

Dymek pociety jest na 3 kawalki: lewa, powtarzalny srodek i prawa. Gorny tekst rozciaga dymek. Na dole zawsze taki sam przycisk tylko ze powinien byc po srodku (zarowno napis jak i ciemny szary placek pod nim. Problem w tym, ze jezeli daje blokowameu span.ok szerookosc na 100% zeby to tlo w nim wysrodkowac to w FF jest ok, a rozjezdza sie to w IE6 (bo rozciaga sie na cala szerokosc strony). Mozecie cos doradzic? Ten szary placek pod dolnym przyciskiem nie bedzie roziagalny - zawsze taki sam ale nie moge tego wstawic jako <img /> z pewnych przyczyn. Doradzicie cos? Z gory dzieki.

Witam,
Po uproszczeniu mam taki html

[HTML] pobierz, plaintext 
<body>
<div class="zewnetrzny">
	<div class="wewnetrzny">
		czesc
	</div>
</div>
</body>
[HTML] pobierz, plaintext 

Natomiast css to

[HTML] pobierz, plaintext 
.zewnetrzny {background-color: red; width: 200px; height: 200px;  filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; z-index:1}
.wewnetrzny {width: 100px; height: 200px; background: blue}
[HTML] pobierz, plaintext 

Z pewnych przyczyn nie wolno mi wyniesc diva o clasie wewnetrzny poza div zewnetrzny czy jest szansa zeby dac wewnetrznemu jakis styl tak, aby "nie dotknela" go przezroczystosc okalajacego diva? Tzn zeby tresc z wewnetrznego byla bez zadnej warstwy z przezroczystosci - -ma byc 100% widoczna. Poradzcie prosze

hmmm.. no powiedzmy, ze sam select ok, ale ten scroll ze screena? na niegi tez jest jakas rada?

Witam,
dostalam do pociecia grafike z takim scrollem. Czy mozna w jakis sposob zapanowac nad tym? Klient nie zrozumie, ze nie bedzie ladnego scrolla albo, ze nie bedzie zaokraglonych rogow. Bardzo prosze, pomozcie - podpowiedzcie strukture xhtmla i dajscie wskazowki jak osiagnac efekt patrz tu . Pewnie samym cssem nie da rady, wiec jak?

No wiec dokladnie to wyglada to tak, ze ten html wykorzystywany jest w stronie generowanej przez jquery. Mam ogromna liczbe rekordow - kazdemu z nich przypisany jest m.in. pewien kod koloru - tego wlasnie koloru powinien byc ten miniobrazek. Nie ma szans na kilka cssow bo musialoby ich byc kilkaset - nawet nmie znam z gory tych kolorow - to idzie z bazy Jest jakis sposob zeby styl wykorzystywal ten kod koloru i zgodnie z tym "kolorowal" obrazek? Wiem, ze realnie obrazek nie zmieni koloru ale moze mozna "nalozyc" na niego jakiegos diva w zadanym kolorze z pewna przezroczystoscia i dla oka bedzie sie wydawalo ze obrazek (w sumie jest to maly krzyzyk) zmienil kolor

Witam,
poradzcie czy da sie zrobic cos takiego stylem. Oczywiscie wazne zeby ok dzialalo we wszystkich przegladarkach.

Mam malutka ikonke - jednokolorowego (obecnie czarnego) gifa z przezroczystoscia. Czy mozna zmienic kolor tego obrazka stylem? (rozumeim, ze nie da sie tego wcisnac w plik .css ale chociaz tak, zeby zarzadzac stylem w htmlu. Myslalam cos o wykorzystaniu nakladaniu wastw, przezroczystosci itp. Poradzcie prosze. Dzieki.

Witam,
czy jest jakis schemat wg ktorego powinien byc zbudowany formularz najbardziej wzorowo ? Chodzi mi o jego strukture xhtml.

Co sadzicie o tym:

[HTML] pobierz, plaintext 
<form class="aaa" action="#" method="post">
<fieldset>
<div>
<label for="nazwisko" >Nazwisko:</label>
<input type="text" name="Nazwisko" value="" class="text" id="nazwisko" />
</div>
 
<div>
<label for="imie" >Imię:</label>
<input type="text" name="Imie" value="" class="text" id="imie" />
</div>
 
<input type="image" class="submit" src="/img/btn-send.gif" alt="Wyślij" />
</fieldset>
</form>
[HTML] pobierz, plaintext 

a moze cos z wykorzystaniem <dd> , <dt> itp?

Zalezy mi na tym, zeby byl to taki wzorowy formularz bo bede robila z niego szablon i wykorzystywala w wielu miejscach a zmieniala dla niego wylacznie css. Czekam na wszelkie porady i uwagi.

Witam,
szukalam na forum, ale nie znalazlam jednoznacznej odpowiedzi. Potrzebuję funkcji, która sprawdzi mi szerokość okna przeglądarki. Widzialam kilka funkcji ale czesc z nich dzial tylko w Netscapie.
Ogolnie potzrebuje osiagnac efekt wycentrowanego banera - duszka we flashu. Korzystając z

[HTML] pobierz, plaintext 
x.style.left = Math.round((screen.width - 520)/2)+'px';
[HTML] pobierz, plaintext 

baner jest wycentrowany, jeżeli okno przeglądarki jest zmaksymalizowane ale jeżeli je zmniejsze to baner nadal pozostaje w tym samym miejscu. Bardzo prosze o pomoc. Thx