Margin oraz scrolling, cięcie grafiki

0

Tne strone:
http://projekcior.com/home.png

Ma ona działać na zasadzie:
http://www.adriantomic.se/localscroll

Pytanie 1:
Jak mam to ująć w CSS żeby wyświetlał mi się pierwszy box (ten czerwony cały w którym jest napis "projekcior.com i make websites") zawsze w 100% height i 100% width? Natomiast pozostałe wedle zawartości?

Pytanie 2:
strona - projekcior.com
Dlaczego Google Chrome dodaje mi automatycznie
"    "
na początku body? Nie mogę przez to ustawić body margin na 0, zawsze mam margines u góry strony.

Dzięki za odp

0

Dlaczego Google Chrome dodaje mi automatycznie

Może kodowanie UTF-8 z BOM? ono dodaje znaki specjalne, które może Chrome tak zamienia?

Pytanie 1 (...)

Że co? Jak to pierwszy boks 100% width, 100% height? Co to znaczy wg Ciebie?

0

Kodowanie UTF-8 bez BOM (zapisywane w sublime text 2).

100% width, 100% height:
chodzi o to że niezależnie w jakiej rozdzielczości będzie otwierana strona, ten (div)box1 (czyli tło czerwone) ma zająć cały ekran, natomiast po kliknięciu na portfolio lub contact strona dopiero zjeżdża niżej do (div)box2 i (div)box3

0

Problem 1 rozwiązany (w head miałem spacje dodane przypadkiem).
Nie wiem tylko nadal jak z tym 100% height i width ugryźć temat.

0 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #top {
            height: 100%;
            background: red;
        }
        #content {
            background: yellow;
            min-height: 2000px;
        }
        body, html {
            height: 100%;
            margin: 0; padding: 0;
        }
    </style>
</head>
<body>
    <div id="top">
        aaa
    </div>
    <div id="content">
        bbb
    </div>
</body>
</html>

zobacz czy na tym kodzie (nic więcej) też masz te nbsp; - u mnie tego nie ma, więc ewidentnie masz coś plikiem, ew. jakiś skrypt tak robi?

taki kod pozwoli Ci na uzyskanie efektu o którym mówisz, ALE miej na uwadze to, że wtedy cała treść "wystaje" poza html/body (czyli treść robi overflow), tj. zmierzenie wysokości body zwróci Ci wymiary okna w przeglądarce, nie całej treści - to czasem jest niepożądane.

inna metoda to zmiana rozmiaru tego diva poprzez javascript (wtedy nie musisz ustawiać height 100% dla html/body).

pamiętaj, żeby ustawić minimalną wysokość dla pierwszego diva, żeby się nie okazało, że na zbyt małym ekranie jest treść przycięta

0

Nie do końca rozumiem wady tego pierwszego sposobu:
http://projekcior.com/test.html

  1. Czy mógłbyś mi jakoś jeszcze bardziej łopatologicznie wyjaśnić wady tego sposobu?
    Chodzi o to że jak zaczne wstawiać tam treść i będzie ona zbyt długa to nie utnie mi jej automatycznie przy końcu diva (box1) tylko wejdzie na kolejne divy, tak?
    I nie ma sposobu na to żadnego używając tylko html/css ? Czyli bardziej uniwersalnym rozwiązaniem byłoby użycie JS, obliczenie wartości roboczego okna przeglądarki i wstawienie w CSS w wartość height, tak?

  2. Zrobiłem jakiś prototyp zwracania wartości (tylko jak zapisać tą wartość w pliku css):
    projekcior.com/index.html <-- tutaj mi wyświetla na dole przez writeln, jak to przepisać do dokumentu css?

0

teoretycznie nie powinieneś trafić na wady. w praktyce jest mała szansa, że tak się zdarzy - wtedy dopiero popraw na javascriptowe rozwiązanie, teraz jest zbędne.

1 użytkowników online, w tym zalogowanych: 0, gości: 1