Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Nie rozciągające sie tło
Forum PHP.pl > Forum > Przedszkole
Iron22
16.04.2010, 21:02:00
Zrobiłem stronkę ale mam pewnien problem
Otóż tło w tym wypadku obrazkowe nie chce mi dostosowac sie do ilości tekstu i sie rozdziela. Próbowałem juz różnych metod ale nic nie działa.

Pomóżcie

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bez nazwy 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<!-- ImageReady Styles (Bez nazwy 1) -->
<style type="text/css">
<!--

#Tabela_01 {
position:absolute;
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center


}
body{background:#CCCCCC;}
img{ border:none;}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
}

#index-02_ {
position:absolute;
left:1px;
top:0px;
width:191px;
height:239px;
}

#index-03_ {
position:absolute;
left:192px;
top:0px;
width:568px;
height:7px;
}

#index-04_ {
position:absolute;
left:192px;
top:7px;
width:59px;
height:239px;
}

#index-05_ {
position:absolute;
left:251px;
top:7px;
width:226px;
height:223px;
}

#index-06_ {
position:absolute;
left:477px;
top:7px;
width:41px;
height:239px;
}

#index-07_ {
position:absolute;
left:518px;
top:7px;
width:212px;
height:232px;
}

#index-08_ {
position:absolute;
left:730px;
top:7px;
width:30px;
height:239px;
}

#index-09_ {
position:absolute;
left:251px;
top:230px;
width:226px;
height:16px;
}

#index-10_ {
position:absolute;
left:1px;
top:239px;
width:191px;
height:7px;
}

#index-11_ {
position:absolute;
left:518px;
top:239px;
width:212px;
height:7px;
}

#index-12_ {
position:absolute;
left:0px;
top:246px;
width:760px;
height:11px;
}

#index-13_ {
position:absolute;
left:0px;
top:257px;
width:1px;
height:105px;
}

#index-14_ {
position:absolute;
left:1px;
top:257px;
width:759px;
height:21px;
}

#index-15_ {
position:absolute;
left:1px;
top:278px;
width:21px;
height:84px;
}

#index-16_ {
position:absolute;
left:22px;
top:278px;
width:110px;
height:63px;
}

#index-17_ {
position:absolute;
left:132px;
top:278px;
width:22px;
height:84px;
}

#index-18_ {
position:absolute;
left:154px;
top:278px;
width:212px;
height:63px;
}

#index-19_ {
position:absolute;
left:366px;
top:278px;
width:15px;
height:84px;
}

#index-20_ {
position:absolute;
left:381px;
top:278px;
width:195px;
height:63px;
}

#index-21_ {
position:absolute;
left:576px;
top:278px;
width:13px;
height:84px;
}

#index-22_ {
position:absolute;
left:589px;
top:278px;
width:143px;
height:63px;
}

#index-23_ {
position:absolute;
left:732px;
top:278px;
width:28px;
height:84px;
}

#index-24_ {
position:absolute;
left:22px;
top:341px;
width:110px;
height:21px;
}

#index-25_ {
position:absolute;
left:154px;
top:341px;
width:212px;
height:21px;
}

#index-26_ {
position:absolute;
left:381px;
top:341px;
width:195px;
height:21px;
}

#index-27_ {
position:absolute;
left:589px;
top:341px;
width:143px;
height:21px;
}

#index-28_ {
position:absolute;
left:0px;
top:362px;
width:760px;
height:11px;
}

#index-29_ {

position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;

}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Bez nazwy 1) -->
<div id="Tabela_01">
<div id="index-01_">
<img id="index_01" src="Obrazki/index_01.jpg" width="1" height="246" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="Obrazki/index_02.jpg" width="191" height="239" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="Obrazki/index_03.jpg" width="568" height="7" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="Obrazki/index_04.jpg" width="59" height="239" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="Obrazki/index_05.jpg" width="226" height="223" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="Obrazki/index_06.jpg" width="41" height="239" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="Obrazki/index_07.jpg" width="212" height="232" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="Obrazki/index_08.jpg" width="30" height="239" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="Obrazki/index_09.jpg" width="226" height="16" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="Obrazki/index_10.jpg" width="191" height="7" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="Obrazki/index_11.jpg" width="212" height="7" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="Obrazki/index_12.jpg" width="760" height="11" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="Obrazki/index_13.jpg" width="1" height="105" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="Obrazki/index_14.jpg" width="759" height="21" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="Obrazki/index_15.jpg" width="21" height="84" alt="" />
</div>
<div id="index-16_">
<a href="o nas.html"target="_blank"><img id="index_16" src="Obrazki/index_16.jpg" width="110" height="63" alt="" /></a>
</div>
<div id="index-17_">
<img id="index_17" src="Obrazki/index_17.jpg" width="22" height="84" alt="" />
</div>
<div id="index-18_"> <a href="http://www.allegro.pl/show_user_auctions.php?uid=9581771" target="_blank">
<img id="index_18" src="Obrazki/index_18.jpg" width="212" height="63" alt="" /></a>
</div>
<div id="index-19_">
<img id="index_19" src="Obrazki/index_19.jpg" width="15" height="84" alt="" />
</div>
<div id="index-20_"> <a href="http://www.allegro.pl/show_user.php?uid=9581771" target="_blank">
<img id="index_20" src="Obrazki/index_20.jpg" width="195" height="63" alt="" /></a>
</div>
<div id="index-21_">
<img id="index_21" src="Obrazki/index_21.jpg" width="13" height="84" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="Obrazki/index_22.jpg" width="143" height="63" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="Obrazki/index_23.jpg" width="28" height="84" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="Obrazki/index_24.jpg" width="110" height="21" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="Obrazki/index_25.jpg" width="212" height="21" alt="" />
</div>
<div id="index-26_">
<img id="index_26" src="Obrazki/index_26.jpg" width="195" height="21" alt="" />
</div>
<div id="index-27_">
<img id="index_27" src="Obrazki/index_27.jpg" width="143" height="21" alt="" />
</div>
<div id="index-28_">
<img id="index_28" src="Obrazki/index_28.jpg" width="760" height="11" alt="" />
</div>
<div id="index-29_">
Jakiś tekst


<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>
krzysztof_kf
16.04.2010, 21:05:19
Gdzie tkwi problem po co wklejasz cały szablon
Iron22
16.04.2010, 21:08:41
Stronka

a tak wygląda problem

tekst rozwala mi stronkę.

Jak zrobić aby to sie dopasowywało automatycznie do ilości tekstu?
krzysztof_kf
16.04.2010, 21:14:37
Dla tła dodaj i nie musisz dodawać danej wysokości dla elementu 

[CSS] pobierz, plaintext 
  1. overflow: hidden;
[CSS] pobierz, plaintext
Iron22
16.04.2010, 21:58:20
dałem
CODE
#Tabela_01 {
position:absolute;
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center


}
body{background:#CCCCCC;}
img{ border:none;}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
}

I jest to samo
krzysztof_kf
16.04.2010, 21:59:41
A możesz pokazać kawałek kodu gdzie leży problem najlepiej www
Iron22
16.04.2010, 22:06:33
ALe ja tej strony nie mam jeszcze wrzuconej na serwer.

A bład myślę że tkwi tutaj

CODE
#index-29_ {

position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;

}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

}




To jest Div w tkórym chce wprowadzac tekst

CODE
#index-29_ {

position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;


a to jest styl CSS dodany do niego

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);
krzysztof_kf
16.04.2010, 22:11:18
Dla selektora dodaj 

[CSS] pobierz, plaintext 
  1. #index-29_ {
  2. overflow: hidden;
[CSS] pobierz, plaintext


i wyrzuć wtedy height
Iron22
16.04.2010, 22:29:01
CODE
#index-29_ {overflow:hidden;

position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;

}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

}


Było by dobrze alenie mam reszty tekstu:(

krzysztof_kf
16.04.2010, 22:33:36
A height wywal ?
Iron22
16.04.2010, 22:40:14
A to też mam wywalić?
width:760px;
czy tylko to? height:427px;

CODE
#index-29_ { overflow:hidden;

position:absolute;
left:0px;
top:373px;
width:760px;
krzysztof_kf
16.04.2010, 22:44:45
height:427px; tylko bo tym znacznikiem ustawiasz stała wysokość dla danego kontenera
Iron22
17.04.2010, 12:29:16
Pomogło dzieki.

Wklejam cały kod jaki teraz mam bo może ktoś kiedyś będzie miał podobny problem.

CODE
#Tabela_01 {
position:absolute;
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center


}
img{ border:none;}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
}

#index-02_ {
position:absolute;
left:1px;
top:0px;
width:191px;
height:239px;
}

#index-03_ {
position:absolute;
left:192px;
top:0px;
width:568px;
height:7px;
}

#index-04_ {
position:absolute;
left:192px;
top:7px;
width:59px;
height:239px;
}

#index-05_ {
position:absolute;
left:251px;
top:7px;
width:226px;
height:223px;
}

#index-06_ {
position:absolute;
left:477px;
top:7px;
width:41px;
height:239px;
}

#index-07_ {
position:absolute;
left:518px;
top:7px;
width:212px;
height:232px;
}

#index-08_ {
position:absolute;
left:730px;
top:7px;
width:30px;
height:239px;
}

#index-09_ {
position:absolute;
left:251px;
top:230px;
width:226px;
height:16px;
}

#index-10_ {
position:absolute;
left:1px;
top:239px;
width:191px;
height:7px;
}

#index-11_ {
position:absolute;
left:518px;
top:239px;
width:212px;
height:7px;
}

#index-12_ {
position:absolute;
left:0px;
top:246px;
width:760px;
height:11px;
}

#index-13_ {
position:absolute;
left:0px;
top:257px;
width:1px;
height:105px;
}

#index-14_ {
position:absolute;
left:1px;
top:257px;
width:759px;
height:21px;
}

#index-15_ {
position:absolute;
left:1px;
top:278px;
width:21px;
height:84px;
}

#index-16_ {
position:absolute;
left:22px;
top:278px;
width:110px;
height:63px;
}

#index-17_ {
position:absolute;
left:132px;
top:278px;
width:22px;
height:84px;
}

#index-18_ {
position:absolute;
left:154px;
top:278px;
width:212px;
height:63px;
}

#index-19_ {
position:absolute;
left:366px;
top:278px;
width:15px;
height:84px;
}

#index-20_ {
position:absolute;
left:381px;
top:278px;
width:195px;
height:63px;
}

#index-21_ {
position:absolute;
left:576px;
top:278px;
width:13px;
height:84px;
}

#index-22_ {
position:absolute;
left:589px;
top:278px;
width:143px;
height:63px;
}

#index-23_ {
position:absolute;
left:732px;
top:278px;
width:28px;
height:84px;
}

#index-24_ {
position:absolute;
left:22px;
top:341px;
width:110px;
height:21px;
}

#index-25_ {
position:absolute;
left:154px;
top:341px;
width:212px;
height:21px;
}

#index-26_ {
position:absolute;
left:381px;
top:341px;
width:195px;
height:21px;
}

#index-27_ {
position:absolute;
left:589px;
top:341px;
width:143px;
height:21px;
}

#index-28_ {
position:absolute;
left:0px;
top:362px;
width:760px;
height:11px;
}

#index-29_ { overflow:hidden;

position:absolute;
left:0px;
top:373px;
width:760px;


}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Bez nazwy 1) -->
<div id="Tabela_01">
<div id="index-01_">
<img id="index_01" src="Obrazki/index_01.jpg" width="1" height="246" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="Obrazki/index_02.jpg" width="191" height="239" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="Obrazki/index_03.jpg" width="568" height="7" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="Obrazki/index_04.jpg" width="59" height="239" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="Obrazki/index_05.jpg" width="226" height="223" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="Obrazki/index_06.jpg" width="41" height="239" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="Obrazki/index_07.jpg" width="212" height="232" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="Obrazki/index_08.jpg" width="30" height="239" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="Obrazki/index_09.jpg" width="226" height="16" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="Obrazki/index_10.jpg" width="191" height="7" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="Obrazki/index_11.jpg" width="212" height="7" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="Obrazki/index_12.jpg" width="760" height="11" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="Obrazki/index_13.jpg" width="1" height="105" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="Obrazki/index_14.jpg" width="759" height="21" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="Obrazki/index_15.jpg" width="21" height="84" alt="" />
</div>
<div id="index-16_">
<a href="o nas.html"target="_blank"><img id="index_16" src="Obrazki/index_16.jpg" width="110" height="63" alt="" /></a>
</div>
<div id="index-17_">
<img id="index_17" src="Obrazki/index_17.jpg" width="22" height="84" alt="" />
</div>
<div id="index-18_"> <a href="http://www.allegro.pl/show_user_auctions.php?uid=9581771" target="_blank">
<img id="index_18" src="Obrazki/index_18.jpg" width="212" height="63" alt="" /></a>
</div>
<div id="index-19_">
<img id="index_19" src="Obrazki/index_19.jpg" width="15" height="84" alt="" />
</div>
<div id="index-20_"> <a href="http://www.allegro.pl/show_user.php?uid=9581771" target="_blank">
<img id="index_20" src="Obrazki/index_20.jpg" width="195" height="63" alt="" /></a>
</div>
<div id="index-21_">
<img id="index_21" src="Obrazki/index_21.jpg" width="13" height="84" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="Obrazki/index_22.jpg" width="143" height="63" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="Obrazki/index_23.jpg" width="28" height="84" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="Obrazki/index_24.jpg" width="110" height="21" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="Obrazki/index_25.jpg" width="212" height="21" alt="" />
</div>
<div id="index-26_">
<img id="index_26" src="Obrazki/index_26.jpg" width="195" height="21" alt="" />
</div>
<div id="index-27_">
<img id="index_27" src="Obrazki/index_27.jpg" width="143" height="21" alt="" />
</div>
<div id="index-28_">
<img id="index_28" src="Obrazki/index_28.jpg" width="760" height="11" alt="" />
</div>
<div id="index-29_">
jakiś tekst.

<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>


A jeszcze mam jedno pytanie tło oczywiście sie rozciąga w nieskończoność więc moge wprowadzać ile tekstu zechcę.
Ale czy da się otrzymac taki efekt żeby tło rozciągało się w nieskończonośc ale żeby było widac gdzie jest koniec tego tła?

To jest obecnie jak wygląda tło po wprowadzeniu komendy hidden i wywaleniu wysokości

Obecny efekt

A czy da sie zrobić żeby tło na tych samych zasadach sie rozciągało jak wyżej tylko żeby na dole było cos takiego?

Taki efekt
krzysztof_kf
17.04.2010, 12:30:20
Dodaj margin do 

[CSS] pobierz, plaintext 
  1. #Tabela_01 {
  2. margin: 0 0 30px 0; 
[CSS] pobierz, plaintext
Iron22
17.04.2010, 12:57:53
dałem

CODE
#Tabela_01 {
position:absolute;
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center;
margin:0 0 30px 0;


ale nie działa
krzysztof_kf
17.04.2010, 13:01:39
Wrzuć z diva to 

[CSS] pobierz, plaintext 
  1. position: absolute;
[CSS] pobierz, plaintext
Iron22
17.04.2010, 13:03:42
Tez nic

CODE
#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);
margin:0 0 30px 0;
}
krzysztof_kf
17.04.2010, 13:05:16
wrzuć spowrotem tam gdzie wcześniej był margin tylko wyrzuć position: absolute; czyli

[CSS] pobierz, plaintext 
  1. #Tabela_01 {
  2. left:100px;
  3. top:0px;
  4. width:760px;
  5. height:800px;
  6. text-align:center;
  7. margin:0 0 30px 0;
[CSS] pobierz, plaintext
Iron22
17.04.2010, 13:10:23
Po wyrzuceniu komendy position:absolute; strona mi się przesuneła całkiem w lewo i dalej nic z tłem na dole sie nie zmieniło
krzysztof_kf
17.04.2010, 13:18:44
Ale bajzer popraw na takie coś i usuń całkowicie selektory #Tabela_01 #index-29_ { i #Tabela_01 {

[CSS] pobierz, plaintext 
  1. body {
  2. margin: 0;
  3. }
  4.  
  5. #tabela_01 {
  6. margin: 0 auto;
  7. width: 760px;
  8. background:url(Obrazki/index_29.jpg);
  9. }
  10.  
  11. #index-29_ {
  12. width:760px;
  13. height:800px;
  14. font-family: Verdana, Arial, Helvetica, sans-serif;
  15. font-size: 18px;
  16. font-style: normal;
  17. color: #333333;
  18. text-align:center;
  19. margin:0 0 30px 0;
  20.  
[CSS] pobierz, plaintext
Iron22
17.04.2010, 13:37:10
dałem coś takiego i też nic

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Moja strona o mnie</title>
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-2" />
<meta name="keywords" content="Plecaki szkolne,pióra parkera,piórniki"/>
<meta http-equiv="content-language" content="pl"/>
<!-- ImageReady Styles (Bez nazwy 1) -->
<style type="text/css">
<!--
body{
margin: 0;}
#Tabela_01 {
width:760px;
text-align:center;
background:url(Obrazki/index_29.jpg;)

#index-29_ { overflow:hidden;

position:absolute;
left:0px;
top:373px;
width:760px;
height: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
text-align:center;
margin:0 0 30px 0;

}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

krzysztof_kf
17.04.2010, 13:40:51
Przeczytaj uważnie mój post napewno zrozumiesz nie domykasz klamr itp itd łap wklej to zamiast to co mi pokazałeś 

[CSS] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title> Moja strona o mnie</title>
  5. <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-2" />
  6. <meta name="keywords" content="Plecaki szkolne,pióra parkera,piórniki"/>
  7. <meta http-equiv="content-language" content="pl"/>
  8. <!-- ImageReady Styles (Bez nazwy 1) -->
  9. <style type="text/css">
  10. <!--
  11. body {
  12. margin: 0;
  13. }
  14.  
  15. #tabela_01 {
  16. margin: 0 auto;
  17. width: 760px;
  18. background:url(Obrazki/index_29.jpg;)
  19. }
  20.  
  21. #index-29_ {
  22. width:760px;
  23. height:800px;
  24. font-family: Verdana, Arial, Helvetica, sans-serif;
  25. font-size: 18px;
  26. font-style: normal;
  27. color: #333333;
  28. text-align:center;
  29. margin:0 0 30px 0;
[CSS] pobierz, plaintext
Iron22
17.04.2010, 14:01:07
całkeim mi rozwaliło stronę

CODE
body{
margin: 0;
}
#Tabela_01 {
margin: 0 auto;
width:760px;
text-align:center;
background:url(Obrazki/index_29.jpg;)

}
img{ border:none;}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
}

#index-02_ {
position:absolute;
left:1px;
top:0px;
width:191px;
height:239px;
}

#index-03_ {
position:absolute;
left:192px;
top:0px;
width:568px;
height:7px;
}

#index-04_ {
position:absolute;
left:192px;
top:7px;
width:59px;
height:239px;
}

#index-05_ {
position:absolute;
left:251px;
top:7px;
width:226px;
height:223px;
}

#index-06_ {
position:absolute;
left:477px;
top:7px;
width:41px;
height:239px;
}

#index-07_ {
position:absolute;
left:518px;
top:7px;
width:212px;
height:232px;
}

#index-08_ {
position:absolute;
left:730px;
top:7px;
width:30px;
height:239px;
}

#index-09_ {
position:absolute;
left:251px;
top:230px;
width:226px;
height:16px;
}

#index-10_ {
position:absolute;
left:1px;
top:239px;
width:191px;
height:7px;
}

#index-11_ {
position:absolute;
left:518px;
top:239px;
width:212px;
height:7px;
}

#index-12_ {
position:absolute;
left:0px;
top:246px;
width:760px;
height:11px;
}

#index-13_ {
position:absolute;
left:0px;
top:257px;
width:1px;
height:105px;
}

#index-14_ {
position:absolute;
left:1px;
top:257px;
width:759px;
height:21px;
}

#index-15_ {
position:absolute;
left:1px;
top:278px;
width:21px;
height:84px;
}

#index-16_ {
position:absolute;
left:22px;
top:278px;
width:110px;
height:63px;
}

#index-17_ {
position:absolute;
left:132px;
top:278px;
width:22px;
height:84px;
}

#index-18_ {
position:absolute;
left:154px;
top:278px;
width:212px;
height:63px;
}

#index-19_ {
position:absolute;
left:366px;
top:278px;
width:15px;
height:84px;
}

#index-20_ {
position:absolute;
left:381px;
top:278px;
width:195px;
height:63px;
}

#index-21_ {
position:absolute;
left:576px;
top:278px;
width:13px;
height:84px;
}

#index-22_ {
position:absolute;
left:589px;
top:278px;
width:143px;
height:63px;
}

#index-23_ {
position:absolute;
left:732px;
top:278px;
width:28px;
height:84px;
}

#index-24_ {
position:absolute;
left:22px;
top:341px;
width:110px;
height:21px;
}

#index-25_ {
position:absolute;
left:154px;
top:341px;
width:212px;
height:21px;
}

#index-26_ {
position:absolute;
left:381px;
top:341px;
width:195px;
height:21px;
}

#index-27_ {
position:absolute;
left:589px;
top:341px;
width:143px;
height:21px;
}

#index-28_ {
position:absolute;
left:0px;
top:362px;
width:760px;
height:11px;
}

#index-29_ {

width:760px;
height:800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
text-align:center;
margin:0 0 30px 0;
}
krzysztof_kf
17.04.2010, 14:02:25
daj jeszcze index.php
Iron22
17.04.2010, 14:13:31
Ale teraz potrzebuje serwera testowego żeby to sprawdzićsad.gif
Jak mam go ustawić?

Nie da się zrobić tego w inny sposób?
krzysztof_kf
17.04.2010, 14:13:58
Hmmm chodzi mi o zawartość powiem ci że najlepiej wrzuć to co masz na serwer i poproś o pomoc bo inaczej możemy tak rozmawiać do jutra ;/
Iron22
17.04.2010, 14:31:52
Tu jest cały plik

strona
krzysztof_kf
17.04.2010, 14:55:05
Zmień 

[HTML] pobierz, plaintext 
  1. 	</div>
  2.     <div id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
  3. 	</div>
[HTML] pobierz, plaintext


dodaj selektor dla css 

[CSS] pobierz, plaintext 
  1. #index_29 {
  2. margin-bottom: 100px;
  3. }
  4.  
[CSS] pobierz, plaintext


a tak po za tym polecam jakiś kurs css bo jest słabo pozdrawiam smile.gif
Iron22
17.04.2010, 19:51:51
Nie działa
CODE
</div>
<div id="index-29_" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />




tak wygląda kod i nie działa mi nadal

CODE
<div id="Tabela_01">
<div id="index-01_">
<img id="index_01" src="Obrazki/index_01.jpg" width="1" height="246" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="Obrazki/index_02.jpg" width="191" height="239" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="Obrazki/index_03.jpg" width="568" height="7" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="Obrazki/index_04.jpg" width="59" height="239" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="Obrazki/index_05.jpg" width="226" height="223" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="Obrazki/index_06.jpg" width="41" height="239" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="Obrazki/index_07.jpg" width="212" height="232" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="Obrazki/index_08.jpg" width="30" height="239" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="Obrazki/index_09.jpg" width="226" height="16" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="Obrazki/index_10.jpg" width="191" height="7" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="Obrazki/index_11.jpg" width="212" height="7" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="Obrazki/index_12.jpg" width="760" height="11" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="Obrazki/index_13.jpg" width="1" height="105" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="Obrazki/index_14.jpg" width="759" height="21" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="Obrazki/index_15.jpg" width="21" height="84" alt="" />
</div>
<div id="index-16_">
<img id="index_16" src="Obrazki/index_16.jpg" width="110" height="63" alt="" />
</div>
<div id="index-17_">
<img id="index_17" src="Obrazki/index_17.jpg" width="22" height="84" alt="" />
</div>
<div id="index-18_"> <a href="http://www.allegro.pl/show_user_auctions.php?uid=9581771" target="_blank">
<img id="index_18" src="Obrazki/index_18.jpg" width="212" height="63" alt="" /></a>
</div>
<div id="index-19_">
<img id="index_19" src="Obrazki/index_19.jpg" width="15" height="84" alt="" />
</div>
<div id="index-20_"> <a href="http://www.allegro.pl/show_user.php?uid=9581771" target="_blank">
<img id="index_20" src="Obrazki/index_20.jpg" width="195" height="63" alt="" /></a>
</div>
<div id="index-21_">
<img id="index_21" src="Obrazki/index_21.jpg" width="13" height="84" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="Obrazki/index_22.jpg" width="143" height="63" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="Obrazki/index_23.jpg" width="28" height="84" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="Obrazki/index_24.jpg" width="110" height="21" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="Obrazki/index_25.jpg" width="212" height="21" alt="" />
</div>
<div id="index-26_">
<img id="index_26" src="Obrazki/index_26.jpg" width="195" height="21" alt="" />
</div>
<div id="index-27_">
<img id="index_27" src="Obrazki/index_27.jpg" width="143" height="21" alt="" />
</div>
<div id="index-28_">
<img id="index_28" src="Obrazki/index_28.jpg" width="760" height="11" alt="" />
</div>
<div id="index-29_">
jakiś tekst
<ul>
<li>Pn-Pt 9.00- 17.00
<li>Sob-8.00- 13.00 </p>


<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>




CODE
<li>Pn-Pt 9.00- 17.00
<li>Sob-8.00- 13.00 </p>


<div id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>



jak wprowadzam div id to mi to podkreśla na czerono

CODE
src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
krzysztof_kf
17.04.2010, 19:57:22
Tylko ci podkreśla ? jeśli tak to daj do 

[CSS] pobierz, plaintext 
  1. #index_29 {
  2. border: 0px;
[CSS] pobierz, plaintext

Iron22
17.04.2010, 20:04:32
dalej mi podkreśla zły kod

ja mam tak

CODE
</div>
<div id="index-29_">

<div id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>



i tu włąśnie jak zmieniłem w drugiej linijce div img na div id to podkresla mi ten kawałek kodu

src="Obrazki/index_29.jpg" width="760" height="427" alt="" />

krzysztof_kf
17.04.2010, 20:22:34
Spakuj wszystko cały kod i pliki graficzne do .zip i podaj link do pobrania coś zdziałamy
Iron22
17.04.2010, 21:03:05
ok proszę

zip
krzysztof_kf
17.04.2010, 21:53:59
Wiele jest zastrzeżeń nadużywasz selektorów można to by było zrobić o połowę miej źle to wszystko skonsturowane nie ustawisz marginesu jeśli masz position: absolute; w divie ... zamiast position: absolute; dawaj dla elementów float: left; a po za tym kurs css ;/
Iron22
17.04.2010, 22:13:55
To moja pierwsza strona więc spodziewałem się że będzie trochę błędów. WIem że lepiej by było żeby style CSS były w oddzielnym pliku. Ale że ta strona nie będzie bardzo rozbudowana to wrzuciłem CSS do jednego pliku.

Czyli co mam pozmieniać? DO każdego stylu CSS ma być zamiast position: absolute; float:;left ?
:left?
krzysztof_kf
17.04.2010, 22:16:29
Najlepiej tak ale niekture elementy ci uciekają nie wiem po co niekture elementy tal pociołeś jak bym można dać jeden element ewentualnie użyć komendy dla niekturych elementów repeat-x
Iron22
17.04.2010, 22:44:17
Czyli to ma być coś takiego?

CODE
#Tabela_01 {
position:absolute;
left:65px;
top:0px;
width:760px;
height:800px;
text-align:center;
float: left;

}

#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
float:left;

}
#index-02_ {
position:absolute;
left:1px;
top:0px;
width:191px;
height:239px;
float:left;
}



Czy bez tego position :absolute?
krzysztof_kf
17.04.2010, 22:56:37
usuń position: absolute;
Iron22
18.04.2010, 20:04:38
usunołem i teraz mój obrazek wygląda tak:
float left

A kod tak

CODE
#Tabela_01 {
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center;
float:left;

}
img{ border:none;}
#index-01_ {

left:0px;
top:0px;
width:1px;
height:246px;
float:left;
}

#index-02_ {

left:1px;
top:0px;
width:191px;
height:239px;
float:left;
}

#index-03_ {

left:192px;
top:0px;
width:568px;
height:7px;
float:left;
}

#index-04_ {

left:192px;
top:7px;
width:59px;
height:239px;
float:left;
}

#index-05_ {

left:251px;
top:7px;
width:226px;
height:223px;
float:left;
}

#index-06_ {

left:477px;
top:7px;
width:41px;
height:239px;
float:left;
}

#index-07_ {

left:518px;
top:7px;
width:212px;
height:232px;
float:left;
}

#index-08_ {

left:730px;
top:7px;
width:30px;
height:239px;
float:left;
}

#index-09_ {

left:251px;
top:230px;
width:226px;
height:16px;
float:left;
}

#index-10_ {

left:1px;
top:239px;
width:191px;
height:7px;
float:left;
}

#index-11_ {

left:518px;
top:239px;
width:212px;
height:7px;
float:left;
}

#index-12_ {

left:0px;
top:246px;
width:760px;
height:11px;
float:left;
}

#index-13_ {

left:0px;
top:257px;
width:1px;
height:105px;
float:left;
}

#index-14_ {

left:1px;
top:257px;
width:759px;
height:21px;
float:left;
}

#index-15_ {

left:1px;
top:278px;
width:21px;
height:84px;
float:left;
}

#index-16_ {

left:22px;
top:278px;
width:110px;
height:63px;
float:left;
}

#index-17_ {

left:132px;
top:278px;
width:22px;
height:84px;
float:left;
}

#index-18_ {

left:154px;
top:278px;
width:212px;
height:63px;
float:left;
}

#index-19_ {

left:366px;
top:278px;
width:15px;
height:84px;
float:left;
}

#index-20_ {

left:381px;
top:278px;
width:195px;
height:63px;
float:left;
}

#index-21_ {

left:576px;
top:278px;
width:13px;
height:84px;
float:left;
}

#index-22_ {

left:589px;
top:278px;
width:143px;
height:63px;
float:left;
}

#index-23_ {

left:732px;
top:278px;
width:28px;
height:84px;
float:left;
}

#index-24_ {

left:22px;
top:341px;
width:110px;
height:21px;
float:left;
}

#index-25_ {

left:154px;
top:341px;
width:212px;
height:21px;
float:left;
}

#index-26_ {

left:381px;
top:341px;
width:195px;
height:21px;
float:left;
}

#index-27_ {

left:589px;
top:341px;
width:143px;
height:21px;
float:left;
}

#index-28_ {

left:0px;
top:362px;
width:760px;
height:11px;
float:left;
}

#index-29_ { overflow:hidden;
margin-bottom: 100px;
left:0px;
top:373px;
width:760px;
border:0px;
float:left;
}

#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background:url(Obrazki/index_29.jpg);

}
.styl1 {font-size: 24px}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Bez nazwy 1) -->
<div id="Tabela_01">
<div id="index-01_">
<img id="index_01" src="Obrazki/index_01.jpg" width="1" height="246" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="Obrazki/index_02.jpg" width="191" height="239" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="Obrazki/index_03.jpg" width="568" height="7" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="Obrazki/index_04.jpg" width="59" height="239" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="Obrazki/index_05.jpg" width="226" height="223" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="Obrazki/index_06.jpg" width="41" height="239" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="Obrazki/index_07.jpg" width="212" height="232" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="Obrazki/index_08.jpg" width="30" height="239" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="Obrazki/index_09.jpg" width="226" height="16" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="Obrazki/index_10.jpg" width="191" height="7" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="Obrazki/index_11.jpg" width="212" height="7" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="Obrazki/index_12.jpg" width="760" height="11" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="Obrazki/index_13.jpg" width="1" height="105" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="Obrazki/index_14.jpg" width="759" height="21" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="Obrazki/index_15.jpg" width="21" height="84" alt="" />
</div>
<div id="index-16_">
<img id="index_16" src="Obrazki/index_16.jpg" width="110" height="63" alt="" />
</div>
<div id="index-17_">
<img id="index_17" src="Obrazki/index_17.jpg" width="22" height="84" alt="" />
</div>
<div id="index-18_"> <a href="http://www.allegro.pl/show_user_auctions.php?uid=9581771" target="_blank">
<img id="index_18" src="Obrazki/index_18.jpg" width="212" height="63" alt="" /></a>
</div>
<div id="index-19_">
<img id="index_19" src="Obrazki/index_19.jpg" width="15" height="84" alt="" />
</div>
<div id="index-20_"> <a href="http://www.allegro.pl/show_user.php?uid=9581771" target="_blank">
<img id="index_20" src="Obrazki/index_20.jpg" width="195" height="63" alt="" /></a>
</div>
<div id="index-21_">
<img id="index_21" src="Obrazki/index_21.jpg" width="13" height="84" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="Obrazki/index_22.jpg" width="143" height="63" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="Obrazki/index_23.jpg" width="28" height="84" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="Obrazki/index_24.jpg" width="110" height="21" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="Obrazki/index_25.jpg" width="212" height="21" alt="" />
</div>
<div id="index-26_">
<img id="index_26" src="Obrazki/index_26.jpg" width="195" height="21" alt="" />
</div>
<div id="index-27_">
<img id="index_27" src="Obrazki/index_27.jpg" width="143" height="21" alt="" />
</div>
<div id="index-28_">
<img id="index_28" src="Obrazki/index_28.jpg" width="760" height="11" alt="" />
</div>
<div id="index-29_">
jakiś tekst


<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


macie jakieś pomysły?

dobra chyba sie z tym nic nie da zrobićsad.gif
To moze powieccie mi tylko jak mam ta stronę wyśrodkowac i co zrobic żeby prawidłowo wyświetlała się w przeglądarce Internet Explorer?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.