Forum Pasja Informatyki - Najnowsze z tagiem strona-responsywna

responsywna strona

Mon, 30 Mar 2020 13:13:11 +0000

Witam,

Ja z takim pytaniem jesli chodzi o strone responsywna to lepiej zrobic to samemu od zera czy uzyc czegos w stylu bootstrapa? czy ta cale biblioteki nie sa zbyt ograniczajace? jak wy to robicie na codzien recznie? jesli tak to jakis tutorial? czy bibliteki? jesli tak to jakie?

Responsywna strona problem z obrazkiem i menu

Tue, 04 Dec 2018 22:36:03 +0000

Witam, mam problem pisze strone responsywną i mam już pierwszy problem. Zrobiłem responsywne menu

tylko, że gdy skaluje rozdzielczość strony obrazek tego oto pięknego autka (ford mustang) "wchodzi" mi tak jakby pod menu. w 1 załączonym obrazku wstawiam "normalną" wersję strony, 2 obrazek to lekko zmieniona rozdzielczość, załączam kody html + css. Prosze o pomoc, z góry dziekuję!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firma Marketingowa</title>
    <link rel="stylesheet" href="style/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <nav>
      <ul class="topnav">
        <li><a href="#home">Strona Główna</a></li>
        <li><a href="#onas">o nas</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
        <li class="more"><a id="more" href="#more">Więcej</a></li>
      </ul>
    </nav>

    <section>
      <img src="mustang.jpg" alt="mustang">
    </section>



  </body>
</html>

@media screen and (max-width: 600px){
    ul.topnav li.more #more,
    ul.topnav li {float: none;}
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
}
/*MENU*/
nav {
  padding: 0;
  width: 100%;
  top:0;
  left: 0;
  right: 0;
}
ul {
  position: fixed;
  background-color:rgb(47, 47, 47);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
ul.topnav #more {
  background-color: rgb(240, 198, 20);
  color: black;
}
li a {
  display: block;
  background-color:rgb(47, 47, 47);
  font-size: 1.5em;
  text-decoration: none;
  text-align: center;
  color:white;
  padding: 14px 30px;
}
li {
  float: left;
}
.more {
  float: right;
}
li a:hover:not(#more){
  background-color:rgb(240, 198, 20);
  color: black;
}
/*KONIEC MENU*/
section {
  display: block;
}
section>img {
  width: 100%;
  height: 100%;
}

Responsywna strona i linkowanie podstron w menu

Sun, 02 Sep 2018 23:10:20 +0000

Witam ..all

Po wielu staraniach powiodła mi się adaptacja do tego responsywnego layoutu też responsywnego verticalnego menu z tego linku. Na dotychczasowej stronie miałem menu podobne w działaniu do obecnego- z tym że nie responsywne. Wczytywałem kompletne podstrony .html do content column przy pomocy takiego skryptu

$(document).ready(function(){$(".openToDiv").click(function(a){a.preventDefault();var b=$(this).attr("href"),c=$(this).attr("title");$("#maincontent").load(b).animate({scrollTop:0},"fast"),document.title=c})});

Wszystko śmigało. Teraz gdy wczytuję podstrony w "normalnym" widoku, też jest ok, ALE gdy zawężę ekran monitora rozmiarów "mobilnych", to wczytuje się sama podstrona bez mobilnego menu. Na screenie z lewej widać zwinięte mobilne menu, na prawym wysunięty panel z podmenu. Białe kreskowania - pozostałość po wymiarowaniu. Fragment z obrazkiem to miejsce gdzie wczytuje się.

Czy ktoś może rozgryźć temat błędnego wczytywania podstron? W razie konieczności podeślę potrzebne fragmenty kodu do wglądu.

ZdZ

Responsywna strona na szybko

Sun, 15 Jul 2018 12:11:56 +0000

Witam,

Muszę powiedzieć, że moją pasją jest back-end. Do front endu mi się nie spieszy: z HTMLem jest ok, CSS wystarczająco dobrze a z JS podstawy. Jednak teraz potrzebuję na szybko "przetransformować" stronę dostosowaną tylko do mojego laptopa, na stronę responsywną. Niestety, ja jestem w trakcie nauki o RWD i nie jestem w stanie tego zrobić, ponieważ nie jest to ułożenie kilku divów w kilku linijkach. Nie jestem w stanie wrzucić tu kodu ani nawet screena, bo jestem na telefonie, ale postaram się opisać. U góry pasek z width 100% z nazwą serwisu i hiperłączami a pod nim wysrodkowany prostokąt z zawartością strony. I to właściwie wszystko. Tak, wiem że to bardzo ambitny projekt, ale ja lubię taką prostotę, a dzięki temu strona zyskuje unikalny design, który ciężko opisać ale robi dobry efekt. Poszukiwane jakieś wartościowe linki, programy lub cokolwiek co umożliwi mi szybkie wprowadzenie RWD na moją stronę. Lubię programować, ale nie zakuwać, bo wtedy wg mnie to traci sens. Czy jest jakiś idealny dla mnie sposób?

Z góry dziękuję za wszystkie odpowiedzi.

Strona responsywna

Tue, 22 May 2018 10:08:21 +0000

Jak stworzyć stronę responsywną z przygotowanego szablonu strony w photoshopie, który został zakodowany w html/css.