Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Float
Forum PHP.pl > Forum > Przedszkole
Mody23
8.05.2011, 09:30:31
Witam!

Chciałbym stworzyć podział strony www. Miałoby to wyglądać mniej więcej tak:



Duża część zajmowała by powiedzmy 75% szerokości strony, a box po prawej stronie 25%. Tylko jak mogę uzyskać taki efekt ? Próbuję za pomocą float, tyle tylko, że nie wiem do końca jak to powinno wyglądać questionmark.gif

Pozdrawiam!
blooregard
8.05.2011, 09:49:22
Przykładowo tak:

http://www.456bereastreet.com/lab/developi...sslayout/2-col/
Mody23
8.05.2011, 10:00:33
Może inaczej.

Mam coś takiego:

Kod
.block {
width: 20%;
height: auto;
}

.float { float: right; }


I teraz tekst który ma zająć moje 80% powierzchni strony, nie oznaczam żadną klasą z .css więc wygląda to normalnie. Później po tym tekście, który zajmuje 80% powierzchni strony dodaję:

[HTML] pobierz, plaintext 
  1. <div class="block float">
  2. test test test
  3. </div>
[HTML] pobierz, plaintext


efekt: CLICK

Zupełnie inny! sad.gif bo nie ma to być pod sobą, tylko obok siebie, tak jakby tabela. Co robię źle?
Daiquiri
8.05.2011, 10:13:07
Nie wiem co Ty tam nakombinowałeś z DIVami, ale opływanie uzyskujemy tak:
[HTML] pobierz, plaintext 
  1. <div style="float: left;">zawartość</div>
  2. <div >zawartość</div>
[HTML] pobierz, plaintext
lobopol
8.05.2011, 10:15:10
Nie
[HTML] pobierz, plaintext 
  1. <div id="kontener">
  2. 		<div id="tresc">
  3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  4.  
  5. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  6. 		<div class="block float">
  7. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  8. 		</div>
  9.  
  10. 		</div>
  11.  
  12. 		<div id="stopka">
  13. <p>Copyright by <b>Michael2318</b> - Wszelkie prawa zastrzeżone.</p>
  14. 		</div>
  15.  
  16. 		</div>
[HTML] pobierz, plaintext

a
[HTML] pobierz, plaintext 
  1. <div id="kontener">
  2. <div>
  3. 		<div id="tresc">
  4. <div class='lewo'>
  5. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  6.  
  7. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  8. </div>
  9. 		<div class="block float">
  10. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  11. 		</div>
  12.  
  13. 		</div>
  14. </div>
  15. 		<div id="stopka">
  16. <p>Copyright by <b>Michael2318</b> - Wszelkie prawa zastrzeżone.</p>
  17. 		</div>
  18.  
  19. 		</div>
[HTML] pobierz, plaintext


i .lewo ma mieć width:80%, float: left a klasa float też float:left nie right

i popatrz na paddingi
Mody23
8.05.2011, 10:19:59
lobopol, Twój sposób też trochę jakby nie działa. Zobacz: CLICK
lobopol
8.05.2011, 10:21:18
A popatrz co ci robią paddingi, Dodaj również clear:both do stopki
Mody23
8.05.2011, 10:25:47
Rzeczywiście, teraz szkielet już jest. Jak to tylko oddzielić od siebie, jakoś sensownie ? Żeby się tak nie zlewało ?
lobopol
8.05.2011, 10:28:53
w divach levo i block float wpakuj jescze jednego diva który będzie miał tylko padding ustawiony
np.
<div class="lewo"><div class="pad">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
</div></div>
.pad{padding:10px}
Mody23
8.05.2011, 10:37:33
No zrobiłem tak jak pisałeś, ale padding zareagował tylko od topa :/ A tekst jako tako się nie oddzielił. Może powinienem zmniejszyć te 80% i 20% questionmark.gif
lobopol
8.05.2011, 10:39:02
div#tresc * {
padding-left: 0;
padding-right: 0;
}
to ci nadpisuje paddingi boczne
Mody23
8.05.2011, 10:45:29
Dzięki! tongue.gif A wiesz może jak usunąć odstęp nad nagłówkiem? tongue.gif
konole
8.05.2011, 10:48:11
Odnoszę wrażenie, że sobie trochę z nas kpisz tymi pytaniami.

http://www.w3schools.com/css/

Zaglądałeś chociaż?
Mody23
8.05.2011, 10:53:54
Nie zaglądałem bo to co tam jest napisane mi w niczym nie pomaga. Dodając padding-top, odstęp nadal istnieje:

Kod
#top {
    background:url('top.png');
    height:80px;
    margin-top:0px;
    padding-top:0px;
}
lobopol
8.05.2011, 11:02:59
To nagłówek <h1><a href="index.htm">Michael2318</a></h1> i jego ostylowanie ci psuje wygląd daj h1 margin:0
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.