Jump to content
Sign in to follow this  
Grzegorz

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

Recommended Posts

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 index.html do pobrania.

 

Edited by Detektyw Pompa

Share this post


Link to post

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.

  • Like 1

Share this post


Link to post

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.

Edited by KeeX
  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
1 minutę temu, ShanonWEB napisał:

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.

 

W którym miejscu coś skrytykowałem?

Share this post


Link to post

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/

Share this post


Link to post
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

Edited by ShanonWEB

Share this post


Link to post

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

Share this post


Link to post
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

Edited by ShanonWEB

Share this post


Link to post

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

Edited by Detektyw Pompa

Share this post


Link to post

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>
   

 

Share this post


Link to post

wiem że bajzel jest w kodzie ale to w swoim czasie ;p, co do wyglądu strony proszę sugerować się tą stroną : http://www.grzegorzpaluch.iwebt.pl/index.html .

Aktualnie ustawiłem menu i zostało mi przyciski ułożyć na własnym miejscu . 

Share this post


Link to post

Dopisz w CSSie na początku to:

* {
    box-sizing: border-box
}

A to już gdzie chcesz:

#teskst::after {
    clear: both;
    content: '';
    display: block;
    width: 100%
}

 

  • Like 1

Share this post


Link to post

danke działa +rep, co do kodu 

* {
    box-sizing: border-box
}

co on robi ? i gdzie go dodać dokładnie ? 

Share this post


Link to post

* 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.

Share this post


Link to post

Ok dziękuje za pomoc, można zamknąć posta. 

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...