[CSS] Problem z ustawieniem pozycji

Dla specjalistów Webmastering
#1

Witam,

Mam problem ze stylami na stronie : http://mp3.disco-polo.info/damian/#!/page_home

Otóż na rozdzielczości jaka jest na Monitorach 15 calowych i niżej strona jest źle wyświetlana, a na rozdzielczości Monitorów 17 cali i wyżej dobrze.

O co dokładnie chodzi ? Jak klikamy w którykolwiek odnośnik aby pojawił się box z treścią danej zakładki to w mniejszych Monitorach pojawia się za nisko, tak samo było z Menu ale je w stylach podpiąłem do dolnej części strony czyli teraz jest wyświetlana poprawnie.

Jak mogę zmienić style aby środek również był wyświetlany na wszystkich komputerach poprawnie ? Poniżej przedstawiam jak obecnie mam ustawiony styl boxa z treścią.

#content {

position: relative;

width: 1001px;

height:450px;

z-index: 50;

bottom: -238px;

margin: 0 auto; 

}

#content>ul {

width: 1001px;

display: inline-block;

position: relative;

height: 100%;

}

#content>ul>li.no_bg{

background: none;

}

#content>ul>li {

position:absolute;

width: 1001px;

height:100%;

overflow: hidden;

background: url(../images/content_bg.jpg) center no-repeat;

}

Ew mogę podesłać całe style jeśli ktoś potrzebuje.

Pozdrawiam i czekam na odpowiedzi.

#2

Na szybkiego, dla szerokości 1366px (taką mam w lapku) dla elementu content:

  • “bottom” zmienić na “left” i dać mu 167px (i tak się gryzie z top’em wpisanym w bodajże stronę, nie w plik css -nie wnikam, czemu określono podwójnie oś x do umiejscowienia elementu w przestrzeni xy)

  • “top” dać na 45px

  • “position” na fixed

Jeśli nie chcesz poprawiać kodu strony (a pewnie trzeba byłoby poprawiać więcej niż podane wyżej, bo chyba jak to wprowadzisz na żywca, to się sypnie dla 17-stek wzwyż…), “poprawkę” możesz objąć w media queries, czyli w tym przypadku, określić dla jakich szerokości ma zostać powyższe użyte.

Przykład:

@media only screen and (max-device-width: 1366px) {

#content {

position: fixed;

top: 45px;

left: 167px;

width: 1001px;

margin: 0 auto;

z-index: 50;

}

}

Jeśli się nigdzie nie “walnąłem”, to powyższy przykład stosuje wartości dla podanych własności do #content, wtedy gdy szerokość/rozdzielczość monitora jest równa lub mniejsza od 1366px :wink:

#3

Teraz na mniejszej rozdzielczości nic się nie wyświetla. Masz może jakieś inne pomysły ?

#4

Możliwe że coś podmienia/unieważnia zmiany własności (może któryś skrypt niweluje część zmian, w szczególności top i position). Możesz spróbować dopisania “!important” przed średnikiem, co podwyższy priorytet…

#5

niestety też nie pomogło, może podeśle dla Ciebie pliki i sam na to spojrzysz ?

#6

Wrzuc calosc witryny do pobrania i podaj link (wzglednie przeslij ten link na wiadomosc prywatna)

#7

dobra teraz jest już lepiej z tym że na większej rozdzielczości chciałbym aby było tak jak było na początku a na małej aby zostało tak jak jest teraz. Masma paczka poszła na PW

#8

Czesc!

Ten szablon nie jest zrobiony dla ekranow ponizej 17 cali, czyli rozdzielczosci 800x600 (15 cali), jak i urzadzen przenosnych (Skalowanie Layout’u / Responsive Web Design)

Najnizsza rozdzielczosc to 1024x768.

Zreszta nie ma go co optymalizowac pod ta rozdzielczosc tz. 800x600, ze wzgledu, ze calosc wygladu i tak bedzie sie zle wyswietlac. Trzeba by bylo zmienic inne detale ( wielkosc czcionki, zdjec, ikonek, suwakow)

Tak niska rozdzielczosc nie jest juz nawet brana pod uwage w rankingach:

http://www.ranking.pl/pl/rankings/scree … tions.html

Zostalbym przy dostosowaniu szablonu minimalnie na 1024x768.

Dodalbym przy tytulach na poszczegolnych przesuwanych podstronach logo firmy z lewej strony.

Zobacz na podstronie - O NAS

Poszczegolne podstrony mozna zrobic przezroczyste, celem uwydatnienia tla.

W stylach strony www element: #content {opacity:0.85}

P.s.: reszta informacji poszla na Priv

Pozdrawiam

#9

Witaj nie wiem co jest na maila dostałem wiadomość że dostałem PW ale żadnej wiadomości na PW nie mam możesz podesłac to co wysłałeś na PW na maila którego Ci właśnie podesłałem ?