Witaj Gościu ( Zaloguj | Rejestruj )

 
 Reply to this topicStart new topic
> Wileki problem z rozciąganiem się strony względem tekstu!, Proszę o szybką pomoc.

 
Kamcio
post 15 Apr 2009, 18:56
Post #1

Grupa: Użytkownicy
Postów: 15
Dołączył: September 25 07
Nr użytkownika: 1,749
Reputacja: BrakBrak


Witam!
Problem mam bardzo kłopotliwy i zmuszony jestem prosić Was o pomoc. A więc tu są 2 obrazki którymi postaram się zobrazować problem:

http://img264.imageshack.us/img264/1193/33790947.jpg

http://img11.imageshack.us/img11/1620/49117525.jpg

Jak widać na pierwszym obrazku tekst zupełnie wyjeżdża poza stronę a powinien się kończyć tam gdzie jest czerwona linia. Problem jest jednak dużo większy jak popatrzymy na rozkład div'ów na obrazku drugim. Staram się tak zrobić stronę, aby tekst z div'a 03 kończył się na div'ie 06. Chodzi mi o to, aby div 03 powtarzał się do momentu kiedy w div'ie 06 będzie dostatecznie dużo miejsca, aby tekst mógł "przeskaczyć" na niego i tam się skończyć. Oczywiście chciałbym także, aby div'y 02 i 04 rozszerzały się razem z 03. Z góry dziękuję!
Go to the top of the page
 
+Quote Post

 
JaRo*
post 15 Apr 2009, 19:08
Post #2

Grupa: Moderator
Postów: 746
Dołączył: April 24 07
Skąd: Głogów
Nr użytkownika: 83
Reputacja: 25 pkt25 pkt


Po pierwsze smile.gif Określiłeś stałą wysokość dla tego diva z tekstem? Tło jest powtarzalne?

Po drugie daj diva 02 03 04 w jednego, żeby się rozciągały razem.

I wrzuć kod może? smile.gif
Go to the top of the page
 
+Quote Post

 
Kamcio
post 16 Apr 2009, 19:49
Post #3

Grupa: Użytkownicy
Postów: 15
Dołączył: September 25 07
Nr użytkownika: 1,749
Reputacja: BrakBrak


Index:

CYTAT
<div id="container">

<div id="logo"></div>

<div id="long">
<div id="left1"></div>

<div id="main1">Lorem ipsum dolor sit amet</div>
<div id="right1"></div>
</div>

<div id="left2">
<div id="menu">
<div class="a1"></div>
<div class="a2"><a href="1.html" class="a2" style="border: 0"></a></div>
<div class="a3"><a href="1.html" class="a3" style="border: 0"></a></div>
<div class="a4"><a href="1.html" class="a4" style="border: 0"></a></div>
<div class="a5"><a href="1.html" class="a5" style="border: 0"></a></div>
<div class="a6"><a href="1.html" class="a6" style="border: 0"></a></div>
<div class="a7"><a href="1.html" class="a7" style="border: 0"></a></div>
<div class="a8"><a href="1.html" class="a8" style="border: 0"></a></div>
<div class="a9"><a href="1.html" class="a9" style="border: 0"></a></div>
<div class="a10"><a href="1.html" class="a10" style="border: 0"></a></div>
<div class="a11"><a href="1.html" class="a11" style="border: 0"></a></div>
<div class="a12"><a href="1.html" class="a12" style="border: 0"></a></div>
<div class="a13"><a href="1.html" class="a13" style="border: 0"></a></div>
<div class="a14"><a href="1.html" class="a14" style="border: 0"></a></div>
</div>
</div>
<div id="main2"></div>
<div id="right2"></div>

<div id="foot"></div>

</div>


CSS (tu tylko to co najważniejsze):

CYTAT
#long {
width:1008px;
height:11px;
}

#main1 {
background:url(images/main_01.gif) repeat-y;
height:11px;
width:444px;
float:left;
}

#main2 {
background:url(images/main_02.gif);
height:281px;
width:444px;
float:left;
}

#left1 {
background:url(images/left_01.gif) repeat-y;
height:11px;
width:309px;
float:left;
}

#left2 {
background:url(images/left_02.gif);
height:281px;
width:309px;
float:left;
}

#right1 {
background:url(images/right_01.gif) repeat-y;
height:11px;
width:255px;
float:left;
}

#right2 {
background:url(images/right_02.gif);
height:281px;
width:255px;
float:left;
}

#foot {
background:url(images/foot.gif) no-repeat;
width:1008px;
height:178px;
clear:both;
}


- Long to div który zawiera te 3 paski, ale nie mam pojecia jak zrobić aby sie wszystkie naraz rozciągały.
Go to the top of the page
 
+Quote Post

 
lisekpk
post 17 Apr 2009, 05:23
Post #4

Grupa: Użytkownicy
Postów: 23
Dołączył: April 9 09
Nr użytkownika: 3,996
Reputacja: BrakBrak


To nie lepiej by było, wziąć 1px z samego dołu tego obrazka 06, a następnie zrobić z niego container?
Wtedy po nadmiarze tekstu container by się powtarzał i by było wszystko git wink.gif

PS. Wrzuć może całość na jakiś serwer, to po południu spróbuje cosik zrobic z tym.
Go to the top of the page
 
+Quote Post

 
Kamcio
post 17 Apr 2009, 13:27
Post #5

Grupa: Użytkownicy
Postów: 15
Dołączył: September 25 07
Nr użytkownika: 1,749
Reputacja: BrakBrak


To też jest bardzo dobra możliwość, ale jak to zrobić, żeby wraz z powtarzaniem się paska na dole div'a 06, powtarzał się także div złożony z 02, 03 i 04?
Go to the top of the page
 
+Quote Post

 
mieszkos
post 17 Apr 2009, 14:52
Post #6

Grupa: Użytkownicy
Postów: 25
Dołączył: September 2 08
Nr użytkownika: 3,514
Reputacja: 4 pkt4 pkt


CYTAT(Kamcio @ 17 Apr 2009, 14:27) *
To też jest bardzo dobra możliwość, ale jak to zrobić, żeby wraz z powtarzaniem się paska na dole div'a 06, powtarzał się także div złożony z 02, 03 i 04?



możesz np zrobić tak ;>

KOD
#container {
overflow: hidden;
width: 600px;
}
#box {
width: 500px;
background: red;
}
#box2 {
width: 100px;
background: blue;
}
#box, #box2 {
float: left;
padding-bottom:2000px;
margin-bottom:-2000px;
}


mam nadzieje, że wiesz jak to wykorzystać ;>
Go to the top of the page
 
+Quote Post

 
lisekpk
post 18 Apr 2009, 10:34
Post #7

Grupa: Użytkownicy
Postów: 23
Dołączył: April 9 09
Nr użytkownika: 3,996
Reputacja: BrakBrak


CYTAT(mieszkos @ 17 Apr 2009, 15:52) *
możesz np zrobić tak ;>

Ale to nie jest najlepszy pomysł ^^
Bo np. jak masz bg-image? To wtedy już nie jest tak hip-hop.
Chociaż można to użyć do containera i wtedy powinno działać.
Go to the top of the page
 
+Quote Post

 
mieszkos
post 18 Apr 2009, 11:38
Post #8

Grupa: Użytkownicy
Postów: 25
Dołączył: September 2 08
Nr użytkownika: 3,514
Reputacja: 4 pkt4 pkt


CYTAT(lisekpk @ 18 Apr 2009, 11:34) *
Bo np. jak masz bg-image?


Bo jak mam bg-image... to co ?;>
Go to the top of the page
 
+Quote Post

 
lisekpk
post 18 Apr 2009, 12:22
Post #9

Grupa: Użytkownicy
Postów: 23
Dołączył: April 9 09
Nr użytkownika: 3,996
Reputacja: BrakBrak


Masz obrazek w tle i Ci się zacznie powtarzać do jakiegoś miejsca, co nie będzie za ładnie wyglądać
Go to the top of the page
 
+Quote Post

 
mieszkos
post 18 Apr 2009, 13:46
Post #10

Grupa: Użytkownicy
Postów: 25
Dołączył: September 2 08
Nr użytkownika: 3,514
Reputacja: 4 pkt4 pkt


CYTAT(lisekpk @ 18 Apr 2009, 13:22) *
Masz obrazek w tle i Ci się zacznie powtarzać do jakiegoś miejsca, co nie będzie za ładnie wyglądać


O_o... to ustaw żeby się nie powtarzał
Go to the top of the page
 
+Quote Post

 
lisekpk
post 18 Apr 2009, 14:49
Post #11

Grupa: Użytkownicy
Postów: 23
Dołączył: April 9 09
Nr użytkownika: 3,996
Reputacja: BrakBrak


Hah widzę, że się nie dogadamy tongue.gif
Skoro się nie będzie powtarzał to kolumny nie będą równe. o!
Go to the top of the page
 
+Quote Post

 
mieszkos
post 18 Apr 2009, 16:44
Post #12

Grupa: Użytkownicy
Postów: 25
Dołączył: September 2 08
Nr użytkownika: 3,514
Reputacja: 4 pkt4 pkt


CYTAT(lisekpk @ 18 Apr 2009, 15:49) *
Hah widzę, że się nie dogadamy tongue.gif
Skoro się nie będzie powtarzał to kolumny nie będą równe. o!


w takim razie jakoś dziwnie piszesz.
Go to the top of the page
 
+Quote Post
 

Reply to this topicStart new topic

 

- Wersja Lo-Fi Aktualny czas: February 11 12 - 03:38
IPB developed by: eXtremepixels
Powered By IP.Board © 2012  IPS, Inc.
Licensed to: Grafikarto.pl
- - - -