Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] wszystko w jednej kupie
Forum PHP.pl > Forum > Po stronie przeglądarki
skali
13.02.2008, 17:11:07
witam. mam problem taki ze dodajac doctype dolna czesc przechodzi tam gdzie gorna.

http://images27.fotosik.pl/157/feff863648302587med.jpg

dlaczego cos takiego sie dzieje? dziekuje z gory za pomoc
punkomuzykant
14.02.2008, 11:35:19
na 100% coś zepsułeś smile.gif samo się nie stało, zresztą poka kod
skali
14.02.2008, 13:31:14
bez doctype klik
z doctype klik
Jarod
14.02.2008, 13:57:52
Masz błąd w kodzie. Bez doctype przeglądarki lubią się dziwnie zachowywać. Szczególnie IE.
skali
14.02.2008, 14:51:59
Cytat(Jarod @ 14.02.2008, 13:57:52 ) *
Masz błąd w kodzie.


co to ma znaczyc? pokaz mi palcem gdzie, bo ja nie mam pomyslu gdzie szukac...
Jarod
14.02.2008, 16:01:42
Cytat(skali @ 14.02.2008, 14:51:59 ) *
co to ma znaczyc? pokaz mi palcem gdzie, bo ja nie mam pomyslu gdzie szukac...



[HTML] pobierz, plaintext 
  1. #srodeklewadol {
  2. 	background-color: #111111;
  3. 	width: 470px;
  4. 	height: 80px;
  5. 	border: #777777 3px solid;
  6. 	padding: 7px 12px 7px 12px;
  7. clear: both;
  8. }
[HTML] pobierz, plaintext

I już jest ok.
skali
14.02.2008, 17:01:25
dziala super ale mam nastepny problem. a mianowicie sztywna dlugosc div'a. jak zrobic zeby ustawic np 400px ale jak bedzie wiecej teksty to zeby nie nachodzilo na div'a znajdujacego sie nizej tylko ten dolny sie posunal troche nizej. odrazu mowie ze min-height ani 100% nie dziala
Jarod
14.02.2008, 17:14:16
Cytat(skali @ 14.02.2008, 17:01:25 ) *
dziala super ale mam nastepny problem. a mianowicie sztywna dlugosc div'a. jak zrobic zeby ustawic np 400px ale jak bedzie wiecej teksty to zeby nie nachodzilo na div'a znajdujacego sie nizej tylko ten dolny sie posunal troche nizej. odrazu mowie ze min-height ani 100% nie dziala



Ja bym do tego wogóle inaczej podszedł. Ale najprościej tak:

Sprawdź:
[HTML] pobierz, plaintext 
  1. #srodeklewadol {
  2. 	background-color: #111111;
  3. 	width: 470px;
  4. 	height: 80px;
  5. 	border: #777777 3px solid;
  6. 	padding: 7px 12px 7px 12px;
  7. 	margin: 300px 0 0 0;
  8. float: left;
  9. clear: both;
  10. }
[HTML] pobierz, plaintext


EDIT: Chyba jednak nie zadziała. Jak w drugiej kolumnie jest dłuższy tekst. Szkoda że nie ma tego linku. Nie mam pewności czy to co miałem w koszu nie miało usuniętych pewnych fragmentów. Na szybko napisałem prostu układ i możesz się na tym wzorować.
Jak coś to wieczorem (jak dasz linka) to najwyżej pomogę Ci z Twoim kodem.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html><head><title>xxx</title>
  3.  
  4.  
  5.  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <link rel="Stylesheet" type="text/css" href="xxx/style.css"></head><body>
  8.  
  9.  
  10. <div id="container">
  11. 	<div id="header">Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>
  12.  
  13. 	<div id="content">
  14. 		<div id="left">Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>
  15. 		<div id="right">Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>		
  16. 		<div id="lastproject">Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>
  17. 	</div>
  18.  
  19. 	<div id="footer">Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>
  20. </div>
  21.  
  22.  
  23.  
  24. </body></html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body {
  2. 	background-color: #000000;
  3. 	font-size: 11px;
  4. 	color: #bbbbbb;
  5. 	font-family: verdana, sans-serif;
  6. 	margin: 0 auto;
  7. 	background-image: url(images/bg.png);
  8. }
  9.  
  10.  
  11.  
  12. #container {margin: 0 auto;width: 900px; background-color: white;}
  13. #content {float: left;}
  14. #left {width: 300px;background-color: yellow;float: left;}
  15. #right {margin-left: 100px;width: 300px;background-color: pink;float: left;}
  16. #lastproject {width: 200px; background-color: blue; float: right;}
  17. #header {background-color: green;}
  18. #footer {background-color: red; clear: both;}
[HTML] pobierz, plaintext
skali
14.02.2008, 17:38:05
Cytat(Jarod @ 14.02.2008, 17:14:16 ) *
Ps. Jak prosisz o pomoc to nie usuwaj linka. Dobrze że miałem w koszu zapisaną stronę:)

tam stopki nie bylo wiec i tak by sie nie przydalo (chyba) tongue.gif poprostu to wszystko wchodzi na stopke a jak chce zeby ten glowny div #srodek rozciagal sie razem z zawartoscia
Jarod
14.02.2008, 22:06:10
Podałem Ci przykład. Dostosuj sobie do swoich potrzeb.
skali
14.02.2008, 23:00:47
Cytat(Jarod @ 14.02.2008, 22:06:10 ) *
Podałem Ci przykład. Dostosuj sobie do swoich potrzeb.

no i zrobilem, troche inymm sposobem ale jest biggrin.gif dziala jak tralala smile.gif dziekuje bardzo za zainteresowanie i pomoc
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.