+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [HTML+CSS]Scroll (/thread-html-css-scroll)
[HTML+CSS]Scroll - Leniwy - 18-03-2010
Mam taki układ strony:
http://img211.imageshack.us/img211/2136/kontenery.jpg
I problem jest taki, że nie pojawiają mi się scrolle. A chcę, żeby kiedy czerwony kontener wyjdzie poza krawędź po bokach strony pojawiał się scroll... Problem być może trywialny, ale ja nie potrafię sobie poradzić.
I jeszcze dwa pytania: czy da się zrobić żeby po divie nie było znaku nowej linii? Czy da się aby przed i po akapicie <'p'> nie było odstępu?
RE: [HTML+CSS]Scroll - sidneey - 18-03-2010
dodaj w css środkowego kontenera:
overflow: auto;
scrolle pojawią się jeżeli zawartość będzie miała większe rozmiary niż kontener
RE: [HTML+CSS]Scroll - Leniwy - 19-03-2010
Oczywiste, niedziałające rozwiązania możecie darować ;]
RE: [HTML+CSS]Scroll - Dhofca - 19-03-2010
Sidneey dobrze Ci doradził więc nie wiem dlaczego się bulwersujesz. Po dodaniu overflow: auto; działa, sprawdziłem:
Kod:
<!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" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#ogolny {
position:fixed;
top:0;
left:0;
width:1000px;
height:1000px;
border:1px blue solid;
}
#zew {
position: relative;
width:400px;
height:700px;
margin: 0 auto;
border:1px red solid;
}
#wew {
position:relative;
width:400px;
height:500px;
border:1px black solid;
overflow:auto;
}
</style>
</head>
<body>
<div id="ogolny">
<div id="zew">
<div id="wew">Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.
Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.Tekst wychodzący poza.</div>
</div>
</div>
</body>
</html>Co do odstępów pomiędzy akapitami, pobaw się tym:
Kod:
p {
line-height:0px;
}A nowe linie po divie? Nie do końca wiem o co Ci chodzi, ale prawdopodobnie wystarczy zresetować css. Wpisz w google "reset css" i wklejaj sobie zawsze do plików ze stylami, wyzeruje Ci wszelkie marginesy narzucane przez przeglądarkę.
RE: [HTML+CSS]Scroll - Leniwy - 19-03-2010
Działa pod warunkiem, że ogólny ma stałą wielkość. Zerknij jak jest na moim planie ;].
RE: [HTML+CSS]Scroll - Dhofca - 19-03-2010
Zmieniłem u siebie na width:100% i height:100% i również działa.
RE: [HTML+CSS]Scroll - Leniwy - 21-03-2010
Wasze rozwiązanie nie jest do mojego problemu. Chodzi o to żeby scrolle pojawiały się po bokach strony jak kontenery zawarte w zewnętrznym poza nią wyjdą. Rozumiecie? Odpalcie sobie wasze rozwiązanie i zmniejszcie rozmiar okna przeglądarki. Jak czerwony kontener wychodzi poza strone to pojawiają się scrolle? Nie ;]. Macie na to jakiś inny pomysł? Bo to obszedłem, ale wolałbym wiedzieć. Aczkolwiek teraz zależy mi bardziej na rozwiązaniu mojego drugiego problemu:
Mam teraz inny problem:
Używam background-image do jednego z kontenerów o wymiarach X i Y, a problem jest taki, że ten obrazek z tla wyświetla się tylko pod zapełnioną częścią kontenera. Nawet jak do tego kontenera wrzucę następny o takich samych wymiarach, który powinien go zapełnić , to tak się nie dzieje...
Problem jest konkretnie taki, że nawet jak kontenerowi nadam wielkość dajmy na to 500 na 500 to jeżeli nie będzie miał zawartości to i tak będzie zajmował 0 na 0. Da się go jakoś zmusić, żeby jednak zajmował 500 na 500 a nie tyle ile mu potrzeba?
No i raz działa a raz nie. Nie rozumiem tego... Może wkleję kod:
Kod:
#okno_background{
position:relative;
width: 850px;
height 450px;
left: 5px;
background-image: url(oknoglowne2.png);
background-repeat: no-repeat;
padding-top: 40px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
}
...
<div id="okno_background">
adsasd
</div>I generalnie tło mi się wyświetla tylko pod " adsasd" a nie pod całym kontenerem, a sam kontener zachowuje się tak jakby nie miał tych 450px wysokości tylko dobierał sobie tyle ile potrzebuje...
I już po problemie... Zgubiłem jeden dwukropek...