Forum PHP.pl > [HTML][CSS]różne rozdzielczości a pasek przeiwjania

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]różne rozdzielczości a pasek przeiwjania

dr4g0n79

23.10.2008, 16:03:40

Jeszcze jedno mam małe pytanko:

Jak zrobić aby wstawić diva, i żeby ten div w zależności od rozdzielczości przeglądarki albo się wyświetlał cały albo tylko jego środkowa część

np. mam obrazek o szerokości 1000px i np przy rozdzielczości 800x600 nie chciałbym aby pojawił się poziomy pasek przewijania tylko, żeby tego diva była wyświetlona środkowa część a boki żeby ucieło?

Pozdr!

nithajasz

23.10.2008, 17:37:50

No to chyba za pomocą js sprawdzasz rozdzielczość ekranu i w zależności od tego przycinasz tego diva.

Ewentualnie :

Kod

div {
width: 100%;
margin: 10px;
}

i będziesz miał na całą szerokość z marginesem od krawędzi 10px obojętnie jaką rozdzielczość napotkasz.

dr4g0n79

23.10.2008, 18:21:29

a może mam taki pomysł zrobię trzy divy środkowy dajmy na to o szerokości 800 px natomiast po lewej żeby się dopełniał razem z tym po prawej do całości ekranu. Poniżej jakoś to zoobrazuję:

<jeden wielki div>
<div lewy w zaleznosci od rozdzielczosci><div srodkowy zawsze rozdzielczosc 800><div prawy w zaleznosci od rozdzielczosci ale równe div lewy>
<koniec jednego wielkiego diva>

Czy jest jakaś możliwość aby to osiągnąć na css. Kombinuje ale nie wychodzi, macie jakieś sugestie??

nevt

23.10.2008, 19:27:50

można to zrobić na 1 div i bez użycia JS:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html, body {width: 100%; height: 100%;}
body { overflow: hidden }
#box {width: 800px; height: 300px; border: 1px solid red; background-color: yellow; margin-left: 50%; position: relative; left:-400px; text-align: center}
</style>
</head>
<body>
<div id="box">TEST</div>
</body>
</html>
[HTML] pobierz, plaintext

powodzenia

crazy191

14.12.2009, 11:43:37

Wszystko ładnie działa. Tylko chciałbym tak zrobić żeby przy małych rozdzielczościach pojawił się poziomy pasek przewijania... Bo tym przykładzie wyświetla cześć strony bez paska. Jak to zrobić??

zordon

14.12.2009, 11:48:37

overflow: auto

crazy191

14.12.2009, 12:03:21

Niestety nie działa... Chodzi mi o to że jak dam width and height w px a nie w procentach to wtedy sie ten poziomy pasek przewijania pojawia ale znowu nie centruje strony. A chce żeby mój główny container był zawsze na środku, a jak nie bedzie sie miesci na stronie to pojawi się poziomy pasek przewijania...

zordon

14.12.2009, 12:19:33

ze stronami dopasowanymi do rozdzielczości strony są same kłopoty. polecałbym zrobić szerokość "na sztywno", do diva glownego marginesy boczne na auto i jak sie boisz ze ci sie cos moze nie zmiescic to overflow: auto.
przeczytaj http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html tam masz fajny opis jak to zrobić, a jak się uprzesz na ten płynny szablon to nastepna pozycja menu

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.