[CSS][HTML]Problem z divem, Czyli jak to zrobić, żeby było dobrze? Opcje

[Twist]

http://starodaj.eu

Problem jest następujący:

Po kliknięciu w menu przesuwa się zawartość #content. Niestety - nic nie widać, ponieważ content otrzymuje height:0.
Winny temu jest prawdopodobnie relacja relative-absolute - niestey bez tego całość nie pójdzie pod IE :/ (overflow:hidden nie ukryje kolejnych slidów)
Nie mogę ustawić na sztywno wyskosci #content, ponieważ musi być elastyczna - zależnie od wyskosći tresci.

Męcze się z tym od wczoraj i już mnie #@$!! trafia...

[Prym]

to nie tak że content dostaje 0. coś w js schrzaniłeś bo:
po kliknięciu
About me contetn przesuwa ci na: left= -1024px
Design contetn przesuwa ci na: left= -2084px
Front-End contetn przesuwa ci na: left= -3126px
Back-End contetn przesuwa ci na: left= -4168px
Contact me contetn przesuwa ci na: left= -4168px

Więc przyjrzyj się co się dzieje po kliku z obliczeniami w JS

Ten post edytował Prym 30.10.2011, 15:34:55

[Twist]

Content się nie przesuwa, przesuwa się zawartość.

Problem jest typu
Wrzucę zaraz link do drugiej wersji

tutaj:http://starodaj.eu/test/

Ten post edytował Twist 30.10.2011, 15:41:02

[croc]

A musisz mieć height? Treść ma się wysuwać od dołu?

[Prym]

ech, czy masz Firedebuga w FF?
mnie po kliknięciu w about pokazuje:

Kod

<div id="content-inside" style="left: -1042px;">
                <div id="content1">
                  <ul>
...
                <!-- LOREM IPSUM KONIEC. -->
      </div>

więc dostaje id="content-inside" style="left: -1042px; !

[Twist]

ech, a umiesz czytać?

#content != #content-inside

EDIT:
Ta wersja działa na FF/Opera/chrome
http://starodaj.eu/test/#

Ten post edytował Twist 30.10.2011, 15:43:05

[Prym]

Ogólnie moim zdaniem troszkę za bardzo zamieszałeś z tym divem na początku strony który przy klikaniu zmienia wysokość.
A jednocześnie divy z zawartością ustawiłeś obok siebie (po co?).
Ja bym ustawił divy normalnie jedne pod drugim z ustawionym height: 0 i display: none, a JS w odpowiednim momencie rozwinął z włączeniem display block i wyłączeniem poprzedniej zawartości.

ech, a umiesz czytać?

#content != #content-inside

EDIT:
Ta wersja działa na FF/Opera/chrome
http://starodaj.eu/test/#

u mnie powiedzmy że działa z tym że porzez środek strony w poziomie mam 2 kolory biały i szary - a to chyba nie oto chodziło.

[Twist]

1. #bg - Co z nim nie tak? on będzie sie dopasowywal do strony, na razie jest tylko Lorem ipsum, więc nie ma znaczeia jaką ma wysokość - na razie ustawiona jest dla strony glownej i podstrony About me - na innych jest przpadkowy, zeby potestowac czy nie gryzie w oczy.
2. Dlatego, że to slider treści
3. Dodatkowe nieporzebne linijki kodu.
na teście wylaczylem #bg na pozostalych podstronach, zebey lepiej zaobserwowac jak to ma działać.

Spradzi ktoś czy
http://starodaj.eu/test dziala na ie7+? Bo moj tester swiruje :/

EIT@: W tej chwili #content, jest tak wysoki, jak najwyższy div w środku - jest jakiś inny sposób, niż JS pobierajaćy wysokosc aktywnego #contentX i ustawiajacego taki height dla #content? Bo to troche lamerskie sie wydaje...

Ten post edytował Twist 30.10.2011, 16:00:49

[Prym]

ok ok - co do dodatkowych linijek tekstu to będę się kłócił. Mnie naprzykład nie podoba się slide 5000 px z prawa na lewo po przechodzeniu z podstrony contakt na about me i odwrotnie. chyba nie o to w dobie minimalizmu chodzi. Pozatym jak już o linijkach kodu piszemy to po co wczytane wszystkie podstrony odrazu? czemu nie użyć ajaxu i dograć podstronę? a potem ją zjechać w prawo?

[Twist]

Bo z tego co mi wiadomo, google nie chwyci danych z XMLa

Spróbuje to zrobić na hide/show i zobacze jak bedzie wyglądać

Ten post edytował Twist 30.10.2011, 16:03:12

[Prym]

acha u mnie na IETesterze slder działa od IE6 w górę bez problemu na tej stronie: http://starodaj.eu/test/#

Jak pod googla to proponuje troszkę więcej pracy włożyć i zrobić strone w standardzie (czyli klikalne linki i wczytywanie podstron) a potem po wczytaniu strony uruchomić skrypt jquery podmieniający linki na funkcje JS. W sumie dużo pracy nie będzie a i Google i komórkowcy starszych typów bez JS się ucieszą

[Twist]

Jeśli przez "standard" rozumiesz nawigacje to odpada - w końcu to ma być portfolio i czymś się musi wyrózniać, a google bez problemu zaindeksuje treści w obecnej postaci.
Mój android 2.1 wyświetla stronę poprawnie. A nawet gdyby nie wyświetlał - to nie jest witryna przeznaczona do codzienengo sprawdzania aktualizacji, tylko projekt majacy zachęcic potencjalnych, zleceniodawców/pracodawców. Kto przegląda portfolio na komie?

IE chodzi - super.
Został tylko problem z wysokoscią #content - na stronie głównej są suwaki i zastanaiwam się jak temu zapobiec...

Ten post edytował Twist 30.10.2011, 16:08:44

[Prym]

suwaki masz ponieważ contenty są WIDOCZNE dla przeglądarki (masz je tylko przesunięte w prawo) dodaj sobie testowo display: none do content1, 2, 3, 4, 5, 6 i zobaczysz że suwaki znikną

znaczy nie wszystkie contenty aktywny zostaw widoczny

[Twist]

Rany... wiem skąd się biorą...
Chodzi o sposób wymuszenia innego zachowania #content.
Jedynym sposobem jest hide/show
Drugim ustawianie wysoksoci JS'em

Tylko zastaanwiam się, czy ine da się jakoś prościej, bez kombinowania.

sposob 1:

1. klik w #primary-nav li a
2. ukryj wszytskie #contents
3. show content + id z menu
etc...

tylko czy zachwoam przy tym efekt "wysuwania z prawej"?

Sposob2:
1. Pobierz height aktywnego contentu
2. Przypisz ten height do #content.



EDIT2:
Zrobiłem, że stroan główna #content height:100px;
a reszta height:auto.

No, ale teraz jak dam #bg height100% to wcale nie jest 100% of body :/

Ten post edytował Twist 30.10.2011, 16:20:32

[Prym]

Jeśli mogę się wtrącić to rozwijaniem height sobie głowy niezaprzataj, hide/show jest szybki bezproblemowe (zresztą szybciej będzie nadać w js css display: block/none niż odpalać specjalnie skrypt JS show/hide które może spowolnić wykonanie przesunięcia)


w css dodaj na poczatku:
html, body {height: 100%; }

[Twist]

1. html, body {height: 100%; } - przecież to jest na poczatku style.css (wiersz 11)
2. Przecież hide/show jest tak samo wydajne jak zmiana display:none za pomocą .css(), chyba, ze źle Cie zrozumiem?

Chyba zrobię to w ten sposób co teraz, z tym, że:

#bg{height:100%} działa poprawnie na stronie glownej - na innych podstronach bedzie mial ruchomą wysokosc, np. 700px, 100px,



Ten post edytował Twist 30.10.2011, 16:32:13

[Prym]

- 1 - w podglądzie strony w css nie ma tego wpisu
- 2 - w sumie to będzie to samo css to funkcja i hide funkcja - jeden pios

ale to już jak kto lubi

[Twist]

No to jeszcze jedna sprawa -
Validator zwraca error:

Line 37, Column 59: value of attribute "id" invalid: "1" cannot start a name
Chodzi o

[HTML] pobierz, plaintext 
 <li><h3><a class="menu1 active" id="1" href="#">About me</a></h3></li>
[HTML] pobierz, plaintext 

ID jest mi potrzebny do poznania który Div mam wyswietlic, na zasadzie:

Klikam w a#2
Wyswietlam div #content2
itd.

Jakiś inny pomysł jak rozwiązać ten problem?

[Prym]

Id nie może być samą cyfrą. musisz nadać mu nazwę w postaci litery+cyfra. potem w pętli możesz zawsze odnieść się poprzez $('#cos'+i).