Forum PHP.pl > spadający div...

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

mytenchi

27.12.2007, 05:45:57

Witam !

Zaczalem pisac wlasna strone (na divach -> nigdy dotad tego nie robilem) i za chiny nie moge poradzic sobie z opadajcym divem "tresc" jak i ustawieniem div id="topik" po srodku strony

/of course google nie jest mi obce, przegladalem sporo postow ale nie znalazlem odpowiedzi na moj przypadek -.-"

html:

[HTML] pobierz, plaintext 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Štenchi</title>
<link href="xstyl.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="topik">
  <div id="logo">logo</div>
    <div id="menu">
     <ul>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
     </ul>
</div>
<div id="tresc">tresc</div>
<div id="stopka">stopka</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

i css:

[HTML] pobierz, plaintext 
@charset "utf-8";
body {
	font-family: Verdana,;
	font-size: 10px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
 
#topik {
	width: 700px;
	border: 1px solid;
	margin: 0 auto 0 auto;
 
}
#logo {
	background-color: #CCCCCC;
}
#menu {
	background-color: #FFFFFF;
	float: left;
	width: 150px;
	overflow: hidden;
}
#tresc {
	float: left;
	width: 550px;
	overflow: hidden;
}
#stopka {
	clear: both;
	width: 100%;
	background-color: #CCCCCC;
}
[HTML] pobierz, plaintext

nevt

27.12.2007, 08:24:23

W FF2, O9, IE7, IE6 wszystko jest ok... wszystko wyświetla się prawidłowo - skopiowałem twój kod i sprawdziłem... topik jest wycentrowany w poziomie, tresc jest na prawo od menu, logo i stopka są na 100% topiku... więc w czym jest twój problem ??? może wystaw to gdzieś i pokaż, albo zrób zrzut ektranu ?? w czym to oglądasz ?

mytenchi

27.12.2007, 16:03:09

niby teraz jest wszystko wporządku ale gdy dodam w stylu ramke do menu lub odstep 3px to wszystko sie sypie i tresc wchodzi pod menu...

[HTML] pobierz, plaintext 
#menu {
	background-color: #FFFFFF;
	float: left;
	width: 150px;
	overflow: hidden;
padding: 3px; /*  odstep 3px */
}
[HTML] pobierz, plaintext

//kombinuje dalej..
---------------------------------
no..

teraz wynik moich prac to:
mytenchi.ovh.org/portfolio/index.html

styl:
mytenchi.ovh.org/portfolio/xstyl.css

i osobny plik css dla menu:
mytenchi.ovh.org/portfolio/xmenu.css

Ale niestety nadal gdy chce cos zmienic w css dla div "tresc" np padding: 3px; to div ten spada pod to cholerne menu.... grr ;s

tu Przykład strony po dodaniu odstepu 3px...
mytenchi.ovh.org/spadlo/index.html

nevt

27.12.2007, 17:05:59

no i wszystko działa tak jak powinno... poczytaj sobie o CSS Box Model, to zrozumiesz o co chodzi...

mytenchi

27.12.2007, 18:13:13

Cytat(nevt @ 27.12.2007, 17:05:59 )

no i wszystko działa tak jak powinno...

no wlasnie nie dziala ! -div 'tresc' nie opada w mytenchi.ovh.org/portfolio/ bo nie zmienialem/ nie dodawalem zadnych parametrow w stylu do tego div'a

Cytat(nevt @ 27.12.2007, 17:05:59 )

poczytaj sobie o CSS Box Model, to zrozumiesz o co chodzi...

przeczytalem jednak nadal nie rozumiem co zrobić by ten div nie wchodzil pod menu..

nevt

27.12.2007, 22:53:14

parametr width (oraz height) NIE ZAWIERA W SOBIE: padding, border-width oraz margin...
czyli jeżeli w div o width 700 px wsadzasz dwa div o szerokościach 150 px + 550 px a potem DODAJESZ do nich jakieś padding, margin lub border i jeszcze publicznie dziwisz się czemu jedno w drugim się nie mieści, to ja ciebie nie rozumiem przyjacielu - po chińsku ci to wytłumaczyć czy jak

mytenchi

28.12.2007, 01:21:17

.......wielkie dzięki za tak "łopatologiczne" wytłumaczenie tego.. faktycznie teraz to ma sens (-.^)"

sorry jesli Cie za bardzo zirytowalem =P

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.