Skocz do zawartości

Niepoprawny wygląd strony na niektórych rozdzielczościach


Grzegorz
 Udostępnij

Rekomendowane odpowiedzi

Witam mam problem z własną strona stworzoną na rzecz klasy (ogółem to też jest testowa praca). Więc mam problem taki że strona po przybliżeniu lub na telefonie ma rozjazdy tekstu i elementów. Więc mam prośbę o pomoc gdyż nwm jak to ustawić. Oraz proszę nie komentować krytycznie tego kodu gdyż nie jestem koderem i nie zajmuje się tym praktycznie. 

link: http://www.grzegorzpaluch.iwebt.pl/index.html (link zmieniony)

AKTUALIZACJA - naprawiłem problem z tekstem ale dalej nwm jak naprawić przesuwające się menu i butony

index:

http://pastebin.com/2bqxvxPT lub 

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
 do pobrania.

Edytowane przez Detektyw Pompa
Odnośnik do komentarza
Udostępnij na innych stronach

Faktycznie wygląda tak, jakby te reklamy rozsuwały stronę. Zarejestruj sobie konto choćby u mnie i sprawdź. Z drugiej strony w stylach nie widzę nic, żeby było RWD. Tym bardziej, że reklamy Googlowe teraz mają opcję dostosowania do rozdzielczości.

Edytowane przez KeeX
Odnośnik do komentarza
Udostępnij na innych stronach

28 minut temu, bandit design napisał:

Nie używaj CBA. Spróbuj na hostingerze albo keex. Może to wina tej reklamy na górze.

Zresztą jak to nie jest strona responsywna to wiadomo, że się dobrze nie będzie wyświetlać. I ustal lepiej pozycję tego menu i zmień szerokość bo sam sobie wszystko utrudniasz.

Nim zaczniesz krytykować, usuń najpierw reklamę cba i sprawdź czy to powoduje problem. Problemem jest tutaj niedostosowanie kodu do przeglądarek. W CSS nie ma nawet deklaracji @media.

Odnośnik do komentarza
Udostępnij na innych stronach

4 minuty temu, bandit design napisał:

 

W którym miejscu coś skrytykowałem?

Pisząc, że cba to jest najgorsze, bo wyświetla reklamy, a tym samym robiąc kryptoreklamę dla keex. Przy rozdzielczości 1920×900 już jako-tako widać, lepiej, ale i tak musisz skorzystać z @media, aby dostosować do różnych wielkości ekranu.

3 minuty temu, Detektyw Pompa napisał:

reklamy nic nie zmieniały, do menu dodałem kod 


position: absolute;

i teraz menu nie wchodzi na środek strony lecz jest po lewej stronie w headerze  i jakoś nwm jak to naprawić  

link: http://www.grzegorzpaluch.iwebt.pl/

do CSS dodaj:

*{
    margin: 0;
}

,aby usunąć przerwę między <header>,a oknem przeglądarki

Edytowane przez ShanonWEB
Odnośnik do komentarza
Udostępnij na innych stronach

2 minuty temu, Detektyw Pompa napisał:

zanim zacznę czytać o tym @media to chciałbym naprawić menu i te butony bo jak widać są schrzanione, jakieś pomysły ?

Na czym miałaby polegać naprawa? Mogę Tobie przepisać kod lub zoptymalizować, ale będzie to ten sam "problem", bo na moim monitorze będzie ok, a u Ciebie będzie kulawo. (różnice rozdzielczości)

Ja to teraz tak widzę:

takwidze.jpg

Edytowane przez ShanonWEB
Odnośnik do komentarza
Udostępnij na innych stronach

jeśli ci chodzi o zoptymalizowanie strony pod rożne rozdzielczości strony to nie jest potrzebne gdyż jak sprawdzałem przed chwilą to wszystko elegancko wyglądało i nie było takich problemów jak wcześniej że tekst wychodził poza swój sektor, menu było między tekstami itp. Teraz głównie potrzebował bym pomocy z waszej strony by ustawić menu z prawej strony jak i też przyciski tak by znajdowały się w wyznaczonym sektorze.

EDIT- U mnie na wszystkich urządzeniach przenośnych i dwóch pc wygląda tak strona (nawet na tv).

aha.png

Edytowane przez Detektyw Pompa
Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

U mnie strona wygląda w ten sposób (ekran 13"):

Spoiler

screencapture-strike-cba-pl-Strona-index-html-1478720555021.png

Przy czym te menu przy robieniu screena całości strony nagle się naprawia. I nie jest to chyba efekt zamierzony, co?

Kodowanie jest masakryczne... Począwszy od HTML, a kończąc na CSSie. <header> w HTML przykładowo powinien być taki:

<header>
  <div class="container row">
    <div class="col-2">
      tytuł strony
    </div>
    <nav id="header-menu" class="col-2">
      <ul class="menu">
        <li>
          <a href="#">link 1</a>
        </li>
        <li>
          <a href="#">link 2</a>
        </li>
        <li>
          <a href="#">link 3</a>
        </li>
        <li>
          <a href="#">link 4</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
   
Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

* odpowiada za wszystkie znaczniki HTML jakie umieścisz na stronie. Natomiast opis oznacza praktycznie tyle co "wielkość paddingu w znaczniku nie wpływa na jego rozmiary", czyli bardziej po ludzku: jeżeli ustawisz sobie width: 200px na danym znaczniku, to pomimo tego, że dodasz mu jakiś padding, to jego szerokość nie wzrośnie.

Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

×