[CSS] Zmiana układu strony Opcje

[Tares]

Edytując poniższy szablon:
http://www.freecsstemplates.org/preview/glazed

próbuję osiągnąć następujący efekt: Div z treścią (#content w pliku css) ma się rozciągać (nie ma mieć ustalonej szerokości w px) na podstronach, na których nie występuje pierwszy sidebar ( ten zawierający Recent post i comments). Na stronach, na których pierwszy siderbar nie występuje div z treścią (#content) ma się rozszerzać o szerokość pierwszego sidebara.

Próbowałem w pliku css zmienić szerokość diva #content na płynną, ale powoduje to zepchnięcie obu siderbarów na dół, div rozszerza się za bardzo.

[Damonsson]

W samym CSS jest to chyba niemożliwe. Ale głowy sobie nie dam uciąć (IMG:style_emoticons/default/tongue.gif)

edit: Straciłbym głowę (IMG:style_emoticons/default/wink.gif)

Spróbuj tak:

[HTML] pobierz, plaintext 
<div>
     <div id="right"> Usuń mnie :) </div>          
     <div id="left"> Lewa tresc, lalala lalalaal lalal alalalal lalal lalala lalala lalal lla lalallla lal lal al alal alla   
     </div> 
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#left {
    background: #f00;
    overflow: hidden;
}
#right {
    background: #0f0;  
    float: right;
    width: 300px;
 }
[CSS] pobierz, plaintext 

Ten post edytował Damonsson 5.08.2011, 23:16:10

[Tares]

Niestety próbowałem użyć overflow: hidden, jednak struktura pliku html, który edytuję, jest nieco bardziej skomplikowana niż dwa divy i nadal spycha sidebary na dół.
Może wstawię kod, bo pewnie nie każdemu chcę się ściągać cały szablon i patrzeć co tam jest.


Style odpowiedzialne za oba siderbary i content:

[HTML] pobierz, plaintext 
/* Sidebar One */
#content {
	float: left;
	width: 430px;
	height: 800px;
	min-height: 800px;
	padding: 0 0 0 20px;
}
#sidebar1 {
	float: left;
	width: 250px;
	padding: 0 0 0 20px;
}
 
/* Sidebar Two */
 
#sidebar2 {
	float: right;
	width: 180px;
	padding: 0 20px 0 0;
}
[HTML] pobierz, plaintext 

Kod html:

[HTML] pobierz, plaintext 
<div id="wrapper">
	<div id="header">	
	</div>
	<div id="page">
		<div id="bgtop"></div>
		<div id="bgbottom">
		<div id="content">
				<div class="post">
							</div>
			</div>
 
			<div id="sidebar1" class="sidebar">	
			</div>
			<div id="sidebar2" class="sidebar">
									</div>
						<div style="clear: both;">&nbsp;</div>
		</div>
	</div>
 
		<div id="footer">
 
	</div>
 
</div>
[HTML] pobierz, plaintext 

Ten post edytował Tares 5.08.2011, 23:54:32

[Damonsson]

Chyba kpisz (IMG:style_emoticons/default/wink.gif)

Podpowiedź nr 1: Nadaj <div> [temu który obejmuje tylko left(content) i right(sidebar)] taką szerokość jaką ma content i sidebar1 łącznie.

Podpowiedź nr 2: Nie zapomnij o paddingach.

Podpowiedź nr 3: Nie zapomnij w ogóle utworzyć tego DIVa

Podpowiedź nr 4: Nie zapomnij zamienić miejscami sidebar z content

A tu screen na zachętę: http://oi56.tinypic.com/21jmvs9.jpg (IMG:style_emoticons/default/smile.gif)

[Tares]

Podpowiedź nr 4: Nie zapomnij zamienić miejscami sidebar z content

Chyba nie bardzo rozumiem podpowiedź nr 4.
Na sposób z utworzeniem sidebara obejmującego content i sidebar 1 wpadłem już wcześniej, ale sukces jest połowiczny.

Sytuacja wygląda tak:

Utworzyłem tego diva i nadałem mu odpowiednią szerokość. Cel został częściowo osiągnięty. Po usunięciu tego pierwszego siderbara content rozszerza się o jego szerokość. Jednakże, gdy wklejam go ponownie (tego siderbara) to spada on na dół. Chciałbym, żeby po ponownym wklejeniu tego sidebara szerokość content po prostu dopasowała się do sytuacji ( w której sidebar 1 jest (zmniejsza szerokość) lub go nie ma (zwiększa szerokość).

Mimo wszystko dzięki za odpowiedź Damonsson (IMG:style_emoticons/default/smile.gif)

[Damonsson]

[HTML] pobierz, plaintext 
<div id="wrapper">
	<div id="header">	
	</div>
	<div id="page">
		<div id="bgtop"></div>
		<div id="bgbottom">
 
<div id="obejmuję dwa divy">
     <div id="sidebar1" class="sidebar">	
     </div>
 
     <div id="content">
	<div class="post">
	</div>
     </div>
</div>
 
<div id="sidebar2" class="sidebar">
</div>
						<div style="clear: both;"> </div>
		</div>
	</div>
 
		<div id="footer">
 
	</div>
 
</div>
[HTML] pobierz, plaintext 

To znaczy, zamień miejscami.

Pokaż on-line to co zrobiłeś, bo nie bardzo wierzę, że w ogóle coś zrobiłeś (IMG:style_emoticons/default/smile.gif)

Ten post edytował Damonsson 6.08.2011, 11:03:07

[Tares]

http://********.pl/glazed2/index.html

Ten post edytował Tares 6.08.2011, 12:15:55

[Damonsson]

Dodaj ten sidebar1

[Tares]

Dodałem zamieniając miejscami z content.

[Damonsson]

[CSS] pobierz, plaintext 
#sidebar1 {
    float: right;
    padding: 0 0 0 20px;
    width: 250px;
}
[CSS] pobierz, plaintext 

[CSS] pobierz, plaintext 
#content {
    height: 800px;
    min-height: 800px;
    overflow: hidden;
    padding: 0 0 0 20px;
}
[CSS] pobierz, plaintext 

Podmień (IMG:style_emoticons/default/smile.gif)

Ten post edytował Damonsson 6.08.2011, 11:58:20

[Tares]

Ok, teraz wszystko działa jak należy. (IMG:style_emoticons/default/thumbsupsmileyanim.gif)
+ 1